/* ==========================================================================
   Hey Cheng 手繪復古主題（Sketchbook）
   配色由 colors-*.css 產生；本檔負責造型：圓體字、深炭描邊、硬邊陰影、
   格紋、畫布紋理、首屏藍圖註記。原樣式不改，拿掉主題 <link> 即回深色版。
   ========================================================================== */

@font-face{font-family:"HC Round";src:url("../fonts/hc-round.woff2?v=20261030-color") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --sk-canvas:#F4F2EB;--sk-paper:#FBFAF6;--sk-ink:#111819;--sk-ink-soft:#465450;
  --sk-coral:#FF7A6B;--sk-error:#A82A16;--sk-teal:#00D9BA;
  --sk-round:"HC Round","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --sk-edge:1px solid var(--sk-ink);                       /* 框線一律 1px */
  /* 圓角只有三級：4px（卡片、表單、圖框）、999px（膠囊按鈕、圓點）、0 */
  --sk-hand:4px;--sk-hand-lg:4px;--sk-pill:999px;
  --sk-link:#00715F;      /* 連結文字：米白底 5.3:1、紙白底 5.7:1 */
  --sk-line:#C9CFCC;      /* 淺灰分隔線與卡片框 */
  --sk-on-dark:#B8C3C1;   /* 深炭底上的次要文字 */
  --sk-sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --sk-shadow:5px 5px 0 var(--sk-ink);
  --sk-shadow-sm:3px 3px 0 var(--sk-ink);
  /* Tiffany 格紋桌布：深炭粗線＋米白細線 */
  --sk-plaid:
    repeating-linear-gradient(90deg,rgba(17,24,25,.55) 0 7px,transparent 7px 20px,rgba(251,250,246,.9) 20px 22px,transparent 22px 36px),
    repeating-linear-gradient(0deg,rgba(17,24,25,.55) 0 7px,transparent 7px 20px,rgba(251,250,246,.9) 20px 22px,transparent 22px 36px),
    #00D9BA;
  --display:var(--sk-round);
  /* 字級：全站只用這 7 級（2026-11-04）。h1／h2 依螢幕寬度在兩級之間：390 寬時 28／22，1440 寬時 40／28 */
  --fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:40px;
  --fs-h1:clamp(var(--fs-2xl),calc(23.543px + 1.1429vw),var(--fs-3xl));
  --fs-h2:clamp(var(--fs-xl),calc(19.772px + .5714vw),var(--fs-2xl));
}

/* ── 畫布 ─────────────────────────────────────────────── */
html{background:var(--sk-canvas)}
body{background-color:var(--sk-canvas)}
/* 整頁蓋一層極淡的畫布顆粒，照片與影片也一起「印」在畫布上 */
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .09 0 0 0 0 .10 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(17,24,25,.025) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(17,24,25,.02) 0 1px,transparent 1px 3px)}
@media print{html::after{display:none}}

::selection{background:var(--sk-teal);color:var(--sk-ink)}
:where(a,button,summary,[tabindex],input,select,textarea):focus-visible{outline:3px solid var(--sk-ink)!important;outline-offset:4px}

/* ── 字體：標題、按鈕、導覽、價格用圓體；正文維持系統黑體 ─────────── */
:where(h1,h2,h3,h4,.hb-title,.wk-title,.svc-title,.menu-nav a,.price-amount,.content-link,.hb-stats strong,.hb-step-circle strong,.hb-svc-tabs button,.hb-reel-price,.plan .price,.lit-toolbar button){
  font-family:var(--sk-round)!important;font-weight:400!important;font-synthesis:none;letter-spacing:.01em}
#headline{font-family:var(--sk-round);font-weight:400}

/* ── 標誌：原圖不改色，貼成一張黑色貼紙 ──────────────────────── */
.wordmark,.site-header .brand,.site-footer .brand{background:#000;border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow-sm);transform:rotate(-2deg);overflow:hidden}
.wordmark{height:auto!important;padding:2px 6px}
.site-header .brand{display:inline-block;padding:4px 10px;line-height:0}
.site-header .brand img{width:112px;height:auto}
.site-footer .brand{display:inline-block;padding:6px 12px;line-height:0;width:auto!important}
.site-footer .brand img{width:104px;height:auto}
.hb-intro-card{background:#000!important;color:#f4f2ef!important;border:var(--sk-edge);border-radius:var(--sk-hand-lg);box-shadow:7px 7px 0 var(--sk-ink);transform:rotate(1.5deg)}
.hb-intro-card p,.hb-intro-card small{color:var(--sk-on-dark)!important}

/* ── 頁首與選單 ──────────────────────────────────────── */
.site-header nav a,.primary-nav a,.header-contact{font-family:var(--sk-round);color:var(--sk-ink)}
.bars i{height:3px!important;border-radius:var(--sk-pill);background:var(--sk-ink)!important}
#menu{background:var(--sk-canvas)}
.menu-nav a{color:var(--sk-ink)}
@media(hover:hover) and (pointer:fine){.menu-nav a:not(:last-child):hover{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:8px}}

/* ── 按鈕：全站一套（2026-11-04）。主要＝Tiffany 底，次要＝紙白底；
   1px 深炭框、膠囊圓角、高 48px、系統黑體 16px／700，無位移陰影 ─────── */
.hb-btn,.button,.content-button,.price-cta,.brand-film-play,.lead-actions button,a.btn,.hero-actions a,.view-toggle,#content-panel .content-button{
  min-height:48px;padding-block:0;border:1px solid var(--sk-ink)!important;border-radius:var(--sk-pill)!important;box-shadow:none!important;transform:none!important;
  background:var(--sk-teal)!important;color:var(--sk-ink)!important;clip-path:none!important;
  font-family:var(--sk-sans)!important;font-size:var(--fs-base)!important;font-weight:700!important;letter-spacing:.02em;text-decoration:none;transition:box-shadow .12s ease}
.hb-btn-line,.button-outline,.content-button-outline,a.btn.line,.hero-actions .hero-secondary,.view-toggle,#content-panel .price-card:not(.is-featured) .price-cta,#content-panel .content-button-outline{background:var(--sk-paper)!important;color:var(--sk-ink)!important}
.hb-btn::after{content:"›";color:inherit}
@media(hover:hover) and (pointer:fine){
  .hb-btn:hover,.button:hover,.content-button:hover,.price-cta:hover,.brand-film-play:hover,a.btn:hover,.hero-actions a:hover,.view-toggle:hover{box-shadow:inset 0 0 0 1px var(--sk-ink)!important}
}
.text-link,.content-link,.lit-link{color:var(--sk-link)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
#content-panel .content-link{border-bottom:0;color:var(--sk-link)!important}
#content-panel .content-link>span{color:inherit}
/* 內文裡的文字連結也用深綠＋細底線；深色帶、Tiffany 對話泡泡與底部三鍵不套用 */
:is(p,li,dd,td,figcaption,label,.policy-toc) a:not([class]):not(:is(.site-footer,footer.colophon,.hb-cta,.hb-stats,.hc-me,.hc-dock) a){color:var(--sk-link);text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── 標題下的短直線（重點標記）：全站同一條 48×3 ─────────────── */
.hb-bar::after,#grid .wk-bar::after,#content-panel .svc-bar::after{height:3px!important;width:48px!important;background:var(--sk-teal)!important}
.hb-title,.wk-title,.svc-title{color:var(--sk-ink)}
.hb-eyebrow,.wk-kicker,.content-eyebrow,.eyebrow,.price-eyebrow{color:var(--sk-ink-soft)!important;letter-spacing:.08em}
.site-footer .eyebrow{color:var(--sk-on-dark)!important}

/* ── 首屏：掛在牆上的畫布＋藍圖註記 ────────────────────────── */
.hb-reel{background:var(--sk-canvas)!important;position:relative;padding-bottom:clamp(34px,4.5vw,56px)}
.hb-reel-frame{width:calc(100% - 2*clamp(16px,4vw,64px))!important;margin-inline:auto;border:4px solid var(--sk-ink);border-radius:var(--sk-hand-lg);box-shadow:7px 7px 0 var(--sk-ink);height:calc(100svh - var(--site-header-h,120px) - var(--hb-nav-h,0px) - clamp(40px,7vw,90px))!important;background:var(--sk-ink)}
.hb-reel-stage{background:var(--sk-ink)!important}
.hb-reel-stage::after{content:none}
.hb-reel-copy{color:var(--sk-ink)!important}
.hb-reel-copy h1{font-family:var(--sk-round);font-weight:400;color:var(--sk-ink);text-shadow:2px 2px 0 var(--sk-paper)}
.hb-reel-sub,.hb-reel-sub span{color:var(--sk-ink)!important}
.hb-reel-price{color:var(--sk-ink)!important;background:linear-gradient(transparent 58%,var(--sk-teal) 58%,var(--sk-teal) 88%,transparent 88%),var(--sk-paper);padding:0 14px;border:var(--sk-edge);border-radius:var(--sk-pill);box-shadow:var(--sk-shadow-sm);text-decoration:none!important;transform:rotate(-1.5deg);width:fit-content}
.hb-reel-cta .hb-btn-line{color:var(--sk-ink)!important;border-color:var(--sk-ink)!important}
.hb-reel-controls button{background:var(--sk-paper)!important;color:var(--sk-ink)!important;border:var(--sk-edge)!important;border-radius:var(--sk-pill);box-shadow:var(--sk-shadow-sm)}
.hb-reel-controls svg{fill:var(--sk-ink)}

/* 藍圖註記層（純裝飾，aria-hidden） */
.sk-blueprint[hidden]{display:block!important}
.hb-reel .sk-note[hidden]{display:block!important}
html[data-view="mobile"] .hb-reel .sk-note[hidden]{display:none!important}
.sk-blueprint{position:absolute;inset:0;pointer-events:none;z-index:4;color:var(--sk-ink-soft);font-family:var(--sk-round)}
.sk-blueprint svg{position:absolute;overflow:visible}
.sk-blueprint .sk-dim{left:clamp(16px,4vw,64px);right:clamp(16px,4vw,64px);bottom:calc(clamp(34px,4.5vw,56px)/2 - 12px);height:20px;width:calc(100% - 2*clamp(16px,4vw,64px))}
.sk-blueprint .sk-dim line,.sk-blueprint .sk-dim path{stroke:currentColor;stroke-width:2;fill:none}
.sk-note{position:absolute;font-family:var(--sk-round);font-size:var(--fs-base);font-weight:400;line-height:1.35;letter-spacing:0;color:var(--sk-ink);white-space:nowrap;transform:rotate(var(--r,-3deg));padding:2px 9px;background:rgba(251,250,246,.92);border:2px dashed var(--sk-teal);border-radius:var(--sk-hand);pointer-events:none}
.sk-note b{font-weight:400;color:var(--sk-ink)}
.sk-tag{position:absolute;left:calc(clamp(16px,4vw,64px) + 18px);top:calc(var(--site-header-h,120px) + 18px);transform:rotate(-2deg);padding:6px 14px;background:var(--sk-paper);border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow-sm);color:var(--sk-ink);font-size:var(--fs-sm);line-height:1.4}
.sk-tag small{display:block;color:var(--sk-ink-soft);font-size:var(--fs-xs)}
.sk-dim-label{position:absolute;bottom:calc(clamp(34px,4.5vw,56px)/2 - 12px);left:50%;transform:translateX(-50%);padding:0 12px;background:var(--sk-canvas);font-size:var(--fs-sm);line-height:20px}
.sk-note-a{right:calc(clamp(16px,4vw,64px) + 24px);top:calc(var(--site-header-h,120px) + 22px);--r:2.5deg}
.hb-reel-sub,.hb-reel-cta{position:relative;width:fit-content}
.sk-note-b{left:calc(100% + 64px);top:8px;--r:-4deg}
.sk-note-c{left:calc(100% + 64px);top:12px;--r:3deg}
.sk-note-b::before,.sk-note-c::before{content:"";position:absolute;right:100%;top:50%;width:52px;height:2px;background:currentColor;transform-origin:right}
.sk-note-b::before{transform:rotate(10deg)}.sk-note-c::before{transform:rotate(-8deg)}
/* 一次性的線條繪入；拒絕動態時直接顯示 */
@media(prefers-reduced-motion:no-preference){
  .sk-blueprint .sk-dim path,.sk-blueprint .sk-dim line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:sk-draw 1.6s .6s cubic-bezier(.3,.6,.3,1) forwards}
  .sk-note,.sk-tag,.sk-dim-label{opacity:0;animation:sk-pop .5s cubic-bezier(.3,1.4,.5,1) forwards}
  .sk-tag{animation-delay:.5s}.sk-dim-label{animation-delay:1.2s}.sk-note-a{animation-delay:1.5s}.sk-note-b{animation-delay:1.8s}.sk-note-c{animation-delay:2.1s}
}
@keyframes sk-draw{to{stroke-dashoffset:0}}
@keyframes sk-pop{from{opacity:0;transform:rotate(var(--r,-3deg)) scale(.85)}to{opacity:1;transform:rotate(var(--r,-3deg)) scale(1)}}
.sk-tag{--r:-2deg}.sk-dim-label{--r:0deg}
@media(prefers-reduced-motion:no-preference){.sk-dim-label{animation-name:sk-fade}}
@keyframes sk-fade{to{opacity:1}}
html[data-view="mobile"] .sk-note-b,html[data-view="mobile"] .sk-note-c,html[data-view="mobile"] .sk-dim-label{display:none}
html[data-view="mobile"] .sk-dim{display:none}
html[data-view="mobile"] .sk-tag{font-size:var(--fs-xs);padding:4px 10px}

/* ── 作品名條：一條斜貼的芥末膠帶 ────────────────────────── */
.hb-strip{background:transparent!important;color:var(--sk-ink)!important;padding-block:18px!important;overflow:hidden}
.hb-strip-track{background:var(--sk-paper);border-block:var(--sk-edge);rotate:-1.2deg;box-shadow:0 5px 0 rgba(17,24,25,.25)}
.hb-strip li{font-family:var(--sk-round);color:var(--sk-ink)}
.hb-strip>p{background:var(--sk-canvas)!important;box-shadow:16px 0 16px var(--sk-canvas)!important;color:var(--sk-ink)!important}

/* ── 掛畫：作品截圖、影片 ──────────────────────────────── */
#content-panel .content-image,#content-panel .content-figure>img,#content-panel .svc-hero-video,.brand-film-stage,.hero-image,.full-capture,.capture-scroll,.work-card img,.lab-list img,.case-one img{border:var(--sk-edge)!important;border-radius:var(--sk-hand)!important;box-shadow:var(--sk-shadow)}
.grid-card figure,.card figure{border:1px solid var(--sk-ink)!important;border-radius:var(--sk-hand)!important}
.grid-card figure{box-shadow:var(--sk-shadow)}
.card figure::after{box-shadow:none!important}
.grid-card:nth-child(4n+1) figure{transform:rotate(-.8deg)}.grid-card:nth-child(4n+3) figure{transform:rotate(.7deg)}
.grid-card .grid-number{background:var(--sk-teal)!important;color:var(--sk-ink)!important;border:1px solid var(--sk-ink);border-radius:var(--sk-hand);font-family:var(--sk-round)}
.grid-card .grid-caption{font-family:var(--sk-round)}

/* ── 數字帶：深炭底＋格紋桌布邊 ──────────────────────────── */
.hb-stats{background:var(--sk-ink)!important;color:var(--sk-paper)!important;border-top:0!important;border-image:none!important;position:relative}
.hb-stats::before,.hb-stats::after{content:"";position:absolute;left:0;right:0;height:16px;background:var(--sk-plaid)}
.hb-stats::before{top:0;border-bottom:var(--sk-edge)}.hb-stats::after{bottom:0;border-top:var(--sk-edge)}
.hb-stats strong{color:var(--sk-teal)!important;font-size:var(--fs-h1)!important}
.hb-stats strong small,.hb-stats span,.hb-stats a{color:var(--sk-paper)!important}

/* ── 流程：手繪圓圈 ─────────────────────────────────────── */
.hb-steps{background:var(--sk-canvas)!important}
.hb-step-circle{border:1px solid var(--sk-ink)!important;background:var(--sk-paper);box-shadow:var(--sk-shadow-sm);border-radius:var(--sk-pill)!important}
.hb-step-circle b{color:var(--sk-ink)!important}
.hb-steps li:nth-child(even) .hb-step-circle b{color:var(--sk-ink)!important}
.hb-step-copy b,.hb-step-copy strong{color:var(--sk-ink)}

/* ── 服務分頁 ───────────────────────────────────────────── */
.hb-svc-tabs{border-bottom:0!important}
.hb-svc-tabs button{color:var(--sk-ink-soft)!important}
.hb-svc-tabs [aria-selected="true"]{color:var(--sk-ink)!important;border-bottom-color:var(--sk-teal)!important}
.hb-svc-panel img,.hb-svc-panel video,.hb-svc-panel figure{border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow)}

/* ── 收尾 CTA 與頁尾 ────────────────────────────────────── */
.hb-cta{background:var(--sk-ink)!important;color:var(--sk-paper)!important}
.hb-cta-top{background:var(--sk-paper)!important;color:var(--sk-ink)!important;border-bottom:var(--sk-edge)}
.hb-cta-sub{color:var(--sk-ink)!important}
.hb-cta-contact,.hb-cta-contact a,.hb-cta-contact strong{color:var(--sk-paper)!important}
.hb-cta-contact span,.hb-cta-contact small{color:var(--sk-on-dark)!important}
.hb-cta .colophon,.hb-cta .colophon a,.hb-cta footer a,.hb-cta footer p{color:var(--sk-on-dark)!important}
.site-footer{position:relative;background:var(--sk-ink);color:var(--sk-paper);margin-top:70px;padding-top:70px!important;width:100%!important;max-width:none!important;padding-inline:max(var(--pad),calc((100% - 1440px)/2 + var(--pad)))!important}
.site-footer a,.site-footer p,.site-footer .eyebrow{color:var(--sk-paper)!important}
.site-footer p:not(.eyebrow){color:var(--sk-on-dark)!important}
.site-footer .eyebrow{color:var(--sk-on-dark)!important}

/* ── 內容面板：價格卡、方塊 ─────────────────────────────── */
#content-panel{--content-accent:var(--sk-ink);--content-ink:var(--sk-ink);--content-muted:var(--sk-ink-soft);--content-line:var(--sk-line)}
#content-panel .content-page{font-weight:400}
#content-panel :is(.price-card,.price-module,.price-duo-item),#content-panel .content-offer,.plan,.hb-intro-card+*,.lead-block{background:var(--sk-paper)!important;border:var(--sk-edge)!important;border-radius:var(--sk-hand-lg);box-shadow:var(--sk-shadow)}
#content-panel :is(.price-card,.price-module,.price-duo-item)::before,#content-panel :is(.price-card,.price-module,.price-duo-item)::after{display:none}
#content-panel .price-card.is-featured{background:var(--sk-paper)!important;border-width:1px!important;box-shadow:8px 8px 0 var(--sk-ink)}
#content-panel .price-badge{background:var(--sk-coral)!important;color:var(--sk-ink)!important;border:1px solid var(--sk-ink);border-radius:var(--sk-hand);transform:rotate(-4deg);font-family:var(--sk-round);font-weight:400;z-index:1}
#content-panel .price-amount{color:var(--sk-ink)}
#content-panel .price-list li::before{border-left-color:var(--sk-teal)!important}
#content-panel .price-en{color:var(--sk-ink-soft)}
#content-panel .content-offer .content-offer-price,#content-panel .price-module .price-module-price{color:var(--sk-ink)!important;font-family:var(--sk-round)}
.panel-bar{border-bottom:1px solid var(--sk-line)!important}

/* ── 表單 ──────────────────────────────────────────────── */
:where(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),select,textarea){background:var(--sk-paper)!important;color:var(--sk-ink)!important;border:1px solid var(--sk-ink)!important;border-radius:var(--sk-hand)!important}
:where(input,textarea)::placeholder{color:#5D6A66}
input[type="radio"],input[type="checkbox"]{accent-color:var(--sk-ink)}
.view-mode-control select{color-scheme:light}

/* ── 子頁（服務、案例、FAQ、方案、政策） ────────────────── */
.site-header{border-bottom:1px solid var(--sk-line)!important}
.breadcrumb a{color:var(--sk-link);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
.hero h1,main>h1{color:var(--sk-ink)}
.hero .eyebrow{color:var(--sk-ink-soft)!important}
.plan{padding:26px 24px!important;margin-bottom:22px}
.plan .price{color:var(--sk-ink)!important}
.plans .plan:nth-child(2){transform:rotate(-.4deg)}
details.terms,.faqs details{border:1px solid var(--sk-ink)!important;border-radius:var(--sk-hand);background:var(--sk-paper);padding:4px 18px;margin-bottom:12px}
details summary{font-family:var(--sk-round)}
.section-head h2::after,.contact h2::after{content:"";display:block;width:48px;height:3px;margin-top:14px;background:var(--sk-teal)}
.work-card,.related-grid>a{border-radius:var(--sk-hand)}
.number{color:var(--sk-ink)!important;font-family:var(--sk-round)}
.policy-toc{background:var(--sk-paper);border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow-sm)}

/* 圖解元件（服務頁的示意圖） */
:is(.sig-cards,.sig-steps,.sig-table,.sig-vs,.sig-hub,.sig-chat,.sig-menu,.sig-map,.sig-extract,.sig-kit,.tour-view)>*{border-color:var(--sk-ink)}

/* ── 404、訂購 ──────────────────────────────────────────── */
.notfound .actions a,.actions a{border:var(--sk-edge);border-radius:var(--sk-pill)}

/* 首頁頁尾：接在收尾帶後面，一路深炭到底 */
footer.colophon{background:var(--sk-ink);box-shadow:0 0 0 100vmax var(--sk-ink);clip-path:inset(0 -100vmax);border-top:1px solid rgba(251,250,246,.35)!important}
footer.colophon,footer.colophon a,footer.colophon p,footer.colophon span{color:var(--sk-on-dark)!important}
footer.colophon .colophon-label{color:var(--sk-on-dark)!important}
.site-footer .view-mode-control,.site-footer .view-mode-control small,.site-footer .view-mode-control span,footer.colophon .view-mode-control small{color:var(--sk-on-dark)!important}
/* 標題裡原本上色的那個詞，改成芥末麥克筆畫過的效果 */
#headline .accent{color:var(--sk-ink)!important;background:linear-gradient(transparent 62%,var(--sk-teal) 62%,var(--sk-teal) 92%,transparent 92%);padding-inline:2px}


/* 標題換成圓體後字寬變了：避免「入口。」被拆成孤行 */
#hb-intro-title{word-break:keep-all;overflow-wrap:anywhere}
html:not([data-view="mobile"]) .hb-title{font-size:var(--fs-h2)}
html[data-view="mobile"] #hb-headline{font-size:var(--fs-h1)}
html[data-view="mobile"] .sk-note-a{display:none}

/* 自訂游標：深炭圓圈 */
#dot{background:transparent!important;border:2px solid var(--sk-ink)!important;mix-blend-mode:normal!important}
#dot.wide{background:rgba(0,217,186,.3)!important}

/* 去背的白字標誌（404 等頁）：一樣貼成黑色貼紙 */
img[src*="hey-cheng-logo-transparent"]:not(.brand img){background:#000;padding:8px 14px;border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow-sm);transform:rotate(-2deg);box-sizing:content-box}

/* 選單裡的標誌、作品預覽框、浮動 LINE 鈕 */
.menu-intro img{background:#000;border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow-sm);transform:rotate(-2deg)}
.shot{border:var(--sk-edge);border-radius:var(--sk-hand)!important;box-shadow:var(--sk-shadow)!important}
.hb-float-line{border:var(--sk-edge)!important;box-shadow:var(--sk-shadow-sm)!important}

/* 404 */
a[style*="var(--accent)"]{color:var(--sk-link)!important;text-decoration-color:currentColor!important;text-decoration-thickness:1px}

/* 中文標題優先在標點處換行，放不下才在字中間斷 */
:where(h1,h2,h3,.hb-title){word-break:keep-all;overflow-wrap:anywhere}
html[data-view="mobile"] .hb-title{font-size:var(--fs-xl);letter-spacing:0}
html[data-view="mobile"] .hb-cta h2{letter-spacing:0;font-size:var(--fs-h1)}
#grid .wk-film,#grid .wk-featured img{border:var(--sk-edge);border-radius:var(--sk-hand);box-shadow:var(--sk-shadow)}

/* ── 2026-10-30 目檢修正 ─────────────────────────────── */
/* 手機橫拿時首屏很矮，Blueprint 標籤會壓到標題：矮螢幕不顯示註記 */
@media (max-height:520px){.sk-tag,.sk-dim,.sk-dim-label,.sk-blueprint .sk-note,.hb-reel .sk-note[hidden]{display:none!important}}
/* 條款目錄：貼紙框內要留白，不讓字貼著框線 */
.policy-toc{padding:4px 18px}
/* 服務頁首屏：原本的灰階照片底在畫布上顯得髒，改成淡淡的懷舊照片＋畫框 */
#content-panel .svc-hero{border:var(--sk-edge);border-radius:var(--sk-hand-lg);box-shadow:var(--sk-shadow)}
#content-panel .svc-hero-copy{background:var(--sk-paper)}  /* 服務頁首屏文字卡：紙白底，Tiffany 留給按鈕 */
#content-panel .svc-hero::before{background-color:var(--sk-paper)!important;filter:grayscale(1) sepia(.55) brightness(1.08) contrast(.85)!important;opacity:.55}
/* 立體導覽示意圖：和其他圖一樣加畫框 */
.tour-view{border:var(--sk-edge)!important;border-radius:var(--sk-hand);box-shadow:var(--sk-shadow);overflow:hidden}

/* ── 2026-10-30 程式碼審查修正 ─────────────────────────── */
/* 跳至內容：原樣式用 var(--bg) 當字色，換成畫布色後在青綠上看不見 */
.skip-link{color:var(--sk-ink)!important}
/* 深咖啡色區塊裡的焦點框改用亮 Tiffany（深 Tiffany 在咖啡底上不到 3:1）；青綠帶裡用深炭 */
:is(.hb-stats,.hb-cta-contact,.site-footer,footer.colophon,.hb-intro-card) :focus-visible{outline-color:var(--sk-teal)!important}
.hb-cta-top :focus-visible,.hb-strip :focus-visible{outline-color:var(--sk-ink)!important}
/* 作品預覽的捲軸 */
.shot{scrollbar-color:rgba(17,24,25,.5) var(--sk-paper)}

/* ── 2026-10-30 色差修正：一個底色、一個綠、一個墨 ───────────── */
/* 首屏文案改放在紙卡上，影片保留原色，不再蓋一層米色漸層 */
.hb-reel-copy{left:clamp(14px,2.2vw,32px)!important;right:auto!important;bottom:clamp(14px,2.2vw,32px)!important;max-width:min(860px,calc(100% - 2*clamp(14px,2.2vw,32px)));padding:clamp(18px,2.4vw,34px) clamp(18px,2.8vw,40px)!important;background:var(--sk-paper);border:var(--sk-edge);border-radius:var(--sk-hand-lg);box-shadow:var(--sk-shadow)}
.hb-reel-copy h1{text-shadow:none!important}
html[data-view="mobile"] .hb-reel-copy{left:10px!important;right:10px!important;bottom:10px!important;max-width:none;padding:16px 16px 18px!important}
/* 目前所在頁籤：Tiffany 底線 */
.primary-nav a[aria-current="page"],.site-header nav a[aria-current="page"]{color:var(--sk-ink)!important;border-bottom:3px solid var(--sk-teal)!important}
.hb-reel-copy::before{content:none!important}
html:not([data-view="mobile"]) .hb-reel-copy{width:fit-content}
html[data-view="mobile"] .hb-reel .hb-reel-controls{top:14px!important;bottom:auto!important}

/* ── 2026-10-30 方案 C：品牌米白＋深炭＋Tiffany，珊瑚紅只做小點綴 ── */
/* 圖釘：釘住首屏標籤的小珊瑚點，全站珊瑚面積控制在 5% 以內 */
.sk-tag::before{content:"";position:absolute;top:-9px;right:14px;width:14px;height:14px;border-radius:var(--sk-pill);background:var(--sk-coral);border:2px solid var(--sk-ink);box-shadow:1px 2px 0 rgba(17,24,25,.35)}
/* Tiffany 上不用灰綠小字（對比不足），一律深炭 */
.hb-cta-top,.hb-cta-top *:not(.hb-btn):not(.hb-btn *){color:var(--sk-ink)!important}

/* Phone menu (all pages): one centred column — links, a dashed rule, then company details.
   The details used to be pinned to the bottom of the screen, so on phones with a browser toolbar
   they slid up into the last link ("聯絡"). Auto margins centre the group and let it scroll when short. */
html[data-view="mobile"] #menu{display:flex;flex-direction:column;align-items:center;padding:84px var(--pad,16px) calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto}
html[data-view="mobile"] #menu .menu-inner{width:100%;max-width:340px;margin:auto 0 0}
html[data-view="mobile"] #menu .menu-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px}
html[data-view="mobile"] #menu .menu-nav a{justify-content:center;text-align:center;margin-top:0}
html[data-view="mobile"] #menu .addr{position:static;inset:auto;width:100%;max-width:340px;margin:28px 0 auto;padding-top:20px;border-top:1px solid var(--sk-line);
  flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:18px;row-gap:0;text-align:center;font-size:var(--fs-sm)}
html[data-view="mobile"] #menu .addr>p{flex:0 0 100%;margin:0 0 4px}
html[data-view="mobile"] #menu .addr>a{justify-content:center}
html[data-view="mobile"] #menu .addr .policy-links{flex:0 0 100%;display:flex;justify-content:center;gap:0 22px}

/* ── 2026-11-04 作品關係標籤（自營／家人經營／友情協助／概念展示） ── */
.rel-tag{display:inline-block;margin:0;padding:0 8px;border:1px solid var(--sk-ink-soft);border-radius:4px;background:var(--sk-paper);color:var(--sk-ink)!important;font-size:var(--fs-sm);line-height:1.8;letter-spacing:.04em}
.case-one .rel-tag{margin:2px 0 10px}
@media(min-width:701px){html:not([data-view="mobile"]) .project-facts{grid-template-columns:1fr 1fr 2fr 1fr}}

/* ── 2026-11-04 正式樣式：價格、表格、政策頁不用手繪層 ─────────────
   套用範圍：/pricing/、/privacy/、/faq/ 的 <body class="is-formal">；服務頁、地區頁的
   價格區（#plans）與表格（.sig-table）；首頁價目表＋範例報價單（#hc-menu）與方案頁（#pricing）。
   卡片一律 1px 淺灰實線、圓角 4px、無位移陰影、不旋轉。 */
.is-formal{--sk-formal-line:var(--sk-line)}
.is-formal :is(.plan,details.terms,.faqs details,.policy-toc,.case-one img,.work-card img),
#content-panel .is-formal :is(.price-card,.price-module,.price-duo-item,.content-offer),
#content-panel .is-formal .price-card.is-featured,
.is-formal :is(.hc-board,.hc-rows li,.hc-rows .hc-hot,.hc-receipt){
  border:1px solid var(--sk-formal-line)!important;border-radius:4px!important;box-shadow:none!important;transform:none!important}
.is-formal .plans .plan:nth-child(2){transform:none!important}
#content-panel .is-formal .price-card.is-featured,.is-formal .hc-rows .hc-hot{border-color:var(--sk-ink)!important}
#content-panel .is-formal .price-card.is-featured::before{display:none!important}
#content-panel .is-formal .price-badge,.is-formal .hc-stamp{transform:none!important;border-radius:4px!important}
.is-formal .hc-rows i,.is-formal .hc-rows em{border-radius:4px}
/* 範例報價單：拿掉撕紙鋸齒與陰影，改成一般單據框 */
.is-formal .hc-receipt{-webkit-mask:none!important;mask:none!important;padding-bottom:18px}
/* 表格：淺灰實線 */
.is-formal.sig-table,.is-formal .sig-table{border-top-color:var(--sk-ink)}
.is-formal.sig-table :is(th,td),.is-formal .sig-table :is(th,td){border-color:var(--sk-formal-line)!important}
/* 價目表：白底卡，Tiffany 只留給按鈕與標記 */
.is-formal .hc-board{background:var(--sk-paper)}

/* ── 2026-11-04 標題字型：系統黑體、700（h3 600）；不另外下載字型 ── */
:is(h1,h2,h3),h1.hc-h1{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif!important;font-weight:700!important;font-synthesis:none}
h3{font-weight:600!important}

/* /pricing/ 年度維運卡：價格欄放不下「／年・第 2 年起・含稅」，欄寬改為依內容 */
@media(min-width:701px){html:not([data-view="mobile"]) .plan{grid-template-columns:minmax(0,1fr) minmax(220px,max-content)}}

/* ── 2026-11-04 字級系統：正文 16px／行高 1.75，標題行高 1.3 ── */
:where(h1,h2,h3,h4){line-height:1.3}