/* ------------------------------------------------------------------
 | 冠宸億科技 前台共用樣式
 | 來源：設計稿各頁 <helmet><style> 中所有頁面共通的基礎規則。
 | 頁面專屬規則保留在各自的 Blade @push('page-style')。
 * ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }
/* 頁內錨點捲動時預留固定頁首高度，避免區塊標題被頁首蓋住 */
:target { scroll-margin-top: 96px; }
body { margin: 0; background: #fff; color: oklch(0.245 0.028 244.8); font-family: 'Inter','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; font-size: 17px; line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: oklch(0.565 0.15 249.4); }
::selection { background: color-mix(in oklab, oklch(0.565 0.15 249.4) 30%, transparent); }

/* Vue 島狀元件掛載前先隱藏，避免未編譯的樣板閃現 */
[v-cloak] { display: none !important; }

/* 右下角 LINE 懸浮按鈕（全站共用，z-index 需低於漢堡選單的全螢幕選單） */
.line-fab { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 40; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #06C755; box-shadow: 0 12px 32px -8px rgba(6,199,85,0.55); transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.35s; }
.line-fab svg { width: 30px; height: 28px; }
.line-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px -8px rgba(6,199,85,0.65); }
.line-fab:focus-visible { outline: 3px solid oklch(0.422 0.116 250.9); outline-offset: 3px; }
@media (max-width: 640px) { .line-fab { width: 50px; height: 50px; } .line-fab svg { width: 28px; height: 26px; } }

/* 由設計稿 style-hover 屬性轉換而來（inline style 需 !important 才能覆寫） */
.hv-anchor-dark:hover span { color: #fff !important; }
.hv-0b3cf3dc:hover { border-color: oklch(0.422 0.116 250.9) !important; background: oklch(0.422 0.116 250.9) !important; color: #fff !important; }
.hv-1757acd4:hover { background: oklch(0.422 0.116 250.9) !important; }
.hv-2cc62003:hover { background: oklch(0.981 0.003 228.8) !important; color: oklch(0.422 0.116 250.9) !important; }
.hv-4bbb41ad:hover { color: #fff !important; }
.hv-4cc834c3:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 50px -30px color-mix(in oklab, oklch(0.245 0.028 244.8) 45%, transparent) !important; }
.hv-4ecc2002 > span,
.hv-4ecc2002 > h3,
.hv-4ecc2002 > p { transition: color 0.7s, background-color 0.7s; }
.hv-4ecc2002:hover { background: #fff !important; }
.hv-4ecc2002:hover > span:first-child,
.hv-4ecc2002:hover > h3,
.hv-4ecc2002:hover > p { color: oklch(0.286 0.077 252) !important; }
.hv-4ecc2002:hover > span[aria-hidden="true"] { background: color-mix(in oklab, oklch(0.286 0.077 252) 40%, transparent) !important; }
.hv-5a2e0dff:hover { transform: scale(1.06) !important; }
.hv-6225ae11:hover { border-color: #fff !important; background: rgba(255,255,255,0.1) !important; }
.hv-627168cb:hover { background: oklch(0.286 0.077 252) !important; color: #fff !important; }
.hv-6289a364:hover { transform: scale(1.04) !important; }
.hv-66ec4903:hover { transform: translateY(-2px) !important; border-color: color-mix(in oklab, oklch(0.422 0.116 250.9) 40%, transparent) !important; color: oklch(0.422 0.116 250.9) !important; box-shadow: 0 12px 28px -14px color-mix(in oklab, oklch(0.245 0.028 244.8) 35%, transparent) !important; }
.hv-766bb14d:hover { transform: translateY(-2px) !important; background: oklch(0.565 0.15 249.4) !important; box-shadow: 0 20px 40px -20px color-mix(in oklab, oklch(0.245 0.028 244.8) 55%, transparent) !important; }
.hv-770c0f56:hover { background: oklch(0.981 0.003 228.8) !important; }
.hv-80bee153:hover { background: oklch(0.422 0.116 250.9) !important; color: #fff !important; }
.hv-864835cb:hover { transform: scale(1.02) !important; }
.hv-a71c3e52:hover { transform: translateY(-4px) !important; border-color: oklch(0.422 0.116 250.9) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important; color: inherit !important; }
.hv-b11cfd3f:hover { color: oklch(0.565 0.15 249.4) !important; }
.hv-cd66d4e5:hover { background: oklch(0.565 0.15 249.4) !important; }
.hv-cd82bf5d:hover { border-color: color-mix(in oklab, oklch(0.422 0.116 250.9) 50%, transparent) !important; background: oklch(0.981 0.003 228.8) !important; }
.hv-e0d73e6e:hover { transform: scale(1.05) !important; }
.hv-f3889822:hover { transform: scale(1.03) !important; }
.hv-f3bdf7bd:hover { color: oklch(0.422 0.116 250.9) !important; }

/* ------------------------------------------------------------------
 | 響應式覆寫工具類（平板／手機重排）
 | 設計稿全數以 inline style 輸出，斷點規則須以 !important 覆寫。
 | 命名：rw 容器邊距、rs 區塊上下距、rt-* 字級、rg-* 格線收合、
 |       rcell 併欄後的格線儲存格、r-* 各種局部重排。
 | 斷點：1024 平板、900 窄平板、640 手機。
 * ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 版心容器：固定 64px 邊距改為 40px */
  .rw { padding-left: 40px !important; padding-right: 40px !important; }
  /* 大區塊上下 128px 收為 88px */
  .rs { padding-top: 88px !important; padding-bottom: 88px !important; }
  /* 固定字級的主標／區塊標題改為流動字級 */
  .rt-hero { font-size: clamp(36px, 6vw, 56px) !important; }
  .rt-h2 { font-size: clamp(30px, 4.6vw, 44px) !important; }
  /* 格線收合 */
  .rg-lg { grid-template-columns: 1fr !important; }
  .rg-3 { grid-template-columns: 1fr 1fr !important; }
  .rg-2col { grid-template-columns: 1fr 1fr !important; }
  .rg-flow { grid-template-columns: repeat(3, 1fr) !important; }
  .rg-org { grid-template-columns: 1fr 1fr !important; }
  .rg-logo { grid-template-columns: repeat(3, 1fr) !important; }
  /* 大間距圖文格線收合後改 48px，避免留白過大（1px 分隔線格線勿用） */
  .rgap48 { gap: 48px !important; }
  /* 併欄後的儲存格：拿掉左右分隔線與不對稱內距 */
  .rcell { border-right: none !important; border-left: none !important; padding: 28px 0 !important; }
  /* 併欄後以上緣細線分隔（淺色底） */
  .rdiv-lg > * + * { border-top: 1px solid oklch(0.9 0.008 244) !important; }
  /* 圖文交錯區收合後固定「圖上文下」 */
  .r-ord-img { order: 1 !important; }
  .r-ord-txt { order: 2 !important; }
  /* 時間軸／流程的水平基準線在多列換行後失去意義，直接隱藏 */
  .r-line { display: none !important; }
  /* 左右分割 Hero（列表頁）：改上下堆疊，圖片保留高度 */
  .rg-hero { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .r-heroimg { min-height: 300px; }
  /* 首頁經營理念的浮出引言卡改為靜態全寬 */
  .r-quote { position: static !important; width: auto !important; margin-top: 16px !important; }
  /* 詳情頁主欄＋側欄改單欄，側欄解除 sticky */
  .r-detail { grid-template-columns: 1fr !important; gap: 48px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  .r-aside { position: static !important; }
  /* ESG 五項承諾：編號／標題／說明改單欄堆疊 */
  .r-commit { grid-template-columns: 1fr !important; gap: 10px !important; }
}

@media (max-width: 900px) {
  .rg-md { grid-template-columns: 1fr !important; }
  /* 深色底直欄卡（首頁核心價值）：右分隔線改下緣線 */
  .r-vcell { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  /* 深色底的橫向清單儲存格（服務頁編號列）：左分隔線改上緣線 */
  .rcell-dark { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.12) !important; padding: 20px 0 !important; }
  /* 案例列表的分類＋搜尋列改直向排列，搜尋框撐滿 */
  .r-filter { flex-direction: column !important; align-items: stretch !important; }
  .r-search { width: 100% !important; }
  /* 服務頁工程流程：窄版收掉「點擊切換」的橫向步驟列，改為直向時間軸一次全部顯示 */
  .r-flow-tabs { display: none !important; }
  .r-flow-stack { display: block !important; }
}

@media (max-width: 640px) {
  .rw { padding-left: 22px !important; padding-right: 22px !important; }
  .rs { padding-top: 64px !important; padding-bottom: 64px !important; }
  .rt-hero { font-size: clamp(28px, 8.6vw, 36px) !important; }
  .rt-h2 { font-size: clamp(24px, 7.4vw, 30px) !important; }
  .rg-sm { grid-template-columns: 1fr !important; }
  .rg-3 { grid-template-columns: 1fr !important; }
  .rg-2col { grid-template-columns: 1fr !important; }
  .rg-flow { grid-template-columns: repeat(2, 1fr) !important; }
  .rg-org { grid-template-columns: 1fr !important; }
  .rg-logo { grid-template-columns: repeat(2, 1fr) !important; }
  /* CTA 按鈕列：換行並各自撐滿一列 */
  .r-cta { flex-wrap: wrap !important; }
  .r-cta > a { flex: 1 1 100%; }
  /* 大內距卡片收為行動版內距 */
  .rcard { padding: 28px 24px !important; }
  /* 橫向排列改可換行（頁尾版權列、認證卡標頭） */
  .r-wrap-row { flex-wrap: wrap !important; }
  /* 首頁 ESG 承諾清單：標題與說明改上下排列 */
  .r-stack { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .r-stack > h3 { width: auto !important; }
  /* 內頁 Hero（176px 頂距）行動版收窄 */
  .r-showhero { padding-top: 136px !important; padding-bottom: 64px !important; }
  /* 關於系列 68vh Hero 行動版收窄 */
  .r-hero68 { min-height: 56vh !important; padding-top: 128px !important; padding-bottom: 64px !important; }
  /* 列表頁左右分割 Hero 的文字欄內距 */
  .r-heropad { padding-top: 120px !important; padding-bottom: 48px !important; }
  /* 服務詳情規格表：標籤與內容改上下排列 */
  .r-spec { grid-template-columns: 1fr !important; gap: 6px !important; }
  /* 手機版隱藏（案例分類篩選鈕等，空間不足時只留搜尋框） */
  .r-hide-sm { display: none !important; }
  /* 聯絡頁公司全名：縮小字級讓手機版維持單行 */
  .rt-company { font-size: clamp(18px, 6.8vw, 28px) !important; }
  /* 案例／服務詳情的主視覺上移量：手機版 Hero 下內距收為 64px，原負值會壓到說明文字 */
  .r-showimg { margin-top: -24px !important; }
}