/* TronKit theme ckh v1.0.0 — kit:theme:publish 產生，不要手改（改 resources/themes/ckh/theme.css 再發佈） */
/* ── theme: corporate ── */
/* 佈景主題：corporate（端正商務）— TronKit 母版基準主題
 *
 * 一套主題＝這一張表＋（可選的）契約 class 結構規則。命名不綁專案也不綁顏色，描述的是「形狀個性」。
 * 這一份的值＝GMI 主站現況（從既有樣板量出來的，不是重新設計的），也是母版 front.css 保底值的來源。
 * 24 格共用色沒在這裡宣告：用 palette 模組的預設（案子 publish 的 tronkit-palette.php 決定）。
 */
:root {
  /* ── 圓角：四階。大塊／小卡與圖／控制項／膠囊 ── */
  --tk-radius-lg: 1rem;
  --tk-radius-md: .75rem;
  --tk-radius-sm: .5rem;
  --tk-radius-pill: 9999px;

  /* ── 線：分隔用的淺、一般框、需要強調的重（值是量出來的：Tailwind 4 的 slate-300 轉 sRGB 是 #cad5e2） ── */
  --tk-line-soft: #f1f5f9;
  --tk-line: #e2e8f0;
  --tk-line-strong: #cad5e2;
  --tk-line-width: 1px;

  /* ── 陰影：卡片預設不打陰影，滑過才浮起來 ── */
  --tk-shadow-none: none;
  --tk-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --tk-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --tk-card-shadow: var(--tk-shadow-none);
  --tk-card-shadow-hover: var(--tk-shadow);

  /* ── 底 ── */
  --tk-surface: #fff;
  --tk-surface-soft: var(--tk-color-soft);

  /* ── 字級（中性尺寸，資訊密度優先）。元件用 text-[length:var(--tk-fs-*)] 吃它，不寫在共用規則裡 ── */
  --tk-fs-body: .875rem;   --tk-lh-body: 1.25rem;
  --tk-fs-title: 1.25rem;  --tk-lh-title: 1.75rem;
  --tk-fs-lead: 1.5rem;    --tk-lh-lead: 2rem;

  /* ── 行高 ── */
  --tk-lh-tight: 1.35;
  --tk-lh-normal: 1.7;
  --tk-lh-loose: 1.9;
}

/* ── theme: ckh ── */
/* 佈景主題：ckh（正光興・原站紅），繼承 corporate（圓角、框線、陰影、字級變數照母版基準）
 *
 * 母版元件（版面引擎的文字、圖片）在正光興的樣子：值是 2026-10-23 用 Playwright 量原站（ckh.com.tw，Ark＋Freshbuilder）段落的 computed style。
 * 頁首頁尾、首頁區段、產品目錄是案子自己的樣板與元件（resources/css/front.css、shop.css），不在這套主題裡。
 * 主題樣式排在母版基礎樣式（front.css 的 .tk-prose）與案子 front.css 之後，同權重就蓋得過。
 * 款式（theme.json 宣告，後台文字元件的「款式」選單選得到；存在元件的 variant → class tk-v-<代號>）：
 *   small＝原站產品說明多半有的「整段 16px、行高 1.5、字距 1px」（原站替元素加的規則，連 Word 貼上的行內字級都蓋掉，所以用 !important）
 *   label＝產品說明裡的黃底小標（原站有底色的段落，寬度貼字）
 *   divider（標題）＝原站標題分隔線
 * 顏色、字型用案子 front.css 的 --ckh-*（全站共用一份）。留白（段距、小標內距、元件之間）照母版規定不寫在主題，在案子 front.css。
 */

/* 文字（.blk-text.tk-prose）＝原站「段落」(fg-paragraph ff-richtext)：外層 Roboto 15／21 灰（原站沒載入 Roboto，實際是 Arial），
   段落 <p> 用全站字型 19px／行高 1.4／字距 1.5 黑字（段距在案子 front.css：主題不准寫留白）。
   表格照原站 Freshbuilder 段落：滿寬、格子 1px #ddd 框（Word 貼上的表格行內另有框線，照行內）；內外距在案子 front.css */
.blk-text { font-family: Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; font-weight: 300; color: #606060; text-align: left; }
.blk-text p { font-family: var(--ckh-font); font-size: 19px; line-height: 1.4; letter-spacing: 1.5px; color: #000; }
/* 原站全站自訂樣式：段落、標題、清單、連結的字型一律 !important（內容裡 Word／臉書貼上的行內字型都被蓋掉，例：產品準金泥的「font-family: New」） */
.blk-text :is(p, h1, h2, h3, h4, h5, li, a), .blk-heading { font-family: var(--ckh-font) !important; }
/* 內文裡的標題（原站 Ark：h1 36／h2 30／h3 24／h4 18／h5 14，細體 300、行高 1.4、#34343c）：母版的左邊色條、粗體拿掉；下方 15 在 front.css */
.blk-text :is(h1, h2, h3, h4, h5, h6) { border: 0; font-weight: 300; line-height: 1.4; letter-spacing: normal; color: var(--ckh-ink); }
.blk-text h1 { font-size: 36px; } .blk-text h2 { font-size: 30px; } .blk-text h3 { font-size: 24px; } .blk-text h4 { font-size: 18px; } .blk-text h5 { font-size: 14px; }
.blk-text :is(strong, b) { font-weight: 700; color: inherit; }
.blk-text a { font-weight: 400; color: var(--ckh-red); text-decoration: none; }
/* 內文裡夾的圖、嵌入框原站是行內（圖垂直置中，Bootstrap）；Tailwind 預設把它們變區塊 */
.blk-text img { display: inline; vertical-align: middle; max-width: 100%; height: auto; }
.blk-text iframe { display: inline; vertical-align: baseline; }
.blk-text table { width: 100%; border-spacing: 0; border-collapse: collapse; background: transparent; }
.blk-text :is(th, td) { border: 1px solid #ddd; background: none; font-weight: inherit; line-height: inherit; text-align: inherit; color: inherit; }
.blk-text.tk-v-small, .blk-text.tk-v-small * { font-size: 16px !important; line-height: 1.5 !important; letter-spacing: 1px !important; }
.blk-text.tk-v-label p { width: max-content; background: #fc0; letter-spacing: 2px; color: var(--ckh-ink); }

/* 圖片（.blk-image）＝原站段落裡一張滿寬的圖：直角（下方 10 在案子 front.css） */
.blk-image__img { display: block; width: 100%; height: auto; border-radius: 0; }

/* 標題款式 divider＝原站「標題分隔線」(divider-with-title-1-type，文章裡「課程宣傳影片」那種)：18px 大寫置中、字距 3（992 以上 8）、#333；
   左右兩條 #c4c4c4 細線延伸到邊（離字 15 在 front.css）。線畫在行高一半（原站 top:50%），用偽元素的高＝行高一半、底線當那條線
   （⚠️ content-box：Tailwind 預設偽元素 border-box，高度會把線算進去、線往上跑一列） */
.blk-heading:is(.tk-v-divider, .tk-v-divider-s) { display: flex; overflow: hidden; border: 0; font-size: 18px; line-height: calc(20 / var(--ckh-bs-fs)); font-weight: 400;
    letter-spacing: 3px; text-align: center; text-transform: uppercase; color: #333; }
.blk-heading:is(.tk-v-divider, .tk-v-divider-s)::before, .blk-heading:is(.tk-v-divider, .tk-v-divider-s)::after { content: ''; flex: 1 1 0; box-sizing: content-box; height: calc(1em * 10 / 14); border-bottom: 1px solid #c4c4c4; }
@media (min-width: 992px) { .blk-heading:is(.tk-v-divider, .tk-v-divider-s) { letter-spacing: 8px; } }
.blk-heading:is(.tk-v-divider, .tk-v-divider-s):empty { min-height: calc(1em * 20 / 14); }   /* 空標題的分隔線原站也佔一行高（2599） */

/* 影片（.blk-video）＝原站 YouTube 嵌入：16:9、直角 */
.blk-video__frame { border-radius: 0; background: none; }   /* 載入前原站是白的（母版預設深色底） */

/* ── 內頁（開班頁…）：原站 Freshbuilder 元素的長相（2026-10-24 量 www.ckh.com.tw 開班頁）；留白都在案子 front.css ───────────── */

/* 標題 title＝開班頁大標：置中 28px／行高 1.4、細體、字距 1.5、深灰 */
.blk-heading.tk-v-title { border: 0; font-size: 28px; line-height: 1.4; font-weight: 300; letter-spacing: 1.5px; text-align: center; color: var(--ckh-ink); }

/* 標題 sh＝區段標題（藝術家、工程案例頁頂）：置中 24px（768 以上 36px）／行高 1.4、細體、深灰；副標 15px（768 以上 17px）、字距 1.5、深灰、置中 */
.blk-heading.tk-v-sh { border: 0; font-size: 24px; line-height: 1.4; font-weight: 300; text-align: center; color: var(--ckh-ink); }
.blk-heading.tk-v-sh + .blk-heading__sub { font-size: 15px; line-height: 1.4; font-weight: 300; letter-spacing: 1.5px; text-align: center; color: var(--ckh-ink); }
@media (min-width: 768px) { .blk-heading.tk-v-sh { font-size: 36px; } .blk-heading.tk-v-sh + .blk-heading__sub { font-size: 17px; } }

/* 標題 hc＝沒有自己樣式的置中標題（原站標題預設，作品一欄）：置中 30px／行高 1.4、細體、深灰 */
.blk-heading.tk-v-hc { border: 0; font-size: 30px; line-height: 1.4; font-weight: 300; text-align: center; color: var(--ckh-ink); }

/* 標題 q＝Q&A 的問題：21px／行高 1.4、細體、字距 1.6、黑字（原站標題裡包著 <p>，看到的是 <p> 的黑字）；q-c＝手機置中、992 以上靠左 */
.blk-heading:is(.tk-v-q, .tk-v-q-c) { border: 0; font-size: 21px; line-height: 1.4; font-weight: 300; letter-spacing: 1.6px; text-align: left; color: #000; }
.blk-heading.tk-v-q-c { text-align: center; }
@media (min-width: 992px) { .blk-heading.tk-v-q-c { text-align: left; } }

/* 標題 title33＝佛像修復、廟宇內外的大標：同 title（置中、細體、字距 1.5、深灰），28px、992 以上 33px */
.blk-heading.tk-v-title33 { border: 0; font-size: 28px; line-height: 1.4; font-weight: 300; letter-spacing: 1.5px; text-align: center; color: var(--ckh-ink); }
@media (min-width: 992px) { .blk-heading.tk-v-title33 { font-size: 33px; } }

/* 標題 band＝藍底帶上的白字標題：置中、細體、行高 1.8；19px／字距 4，768 起字距 6，992 起 23px／字距 8，1200 起字距 10 */
.blk-heading.tk-v-band { border: 0; font-size: 19px; line-height: 1.8; font-weight: 300; letter-spacing: 4px; text-align: center; color: #fff; }
@media (min-width: 768px) { .blk-heading.tk-v-band { letter-spacing: 6px; } }
@media (min-width: 992px) { .blk-heading.tk-v-band { font-size: 23px; letter-spacing: 8px; } }
@media (min-width: 1200px) { .blk-heading.tk-v-band { letter-spacing: 10px; } }

/* 標題 h28／h28c＝原站標題只設了 28px（關於我們）：靠左／置中、行高 1.4、細體、深灰 */
.blk-heading:is(.tk-v-h28, .tk-v-h28c) { border: 0; font-size: 28px; line-height: 1.4; font-weight: 300; text-align: left; color: var(--ckh-ink); }
.blk-heading.tk-v-h28c { text-align: center; }

/* 標題 ph＝內頁大標（麵包屑底下、列表上面那種）：置中 22px（992 以上 28px）、行高 1.4、細體、字距 3、深灰 */
.blk-heading.tk-v-ph { border: 0; font-size: 22px; line-height: 1.4; font-weight: 300; letter-spacing: 3px; text-align: center; color: var(--ckh-ink); }
@media (min-width: 992px) { .blk-heading.tk-v-ph { font-size: 28px; } }

/* 卡片列 course＝漆藝課程總覽的課程卡：半透明灰 1px 框＋陰影 0 3 5、直角、透明底；圖照原比例滿寬；
   標題 19px 細體深灰置中；按鈕＝紅框紅字 12px 細體（btn-base-xs），置中。母版卡片的滑過變色不要 */
.blk-cards__item.tk-v-course { border: 1px solid rgba(128, 128, 128, .4); border-radius: 0; background: none; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .18); color: inherit; }
.blk-cards__item.tk-v-course:hover { border-color: rgba(128, 128, 128, .4); }
.blk-cards__item.tk-v-course .blk-cards__media { height: auto; object-fit: fill; }
.blk-cards__item.tk-v-course .blk-cards__title { font-family: var(--ckh-font); font-size: 19px; line-height: 1.4; font-weight: 300; text-align: center; color: var(--ckh-ink); }
.blk-cards__item.tk-v-course .blk-cards__foot { justify-content: center; }
.blk-cards__item.tk-v-course .blk-cards__foot > span:empty { display: none; }
.blk-cards__item.tk-v-course .blk-cards__btn { border: 1px solid var(--ckh-red); font-size: 12px; line-height: 1.4; font-weight: 300; color: var(--ckh-red); white-space: nowrap; }

/* 文字 lead＝原站段落加了「整段 17px、字距 1.5」（連 Word 貼上的行內字級都蓋掉，原站就是 !important）；lead-c＝同字級、置中、深灰（開班頁「主辦單位」）；
   p19＝原站段落 19px、行高 1.5、深灰（開班頁新版的小標「個展」那種） */
.blk-text.tk-v-lead, .blk-text.tk-v-lead * { font-size: 17px !important; letter-spacing: 1.5px !important; }
/* 文字 p18＝Q&A 的回答：整段 18px、行高 1.8、字距 1.5（原站 !important，連裡面的字都蓋） */
.blk-text.tk-v-p18, .blk-text.tk-v-p18 * { font-size: 18px !important; line-height: 1.8 !important; letter-spacing: 1.5px !important; }
/* 文字 lead18＝同 lead（整段 17px、字距 1.5），行高 1.8 */
.blk-text:is(.tk-v-lead18, .tk-v-lead18i), .blk-text:is(.tk-v-lead18, .tk-v-lead18i) * { font-size: 17px !important; line-height: 1.8 !important; letter-spacing: 1.5px !important; }
.blk-text.tk-v-lead18i p { color: var(--ckh-ink); }   /* lead18i＝原站段落元素本身的字（深灰） */
/* 文字 p17＝原站段落只加了「整段 17px」（沒有字距，產品介紹頁那段 Facebook 貼上的字：行內寫 15px 也被蓋成 17px） */
.blk-text.tk-v-p17, .blk-text.tk-v-p17 * { font-size: 17px !important; }
.blk-text.tk-v-lead-c { text-align: center; }
.blk-text.tk-v-lead-c p { font-size: 17px; letter-spacing: 1.5px; color: var(--ckh-ink); }
.blk-text.tk-v-p19 p { font-size: 19px; line-height: 1.5; color: var(--ckh-ink); }

/* 文字 para＝原站沒另外設樣式的段落元素（fg-paragraph）：19px 深灰（內文元件預設是黑字） */
.blk-text.tk-v-para p { color: var(--ckh-ink); }

/* 文字 info＝報名資訊框（課程費用、匯款資訊…）：標題 19px 細體深灰，底下兩條短線（30、40 寬，差 5px 上下錯開）；
   info-red 短線紅色；info-0 同 info（只差下方留白，在 front.css） */
.blk-text:is(.tk-v-info, .tk-v-info-0, .tk-v-info-red, .tk-v-info-17, .tk-v-info-17-0) h3 { position: relative; font-size: 19px; line-height: 1.4; font-weight: 300; letter-spacing: normal; color: var(--ckh-ink); }
.blk-text:is(.tk-v-info, .tk-v-info-0, .tk-v-info-red, .tk-v-info-17, .tk-v-info-17-0) h3::before,
.blk-text:is(.tk-v-info, .tk-v-info-0, .tk-v-info-red, .tk-v-info-17, .tk-v-info-17-0) h3::after { content: ''; position: absolute; left: 0; height: 1px; background: var(--ckh-ink); }
.blk-text:is(.tk-v-info, .tk-v-info-0, .tk-v-info-red, .tk-v-info-17, .tk-v-info-17-0) h3::before { top: calc(100% + 16px); width: 30px; }
.blk-text:is(.tk-v-info, .tk-v-info-0, .tk-v-info-red, .tk-v-info-17, .tk-v-info-17-0) h3::after { top: calc(100% + 11px); width: 40px; }
.blk-text.tk-v-info-red h3::before, .blk-text.tk-v-info-red h3::after { background: var(--ckh-red); }
.blk-text:is(.tk-v-info-17, .tk-v-info-17-0) :is(p, p *) { font-size: 17px; }   /* 4302：內容 17px（其他頁 19px） */

/* 文字 quote＝原站引言（blockquotes-v1）：紅字 16px、字距 1、正體；底下一條 120×2 紅線 */
.blk-text.tk-v-quote blockquote { position: relative; border: 0; font-family: var(--ckh-font); font-size: 16px; font-weight: 400; line-height: calc(20 / var(--ckh-bs-fs)); font-style: normal; letter-spacing: 1px; color: var(--ckh-red); }
.blk-text.tk-v-quote blockquote * { font-size: 16px !important; font-style: normal; font-weight: inherit; letter-spacing: 1px; color: inherit; }
.blk-text.tk-v-quote blockquote > span:first-child { display: inline-block; }   /* 開頭那個「”」（原站 blockquotes-v1-o） */
.blk-text.tk-v-quote blockquote p { line-height: 1.4; font-weight: 300; }   /* 引言裡包了段落的（1571）：段落是細體、行高 1.4 */
.blk-text.tk-v-quote blockquote::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 120px; height: 2px; background: var(--ckh-red); }

/* 文字 list＝原站清單（lists-base）：16px、字距 1.2、灰字細體；每項前面一個 › 圖示（Font Awesome，案子 front.css 載入） */
.blk-text:is(.tk-v-list, .tk-v-list17) ul { list-style: none; font-size: 16px; line-height: calc(20 / var(--ckh-bs-fs)); letter-spacing: 1.2px; }
.blk-text:is(.tk-v-list, .tk-v-list17) li { display: flow-root; line-height: calc(20 / var(--ckh-bs-fs)); font-weight: 300; color: #606060; }
.blk-text:is(.tk-v-list, .tk-v-list17) li::before { content: '\f105'; position: static; float: left; width: 18px; border-radius: 0; background: none; height: 18px; font-family: 'ff-font-awesome'; font-size: 16px; line-height: 18px; font-weight: 400; text-align: center; color: #606060; }

/* 按鈕列 btn／btn-c＝原站紅色小按鈕（btn-base-sm）：14px 細體白字、紅底、透明 1px 框；btn-c 置中、圓角 3（原站置中那顆有 radius-3） */
.blk-buttons:is(.tk-v-btn, .tk-v-btn-c) .blk-buttons__btn { border: 1px solid transparent; border-radius: 0; background: var(--ckh-red); font-size: 14px; line-height: 1.4; font-weight: 300; color: #fff; white-space: nowrap; }
.blk-buttons.tk-v-btn-c { justify-content: center; }
.blk-buttons.tk-v-btn-c .blk-buttons__btn { border-radius: 3px; }
.blk-buttons.tk-v-btn .blk-buttons__btn:hover { background: rgba(0, 188, 212, .7); }   /* 原站靠左那顆滑過就是這個青色（照搬） */

/* 分隔線（母版 .blk-divider，正光興全站只有內頁用）＝原站中間一支畫筆的分隔線（divider-v5）：一行高 26.6（19px×1.4），
   畫筆圖示 18px 在中間（上方 4）、左右兩條粉紅細線各 50 寬、離圖示 10（線在上方 8）；用一個漸層畫兩條線，不用另外的元素 */
.blk-divider { position: relative; height: 26.6px; border: 0; }
.blk-divider::before { content: '\f1fc'; position: absolute; top: 4px; left: 50%; width: 19.5px; transform: translateX(-50%); font-family: 'ff-font-awesome'; font-size: 18px; line-height: 18px; text-align: center; color: #e55973; }
.blk-divider::after { content: ''; position: absolute; top: 8px; left: 50%; width: 139.5px; height: 1px; transform: translateX(-50%);
    background: linear-gradient(to right, #e55973 50px, transparent 50px, transparent 89.5px, #e55973 89.5px); }

/* 文字 frame＝淡灰細框（作品一欄）：四邊 1px 半透明灰；框裡的標題置中 18px／行高 1.4、粗體、深灰（留白在案子 front.css） */
.blk-text.tk-v-frame { border: 1px solid rgba(128, 128, 128, .2); }
.blk-text.tk-v-frame :is(h2, h3, h4) { font-size: 18px; line-height: 1.4; font-weight: 600; text-align: center; color: var(--ckh-ink); }

/* 區段款式 box＝開班頁整頁內容外面那個白盒子：白底、半透明灰 1px 框、陰影 0 3 5。相鄰的 box 段接成一個盒子——盒子畫在段後面（::before），
   位置與上下留白在案子 front.css（主題不准寫留白） */
.sec.tk-rv-box::before { content: ''; position: absolute; border: 1px solid rgba(128, 128, 128, .4); background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .18); }

/* 區段款式 card＝藝術家頁的資料盒子：同 box，多圓角 5（位置與上下留白在案子 front.css） */
.sec.tk-rv-card::before { content: ''; position: absolute; border: 1px solid rgba(128, 128, 128, .4); border-radius: 5px; background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .18); }

/* 文字 list17＝同 list，字 17px、行高 1.8、字距 1.5（關於我們品牌故事；原站 !important，連裡面的 <p>、<span> 都蓋） */
.blk-text.tk-v-list17, .blk-text.tk-v-list17 * { font-size: 17px !important; line-height: 1.8 !important; letter-spacing: 1.5px !important; }