/* 承泰首頁 V2-C(バーミキュラ底)客製樣式。原站 assets/css/style.css 不動,這裡蓋過去。
   原站 1rem = 1vw(1440 寬時 14.4px)。改了:①明朝體換 Noto Serif TC、內文 Noto Sans TC ②原站的廚房場景照
   換成「暗暖色場景 + 去背產品」③照片框照原站直角 ④紅黃只用在 logo。 */
:root { --ct-ink: #222426; --ct-brown: #161615; --ct-warm: #161615; --ct-sand: #f3f3f3; --serif: "Noto Serif TC", serif; --sans: "Noto Sans TC", "Inter", sans-serif; }
body { font-family: var(--sans); }
.ct-hide { display: none !important; }
.c-sectionTitle-title, .p-kv-copyText, .c-screenLink-catch, .p-recipes-text, .c-footer-logo .catch, .p-pickup-title, .c-circleArrowLink-text .main, .c-circleArrowLink-text .sub, .p-news-articleTitle, .p-brandPolicy-texts { font-family: var(--serif) !important; }
.c-sectionTitle-title { letter-spacing: .12em; font-weight: 500; }
.c-sectionTitle-sub { letter-spacing: .2em; }

/* ── 5A 進站載入 ─────────────────────────────────────────────────── */
.ct-ld-bg { position: absolute; inset: 0; background: var(--ct-warm); }
.ct-ld { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; transform: translate(-50%, -50%); }
.ct-ld-mark { width: 4.6rem; height: auto; overflow: visible; }
.ct-ld-mark .ct-mark-a { animation: ctLdA 1.1s cubic-bezier(.19, 1, .22, 1) both; }
.ct-ld-mark .ct-mark-b { animation: ctLdB 1.1s cubic-bezier(.19, 1, .22, 1) both; }
.ct-ld-mark .ct-mark-bar { transform-box: fill-box; transform-origin: center; animation: ctLdBar .8s .7s cubic-bezier(.19, 1, .22, 1) both; }
.ct-ld-word { width: 10rem; height: auto; animation: ctLdW .9s 1s both; }
.ct-ld-word .ct-logo-mark { display: none; }
@keyframes ctLdA { from { transform: translate(40px, -50px); opacity: 0; } }
@keyframes ctLdB { from { transform: translate(-40px, 50px); opacity: 0; } }
@keyframes ctLdBar { from { transform: scale(0); } }
@keyframes ctLdW { from { opacity: 0; transform: translateY(8px); } }
.c-loading-circle { display: none; }

/* ── 頁首 ─────────────────────────────────────────────────────────── */
.c-header-title .ct-logo { display: block; width: auto; height: 2.5rem; min-height: 32px; }   /* 11-14 V14 logo 補橫線 + Est. 2003,整組變高(手機原 2.1rem → 2.5rem,上下各留約頁首高 19%,跟桌機同比例);
   display block:原本 inline 坐在行高 43px 的行框底線上,logo 一變高就偏上(1440 上 5.9 / 下 16.3)→ 改成跟頁首一起置中 */
.navLink-text { letter-spacing: .1em; }
.ct-hd-search { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; min-width: 34px; min-height: 34px; margin-right: .8rem; border: 0; background: none; color: inherit; cursor: pointer; }
.ct-hd-search .ct-i { width: 1.4rem; height: 1.4rem; min-width: 18px; min-height: 18px; }
.c-header-online { display: inline-flex !important; align-items: center; gap: .5rem; }
.c-header-online .ct-i { width: 1.1rem; height: 1.1rem; min-width: 15px; min-height: 15px; }
.ct-inq-n { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 1rem; background: var(--ct-red); color: #fff; font: 600 .8rem/1 "Inter", sans-serif; }
.c-header-sub { position: relative; display: flex; align-items: center; }
.ct-searchbox { position: absolute; right: 0; top: calc(100% + 1rem); width: 26rem; }
.ct-search { display: flex; align-items: center; height: 3.4rem; padding: 0 .4rem 0 1.2rem; background: #fff; color: var(--ct-ink); border-radius: 0; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18); }
.ct-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16px; outline: none; }
.ct-search button { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 0; background: none; cursor: pointer; }
.ct-search .ct-i { width: 1.3rem; height: 1.3rem; }
.ct-lineupimg { display: grid; place-items: center; background: var(--ct-sand); }
.ct-lineupimg img { width: 70% !important; height: 80% !important; object-fit: contain; }
.ct-navimg { display: flex; align-items: flex-end; padding: 1.6rem 2rem; background: linear-gradient(135deg, #2e2e2d, #161615) !important; }
.ct-navimg a { color: #fff; font: 500 1.8rem/1.3 var(--serif); letter-spacing: .12em; }
.ct-mnav-sub { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: 13px; opacity: .75; }
.ct-msoc__a { display: grid; place-items: center; width: 36px; height: 36px; }

/* ── 首屏:三支直式影片拼一排 ──────────────────────────────────────── */
.ct-tri { display: flex; gap: 2px; width: 100%; height: 100%; background: #000; }
.ct-tri video { flex: 1 1 0; min-width: 0; height: 100% !important; object-fit: cover; }
.p-kv-movieBg { background: rgba(22, 22, 21, .38) !important; }
.p-kv-copyText { letter-spacing: .1em; }
.p-brandPolicy-texts .paragraph { letter-spacing: .1em; line-height: 2.2; }

/* ── 服務項目(拼貼卡)─────────────────────────────────────────────── */
.p-pickup-head { width: calc(100% - 8rem); margin: 0 auto 3.4rem; }
.ct-svc .p-pickup-listItem:nth-of-type(1) { grid-column: 3 / 5; grid-row: 1 / 3; }
.ct-svc .p-pickup-listItem:nth-of-type(2) { grid-column: 1 / 2; grid-row: 1 / 2; }
.ct-svc .p-pickup-listItem:nth-of-type(3) { grid-column: 2 / 3; grid-row: 1 / 2; }
.ct-svc .p-pickup-listItem:nth-of-type(4) { grid-column: 1 / 3; grid-row: 2 / 4; }
.ct-svc .p-pickup-listItem:nth-of-type(5) { grid-column: 3 / 5; grid-row: 3 / 4; }
.ct-svc .p-pickup-listLink { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.ct-svc .p-pickup-listLink > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.23, 1, .32, 1); }
.ct-svc .p-pickup-listLink > img.is-cut { object-fit: contain; padding: 8%; background: var(--ct-sand); }
.ct-svc .p-pickup-listLink:hover > img { transform: scale(1.05); }
.ct-svc .p-pickup-listLink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 22, 21, 0) 45%, rgba(22, 22, 21, .62)); pointer-events: none; }
.ct-svcap { position: absolute !important; left: 2rem; right: 5rem; bottom: 1.8rem; z-index: 2; display: flex !important; align-items: center; gap: 1.2rem; color: #fff; }
.ct-svno { font: 500 .9rem/1 "Inter", sans-serif; letter-spacing: .1em; opacity: .8; min-width: 1.6em; }
.ct-svicon { width: 3rem; height: 3rem; min-width: 34px; min-height: 34px; flex: none; color: #fff; }
.ct-svcap .p-pickup-title { margin: 0; font-size: max(1.6rem, 18px) !important; letter-spacing: .12em; color: #fff; }
.ct-svc .p-pickup-arrow { z-index: 2; color: #fff; }

/* ── 關於我們 ─────────────────────────────────────────────────────── */
.ct-about .p-recipes-imageWrap { display: block; width: 100%; height: 100%; }
.ct-about .p-recipes-imageWrap .ct-pair { width: 100%; height: 100%; }
.ct-about .p-recipes-imageWrap .ct-pair img { transform: none !important; }
.ct-about .c-circleArrowLink-text .main { letter-spacing: .14em; }
.ct-about .c-circleArrowLink-text .sub { letter-spacing: .1em; }
.ct-about-lead { margin-top: 2rem !important; font-size: max(1.35rem, 17px) !important; line-height: 2.1 !important; letter-spacing: .08em; color: var(--ct-ink); }
.ct-about .p-recipes-text + .p-recipes-text { margin-top: 1.2rem; font-size: max(1rem, 15px); line-height: 2.1; letter-spacing: .06em; }
.ct-more { display: inline-flex; align-items: center; gap: 1rem; margin-top: 2.4rem; font: 500 max(.95rem, 14px)/1 "Inter", sans-serif; letter-spacing: .14em; }
.ct-more .c-circleArrow { width: 2.6rem; height: 2.6rem; min-width: 32px; min-height: 32px; }
.ct-figs { display: flex; align-items: center; justify-content: space-between; gap: 4rem; width: calc(100% - 8rem); margin: 6rem auto 0; padding: 4rem 5rem; background: var(--ct-sand); border-radius: 0; }
.ct-figs .ct-nums { gap: 5rem; }
.ct-figs .ct-nums__val { font: 400 max(5.6rem, 44px)/1 "Inter", sans-serif; letter-spacing: -.04em; color: var(--ct-ink); }
.ct-figs .ct-nums__val--zh { font: 500 max(2.8rem, 26px)/1.2 var(--serif); letter-spacing: .08em; }
.ct-figs .ct-nums__label { font-size: max(.9rem, 13px); }
.ct-figs .ct-map { width: 13rem; min-width: 150px; color: var(--ct-ink); --ct-map-fill: rgba(255, 255, 255, .8); }

/* ── 5B:logo 斜條百葉窗(跟 logo 斜條同方向)跟著捲動打開 ───────────────────── */
/* 固定在畫面後面的那層是原站程式只在這段才顯示的;底色不能加在它身上(會蓋住首屏影片)。
   底圖 = 同一支影片的封面壓暗,斜條只開在影片那層。 */
.ct-blinds .p-support-photo img { filter: brightness(.22) saturate(.6); }
.ct-blinds .p-support-video { -webkit-mask-image: repeating-linear-gradient(-49deg, #000 0 var(--bw, 0px), transparent var(--bw, 0px) 9rem); mask-image: repeating-linear-gradient(-49deg, #000 0 var(--bw, 0px), transparent var(--bw, 0px) 9rem); }
.ct-blinds.is-full .p-support-video { -webkit-mask-image: none; mask-image: none; }
.ct-blinds .p-support-video video { width: 100%; height: 100%; object-fit: cover; }
.ct-blinds-sub { margin-top: 2.4rem; color: #fff; font: 500 max(1.6rem, 18px)/1.4 var(--serif); letter-spacing: .14em; }
.ct-blinds-text { margin-top: .8rem; color: rgba(255, 255, 255, .8); font-size: max(1rem, 15px); line-height: 2; letter-spacing: .08em; }

/* ── 產品分類:暗暖色場景長條 + 去背產品 ────────────────────────────── */
.ct-prod .c-screenLink { height: 34rem; }
.ct-prod .c-screenLink.ct-main { height: 44rem; }
.ct-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 140% at 72% 30%, #5b4f47 0%, #3a322d 42%, #1f1b19 100%); }
.ct-scene-light { position: absolute; right: 8%; top: -30%; width: 46%; height: 120%; background: radial-gradient(closest-side, rgba(255, 236, 214, .22), rgba(255, 236, 214, 0)); }
.ct-scene-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(180deg, #2a2420, #171412); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.ct-scene-item { position: absolute; right: 12%; bottom: 10%; height: 82%; display: flex; align-items: flex-end; }
.ct-main .ct-scene-item { height: 86%; }
.ct-scene-item > img, .ct-scene-item > .ct-panel, .ct-scene-item > .ct-hood { height: 100%; width: auto; filter: drop-shadow(0 2.4rem 2.4rem rgba(0, 0, 0, .45)); transition: transform 1.4s cubic-bezier(.23, 1, .32, 1); }
.c-screenLink-linkInner:hover .ct-scene-item > * { transform: translateY(-.8rem) scale(1.02); }
.ct-scene-oven { position: relative; aspect-ratio: 916 / 1109; }
.ct-scene-oven > img { width: 100%; height: 100%; }
.ct-scene-oven .ct-steam { top: -2%; left: 64%; width: 70%; height: 50%; }
.ct-scene-noodles { position: absolute; right: -28%; top: 4%; height: 50% !important; filter: none !important; transform: rotate(-10deg); }
.ct-prod .c-screenLink-content { position: absolute; left: 6rem; top: 50%; transform: translateY(-50%); width: 30rem; color: #fff; }
.ct-prod .c-circleArrowLink-text .title .main { font: 400 max(1rem, 14px)/1 "Noto Sans TC", sans-serif !important; letter-spacing: .2em; opacity: .7; }
.ct-prod .c-circleArrowLink-text .title .sub { display: block; margin-top: .8rem; font: 500 max(2.4rem, 26px)/1.3 var(--serif); letter-spacing: .14em; color: #fff; }
.ct-prod .c-screenLink-text { margin-top: 1.6rem; color: rgba(255, 255, 255, .78); font-size: max(1rem, 15px); line-height: 2; letter-spacing: .06em; }
.ct-lineup { width: calc(100% - 8rem); margin: 4rem auto 0; padding: 3rem 5rem 0; background: var(--ct-sand); border-radius: 0; }
.ct-lineup__cap { margin: 0 0 2rem; font: 500 max(1rem, 14px)/1.4 var(--serif); letter-spacing: .16em; color: var(--ct-ink); }
.ct-lineup .ct-lineup__list { --base: 24rem; }
.ct-prodmore { display: flex; justify-content: center; margin-top: 4rem; }

/* ── 承泰食堂(照片循環輪播)──────────────────────────────────────── */
.ct-food .p-promise-sliderCount, .ct-food .p-promise-linkArea, .ct-food .p-promise-sliderTitle, .ct-food .c-mouseStalker .current, .ct-food .c-mouseStalker .total { display: none !important; }
.ct-food .p-promise-sliderImage img { border-radius: 0; }

/* ── 最新消息 ─────────────────────────────────────────────────────── */
.ct-news-lead { max-width: 40em; margin-top: 1.6rem; font-size: max(1rem, 15px); line-height: 2; letter-spacing: .06em; color: #6b6460; }
.p-news-item { position: relative; display: flex; align-items: center; }
.ct-news-thumb { flex: none; width: 9rem; height: 6.4rem; margin-left: 2rem; overflow: hidden; border-radius: 0; background: var(--ct-sand); }
.ct-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.23, 1, .32, 1); }
.p-news-item:hover .ct-news-thumb img { transform: scale(1.06); }
.p-news-itemText { flex: 1; }
.ct-news-empty { padding: 3rem 0; color: #999; }

/* ── 頁尾 ─────────────────────────────────────────────────────────── */
.c-footer-logo .ct-logo { width: auto; height: 3.47rem; min-height: 40px; }   /* 11-14 V14 同頁首,原 2.4rem / 28px */
.c-footer-logo .catch .catch-text { margin-left: 0 !important; }
.p-kv-text .char { margin-left: 0 !important; margin-right: 0 !important; }
.c-footer-logo .catch { letter-spacing: .14em; }
.c-footer-privacyLink + .c-footer-privacyLink { margin-left: 1.6rem; }
.c-footer-categoryTitle a { color: inherit; }
.ct-foff a { display: flex !important; flex-direction: column; gap: .2rem; }
.ct-foff b { font-weight: 500; }
.ct-foff span { opacity: .7; font-size: .92em; }
.ct-ftel { margin-top: 1.6rem; line-height: 1.9; letter-spacing: .06em; }
.ct-fsoc { display: flex; gap: .6rem; margin-top: 1.4rem; }
.ct-fsoc__a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; min-width: 34px; min-height: 34px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #fff; transition: background .3s, border-color .3s; }
.ct-fsoc__a:hover { background: var(--ct-red); border-color: var(--ct-red); }

.ct-side__btn { background: var(--ct-brown); }

@media (max-width: 750px) {
  .ct-tri { gap: 1px; }
  .p-pickup-head { width: calc(100% - 2.5rem); }
  .ct-svc { height: auto !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: 12rem; }
  .ct-svc .p-pickup-listItem:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .ct-svc .p-pickup-listItem:nth-of-type(1) { grid-column: 1 / 3; grid-row: span 2; }
  .ct-svcap { left: 1rem; right: 1rem; bottom: 1rem; gap: .6rem; }
  .ct-svno { display: none; }
  .ct-figs { flex-direction: column; align-items: flex-start; width: calc(100% - 2.5rem); padding: 2.4rem 1.6rem; gap: 2.4rem; }
  .ct-figs .ct-nums { gap: 1.6rem 2.4rem; }
  .ct-prod .c-screenLink, .ct-prod .c-screenLink.ct-main { height: 26rem; }
  .ct-scene-item { right: 6%; height: 62%; }
  .ct-prod .c-screenLink-content { left: 1.4rem; right: 1.4rem; top: auto; bottom: 1.4rem; transform: none; width: auto; }
  .ct-prod .c-screenLink-text { display: none; }
  .ct-lineup { width: calc(100% - 2.5rem); padding: 1.6rem 1rem 0; }
  .ct-lineup .ct-lineup__list { --base: 10rem; }
  .ct-news-thumb { display: none; }
}
.p-kv-video { position: relative; }
.p-kv-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 22, 21, .38), rgba(22, 22, 21, .22) 45%, rgba(22, 22, 21, .5)); pointer-events: none; }

/* ══ V3 動效加強版 C(這段以下是加強版才有的;共用的在 ct-plus.css)══════════════════════════ */
:root { --ctp-bg: #1f1b19; --ctp-fg: #fff; --ctp-mute: rgba(255, 255, 255, .68); --ctp-line: rgba(255, 255, 255, .18); --ctp-head: var(--serif); --ctp-num: "Inter", var(--sans); --ctp-side: 6rem; --ctp-r: 0px; }
/* 產品長條:Codex 暗色情境大圖,字那側壓暗 */
.ct-strip::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(22, 22, 21, .78) 0%, rgba(22, 22, 21, .4) 34%, rgba(22, 22, 21, 0) 58%); }
.c-screenLink-linkInner:hover .ct-strip__bg img { transform: scale(1.04); }
.ct-prod .c-screenLink-content { z-index: 4; }
/* 3A:關於我們的大照片 = 蒸烤箱窗格,溫度疊在右下 */
.ct-ow--fill { display: block; width: 100%; height: 100%; }
.ct-ow--fill .ct-ow__door { height: 100%; padding: 1.4rem; border-radius: 0; }
.ct-ow--fill .ct-ow__glass { height: 100%; aspect-ratio: auto; }
.ct-ow--fill .ct-ow__temp { position: absolute; right: 3.2rem; bottom: 2.6rem; z-index: 3; color: #fff; font-size: max(5.6rem, 40px); text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .35); }
/* 蒸烤箱(4A + 4B)、洗碗機掀蓋(2A) */
.ct-of { margin-top: 0; }
/* 2D 排排站:倒影 + 刻度線 */
.ct-lineup { padding-bottom: 3rem; --ctp-refl: .3; }
.ct-lineup .ct-lineup__list { padding-bottom: 7rem; }
.ct-lineup .ct-ruler { margin-top: 0; color: #8a817b; }
/* 6A 年份橫移 */
.ct-figs.ct-years-host { position: relative; overflow: hidden; --ctp-years: rgba(34, 36, 38, .1); }
/* 3B 三排斜流 */
.ct-food .ct-f3 { margin-top: 3rem; }
.ct-food .ct-f3__tile { width: 24rem; }
@media (max-width: 750px) {
  :root { --ctp-side: 1.6rem; }
  .ct-food .ct-f3__tile { width: 46vw; }
}
@media (max-width: 750px) {
  /* 手機首屏大字原本比螢幕寬(390 寬時超出 26px),縮到放得下、左右留邊 */
  .p-kv-copyText.sp { padding: 0 5vw; font-size: 11.2vw !important; }
}
/* 3A 窗格撐滿關於我們的大照片框(原站這格是 absolute,高度要自己給) */
.ct-about .p-recipes-imageWrap { top: 0; right: 0; bottom: 0; left: 0; height: auto !important; }

/* ══ 11-12 Eric 熱鍵標註第一屏 5 處(標註/20261112-170514)══════════════════════════════ */
/* ② 全站文字思源黑體(Noto Sans TC):原站的明朝、游ゴシック、Crimson、英文 Inter 一律換掉 */
:root { --serif: "Noto Sans TC", sans-serif; --sans: "Noto Sans TC", sans-serif; --ctp-head: "Noto Sans TC", sans-serif; --ctp-num: "Noto Sans TC", sans-serif; }
html body, html body *:not(svg):not(path) { font-family: "Noto Sans TC", sans-serif !important; }
.p-kv-copyText { font-weight: 300; letter-spacing: .16em; }
.c-sectionTitle-title, .c-screenLink-catch, .p-pickup-title, .c-circleArrowLink-text .main, .c-circleArrowLink-text .sub { font-weight: 500; }
.navLink-text { font-weight: 400; letter-spacing: .12em; }

/* ③ 頁首矮一點:原站桌機 5.75rem(1440 寬 83px)→ 4rem(58px),下拉選單、底色跟著 */
@media only screen and (min-width: 751px) {
  .c-header, .c-header-bg { height: 4rem; }
  .c-header-mainNav { top: calc(4rem + 1px) !important; }
  .c-header .subNav-content { top: 4rem; }
  .c-header-title .ct-logo { height: 2.46rem; }   /* 11-14 V14 原 1.7rem × 1.445:桌機 ChengTai 字大小不變 */
}

/* ① 白色文字 logo(在影片上);捲到淺色區塊頁首變深色時,字跟著選單變深 */
.c-header .ct-logo { color: #fff; }
.c-header.-current .ct-logo { color: #EA2326; }   /* 11-14 V14:白底頁首 logo 字 = 客戶現行版(2025 ChengTai.ai、舊站)的紅字,i 點黃照舊;Eric:「改紅字」(原本對標咖啡 → 一度改黑) */
@media (min-width: 751px) { .c-header.-open .ct-logo, .c-header.-dark .ct-logo { color: #EA2326; } }   /* 桌機下拉打開(-open)時頁首變白底,logo 原本還是白的 → 一起變黑;手機 -open 是全螢幕墨黑選單,不動 */

/* ④ 搜尋、詢價單重做:不要白色實心膠囊和紅色數字,改成跟影片底搭的細框玻璃,同一個高度 */
.c-header-sub { gap: .8rem; }
.ct-hd-search, .c-header .c-header-online { height: 2.4rem !important; min-height: 34px; border: 1px solid rgba(255, 255, 255, .45) !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .4s, border-color .4s, color .4s !important; }
.ct-hd-search { width: 2.4rem; min-width: 34px; margin-right: 0; padding: 0; border-radius: 50%; }
.ct-hd-search .ct-i { width: 1.15rem; height: 1.15rem; min-width: 16px; min-height: 16px; }
.c-header .c-header-online { width: auto !important; gap: .6rem !important; padding: 0 .5rem 0 1.1rem; border-radius: 999px !important; font-size: max(.85rem, 13px) !important; font-weight: 400; letter-spacing: .14em; }
.c-header .c-header-online .ct-i { width: 1rem; height: 1rem; min-width: 14px; min-height: 14px; }
.c-header .ct-inq-n { min-width: 1.6rem; height: 1.6rem; margin-left: .2rem; padding: 0 .4rem; border-radius: 50%; background: none; border: 1px solid rgba(255, 255, 255, .45); color: inherit; font-size: max(.75rem, 11px); font-weight: 400; letter-spacing: 0; }
.ct-hd-search:hover, .c-header .c-header-online:hover { background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .8) !important; color: #fff !important; }
.c-header.-current .ct-hd-search, .c-header.-current .c-header-online { border-color: var(--ct-rule-c, #ccc) !important; background: rgba(255, 255, 255, .5) !important; color: #000 !important; }
.c-header.-current .ct-inq-n { border-color: var(--ct-rule-c, #ccc); }
.c-header.-current .ct-hd-search:hover, .c-header.-current .c-header-online:hover { background: #f3f3f3 !important; border-color: #000 !important; color: #000 !important; }
@media (min-width: 751px) {   /* 桌機下拉打開(-open)頁首變白底:搜尋、線上詢價跟往下捲一樣(原本白框白字壓在白底上看不到) */
  .c-header.-open .ct-hd-search, .c-header.-open .c-header-online { border-color: var(--ct-rule-c, #ccc) !important; background: rgba(255, 255, 255, .5) !important; color: #000 !important; }
  .c-header.-open .ct-inq-n { border-color: var(--ct-rule-c, #ccc); }
  .c-header.-open .ct-hd-search:hover, .c-header.-open .c-header-online:hover { background: #f3f3f3 !important; border-color: #000 !important; color: #000 !important; }
}

/* ⑤ 右側承泰食堂、承泰小教室重做:不要咖啡色、紅色實心直條,改成深色毛玻璃直式膠囊,兩顆一樣;
   下面 FB / IG / LINE 三顆圓鈕順手換成同一套(我加的,讓整排是同一家族) */
.ct-side { gap: .6rem; }
.ct-side__btn, .ct-side__btn:nth-child(2) { width: 2.9rem; min-width: 42px; padding: 1rem 0 1.1rem; gap: .7rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(22, 22, 21, .42); color: #fff; font-size: max(.82rem, 12px); font-weight: 400; letter-spacing: .24em; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transition: background-color .4s, border-color .4s, transform .5s cubic-bezier(.19, 1, .22, 1); }
.ct-side__btn .ct-i { width: 1.1rem; height: 1.1rem; min-width: 16px; min-height: 16px; }
.ct-side__btn:hover, .ct-side__btn:nth-child(2):hover { background: rgba(22, 22, 21, .7); border-color: rgba(255, 255, 255, .5); transform: translateX(-3px); }
.ct-side__soc { gap: .5rem; margin-top: .2rem; }
.ct-side__a { width: 2.9rem; height: 2.9rem; min-width: 42px; min-height: 42px; margin-right: 0; border: 1px solid rgba(255, 255, 255, .22); background: rgba(22, 22, 21, .42); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.ct-side__a:hover { background: rgba(22, 22, 21, .7); border-color: rgba(255, 255, 255, .5); }
.ct-side__a .ct-i { width: 1.05rem; height: 1.05rem; min-width: 16px; min-height: 16px; }
/* 搜尋圓鈕和詢價單同一個高度、右側直式膠囊和社群圓鈕同一個寬度(框線算在裡面) */
.ct-hd-search, .c-header .c-header-online, .ct-side__btn, .ct-side__a { box-sizing: border-box; }

/* ══ 11-12 Eric 熱鍵標註第二輪 4 處(標註/20261112-171443)══════════════════════════════ */
/* ① 浮水印:洗碗機、炒菜鍋兩支首屏影片右上角壓了承泰 logo(客戶 Drive 兩個資料夾都只有這版),
   影片檔直接裁掉頂端 18% 重新輸出(assets/ct/video/hero-*-有浮水印.mp4 是原檔),樣式不用改 */
/* ② 詢價數字外圈改正圓:寬高一樣、框線算在裡面 */
.c-header .ct-inq-n { box-sizing: border-box; flex: none; display: inline-grid; place-items: center; width: 1.6rem; min-width: 24px; height: 1.6rem; min-height: 24px; padding: 0; border-radius: 50%; line-height: 1; }
/* ③ 右側兩顆:圖示放在文字上方(原本整顆直排,圖示被排到文字右邊) */
.ct-side__btn, .ct-side__btn:nth-child(2) { writing-mode: horizontal-tb; flex-direction: column; justify-content: flex-start; }
.ct-side__btn span { writing-mode: vertical-rl; }
/* ④ 頁首底線:11-12 第四輪 Eric「改回來貫穿螢幕的線」→ 照原站整條跨螢幕(第二輪加的左右留邊已拿掉);頁首最矮 56px 留著 */
@media only screen and (min-width: 751px) {
  .c-header, .c-header-bg { height: max(4rem, 56px); }
  .c-header-mainNav { top: calc(max(4rem, 56px) + 1px) !important; }
  .c-header .subNav-content { top: max(4rem, 56px); }
}

/* ══ 11-12 Eric 熱鍵第三輪(標註/20261112-171707):首屏大字出場不要白色底線,只做一般的遮罩上滑 ═══════════
   原站程式:字從遮罩下方升上來(2.8 秒)+ 同時淡入 + 一條白線畫出再淡掉 → 白線藏掉;淡入拿掉(字被推到遮罩下方那一刻起就不透明,
   ct.js 偵測到動畫開始才加 ct-kv-go,避免動畫前字先露出來) */
.p-kv-line { display: none !important; }
html.ct-kv-go [data-top-kv-text] { opacity: 1 !important; }
.p-kv-copyTextInner { padding-bottom: .06em; }

/* ══ 11-12 Eric 熱鍵第五輪(標註/20261112-172333):首屏下面那層 = 白色大字鏤空(照 V1 秋谷那版)══════════════
   影片固定在後面,這片白板(斜的白色上緣 + CHENG / TAI / logo / EST. 2003 鏤空)往上蓋過來,影片從字裡透出來;
   白板底色跟下一段(服務項目)同一個白,接起來沒有縫。原本的三行描述拿掉(Eric:「不用這個文字刪掉」)。 */
:root { --ct-cut-bg: #fff; }
/* 11-15 V21 首屏改字母遮罩(ct-mk.css),白板 .ct-cut 的樣式收掉;--ct-cut-bg 遮罩的白牆還在用 */
/* 捲動時原站會把影片越壓越暗(最多 80%),字裡透出來的影片要亮 → 不壓 */
.p-kv-movieBg { opacity: 0 !important; }
/* 頁首換深色的量尺(原站程式讀 [data-kv] 的高度當門檻) */
.p-kv { position: relative; }
.ct-kv-mark { position: absolute; top: 0; left: 0; width: 1px; height: calc(100vh - max(4rem, 56px)); visibility: hidden; pointer-events: none; }
@media only screen and (max-width: 750px) { .ct-kv-mark { height: calc(100vh - 4.0625rem); } }

/* ══ 11-12 Eric 熱鍵第六輪(標註/20261112-180445):白板鏤空字改成 logo 字形 ══════════════════════════════
   「直接用 logo 文字 svg 當做遮罩,一樣拆成兩行;放 logo icon 的地方拿掉留白;est 2003 換成 inter tight bold 把字距靠緊」。
   字形和排法都在配方(build.py 的 cut_svg + ../tools/ctcut.py),全部轉外框,這裡不用加樣式:
   Cheng / Tai = logo 向量字母同倍率(Cheng 寬 = 版心);EST. / 2003 = Inter Tight Bold 外框,字距 -0.04em,
   EST. 頂對 T 頂、2003 底對 Tai 基線,右緣跟 g 同一條線;Tai 和 EST. 中間原本放 logo 圖形的地方留白。白板畫布 1440×877(原 930)。 */

/* ══ 11-12 Eric 熱鍵第七輪(標註/20261112-185032):EST. 2003「這塊縮小三分之一」══════════════════════
   配方旋鈕 build.py CUT_EST_SCALE = 2/3(手機一起);右緣對 g、2003 底對 Tai 基線不動,頂端不再對 T 頂。這裡不用加樣式。 */

/* ══ 11-12 Eric 熱鍵第八輪(標註/20261112-185104):白板頂邊「改直線」══════════════════════════════
   原本的邊已經是直的斜線(跟直線差不到 1px),所以改成水平,位置在原本斜線的平均高度。改在 build.py 的 CURVE,這裡不用加樣式。 */

/* ══ 11-12 Eric 熱鍵第九輪(標註/20261112-185212):首屏大字「承泰商業 斷行 變粗體 引號拿掉 等於這塊變兩行」══════
   配方 build.py 把桌機那一行拆成兩個遮罩(跟手機同結構),第二行「承泰商業」加 ct-kv-strong。 */
.ct-kv-strong .p-kv-text, .ct-kv-strong .char { font-weight: 700; }   /* .p-kv-text 自己有字重,要寫到它這層 */
/* 兩行之間:原本一行沒有行距,拆兩行後字框幾乎貼著(只差 .06em)→ 第二行往下 .24em,行距合計 1.3 倍字高 */
.p-kv-copyText.pc .ct-kv-strong { margin-top: .24em; }
/* 置中(我加的,同一塊):原站把大字區塊高度寫死一行(4.375rem)、左邊放 51.7%(手機 53.5%),
   拆兩行後整塊往下掉、而且比畫面中心偏右(1645 寬偏 23px、手機偏 12px)→ 高度跟著內容、左右正中,最後一個字後面的字距拿掉 */
.p-kv-copy { left: 50% !important; }
@media only screen and (min-width: 751px) { .p-kv-copy { height: auto !important; } }
.p-kv-text .char:last-child { letter-spacing: 0 !important; }

/* ══ 11-12 Eric 熱鍵第十輪(標註/20261112-185606):首屏大字兩行「行距太擠 拉開」══════════════════════
   第九輪兩行之間空 .3em(行距 1.3 倍)→ 空 .6em(行距 1.6 倍) */
.p-kv-copyText.pc .ct-kv-strong { margin-top: .54em; }
.p-kv-copyText.sp .ct-kv-strong { margin-top: .38em; }   /* 手機原本行距 1.05 倍,一起拉到 1.6 倍(手機每行字框本來就高 1.16 倍,所以數字不同) */

/* ══ 11-12 Eric 熱鍵第十一輪(標註/20261112-185758):右側浮動鈕「改紅色底」══════════════════════
   框住整排(承泰食堂、承泰小教室、FB、IG、LINE)→ 五顆都換品牌紅實心、白字白圖示;滑過深一階。框線同色,大小不變 */
.ct-side__btn, .ct-side__btn:nth-child(2), .ct-side__a { background: var(--ct-red, #EA2326); border-color: var(--ct-red, #EA2326); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ct-side__btn:hover, .ct-side__btn:nth-child(2):hover, .ct-side__a:hover { background: #c41a1d; border-color: #c41a1d; }

/* ══ 11-12 Eric 熱鍵第十三輪 3 處(標註/20261112-190113)══════════════════════════════ */
/* ① 「滑過banner後 改紅色底白字」:捲過首屏(頁首 -current)詢價單改品牌紅實心、白字,數字小圓改白框;滑過深一階 */
.c-header.-current .c-header-online { border-color: var(--ct-red, #EA2326) !important; background: var(--ct-red, #EA2326) !important; color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-header.-current .c-header-online .ct-inq-n { border-color: rgba(255, 255, 255, .6); color: #fff; }
.c-header.-current .c-header-online:hover { border-color: #c41a1d !important; background: #c41a1d !important; color: #fff !important; }
/* ② 「細線取消」:捲過首屏後頁首底下那條細線拿掉(疊在首屏影片上的那條照第四輪留著;選單打開時原站的線也留著) */
.c-header.-current:not(.-open), .c-header.-dark:not(.-open) { border-bottom-color: transparent; }
/* ③ 「改成單純icon 不要圓圈」:搜尋鈕拿掉圓框和毛玻璃,只留放大鏡(點的範圍照舊 2.4rem);滑過淡一點 */
.ct-hd-search, .c-header.-current .ct-hd-search, .ct-hd-search:hover, .c-header.-current .ct-hd-search:hover { border-color: transparent !important; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ct-hd-search .ct-i { width: 1.3rem; height: 1.3rem; transition: opacity .3s; }
.ct-hd-search:hover .ct-i { opacity: .6; }

/* ══ 11-12 Eric 熱鍵第十四輪 2 處(標註/20261112-190209)══════════════════════════════ */
/* ① 右側兩顆膠囊「icon和文字加粗 看不清楚」:字 400 → 700、圖示線 1.5 → 2.2 */
.ct-side__btn, .ct-side__btn:nth-child(2) { font-weight: 700; }
.ct-side__btn .ct-i { stroke-width: 2.2; }
/* ② 社群三顆「維持玻璃樣式」:第十一輪一起改紅的收回,照第一輪深色毛玻璃(紅底只留承泰食堂、小教室兩顆) */
.ct-side__a { border-color: rgba(255, 255, 255, .22); background: rgba(22, 22, 21, .42); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.ct-side__a:hover { border-color: rgba(255, 255, 255, .5); background: rgba(22, 22, 21, .7); }

/* ══ 11-12 第十五輪(標註/20261112-190309):做過 MaoKing 字母歸位遮罩比較版,Eric「留現在這版」→ 比較版的樣式已拿掉 ══ */

/* ══ 11-12 Eric 熱鍵第十六輪(標註/20261112-190848)══════════════════════════════
   「這個改成logo的黃色看看 變成一紅一黃 注意文字如果白色不明顯 改成黑灰色 另外這兩個按鈕的文字還是太細 在加重 icon粗細倒是可以了」
   → 承泰小教室改 logo 黃 #F0C42D,黃底白字對比太低(約 1.6:1)→ 字和圖示改深灰 #2a2522;兩顆字 700 → 900(build.py 多載思源黑體 900);圖示線 2.2 不動 */
.ct-side__btn:nth-child(2) { border-color: #F0C42D; background: #F0C42D; color: #161615; }
.ct-side__btn:nth-child(2):hover { border-color: #ddb01a; background: #ddb01a; color: #161615; }
.ct-side__btn, .ct-side__btn:nth-child(2) { font-weight: 900; }
/* 字重要寫到文字那層:原站重置樣式把 span 一律定成 300,不會從按鈕繼承(第十四輪的 700 其實沒套到字上) */
.ct-side__btn span { font-weight: 900; }

/* 11-12 Eric:「承泰小教室改成白字看看 我看有沒有清楚」→ 黃底上字和圖示改白(對比約 1.66,深灰是 9.1;不清楚就改回 #2a2522) */
.ct-side__btn:nth-child(2), .ct-side__btn:nth-child(2):hover { color: #fff; }

/* 11-12 Eric:「留白字 把黃色調深一點」「文字現在有點太粗了」
   → 小教室黃 #F0C42D 調深一階 #DFB010(同色相,亮度 56% → 47%;白字對比 1.66 → 2.02),滑過再深一階;兩顆字 900 → 700(寫在 span 上) */
.ct-side__btn:nth-child(2) { border-color: #DFB010; background: #DFB010; color: #fff; }
.ct-side__btn:nth-child(2):hover { border-color: #C59B0E; background: #C59B0E; color: #fff; }
.ct-side__btn span { font-weight: 700; }

/* ══ 11-12 Eric 熱鍵(標註/20261112-194346):「這兩個在hero區塊的時候 是玻璃樣式」══════════════════
   承泰食堂、小教室:首屏(頁首還沒換深色)= 跟社群三顆同一套深色毛玻璃;捲過首屏(頁首 -current)才變紅、黃。顏色漸變 .4s */
.ct-side__btn { transition: background-color .4s, border-color .4s, color .4s, transform .3s; }
body:not(:has(.c-header.-current)) .ct-side__btn,
body:not(:has(.c-header.-current)) .ct-side__btn:nth-child(2) { border-color: rgba(255, 255, 255, .22); background: rgba(22, 22, 21, .42); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
body:not(:has(.c-header.-current)) .ct-side__btn:hover,
body:not(:has(.c-header.-current)) .ct-side__btn:nth-child(2):hover { border-color: rgba(255, 255, 255, .5); background: rgba(22, 22, 21, .7); }

/* ══ 11-13 Eric「整個網頁內容左右 padding」→「統一成一組」══════════════════════════════
   原本混了好幾組(1440 寬量):頁首頁尾 45(3.125rem)、沙色框 58 / 框內 130、服務項目 69、產品長條字 86(6rem)、
   各區大標與最新消息 158(11rem);手機 18 / 47 / 66 / 20 / 23 混著。
   全站改讀同一個 --ct-x:桌機 5vw、最少 72px(1024 = 72、1440 = 72、1920 = 96);手機 1.25rem(375 寬 = 18)。
   選 72 不選頁首原本的 45:右側固定的承泰食堂、小教室膠囊占到離螢幕右邊 58px,45 會讓內容右緣鑽到膠囊底下。
   照片出血的(首屏影片、關於我們大照片、產品長條、食堂斜流)照舊貼螢幕邊;沙色框外緣對齊版邊,框裡照舊內縮。
   服務項目那塊的寫在 ct-sv.css。 */
:root { --ct-x: max(8vw, 96px); --ct-hx: 3.125rem; --ctp-side: var(--ct-x); }   /* 11-13 V10 Eric「padding改8% header不用改左右padding」:
   內容版邊 7vw → 8vw(最少照舊 96;1440 = 115、1645 = 132、1920 = 154);頁首(含大下拉)另讀 --ct-hx,Eric 選「回原站 45」= 原站的 3.125rem(1rem = 1vw:1024 = 32、1440 = 45、1920 = 60;手機原站 1.25rem = 18),拉桿不動它。
   以下是 V8 的紀錄。11-13 V8 Eric「整個頁面左右padding值要增加 主要是右側有按鈕 看起來有點擠」:
   5vw / 最少 72 → 7vw / 最少 96(1440 = 101、1645 = 115、1920 = 134;右側浮動鈕離螢幕右邊 16、寬約 2.9vw,內容到鈕的空隙 14–24 → 43–62)。
   細調用 tune-x.html 的拉桿(build.py 產),調好的數字寫回這行 */
@media (max-width: 750px) { :root { --ct-x: 1.25rem; --ct-hx: 1.25rem; } }
.c-header-inner { padding-left: var(--ct-hx); padding-right: var(--ct-hx); }
.ct-figs, .ct-lineup { width: calc(100% - var(--ct-x) * 2); }
.ct-of .ct-of__grid { max-width: none; }          /* 原本最寬 1680 置中,2560 寬時字會離開版邊 */
.ct-hs .ct-hs__rack { max-width: 100%; }          /* 碗籃照片原本比欄寬,右緣凸出版邊 28px */
@media (min-width: 751px) {
  .c-header-mainNav { padding-left: var(--ct-hx); padding-right: var(--ct-hx); }
  #top .p-kv .c-scrollDown { right: var(--ct-x); }
  #top .p-recipes-title { width: calc(100% - var(--ct-x) * 2); }
  /* 關於我們:大照片照舊從螢幕左邊出血;右邊文字欄寬度不變、右緣停在版邊,照片讓出那一點寬(1440 寬少 21px) */
  #top .p-recipes-image { flex: none; width: calc(100% - 25.9375rem - 4.0625rem - var(--ct-x)); }
  #top .p-support-title { padding-left: var(--ct-x); }
  #top .p-promise-title { width: calc(100% - var(--ct-x) * 2); margin-left: var(--ct-x); }
  #top .p-news-inner { width: calc(100% - var(--ct-x) * 2); margin-left: var(--ct-x); margin-right: var(--ct-x); }
  .c-screenLink-linkInner { padding-inline: var(--ct-x); }
  .ct-prod .c-screenLink-content { left: var(--ct-x); }
  .c-footer-head { padding-left: var(--ct-x); }
  .c-footer-content { padding-right: var(--ct-x); }
}
#top .p-support-title { padding-right: var(--ct-x); }   /* 產品分類標題底下那段說明,手機原本右邊只剩 8px */
@media (max-width: 750px) {
  #top .p-recipes-image { width: calc(100% - var(--ct-x)); }   /* 手機照片左邊出血、右緣原本停在 9px,改停版邊 */
  #top .p-recipes-description { width: calc(100% - var(--ct-x) * 2); }
  #top .p-promise-title { width: calc(100% - var(--ct-x) * 2); }
  .c-footer-categoryDescInner .linksItem-link { padding-left: var(--ct-x); }   /* 原站 1.1875rem(17px),差 1px 併回 */
  .ct-mnav-sub { padding: 0 var(--ct-x); }   /* 手機全屏選單:大項在版邊,底下的小項(公司介紹、萬能蒸烤箱…)原本貼螢幕左邊 */
  .c-footer-categoryDescInner .ct-ftel, .c-footer-categoryDescInner .ct-fsoc { padding-left: var(--ct-x); padding-right: var(--ct-x); }   /* 手機頁尾客服電話、社群原本貼螢幕左邊 */
  .c-screenLink-linkInner { padding-left: var(--ct-x); padding-right: var(--ct-x); }
  .ct-prod .c-screenLink-content { left: var(--ct-x); right: var(--ct-x); }
  .p-kv-copyText.sp { padding: 0 var(--ct-x); }
}

/* ══ 11-13 Eric(標註/20261113-032320)「全站的灰色線 都以表格分隔線數值為主」══════════════════════════════
   表格 = 服務項目清單的分隔線:1px、#ccc、用框線畫。全站白底上的灰線都改讀這一組;原站關於我們連結底線、產品「看全部」連結底線、
   最新消息每則上下線原本是 1px 底色塊(rgba(0,0,0,.2),白底上同色),一起改成框線畫,粗細才會跟清單一樣;
   線上那段深色短線(滑過會拉長)也改框線,才跟灰線疊在同一排像素。深色底上的淡線(產品長條、頁尾、手機選單)不在這次範圍。 */
:root { --ct-rule-c: #ccc; --ct-rule: 1px solid var(--ct-rule-c); }
#top .p-news-list::before, #top .p-news-list > article > a::before,   /* 原站每則的線寫在 article > a 上,權重要一樣 */
#top .p-recipes .c-circleArrowLink::before, #top .p-news .c-circleArrowLink::before, .ct-prodmore .c-circleArrowLink::before { height: 0; background: none; border-top: var(--ct-rule); }
#top .p-news-list::after, #top .p-news-list > article > a::after,
#top .p-recipes .c-circleArrowLink::after, #top .p-news .c-circleArrowLink::after, .ct-prodmore .c-circleArrowLink::after { height: 0; background: none; border-top: 1px solid #000; }
#top .p-recipes .c-circleArrowLink.-link .c-circleArrow, #top .p-news .c-circleArrowLink.-link .c-circleArrow, .ct-prodmore .c-circleArrowLink.-link .c-circleArrow { border-color: var(--ct-rule-c); }

/* ══ 11-13 V8 Eric「每個區塊的英文小標加中文大標怎麼排 統一用現在的服務項目的排法 英文小標用紅色」══════════════
   排法 = 服務項目(V2-B タニカ清單那塊):英文小標在上(字重 500、字距 .12em)、中文大標在下(字重 700、行高 1)、靠左疊兩行,
   原站「-line」英文中文排同一行、「-block」中間空一段的兩種排法都拿掉。
   單位跟服務項目同一套(--ctp-rem):--ct-shr = 螢幕寬 / 144(1440 = 10px、1645 = 11.4px),手機 ≤767 = 螢幕寬 / 37.5(375 = 10px)。
   英文 1.4、中文 3.6、中文頂離英文頂 2.6;手機 1.1 / 2.6 / 2。英文小標一律品牌紅(深色底的產品分類也是);
   中文大標顏色照各區原本(淺底 #46413c、深底 #FAF7F5)。 */
:root { --ct-shr: calc(100vw / 144); }
@media (max-width: 767px) { :root { --ct-shr: calc(100vw / 37.5); } }
#top .c-sectionTitle.c-sectionTitle { display: block; position: relative; padding-top: calc(2.6 * var(--ct-shr)); }
#top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { position: absolute; top: 0; left: 0; width: auto; margin: 0; white-space: nowrap; text-align: left;
  font-style: normal; font-size: max(calc(1.4 * var(--ct-shr)), 10px); font-weight: 500; letter-spacing: .12em; line-height: 1.28571em; color: var(--ct-red, #EA2326); }
#top .c-sectionTitle.c-sectionTitle .c-sectionTitle-title { margin: 0; font-size: max(calc(3.6 * var(--ct-shr)), 10px); font-weight: 700; letter-spacing: 0; line-height: 1; }
@media (max-width: 767px) {
  #top .c-sectionTitle.c-sectionTitle { padding-top: calc(2 * var(--ct-shr)); }
  #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { font-size: max(calc(1.1 * var(--ct-shr)), 10px); line-height: 1.27273em; }
  #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-title { font-size: max(calc(2.6 * var(--ct-shr)), 10px); }
}
/* 我加的:平板(768–1023 寬)單位太小,中文大標只剩 19–26px、跟底下「優良機器品質」那句(18px)差不多大 → 加下限:
   英文 12px、中文 28px、中文頂離英文頂 22px;1440 以上算出來都比下限大,不受影響。服務項目那塊同一組下限寫在 ct-sv.css 最後 */
@media (min-width: 768px) {
  #top .c-sectionTitle.c-sectionTitle { padding-top: max(calc(2.6 * var(--ct-shr)), 22px); }
  #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { font-size: max(calc(1.4 * var(--ct-shr)), 12px); }
  #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-title { font-size: max(calc(3.6 * var(--ct-shr)), 28px); }
}
/* 我加的:手機產品分類那塊,原站 p-support-title 是橫排 flex,標題、「優良機器品質」、說明三段擠成一排(標題被擠成 57px 寬折兩行),改上下疊 */
@media (max-width: 750px) { #top .p-support-title { flex-direction: column; align-items: flex-start; justify-content: flex-end; } }

/* ══ 11-13 V8 英文小標字體 ══════════════════════════════════════════════════════════════════════
   先換過 Genos(舊站英文字,logo 的 ChengTai 也是它改的)→ Eric「全站小標改回inter tight 我覺得Genos不好看」→ Inter Tight 500
   (白板 EST. 2003 同一套字,那邊是 Bold 轉外框)。只管英文小標(SERVICE、ABOUT、PRODUCT、RECIPE、NEWS),全站其他字照舊思源黑體。
   Inter Tight 大寫字高 .7275(思源 .733)幾乎一樣 → 字級、字距照原本;行高 1.43em(手機 1.6em,量過字底)讓字底停在原本思源黑體的位置,中文大標不動。
   服務項目的 SERVICE 同一組,寫在 ct-sv.css 最後。 */
:root { --ct-en: "Inter Tight", "Noto Sans TC", sans-serif; }
#top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { font-family: var(--ct-en) !important; line-height: 1.43em; }
@media (max-width: 767px) { #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { line-height: 1.6em; } }

/* ══ 11-13 V8 關於我們重做(section.ct-ab,build.py「關於我們(11-13 V8 重做)」)══════════════════════════════════
   Eric:「about區塊一樣白底 和service區塊用分隔線做區隔 排版是類似第一張圖 一樣左文右台灣圖 下方接圖片跑馬燈牆 先做看看這樣
   但是設計系統要改成跟service區塊一樣 按鈕你設計一款但是要用膠囊按鈕」
   設計系統照服務項目:單位 --ct-shr(螢幕寬/144、手機/37.5)、標題同一套、灰線 --ct-rule、版邊 --ct-x、黑字、照片圓角 12。
   字級:公司名 2.2(= 服務項目每列字,700)、內文 1.6(1440 = 16)、數字 4.8(英文 Inter Tight)/ 北中南 3.86(中文字身跟數字一樣高,量過)、小字 1.4。
   間距:組內 2(公司名 → 內文)、組間 4.8(標題 → 公司名、內文 → 灰線 → 數字 → 按鈕),組間是組內的 2.4 倍。
   區塊之間的留白 --ct-gap = 螢幕寬/12(1440 = 120、1645 = 137、1920 = 160),= 服務項目上方那條灰線上下的距離;
   服務項目最下面那條線 → 這塊上方灰線 → ABOUT 字頂,兩段一樣 = --ct-gap(ABOUT 字頂在標籤框下 .35 倍字級)。 */
:root { --ct-gap: calc(100vw / 12); }
@media (max-width: 750px) { :root { --ct-gap: calc(100vw * .152); } }   /* 375 = 57,同服務項目手機那條線 */
#top .ct-ab { --ct-ab-c: calc(.357 * max(calc(1.4 * var(--ct-shr)), 12px)); }   /* 英文小標框頂到大寫字頂(Inter Tight 量的) */
@media (max-width: 767px) { #top .ct-ab { --ct-ab-c: calc(.357 * max(calc(1.1 * var(--ct-shr)), 10px)); } }
#top .ct-ab { position: relative; z-index: 1; background: #fff; color: #000; padding: var(--ct-gap) 0; }
#top .ct-ab__in { display: grid; grid-template-columns: minmax(0, max(calc(58 * var(--ct-shr)), 360px)) 1fr; column-gap: calc(4.8 * var(--ct-shr));
  margin: 0 var(--ct-x); border-top: var(--ct-rule); padding-top: calc(var(--ct-gap) - var(--ct-ab-c) - 1px); }   /* 扣掉線本身 1px */
#top .ct-ab__sub { margin: calc(4.8 * var(--ct-shr)) 0 0; font-size: max(calc(2.2 * var(--ct-shr)), 20px); font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
#top .ct-ab__lead { max-width: 38em; margin: calc(2 * var(--ct-shr)) 0 0; font-size: max(calc(1.6 * var(--ct-shr)), 16px); font-weight: 400; line-height: 2; letter-spacing: .06em; color: rgba(0, 0, 0, .78); }
#top .ct-ab__figs { margin-top: calc(4.8 * var(--ct-shr)); padding-top: calc(4.8 * var(--ct-shr)); border-top: var(--ct-rule); }
#top .ct-ab .ct-nums { gap: calc(5.6 * var(--ct-shr)); align-items: flex-end; }
#top .ct-ab .ct-nums__item { gap: calc(1 * var(--ct-shr)); }
#top .ct-ab .ct-nums__val:not(.ct-nums__val--zh), #top .ct-ab .ct-nums__val:not(.ct-nums__val--zh) * {
  font-family: var(--ct-en) !important; font-size: max(calc(4.8 * var(--ct-shr)), 40px); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
#top .ct-ab .ct-nums__val--zh, #top .ct-ab .ct-nums__val--zh span { font-size: max(calc(3.86 * var(--ct-shr)), 33px); font-weight: 700; line-height: 1; letter-spacing: 0; }
#top .ct-ab .ct-nums__val--zh { position: relative; top: -.175em; }   /* 中文字身比數字低約 .175em(1645 寬 7px),往上提讓三組字的上下緣對齊 */
#top .ct-ab .ct-nums__label { font-size: max(calc(1.4 * var(--ct-shr)), 12px); font-weight: 500; letter-spacing: .12em; opacity: 1; color: rgba(0, 0, 0, .55); }
/* 膠囊鈕:灰框(同服務項目每列尾巴的圓圈)、英文同小標字(Inter Tight),滑過整顆品牌紅實心白字、箭頭往右推一點;
   左右內距 = 高的一半,字和箭頭停在兩端半圓接直線的地方 */
#top .ct-pill { --h: max(calc(4.4 * var(--ct-shr)), 44px); display: inline-flex; align-items: center; gap: calc(1.2 * var(--ct-shr)); box-sizing: border-box;
  height: var(--h); margin-top: calc(4.8 * var(--ct-shr)); padding: 0 calc(var(--h) / 2); border: var(--ct-rule); border-radius: 999px; color: #000;
  text-decoration: none; transition: background-color .3s, border-color .3s, color .3s; }
#top .ct-pill span { font-family: var(--ct-en) !important; font-size: max(calc(1.4 * var(--ct-shr)), 12px); font-weight: 500; line-height: 1; letter-spacing: .12em; }
#top .ct-pill .ct-i { width: 18px; height: 18px; transition: transform .4s var(--ct-ease, ease); }
#top .ct-pill:hover, #top .ct-pill:focus-visible { background: var(--ct-red, #EA2326); border-color: var(--ct-red, #EA2326); color: #fff; }
/* 11-13 V10 Eric「more按鈕改成紅色的 hover變深」:五顆 MORE(深色底那兩顆也是)平常就品牌紅實心白字,滑過深一階 #c41a1d(= 右側浮動鈕、頁首詢價鈕滑過的同一個深紅),箭頭照舊往右推 */
#top .ct-pill, #top .ct-pill--w { background: var(--ct-red, #EA2326); border-color: var(--ct-red, #EA2326); color: #fff; }
#top .ct-pill:hover, #top .ct-pill:focus-visible, #top .ct-pill--w:hover, #top .ct-pill--w:focus-visible { background: #c41a1d; border-color: #c41a1d; color: #fff; }
#top .ct-pill:hover .ct-i, #top .ct-pill:focus-visible .ct-i { transform: translateX(4px); }
/* 台灣地圖:右欄,高 = 左欄整欄(ABOUT 到按鈕),寬照地圖比例;標籤(台北辦公室…)在點的右邊,整組右緣停在版邊 */
#top .ct-ab__map { display: flex; justify-content: flex-end; min-height: 0; padding-right: var(--ct-ab-lab, 0px); }
@media (min-width: 1024px) { #top .ct-ab__map { height: 0; min-height: 100%; } }   /* 11-14 V18:地圖欄不撐高這一列,列高 = 文字欄(MORE 底)→ 照片牆的距離在每種寬度都量得準(1024 寬原本地圖比字高 4.4px) */
/* 地圖外框上下各留白 14(viewBox),陸地墨 = 377.9 → 框高 = (欄高 − 字頂距) × 405.9 / 377.9,再往上推,陸地頂 = ABOUT 字頂、陸地底 = 按鈕底 */
#top .ct-ab__map .ct-map { width: auto; max-width: none; height: calc((100% - var(--ct-ab-c)) * 1.07409); aspect-ratio: 228 / 405.9;
  transform: translateY(calc(var(--ct-ab-c) - 3.4491%)); color: #000; --ct-map-fill: rgba(0, 0, 0, .03); }
#top .ct-ab__map .ct-map__svg { width: 100%; height: 100%; }
#top .ct-ab__map .ct-map__labels { inset: 3.449% 6.14%; }   /* 地圖外框留白 14 / 228、14 / 405.9,照比例放大(原本寫死 14px) */
#top .ct-ab__map .ct-map__label { font-size: max(calc(1.4 * var(--ct-shr)), 12px); color: #000; }
/* 料理照跑馬燈牆:滿版兩排,第二排反方向、慢一點;照片 4:3、圓角 12(同服務項目照片);滑鼠停在上面暫停;系統設「減少動態」就不動 */
#top .ct-abwall { --h: max(calc(100vw * 220 / 1488), 150px); --g: max(calc(100vw * 14 / 1488), 10px);   /* 平板最矮 150(不比手機小) */
  display: flex; flex-direction: column; gap: var(--g);
  margin-top: var(--ct-gap); overflow: hidden; }   /* 11-14 V18 Eric 熱鍵(標註/20261114-222812)「這邊padding跟文字區塊上方padding 值對齊」:MORE 底 → 照片牆頂 = 灰線 → ABOUT 字頂 = --ct-gap(原本 .6 倍) */
#top .ct-abwall__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
#top .ct-abwall__tile { flex: none; height: var(--h); aspect-ratio: 4 / 3; margin-right: var(--g); }   /* 間距寫在每張右邊,兩份一樣長,移一半剛好接上 */
#top .ct-abwall__tile img, #top .ct-abwall__tile video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }   /* video = V17 實拍短片格 */
@keyframes ctAbWall { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  #top .ct-abwall__track { animation: ctAbWall 90s linear infinite; }
  #top .ct-abwall__row--rev .ct-abwall__track { animation-direction: reverse; animation-duration: 110s; animation-delay: -40s; }
  #top .ct-abwall:hover .ct-abwall__track { animation-play-state: paused; }
}
@media (max-width: 1023px) {   /* 平板以下:左欄太窄、地圖會疊到字 → 改上下排(字 → 地圖),地圖靠左 */
  #top .ct-ab__in { grid-template-columns: 1fr; }
  #top .ct-ab__map { justify-content: flex-start; margin-top: calc(var(--ct-gap) * .8); padding-right: 0; }
  #top .ct-ab__map .ct-map { width: min(56vw, 360px); height: auto; transform: none; }
}
@media (max-width: 750px) {
  #top .ct-ab .ct-nums { gap: calc(2.4 * var(--ct-shr)); }
  #top .ct-ab .ct-nums__val:not(.ct-nums__val--zh), #top .ct-ab .ct-nums__val:not(.ct-nums__val--zh) * { font-size: calc(3.6 * var(--ct-shr)); }
  #top .ct-ab .ct-nums__val--zh, #top .ct-ab .ct-nums__val--zh span { font-size: calc(2.9 * var(--ct-shr)); }
  #top .ct-abwall { --h: calc(100vw * 150 / 400); --g: calc(100vw * 14 / 400); }
  #top .ct-abwall__tile img, #top .ct-abwall__tile video { border-radius: 8px; }
}

/* ══ 11-13 V8 Eric「都換成膠囊」:蒸烤箱段、洗碗機段、產品分類最下面、最新消息的 MORE 都換成關於我們那顆 .ct-pill(build.py to_pill)══
   深色底 ct-pill--w:白框(白 35%)白字,滑過一樣品牌紅實心。位置照各段原本的(消息靠右、手機置中;產品置中;洗碗機段手機照舊藏) */
#top .ct-pill--w { border-color: var(--ct-red, #EA2326); color: #fff; }   /* 原本白框(白 35%);11-13 V10 全改紅實心 */
#top .ct-pill--w:hover, #top .ct-pill--w:focus-visible { border-color: #c41a1d; }
#top .ct-prodmore .ct-pill { margin-top: 0; }
@media (max-width: 767px) { #top .ct-hs__more.ct-pill { display: none; } }

/* ══ 11-13 V8 Eric「台灣地圖的黑線改成淺灰 並繞完整個台灣 進場時灰線可以做個快速的svg drawing 繞完整個台灣 黃線部分三點要串連
   可以做一些脈衝或是其他動效 讓三點串連感增加」(只管關於我們這張地圖,ct-common.css 共用的不動)══════════════════════
   原本外框只畫到六成、黃線停在台中下面:共用樣式用「線寬不跟著縮放」(vector-effect),地圖放大 1.6 倍後,畫線動畫的長度算在縮放前,
   只蓋到 1/1.6 → 這張地圖拿掉 vector-effect,線寬改用地圖座標(1645 寬外框約 1.3px、黃線 2px)。
   進場順序:灰外框 1.2 秒繞一圈 → 黃線從台北畫到高雄(0.9 秒),畫到哪個辦公室,那個點、標籤、服務範圍圈就出現在哪 →
   之後光點沿黃線一直從台北跑到高雄(3.2 秒一趟),經過哪個辦公室,那個點就脈衝一下(紅點放大、紅圈往外擴到服務範圍圈)。
   捲出畫面再捲回來整段重播(ct-common.js 的 is-in);系統設「減少動態」只留畫好的樣子,光點和脈衝不跑。 */
#top .ct-ab .ct-map__land { vector-effect: none; stroke: var(--ct-rule-c, #ccc); stroke-width: .8;
  transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1), fill .8s 1s; }
#top .ct-ab .ct-map__route { vector-effect: none; stroke-width: 1.2; stroke-linecap: round; opacity: .7; transition: stroke-dashoffset .9s linear 1.1s; }
#top .ct-ab .ct-map__ring, #top .ct-ab .ct-map__area { vector-effect: none; stroke-width: .7; }
#top .ct-ab .ct-map__dot { transform-box: fill-box; transform-origin: center; }
/* 點、標籤、服務範圍圈:黃線畫到才出現(台北 1.1、台中 1.5、高雄 2.0 秒 = 黃線 0.9 秒裡走到 0 / 43% / 100% 的時間) */
#top .ct-ab .ct-map__pin:nth-of-type(1) { --t: 1.1s; }
#top .ct-ab .ct-map__pin:nth-of-type(2) { --t: 1.49s; }
#top .ct-ab .ct-map__pin:nth-of-type(3) { --t: 2s; }
#top .ct-ab .ct-map.is-in .ct-map__pin { transition: opacity .3s var(--t); }
#top .ct-ab .ct-map.is-in .ct-map__area { transition: transform 1.2s var(--ctp-ease, ease) calc(1.1s + var(--i) * .45s), opacity .5s calc(1.1s + var(--i) * .45s); }
#top .ct-ab .ct-map.is-in .ct-map__label { transition: opacity .5s calc(1.25s + var(--i) * .45s), transform .8s var(--ct-ease, ease) calc(1.25s + var(--i) * .45s); }
/* 11-13 V10 Eric「台灣地圖的那個黃色脈衝 改成長條水滴型 參考力軒首頁的藍色脈衝分隔線」「脈衝改成雙向循環 不要只是單項」:
   原本的黃色短線光點(.ct-map__flow,CSS 跑)拿掉,改成 ct.js 畫的水滴(.ct-map__drop):圓頭往後收成尖尾、從頭到尾平順漸淡(照力軒那條),
   沿黃線台北 → 高雄、再高雄 → 台北來回跑;經過或到達哪個辦公室,那個點就脈衝一下(紅點放大、紅圈往外擴),也由 ct.js 觸發。
   共用樣式那組一直重複的紅圈脈衝(ct-common.css ctPulse)這張不用,免得跟水滴對不上;系統設「減少動態」水滴不出現,只留畫好的地圖。 */
#top .ct-ab .ct-map__drop { stroke: none; pointer-events: none; }
#top .ct-ab .ct-map.is-in .ct-map__ring, #top .ct-ab .ct-map.is-in .ct-map__dot { animation: none; }

/* ══ 11-14 V13 最新消息改設計系統(section.ct-nw,build.py「最新消息(11-14 V13 改設計系統)」;原 p-news 藏著)══════════════
   Eric「把最新消息改成設計系統 另外中文標題似乎不是黑色」。內容照舊站首頁:標題、說明、三則、MORE(V2 加的頁籤拿掉)。
   標題 = 全站 .c-sectionTitle(NEWS 紅、最新消息黑);說明 = 關於我們內文;清單 = 服務項目那套:列跟列之間灰線、第一列上面不畫線、
   最後補收尾線,列尾 44 圓圈細線箭頭(灰框),滑過整列 → 箭頭品牌紅實心;照片 4:3 圓角 12;MORE = .ct-pill(上距同關於我們 4.8 單位)。 */
#top .ct-nw { position: relative; z-index: 1; background: #fff; color: #000; padding: var(--ct-gap) 0; }
#top .ct-nw__in { margin: 0 var(--ct-x); }
#top .ct-nw__lead { max-width: 38em; margin: calc(4.8 * var(--ct-shr) - .19em) 0 0;   /* 標題字底 → 說明字頂 = 關於我們標題 → 公司名(行高 2 的字上面空白比較多,扣 .19em)*/
  font-size: max(calc(1.6 * var(--ct-shr)), 16px); font-weight: 400; line-height: 2;
  letter-spacing: .06em; color: rgba(0, 0, 0, .78); }
#top .ct-nw__list { margin: calc(4.8 * var(--ct-shr)) 0 0; padding: 0; list-style: none; border-bottom: var(--ct-rule); }
#top .ct-nw__list > li + li { border-top: var(--ct-rule); }
/* 11-14 熱鍵(標註/20261114-015932)「差一點點沒有對齊 說明文字對齊圖片」:每列改成照片、文字都靠上(標題折三行時照片原本置中會往下掉),
   文字第一行字墨頂 = 照片頂(分類那行往上提 .309em = 「活動訊息」字墨離行框頂的距離,日期 Inter Tight 是 .322em,取高的那個);箭頭照舊置中 */
#top .ct-nw__row { display: grid; grid-template-columns: max(calc(16 * var(--ct-shr)), 120px) minmax(0, 1fr) 44px; column-gap: calc(3.2 * var(--ct-shr));
  align-items: start; padding: calc(2.4 * var(--ct-shr)) 0; color: inherit; text-decoration: none; }
#top .ct-nw__thumb { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
#top .ct-nw__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ct-ease, ease); }
#top .ct-nw__arw { align-self: center; }
#top .ct-nw__meta { display: flex; align-items: baseline; gap: calc(1.6 * var(--ct-shr)); margin: -.309em 0 0; font-size: max(calc(1.4 * var(--ct-shr)), 12px); font-weight: 500;
  line-height: 1.43; letter-spacing: .12em; color: rgba(0, 0, 0, .55); }
#top .ct-nw__date { font-family: var(--ct-en) !important; }
#top .ct-nw__title { max-width: 40em; margin: calc(1.2 * var(--ct-shr)) 0 0; font-size: max(calc(2.2 * var(--ct-shr)), 17px); font-weight: 700; line-height: 1.6;
  letter-spacing: .08em; color: #000; }   /* 字級、字重、字距同服務項目每列標題 */
#top .ct-nw__arw { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; border: var(--ct-rule); border-radius: 50%; color: #161615;
  transition: background-color .3s, border-color .3s, color .3s; }
#top .ct-nw__arw .ct-i { width: 18px; height: 18px; }
#top .ct-nw__row:hover .ct-nw__arw, #top .ct-nw__row:focus-visible .ct-nw__arw { border-color: var(--ct-red, #EA2326); background: var(--ct-red, #EA2326); color: #fff; }
#top .ct-nw__row:hover .ct-nw__thumb img { transform: scale(1.04); }
@media (max-width: 767px) {
  #top .ct-nw__row { grid-template-columns: 31% minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 0; }
  #top .ct-nw__arw { display: none; }   /* 手機整列可按,箭頭拿掉讓標題有位置 */
  #top .ct-nw__title { margin-top: 6px; font-size: max(calc(1.6 * var(--ct-shr)), 16px); line-height: 1.6; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { #top .ct-nw__thumb img { transition: none; } }

/* ══ 11-14 V13 最新消息左右欄(.ct-nw--2col)═══════════════════════════════════════════════════════════════
   Eric「做一版 最新消息 是左右欄分的 跟服務項目的比例差不多 區塊標題 說明放左欄 more放在左欄最下 表格放右欄」。
   比例照服務項目:左欄 39 單位、欄距 7.5rem(= 7.5vw)、右欄撐到右版邊;清單上緣 = 左欄中文標題字身下緣(同服務項目那個公式);
   MORE 在左欄最下,膠囊底 = 清單收尾線底。同一份 HTML 不加 --2col 就是原本上下排(news-stack.html)。
   右欄比較窄:1024 以上才分左右欄(1024 寬右欄 478,再窄標題一行剩不到 10 個字),平板、手機照上下排。 */
@media (min-width: 1024px) {
  #top .ct-nw--2col .ct-nw__in { display: grid; grid-template-columns: calc(39 * var(--ct-shr)) minmax(0, 1fr); column-gap: 7.5rem;
    grid-template-areas: "ttl list" "lead list" "more list"; grid-template-rows: auto auto 1fr; }
  #top .ct-nw--2col .c-sectionTitle { grid-area: ttl; }
  #top .ct-nw--2col .ct-nw__lead { grid-area: lead;   /* 熱鍵「說明文字對齊圖片」:說明第一行字墨頂 = 右欄第一張照片頂
       = 清單上緣多出標題的 .015 × 中文字級 + 每列上內距 2.4 單位 − 說明字墨離行框頂 .586em(行高 2)*/
    margin-top: calc(.015 * max(calc(3.6 * var(--ct-shr)), 28px) + 2.4 * var(--ct-shr) - .586em); }
  #top .ct-nw--2col .ct-nw__list { grid-area: list; margin-top: calc(max(calc(2.6 * var(--ct-shr)), 22px) + max(calc(3.6 * var(--ct-shr)), 28px) * 1.015); }   /* 標題 768 以上有下限,同服務項目 */
  #top .ct-nw--2col .ct-pill { grid-area: more; align-self: end; justify-self: start; }
}

/* ══ 11-14 V13 頁尾改設計系統(原站 c-footer)══════════════════════════════════════════════════════════════
   Eric「接著做頁尾」(前一句「剩下最新消息和頁尾 把最新消息改成設計系統」)。
   ①底色:バーミキュラ的兩種咖啡(左 #413c37、右 #46413c)→ 系統墨黑 #161615 一色;深底字只兩階:白 100%(標題、標語、電話)/ 白 72%(連結、地址、版權)
   ②高度:原站寫死 743(1440 寬),右欄公司據點超出底 → 跟內容走
   ③1024 以上左右欄分界 = 服務項目、最新消息那條線(左欄 39 單位 + 欄距 7.5rem),上內距 = --ct-gap、下內距 4.8 單位;左欄底(隱私權、版權)和右欄底(回到頂端)同一條底
   ④字級:分類標題 1.8 單位(≥17)700 白;連結 1.4 單位(≥14)400 白 72%,滑過白;標語 2.6 單位(≥22)700;版權列 12(法律註腳)
   ⑤回到頂端:44 圓圈細線箭頭(深底灰框),滑過品牌紅實心;文字 PAGE TOP 用英文小標那套(Inter Tight 500、字距 .12em) */
/* 11-14 V14 Eric「頁尾的灰黑色太深了 調亮一點 或做面板給我調」→ 底色抽成 --ct-ft-bg(拉桿頁 tune-bg.html 可調),預設先從墨黑 #161615 調亮到 #2b2b2b(中性灰) */
:root { --ct-ft-bg: #2b2b2b; }
#top .c-footer, #top .c-footer-inner, #top .c-footer-head, #top .c-footer-content { background: var(--ct-ft-bg); color: #fff; }
@media (max-width: 750px) { #top .c-footer-categoryDescInner { background: rgba(255, 255, 255, .05); } }   /* 手機展開的底原本深咖啡 #37332f(原站寫在 Inner,≤750)→ 墨黑上疊白 5%(中性灰) */
#top .c-footer, #top .c-footer-inner, #top .c-footer-navBlock, #top .c-footer-category { height: auto; }   /* 原站每個連結區塊也寫死 326 高 */
#top .c-footer-logo .catch, #top .c-footer-logo .catch-text { font-size: max(calc(2.6 * var(--ct-shr)), 22px); font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: #fff; }
#top .c-footer-logo .catch { margin-top: calc(3.2 * var(--ct-shr)); }
#top .c-footer-categoryTitle, #top .c-footer-categoryTitle a { font-size: max(calc(1.8 * var(--ct-shr)), 17px); font-weight: 700; line-height: 1.4; letter-spacing: .06em; color: #fff; }
#top .c-footer-categoryDescInner { padding-top: calc(1.6 * var(--ct-shr)); }
#top .c-footer .linksItem-link { font-size: max(calc(1.4 * var(--ct-shr)), 14px); font-weight: 400; line-height: 1.8; letter-spacing: .06em; color: rgba(255, 255, 255, .72); transition: color .3s; }
#top .c-footer .linksItem + .linksItem { margin-top: calc(.6 * var(--ct-shr)); }
#top .c-footer .linksItem-link:hover, #top .c-footer .linksItem-link:focus-visible { color: #fff; }
/* 11-14 熱鍵(標註/20261114-021113)「怎麼會出現banner的大標題 還有聯絡我們跑版了」:
   ①首屏大字會跟著捲動往下走,其他區塊都疊在它上面(relative + z-index 1),頁尾原本沒有 → 補上
   ②辦公室名稱被原站連結的置中帶著置中、地址靠左 → 整組靠左
   ③分類標題底線(dt::before)原本是原站暖灰 #8c8782 → 系統深底線白 20% */
#top .c-footer { position: relative; z-index: 1; }
#top .c-footer .ct-foff a { gap: .2em; align-items: flex-start; }
#top .c-footer-categoryTitle::before { background-color: rgba(255, 255, 255, .2); }
#top .c-footer .ct-foff b { font-weight: 700; color: #fff; }
#top .c-footer .ct-foff span { opacity: 1; font-size: 1em; font-weight: 400; }
#top .c-footer .ct-ftel { margin-top: calc(2.4 * var(--ct-shr)); font-size: max(calc(1.4 * var(--ct-shr)), 14px); font-weight: 400; line-height: 1.8; letter-spacing: .06em; color: rgba(255, 255, 255, .72); }
#top .c-footer .ct-ftel a { color: #fff; font-weight: 700; }
#top .c-footer .ct-fsoc { gap: calc(1 * var(--ct-shr)); margin-top: calc(2.4 * var(--ct-shr)); }
#top .c-footer .ct-fsoc__a { width: 44px; height: 44px; min-width: 0; min-height: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .3); }
#top .c-footer .ct-fsoc__a:hover, #top .c-footer .ct-fsoc__a:focus-visible { background: var(--ct-red, #EA2326); border-color: var(--ct-red, #EA2326); }
#top .c-footer-privacyLink, #top .c-footer-copyright { font-size: 12px; font-weight: 400; letter-spacing: .06em; line-height: 1.5; color: rgba(255, 255, 255, .72); }
#top .c-footer-copyright, .c-header .lineupLink-subTitle, .c-header-snsText { font-style: normal; }   /* 11-14 V14 Eric「© 2026 承泰商業有限公司 All rights reserved. 不要斜體」:原站 style.css 寫 Crimson Pro italic,字體早被全站思源黑體蓋掉、斜體還留著 → 拿掉;掃全頁順手把同樣留下來的兩處斜體也拿掉(我加的):產品下拉編號 01–05、手機選單「SNS」 */
#top .c-footer-privacyLink:hover, #top .c-footer-privacyLink:focus-visible { color: #fff; }
#top .c-pageTop { display: inline-flex; align-items: center; gap: calc(1.2 * var(--ct-shr)); color: #fff; text-decoration: none; }
#top .c-pageTop-text { font-family: var(--ct-en) !important; font-size: max(calc(1.4 * var(--ct-shr)), 12px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: #fff; }
#top .c-pageTop-circle { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; margin: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: transparent; color: #fff; transform: none; transition: background-color .3s, border-color .3s; }
#top .c-pageTop-circle .ct-i { width: 18px; height: 18px; }
#top .c-pageTop-circle { flex: none; }   /* 手機被 flex 擠成 37×44 → 固定正圓 */
/* 深底的線:原站 2px 暖灰 rgba(217,217,217,.5) / 列間 .1 → 系統 1px,兩階:分類之間白 20%、連結之間白 10%;手機展開的 +/− 原本暖灰 #a09c98 → 白 72% */
#top .c-footer-nav { border-color: rgba(255, 255, 255, .2); }
#top .c-footer-categoryTitle { border-top-color: rgba(255, 255, 255, .2); }
#top .c-footer .linksItem { border-top-color: rgba(255, 255, 255, .1); }
@media (max-width: 767px) {
  #top .c-footer-nav { border-bottom-width: 1px; }
  #top .c-footer-categoryTitle { border-top-width: 1px; }
}
#top .c-footer-categoryIcon::before, #top .c-footer-categoryIcon::after { background-color: rgba(255, 255, 255, .72); }
#top .c-pageTop:hover .c-pageTop-circle, #top .c-pageTop:focus-visible .c-pageTop-circle { background: var(--ct-red, #EA2326); border-color: var(--ct-red, #EA2326); }
@media (min-width: 1024px) {
  #top .c-footer-head { flex: none; box-sizing: border-box; width: calc(var(--ct-x) + 39 * var(--ct-shr) + 7.5rem); height: auto; align-self: stretch;   /* 原站寫死高度 → 撐滿,版權列沉到底 */
    padding: var(--ct-gap) 7.5rem calc(4.8 * var(--ct-shr)) var(--ct-x); }
  #top .c-footer-content { flex: 1 1 0; min-width: 0; box-sizing: border-box; width: auto; display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--ct-gap) var(--ct-x) calc(4.8 * var(--ct-shr)) 0; }
  #top .c-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(3.2 * var(--ct-shr)); row-gap: calc(6.4 * var(--ct-shr)); }
  #top .c-footer-contentBottom { margin-top: calc(6.4 * var(--ct-shr)); }
  /* 11-14 V17 Eric 熱鍵(標註/20261114-201904)「順手改一下 這個對齊右邊」:PAGE TOP + 圓圈原本靠左擺(1645 寬圓圈右緣離右版邊 104px)→ 靠右,圓圈右緣 = 右版邊 */
  #top .c-footer-contentBottom .c-footer-wrap { display: flex; justify-content: flex-end; }
  /* 原站分類區塊最小高 326、分類標題框寫死 23(字 25 高會凸出)、說明框上內距 18 → 拿掉,標題到第一個連結只留 1.6 單位;手機的展開收合靠這幾個,只在 1024 以上改 */
  #top .c-footer-category { min-height: 0; }
  #top .c-footer-categoryTitle { height: auto; }
  #top .c-footer-categoryDesc { height: auto; padding-top: 0; margin-top: 0; }
}

/* ═══ 11-14 V14:對標(バーミキュラ)暖色全換成系統色(Eric:「全換」)═══
   暖白 #faf7f5 → 白 #fff;咖啡 #46413c → 淺底上的字和線用黑 #000、深底面用墨黑 #161615;暖灰編號 #beb9b4 → 黑 55%(系統小標籤);
   手機選單暖咖啡 #46413c / #37332f → 墨黑 #161615。原站規則在 style.css,這裡用同樣權重蓋掉(頁首有三種白底狀態:-current 往下捲、-open 下拉打開、-dark) */
/* 首屏:大字、Scroll */
#top .p-kv-copy { color: #fff; }
#top .p-kv-line { background-color: #fff; }
.c-scrollDown-text { color: #fff; }
.c-scrollDown-circle { background-color: rgba(255, 255, 255, .7); }
/* 產品分類標題(影片上的白字) */
.c-sectionTitle.-white .c-sectionTitle-title, .c-sectionTitle.-white .c-sectionTitle-text { color: #fff; }
/* 頁首:透明底(停頂端)白字 */
.c-header-navItem .navLink { color: #fff; }
.c-header-menuButtonLine { background-color: #fff; }
@media (min-width: 751px) { .c-header-navItem .navLink::before { background-color: #fff; } }
/* 頁首:白底(往下捲、下拉打開)黑字黑線,底 #fff,下緣灰線 */
.c-header-navigationBg { background-color: #fff; }
.c-header.-current, .c-header.-open, .c-header.-dark { border-color: var(--ct-rule-c, #ccc); }
@media (min-width: 751px) { .c-header.-current, .c-header.-open, .c-header.-dark { color: #000; } }
.c-header.-current .navLink, .c-header.-open .navLink, .c-header.-dark .navLink { color: #000; }
.c-header.-current .navLink::before, .c-header.-open .navLink::before, .c-header.-dark .navLink::before { background-color: #000; }
@media (min-width: 751px) { .c-header-navItem.-current .navLink::before { background-color: #000; } }
.c-header.-current .c-header-menuButtonLine, .c-header.-dark .c-header-menuButtonLine { background-color: #000; }
@media (min-width: 751px) { .c-header .lineupLink-subTitle { color: rgba(0, 0, 0, .55); } }   /* 產品下拉編號 01–05 */
/* 手機全螢幕選單:墨黑底白字 */
.c-menu { background-color: #161615; }
@media (max-width: 750px) {
  .c-header-nav, .c-header-navBg, .c-header-mainNav, .c-header-language { background-color: #161615; }
  .c-header.-current { color: #fff; }
  .c-header-navItem .navLink-text, .c-header-snsText, .c-header-online, .c-header-onlineLinkText, .c-header-languageLink, .c-header-mainNavLink { color: #fff; }
  .c-header.-open.-current .c-header-menuButtonLine, .c-header.-open.-dark .c-header-menuButtonLine { background-color: #fff; }
  .c-header.-open.-current .ct-logo, .c-header.-open.-dark .ct-logo { color: #fff; }   /* 選單打開時頁首壓在墨黑上 */
}
/* 回到頂端箭頭:原站 svg 填咖啡色,把細線箭頭的箭頭頭填成實心小三角 → 不填色,只留線 */
#top .c-pageTop-circle svg { fill: none; }

/* 11-14 V14 頁尾「聯絡我們」欄放客服專線 + 社群(原本在公司據點下面):第一行跟隔壁「台北辦公室」同高,不留原本接在地址後面的上距 */
#top .c-footer .ct-fcall .ct-ftel { margin-top: 0; }
/* 11-14 V14 熱鍵 04:07「標題和分隔線太近了 要有padding」:頁尾欄標題(最新消息、服務項目…)字墨底到下面那條線原本只有 3px(線是標題 ::before 貼在底邊)
   → 標題下內距 2 單位:線上(字墨底 → 線)= 線下(線 → 第一個連結字墨頂),1645 時都約 26px(精華 18「線上下等距」,量看得見的字墨) */
/* 內距不寫死 2 單位:標題字(最小 17px)和連結字(最小 14px)在 1440 以下各自卡最小值,線上下會差 1–2px → 用兩邊字級反推,讓字墨底→線 = 線→連結字墨頂
   (0.4786 = 連結行高 1.8 的上半行距 + 字墨頂內縮,0.1556 = 標題行高 1.4 的下半行距 + 字墨底內縮,Noto Sans TC 實測) */
@media (min-width: 751px) { #top .c-footer-categoryTitle { padding-bottom: calc(1.6 * var(--ct-shr) + 0.4786 * max(calc(1.4 * var(--ct-shr)), 14px) - 0.1556 * max(calc(1.8 * var(--ct-shr)), 17px)); } }
/* 平板(751–1023)原站標題框還寫死 1.625rem、說明框上距 18px,字一樣貼線 → 標題框、說明框照 1024 以上那套放開(手機 ≤750 的展開收合不動) */
@media (min-width: 751px) and (max-width: 1023px) { #top .c-footer-categoryTitle { height: auto; } #top .c-footer-categoryDesc { height: auto; padding-top: 0; margin-top: 0; } }

/* ══ 11-14 V18 最新消息左下角淡背景(build.py NW_BG = 用哪張;拉桿頁 tune-nwbg.html)══════════════════════════════════
   Eric「最後一個區塊左下角放個淡淡的素材背景圖 往右往上淡出」。做法同產品分類大框的中央廚房背景:客戶素材、灰階、淡,遮罩往右、往上淡出。
   圖框貼區塊左下角(出血到頁面左邊、底貼頁尾),內容疊在上面。旋鈕:
   --nwbg-op 淡度;--nwbg-w / --nwbg-h 圖框寬高(區塊寬高的 %);--nwbg-x0 / -x1 往右淡出(框寬 %:x0 以前全顯、x1 全透明);
   --nwbg-y0 / -y1 往上淡出(框高 %,從底往上算);--nwbg-py 照片取景上下位置;--nwbg-gray 1 = 灰階、0 = 彩色 */
#top .ct-nw { --nwbg-op: .2; --nwbg-w: 50%; --nwbg-h: 70%; --nwbg-x0: 20%; --nwbg-x1: 100%; --nwbg-y0: 15%; --nwbg-y1: 100%; --nwbg-py: 50%; --nwbg-gray: 1; }   /* 11-14 V18 Eric 拉桿定:淡度 .15 → .2、寬 56% → 50%、高 100% → 70% */
@media (max-width: 1023px) { #top .ct-nw { --nwbg-w: 100%; --nwbg-h: 55%; } }   /* 平板、手機上下排:左下角 = MORE 那一帶,框拉滿寬 */
#top .ct-nwbg { position: absolute; left: 0; bottom: 0; z-index: 0; width: var(--nwbg-w); height: var(--nwbg-h); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 var(--nwbg-x0), transparent var(--nwbg-x1)), linear-gradient(to top, #000 var(--nwbg-y0), transparent var(--nwbg-y1));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 var(--nwbg-x0), transparent var(--nwbg-x1)), linear-gradient(to top, #000 var(--nwbg-y0), transparent var(--nwbg-y1));
  mask-composite: intersect; }
#top .ct-nwbg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--nwbg-py);
  opacity: var(--nwbg-op); filter: grayscale(var(--nwbg-gray)); }
#top .ct-nw__in { position: relative; z-index: 1; }

/* ══ 11-15 V19 隱藏式頁首(Eric「做隱藏式header」;程式 ct.js 最後一段切 html.ct-hdhide)══
   頁首和後面那塊白底一起往上滑出畫面;用 translate(不用 transform,不跟原站程式的 transform 打架)。
   白底原本有 .3 秒淡入淡出(-current 切換),這裡一起寫回去。 */
#top .c-header { transition: translate .5s cubic-bezier(.19, 1, .22, 1); }
#top .c-header-bg { transition: opacity .3s cubic-bezier(.23, 1, .32, 1), translate .5s cubic-bezier(.19, 1, .22, 1); }
html.ct-hdhide #top .c-header, html.ct-hdhide #top .c-header-bg { translate: 0 -100%; }
@media (prefers-reduced-motion: reduce) { #top .c-header, #top .c-header-bg { transition: opacity .3s; } }

/* ══ 11-15 V19 右側釘選回到頂端(Eric「Page Top 按鈕做成右側釘選的按鈕」;按鈕 build.py 產,回頂端程式 ct-common.js data-ct-gotop)══
   跟右側浮動那排的社群圓鈕同一款:2.9rem(最小 42)、深灰毛玻璃、白 22% 細框,右邊距同 16px,貼右下角;滑過深一階。
   頁首變白底(原站 -current = 捲離首屏)才淡入、從下面升 12px 上來;停在首屏時看不到。手機(767 以下)有底部快捷列,不放。
   有了它,頁尾原本的 PAGE TOP(768 以上)藏起來,那格改放標語(ct-reveal.css 頁尾那段) */
.ct-gotop { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; place-items: center; box-sizing: border-box;
  width: 2.9rem; height: 2.9rem; min-width: 42px; min-height: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(22, 22, 21, .42); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .4s, visibility .4s, translate .5s cubic-bezier(.19, 1, .22, 1), background-color .4s, border-color .4s; }
.ct-gotop .ct-i { width: 1.05rem; height: 1.05rem; min-width: 16px; min-height: 16px; }
.ct-gotop:hover, .ct-gotop:focus-visible { background: rgba(22, 22, 21, .7); border-color: rgba(255, 255, 255, .5); }
body:has(.c-header.-current) .ct-gotop { opacity: 1; visibility: visible; translate: 0 0; }
@media (max-width: 767px) { .ct-gotop { display: none; } }
@media (min-width: 768px) { #top .c-footer-contentBottom .c-footer-wrap { display: none; } }

/* 11-15 V19 熱鍵(標註/20261115-015110)截圖裡頁尾下面露出一截影片 → 查到:標語裡原站給讀屏軟體念的那份完整文字(第一個 .catch-text,寬 1px 絕對定位)
   沒有剪掉超出的部分,字被擠成一字一行往下垂約 380px;標語搬到頁尾最底列後垂出頁面,整頁多出 245px 可以捲。→ 補標準的隱藏寫法(讀屏照樣念得到) */
#top .c-footer-logo .catch > .catch-text:first-child { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); }

/* ══ 11-15 V20 熱鍵(標註/20261115-023000 第 1 處)「壓一個淺灰底 要不然圖卡看不清楚邊緣」══
   第三則的 Rational 蒸烤箱是白底照(四邊 90% 是白),蓋滿縮圖框,框邊跟白色頁面分不出來。
   → 照片用色彩增值(multiply)疊在縮圖框的淺灰底 #f3f3f3 上:白底變淺灰、看得出框;深色部位幾乎不變(只暗約 5%)。
   三則都套(另外兩張是去背圖,本來透出淺灰底);客戶之後換上的白底產品照也一樣有框。 */
#top .ct-nw__thumb { isolation: isolate; }
#top .ct-nw__thumb img { mix-blend-mode: multiply; }

/* ══ 11-15 V20 熱鍵(標註/20261115-030238)「這個往下移 讓左邊和下面padding一樣」══
   5B 百葉窗那段(PRODUCT 產品分類 + 優良機器品質 + 說明):字墨左邊距 = 版邊(1645 寬 130.5px),到這段底邊原本 211px(原站 padding-bottom 202.5 + 最後一行字底的空 8.6)。
   → 底下內距改成「版邊 − 最後一行字框底到字墨底的距離(約 .52 個字高,說明字 = max(1rem, 15px))」,字墨到底邊 = 字墨到左邊,各螢幕寬都成立(手機版邊 1.25rem 也一樣)。 */
#top .ct-blinds .p-support-title { padding-bottom: calc(var(--ct-x) - .52 * max(1rem, 15px) - 1px); }   /* 再減 1px = 第一個字左邊的字身空白,量完差 0–0.4px */

/* ══ 11-15 V20 熱鍵(標註/20261115-035725)「取消這條線 有卡片就是有分隔了」══
   服務項目改成圓角大框後,關於我們上面那條灰線(.ct-ab__in 的框線 + 進場從左畫出的 ::before)多餘 → 拿掉。
   線拿掉後原本「框底 → 線 → ABOUT 字頂」是兩段區塊間距,收成一段:框底到 ABOUT 大寫字頂 = 區塊間距(--ct-ab-c = 標籤框頂到字頂)。 */
#top .ct-ab { padding-top: calc(var(--ct-gap) - var(--ct-ab-c)); }
#top .ct-ab__in { border-top: 0; padding-top: 0; }
html.rv #top .ct-ab__in::before { content: none; }   /* ct-reveal.css 那條同強度又比較晚載入,要多一個 html 才蓋得過 */

/* ══ 11-15 V23 首頁定案、推站前檢查(Eric「你可以檢查手機版了 檢查沒問題 你就推」)══
   ① 手機的英文小標(SERVICE、ABOUT、PRODUCT、NEWS)只剩 11px、首屏 Scroll 10.9px → 下限 12px(小標籤最小 12,設計精華第 20 條)。
   ② 頁首選單是原站照螢幕寬縮的字(1rem = 寬 / 100),1024 寬只剩 9.6px、1180 寬 11px → 1024 以上下限 12px(1280 以上本來就 ≥12,不變)。 */
@media (max-width: 767px) {
  #top .c-sectionTitle.c-sectionTitle .c-sectionTitle-sub { font-size: max(calc(1.1 * var(--ct-shr)), 12px); }
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { font-size: max(calc(1.1 * var(--ct-shr)), 12px) !important; }   /* 對標搬來的元件規則權重更高(port/sv-tanica),要 !important */
  #top .ct-ab { --ct-ab-c: calc(.357 * max(calc(1.1 * var(--ct-shr)), 12px)); }
}
@media (max-width: 1279px) { #top .c-scrollDown-text { font-size: max(1em, 12px); } }   /* 首屏 Scroll:手機 10.9、1024 寬 10px → 12 */
@media (min-width: 1024px) {
  .c-header-nav.pc .navLink-text, .c-header .c-header-aboutLink, .c-header .lineupLink-mainTitle { font-size: max(.9375rem, 12px); }
  .c-header .lineupLink-subTitle { font-size: max(.875rem, 12px); }
}
/* ③ 手機頁首的「詢價單」三個字被擠成直的三行、跑出膠囊(375 寬 3 行、430 寬 2 行;字是會縮的彈性項目,中文最窄縮到一個字寬)。
   字改成不換行;手機版頁首(750 寬以下)整排都放不下(不換行時選單鈕被擠出畫面 28–49px)→ 只留圖示 + 件數,字藏起來給讀屏念(連結名稱還是「詢價單」)。 */
.c-header .c-header-online > span { white-space: nowrap; flex: none; }
@media (max-width: 750px) {
  .c-header .c-header-online > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* ④ 手機頁尾底列:「網站地圖」被排成第二行還帶著桌機的左間距(縮進一格)、PAGE TOP 被擠成兩行 →
   兩個連結排同一行(中間 1.6em)、版權自己一行;PAGE TOP 不換行。 */
@media (max-width: 767px) {
  #top .c-footer-bottom.sp .c-footer-bottomContent { flex-flow: row wrap; align-items: baseline; column-gap: 1.6em; row-gap: 4px; }
  #top .c-footer-bottom.sp .c-footer-privacyLink { width: auto; margin-left: 0; }
  #top .c-footer-bottom.sp .c-footer-copyright { flex-basis: 100%; }
  #top .c-pageTop.sp .c-pageTop-text { white-space: nowrap; }
}
@media (max-width: 767px) { #top .c-footer-bottom.sp { column-gap: 16px; } }   /* 320 寬時版權跟 PAGE TOP 黏在一起 → 中間至少 16 */