/* 首頁：對話開場＋網站價目表＋範例報價單＋對話常見問題（2026-10-30）
   只在首頁載入，放在 sketchbook.css 之後；顏色沿用主題變數。 */
.hc-hero,.hc-menu,.hc-works,.hc-faq{--hc-chat:#E6ECEA;--hc-ink:var(--sk-ink,#111819);--hc-soft:var(--sk-ink-soft,#465450);--hc-tif:var(--sk-teal,#00D9BA);--hc-paper:#FFFFFF;--hc-cream:var(--sk-canvas,#F4F2EB);color:var(--hc-ink)}
.hc-wrap{width:min(1180px,100%);margin:0 auto;padding:0 clamp(14px,4vw,40px)}
.hc-narrow{width:min(760px,100%)}

/* 對話 */
.hc-hero{padding:calc(var(--site-header-h,96px) + 18px) clamp(10px,4vw,40px) clamp(28px,5vw,56px);background:var(--hc-cream)}
.hc-id{width:min(760px,100%);margin:0 auto 10px;font-size:var(--fs-sm);line-height:1.6;color:var(--hc-soft);text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.hc-window{width:min(760px,100%);margin:0 auto;background:var(--hc-chat);border:3px solid var(--hc-ink);border-radius:4px;overflow:hidden;box-shadow:6px 6px 0 var(--hc-ink)}
.hc-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--hc-ink);color:var(--hc-cream)}
.hc-av{flex:none;width:40px;height:40px;border-radius:999px;background:#000;display:grid;place-items:center;overflow:hidden;border:1px solid var(--hc-tif)}
.hc-av img{width:56px;height:auto}
.hc-bar b{display:block;font-size:var(--fs-base);line-height:1.3}.hc-bar small{display:block;font-size:var(--fs-xs);color:var(--hc-tif)}
.hc-thread{display:grid;gap:8px;padding:16px clamp(12px,3vw,26px) 20px}
.hc-faq .hc-thread{padding-inline:0}
.hc-who{margin:6px 4px -4px;font-size:var(--fs-xs);color:var(--hc-soft)}.hc-who.hc-r{justify-self:end}
.hc-m{margin:0;max-width:min(84%,560px);padding:10px 14px;border-radius:4px;font-size:var(--fs-base);line-height:1.65}
.hc-you{justify-self:start;background:var(--hc-paper);border-top-left-radius:0}
.hc-me{justify-self:end;background:var(--hc-tif);border-top-right-radius:0}
.hc-me b{font-weight:700}
.hc-h1{max-width:min(92%,560px);font-family:var(--sk-round)!important;font-size:var(--fs-h1)!important;line-height:1.3!important;letter-spacing:.01em}
.hc-actions{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin:6px 0 0}
.hc-go,.hc-ghost{font:inherit;font-family:var(--sk-sans,inherit);cursor:pointer;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1px solid var(--hc-ink);border-radius:999px;font-weight:700;text-decoration:none!important}
.hc-go{background:var(--hc-tif);color:var(--hc-ink)!important}
.hc-go::after{content:"→";margin-left:8px}
.hc-ghost{background:var(--hc-paper);color:var(--hc-ink)!important}
@media(hover:hover) and (pointer:fine){.hc-go:hover,.hc-ghost:hover,.hc-chips a:hover{box-shadow:inset 0 0 0 1px var(--hc-ink)}}

/* 區塊標題 */
.hc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 2px 14px}
.hc-head h2{margin:0;font-size:var(--fs-h2);line-height:1.3}
.hc-head span{font-size:var(--fs-sm);font-weight:700}

/* 價目表＋報價單 */
.hc-menu{background:var(--hc-cream);padding:0 0 clamp(36px,5vw,64px)}
.hc-two{display:grid;gap:clamp(20px,3vw,36px);align-items:start}
@media(min-width:960px){html:not([data-view="mobile"]) .hc-two{grid-template-columns:1.05fr .95fr}}
.hc-board{background:var(--hc-tif);border:1px solid var(--hc-ink);border-radius:4px;padding:clamp(16px,2.4vw,26px) clamp(12px,2vw,22px)}
.hc-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hc-rows li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;background:var(--hc-paper);border:1px solid var(--hc-ink);border-radius:4px;padding:10px 12px}
.hc-rows i{font-style:normal;font-weight:700;font-size:var(--fs-sm);line-height:1.7;text-align:center;background:var(--hc-ink);color:var(--hc-tif);border-radius:4px}
.hc-rows strong{display:block;font-family:var(--sk-round);font-weight:400;font-size:var(--fs-lg);line-height:1.25}
.hc-rows em{font-style:normal;font-size:var(--fs-xs);font-family:inherit;background:var(--hc-ink);color:var(--hc-tif);padding:1px 6px;border-radius:4px;vertical-align:3px}
.hc-rows small{display:block;font-size:var(--fs-sm);color:var(--hc-soft);line-height:1.5}
.hc-rows b{font-family:var(--sk-round);font-weight:400;font-size:var(--fs-h2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-rows b small{display:inline;font-size:var(--fs-sm);color:inherit}
.hc-rows .hc-hot{box-shadow:5px 5px 0 var(--hc-ink)}
.hc-tax{margin:12px 0 0;font-size:var(--fs-sm);font-weight:700;text-align:center}
.hc-tax a{display:inline-block;min-height:44px;padding:10px 2px;margin:-10px 0;color:var(--sk-link,#00715F)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hc-billbox .hc-head{margin-top:4px}
.hc-lead{margin:-4px 2px 14px;color:var(--hc-soft);font-size:var(--fs-base)}
.hc-receipt{position:relative;background:var(--hc-paper);padding:18px 16px 26px;font:var(--fs-sm)/1.8 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Noto Sans Mono CJK TC",monospace;box-shadow:0 12px 20px -14px rgba(17,24,25,.5);
 -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 14px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 13px) no-repeat;
 mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 14px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 13px) no-repeat}
.hc-rtop{margin:0 0 6px;padding-bottom:8px;text-align:center;border-bottom:1px dashed var(--hc-ink)}
.hc-rtop b{display:block;font-family:var(--sk-round);font-weight:400;font-size:var(--fs-lg)}
.hc-receipt dl{margin:0}
.hc-receipt dl div{display:flex;justify-content:space-between;gap:10px}
.hc-receipt dd{margin:0;white-space:nowrap}
.hc-total{margin:8px 0;padding:8px 0;border-block:1px dashed var(--hc-ink);font-family:var(--sk-round);font-size:var(--fs-xl);align-items:baseline}
.hc-total dd small{font-size:var(--fs-sm)}
.hc-hl dd{font-weight:700;background:var(--hc-tif);padding:0 5px}
.hc-stamp{display:inline-block;margin-left:6px;vertical-align:2px;transform:rotate(-8deg);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.4;border:1px solid var(--hc-tif);color:#00695C;font-weight:700;font-size:var(--fs-base);letter-spacing:.2em;padding:2px 10px;border-radius:4px}
.hc-note{margin:12px 2px 0;font-size:var(--fs-sm);color:var(--hc-soft)}

/* 作品 */
.hc-works{background:var(--hc-cream);padding:0 0 clamp(36px,5vw,64px)}
.hc-pics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:960px){html:not([data-view="mobile"]) .hc-pics{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.hc-pics a{display:block;background:var(--hc-paper);border:1px solid var(--hc-ink);border-radius:4px;overflow:hidden;color:var(--hc-ink)!important;text-decoration:none!important;transition:transform .12s,box-shadow .12s}
.hc-pics img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-bottom:1px solid var(--hc-ink)}
.hc-pics a>span{display:block;padding:6px 10px;font-weight:700;font-size:var(--fs-sm)}
.hc-pics small{font-weight:400;font-size:var(--fs-xs);color:var(--hc-soft);margin-left:6px}
@media(hover:hover) and (pointer:fine){.hc-pics a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--hc-ink)}}

/* 對話常見問題 */
.hc-faq{background:var(--hc-chat);padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--hc-ink)}
.hc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.hc-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hc-ink);background:var(--hc-paper);border-radius:999px;font-weight:700;font-size:var(--fs-sm);color:var(--hc-ink)!important;text-decoration:none!important}

/* 手機底部三鍵；電腦版不顯示 */
.hc-dock{display:none}
html[data-view="mobile"] .hc-dock{position:fixed;left:0;right:0;bottom:0;z-index:57;display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--sk-ink,#111819);padding-bottom:env(safe-area-inset-bottom,0px);background:#fff}
html[data-view="mobile"] .hc-dock a{display:flex;align-items:center;justify-content:center;min-height:52px;font-weight:700;font-size:var(--fs-base);color:var(--sk-ink,#111819)!important;text-decoration:none!important;background:#fff}
html[data-view="mobile"] .hc-dock .hc-dock-line{background:var(--sk-teal,#00D9BA)}
html[data-view="mobile"] .hc-dock a+a{border-left:1px solid var(--sk-ink,#111819)}
/* 底部三鍵只在直拿的手機顯示；橫拿時畫面太矮，改回原本的浮動 LINE 鈕 */
/* Landscape phones: the dock would cover too much of a short screen, so fall back to the round LINE button (its own rule only covers widths up to 768px). */
@media(max-height:500px){
  html[data-view="mobile"] .hc-dock{display:none!important}
  html[data-view="mobile"] .hb-float-line{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:58;display:grid;place-items:center;align-content:center;gap:2px;width:52px;height:52px;border-radius:999px;background:#00D9BA;color:#111819;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;line-height:1;text-decoration:none;transition:opacity .25s,transform .25s,visibility 0s}
  html[data-view="mobile"] .hb-float-line svg{width:20px;height:20px;fill:currentColor}
  html[data-view="mobile"] .hb-float-line[data-hidden]{visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
  html[data-view="mobile"] .hb-float-line:focus-visible{outline:3px solid #111819;outline-offset:3px}
}
@media(min-height:501px){
  html[data-view="mobile"] .hb-float-line{display:none!important}
  html[data-view="mobile"] body{padding-bottom:calc(55px + env(safe-area-inset-bottom,0px))}
  /* 用鍵盤移動焦點時，不讓目標被底部三鍵蓋住 */
  html[data-view="mobile"]{scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
/* 作品一覽、內容頁、選單、作品預覽打開時，底部三鍵讓位 */
body.locked .hc-dock,.menu-open .hc-dock,.lit .hc-dock{display:none!important}
.hc-pics img{height:auto!important;max-height:none}
.hc-rows small{text-wrap:pretty}
.hc-tax{word-break:keep-all;overflow-wrap:break-word}
#hc-menu{scroll-margin-top:calc(var(--site-header-h,96px) + 8px)}

.hc-more{display:inline-block;min-height:44px;margin-left:6px;padding:8px 0;color:var(--hc-ink)!important;font-weight:700;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px}
.hc-av img{width:100%!important;height:100%;object-fit:cover}
#hc-menu-title:focus{outline:none}
#hc-menu-title:focus-visible{outline:3px solid var(--hc-ink);outline-offset:4px}

/* Home-screen app (standalone): app-compact.css shrinks the logo box to 94px and shifts the image 24px left;
   with the hand-drawn frame's padding and border that clipped "Hey Cheng" to "Hey Cher". Let the box fit the logo. */
@media (display-mode: standalone){
  html[data-view="mobile"] .site-header .wordmark{width:auto!important}
  html[data-view="mobile"] .site-header .wordmark img{width:120px!important;margin:0 -18px!important}
}