/* =====================================================================
 * base.css  —  跨專案共用基礎設定
 * ---------------------------------------------------------------------
 * 使用方式：搭配 Bootstrap 5 使用，載入順序為
 *     bootstrap.min.css  →  base.css  →  <專案>.css
 *
 * 效能提醒：下方的 CSS @import 會阻塞平行下載。正式站建議改在 HTML
 * <head> 用 <link rel="preconnect"> + <link rel="stylesheet"> 載入字體，
 * 並把用不到的 @import 註解掉。此處保留是為了讓本檔可單獨引用。
 * ===================================================================== */

/* --------------------- */
/* Google Fonts 字體引入
/* --------------------- */
/* (繁中用) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
/* font-family: 'Noto Sans TC', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
/* font-family: 'Noto Serif TC', serif; */
/* (英文用) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
/* font-family: 'IBM Plex Sans', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); */
/* font-family: 'Roboto Condensed', serif; */
/* (數字用) */
/* @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap'); */
/* font-family: 'Geologica', sans-serif; */
/* (英文 手寫體) */
/* @import url('https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap'); */
/* font-family: 'Vujahday Script', cursive; */
/* @font-face {
    font-family: 'Accid';
    src: url('fonts/accid.woff2') format('woff2');
    font-display: swap;
} */

/* 全域變數 */
:root {
    /* 應用 backdrop-filter: var(--glass_blur); */
    --glass_blur: saturate(250%) blur(10px);
    /* 應用 filter: var(--drop_shadow); */
    --drop_shadow: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    /* 應用 box-shadow: var(--box_shadow); */
    --box_shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    /* 文字陰影 */
    --text_shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    --ff_cn: 'Noto Sans TC', sans-serif;
    --ff_cn_2: 'Noto Serif TC', serif;
    /* 英文站用真正的拉丁字面；中文字體仍由 --ff_cn 負責 */
    --ff_en: 'IBM Plex Sans', 'Noto Sans TC', system-ui, sans-serif;
    --ff_en_w: 'Vujahday Script', cursive;
    --ff_dec: 'Geologica', 'IBM Plex Sans', sans-serif;
    --color_font: #333333;
    --color_disabled: #b0b0b0;
    --color_dark: #272727;
    --color_light: #e6e5e4;
    --color_gray: #717071;

    /* --------------------------------------------------------------
     * 主色（CI）。換色只需改下面三行 + --color_ci_rgb。
     * 預設組：碳黑 + 銅金
     * 其他備選：
     *   碳黑 + 橘紅  --color_ci:#e8521b; --color_ci_2:#b83c0d; --color_ci_3:#f3c4ae; rgb:232,82,27
     *   碳黑 + 礦藍  --color_ci:#1e6fd9; --color_ci_2:#144a92; --color_ci_3:#b9d3f2; rgb:30,111,217
     * -------------------------------------------------------------- */
    --color_ci: #c08a3e;
    --color_ci_2: #8f6425;
    --color_ci_3: #e8d5b5;
    --color_ci_rgb: 192, 138, 62; /* 供 rgba(var(--color_ci_rgb), .12) 使用 */

    /* 中性色 tokens（原本 u / .scroll_bar 有引用但未定義，補齊） */
    --color_bg: #ffffff;
    --color_bg_alt: #f6f6f5;
    --color_carbon: #0f1114;
    --color_border: #e0e0de;
    --color_border_dark: rgba(255, 255, 255, 0.14);
    --color_muted: #6b6d72;
    --color_sky: var(--color_ci);
    --underline_w: 2px;

    /* 間距尺度 */
    --sp_1: 0.25rem;
    --sp_2: 0.5rem;
    --sp_3: 1rem;
    --sp_4: 1.5rem;
    --sp_5: 2.5rem;
    --sp_6: 4rem;
    --section_py: 6rem;

    /* 圓角與轉場 */
    --radius_sm: 2px;
    --radius_md: 6px;
    --radius_lg: 14px;
    --transition: 0.3s ease;

    /* 層級 */
    --z_header: 1030;
    --z_overlay: 1040;
    --z_modal: 1050;

    --h_min: min(65vmin, 600px);
    --h_rwd: 16 / 9; /* 預設值，各斷點會再覆寫 */
    --max_w: 1200px;
    --max_w_sm: 980px;
    --fs_base: 16px;
    --ls: 0.1em;
    --header_height: 66px;

    /* 內嵌圖示（給 mask 用，顏色由 background-color / currentColor 決定） */
    --icon_arrow_right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2.5 11.5 8 6 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon_check_circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8a7.2 7.2 0 1 0 0 14.4A7.2 7.2 0 0 0 8 .8Zm3.6 5.2-4.3 4.9a.9.9 0 0 1-1.3.05L3.9 8.6a.9.9 0 1 1 1.2-1.3l1.4 1.3 3.7-4.2a.9.9 0 1 1 1.4 1.2Z' fill='%23000'/%3E%3C/svg%3E");
}

/* 直式螢幕 */
@media (orientation: portrait) {
}

/* 橫式螢幕 */
@media (orientation: landscape) {
}

/* SM - 行動裝置 */
@media (max-width: 767.98px) {
    :root {
        --fs_base: 14px;
        --h_rwd: 4 / 3;
        --section_py: 3.5rem;
    }
}

/* MD - 平板 */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --fs_base: 15px;
        --h_rwd: 4 / 3;
        --section_py: 4.5rem;
    }
}

/* LG - 筆電 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --fs_base: 16px;
        --h_rwd: 16 / 9;
        --section_py: 5.5rem;
    }
}

/* XL - 桌機 */
@media (min-width: 1200px) {
    :root {
        --fs_base: 16px;
        --h_rwd: 2 / 1;
        --section_py: 6rem;
    }
}

/****** 基礎設置 ******/
html,
body {
    width: 100%;
    min-height: 100%; /* 原為 height:100%，長頁面在部分瀏覽器會限制捲動 */
    margin: 0;
    font-family: var(--ff_cn);
    font-size: var(--fs_base);
    font-weight: 300;
    letter-spacing: var(--ls);
    /* background-color: #000000; */
    color: var(--color_font);
    scroll-behavior: smooth;
}
/* body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: -1;
} */

/* 滑鼠 / 觸控點擊時不顯示焦點框，但鍵盤操作必須看得見（無障礙） */
*:focus:not(:focus-visible) {
    outline: none !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

*:focus-visible {
    outline: 2px solid var(--color_ci) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: var(--color_disabled) !important;
    font-weight: normal !important;
}

input:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
    color: var(--color_disabled) !important;
    font-weight: normal !important;
}

input::placeholder,
.form-control::placeholder {
    color: var(--color_disabled) !important;
    font-weight: normal !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e') !important;
}

input:disabled + label {
    text-decoration: line-through;
}

/* 注意：color 只寫在單獨的 a 上。
   原本 a:link / a:hover 也一起指定 color:inherit，特異性 (0,1,1) 會蓋掉
   .btn 這類單一 class (0,1,0) 的文字顏色，導致按鈕文字變成繼承色。
   拆開後 a 仍然預設繼承顏色，行為不變，但任何 class 都能正常覆寫。 */
a {
    color: inherit;
}

a,
a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
    overflow-wrap: break-word; /* 允許在內部進行換行，防止跑版 */
    word-wrap: break-word; /* 為舊版瀏覽器提供向下相容 */
    /* 確保允許文字被選取 */
    user-select: text;
    -webkit-user-select: text; /* 適用於 Chrome, Safari */
    -moz-user-select: text; /* 適用於 Firefox */
    -ms-user-select: text; /* 適用於 IE/Edge */
}

[onclick] {
    cursor: pointer;
    user-select: none; /* 防止連點時選取到文字 */
    transition: transform 0.3s ease;
}
[onclick]:hover {
    transform: scale(1.02); /* 滑鼠移過去稍微放大 */
}
/* 不想要放大效果時，在該元素加上 .no_scale */
[onclick].no_scale:hover {
    transform: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
button {
    line-height: 1.5;
    letter-spacing: var(--ls);
}

button {
    background-color: transparent;
    border: none;
}

p {
    line-height: 1.85;
}

u {
    text-decoration: none; /* 移除內建底線 */
    border-bottom: var(--underline_w) solid var(--color_sky);
}

section {
    position: relative;
    width: 100%;
}

small {
    letter-spacing: calc(var(--ls) / 2);
}

/* --------------------- */
/* 常用 樣式
/* --------------------- */
/* 左右留白。改用 padding 而非 margin，原因有兩個：
   1. 與 .max_w 併用時（<div class="view_warp max_w">），.max_w 的
      margin-left/right:auto 特異性相同且宣告在後，會直接蓋掉 margin 版本，
      留白等於失效。
   2. Bootstrap 的 .row 帶負 margin（g-5 為 -1.5rem），父層必須有等量以上的
      padding 才不會溢出視窗、產生水平捲動。
   下限 1.5rem 正好對應 g-5 的負 margin，任何斷點都不會橫向溢出。 */
.view_warp {
    padding-left: max(5.5vw, 1.5rem);
    padding-right: max(5.5vw, 1.5rem);
}

.max_w {
    max-width: var(--max_w);
    margin-left: auto;
    margin-right: auto;
}

.max_w_sm {
    max-width: var(--max_w_sm);
    margin-left: auto;
    margin-right: auto;
}

.position_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img_cover {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.img_cover img,
.img_cover video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img_contain {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.img_contain img,
.img_contain video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.bg_cover {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.bg_contain {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
}

.h_rwd {
    width: 100%;
    aspect-ratio: var(--h_rwd);
}

.h_4x3 {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.h_16x9 {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.h_1x1 {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.bg_ci {
    background-color: var(--color_ci) !important;
    color: #ffffff !important;
}

.color_ci {
    color: var(--color_ci) !important;
}

/* 毛玻璃效果 */
.bg_glass {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: saturate(100%) blur(2px);
    border: none !important;
    overflow: hidden;
}

/* 偽元素：負責製作「漸層邊框」 */
.bg_glass.border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* === 漸層邊框 === */
    background: linear-gradient(to right, transparent, #ffffff);
    /* === 遮罩挖空中間 === */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none; /* 不阻擋滑鼠點擊 */
}

/* 輪廓陰影（穿透） */
.filter_shadow {
    filter: var(--drop_shadow);
}

/* 區塊陰影（不穿透） */
.box_shadow {
    box-shadow: var(--box_shadow);
}

/* 傾斜 */
.skew_right {
    transform: skewX(-10deg);
}

/* --------------------- */
/* Youtube 影片 嵌入
/* --------------------- */
.youtube_box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(9 / 16 * 100%);
    border-radius: 4vmin;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.youtube_box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* --------------------- */
/* 客製 圖標
/* --------------------- */
/* 圖示改用內嵌 mask + currentColor，不再依賴外部 svg 檔，
   顏色會自動跟隨文字色，深色底 / 淺色底都不必換圖。 */
.after_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.after_arrow::after {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin: 0.1em 0 0 0.5em;
    flex-shrink: 0; /* 避免被 flex 壓縮 */
    background-color: currentColor;
    -webkit-mask: var(--icon_arrow_right) center / contain no-repeat;
    mask: var(--icon_arrow_right) center / contain no-repeat;
    transition: transform var(--transition);
}
/* .color_wh 已無作用（顏色跟隨 currentColor），保留避免舊專案壞掉 */
.after_arrow:hover::after {
    transform: translateX(0.2em);
}

.best::after {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin: 0 3px;
    transform: translateY(20%);
    background-color: var(--color_ci_2);
    -webkit-mask: var(--icon_check_circle) center / contain no-repeat;
    mask: var(--icon_check_circle) center / contain no-repeat;
}

/* --------------------- */
/* 表格 相關
/* --------------------- */
/* 搭配 checkScrollBar() 偵測 */
.scroll_bar {
    border-right: var(--color_ci) 2px dashed;
    position: relative;
    padding-top: 20px;
}

.scroll_bar::before {
    content: '向右滑動檢視更多 ▷';
    position: absolute;
    top: 0;
    right: 3px;
    background-color: var(--color_ci);
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    z-index: 100;
    border: var(--color_ci) 1px solid;
    padding: 5px 0px 5px 5px;
}

.scroll_bar tr > *:first-child {
    position: sticky;
    left: 0;
    background-color: var(--color_bg);
}

/* --------------------- */
/* 文字 相關
/* --------------------- */
.ff_cn {
    font-family: var(--ff_cn);
}

.ff_cn_2 {
    font-family: var(--ff_cn_2);
    letter-spacing: 0.3em;
}

.ff_en {
    font-family: var(--ff_en);
    letter-spacing: 1px;
}

.ff_en_w {
    font-family: var(--ff_en_w);
    /* letter-spacing: 0.1em; */
}

.ff_dec {
    font-family: var(--ff_dec);
}
/* 截斷文字：行數由 --line 控制，或直接用 .text_cut_2 / .text_cut_3 */
.text_cut {
    --line: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: var(--line);
    -webkit-line-clamp: var(--line);
}
.text_cut_2 {
    --line: 2;
}
.text_cut_3 {
    --line: 3;
}

.text_ci {
    color: var(--color_ci_2) !important;
}

.text_start {
    text-indent: 2.3em;
}

.text_shadow {
    text-shadow: var(--text_shadow);
}

.text_circle_box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    padding: 5%; /* 內距使用相對單位，隨螢幕縮放 */
    box-sizing: border-box;
    aspect-ratio: 1 / 1; /* 保持正圓 */
    word-wrap: break-word;
}

.text_vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.text_rotate {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.text_justify {
    text-align: justify;
    text-align-last: justify;
}

.mix_blebd {
    mix-blend-mode: difference;
    filter: invert(1);
}

/* --------------------- */
/* 瀑布流 排版
/* --------------------- */
.masonry_grid {
    column-gap: 1.5rem; /* 欄位 間距 */
}
.masonry_grid > * {
    display: inline-block;
    width: 100%;
    break-inside: avoid; /* 內容不可分割 */
    margin-bottom: 1.5rem; /* 欄位 上下間距 */
}
/* SM */
@media (max-width: 767px) {
    .masonry_grid {
        column-count: 1; /* 欄位數 */
    }
}
/* MD */
@media (min-width: 768px) {
    .masonry_grid {
        column-count: 2; /* 欄位數 */
    }
}
/* LG */
@media (min-width: 992px) {
    .masonry_grid {
        column-count: 3; /* 欄位數 */
    }
}
/* XL */
@media (min-width: 1200px) {
    .masonry_grid {
        column-count: 3; /* 欄位數 */
    }
}

/* --------------------- */
/* 動畫 設定
/* --------------------- */
/* 捲動進場動畫已改用本地端 plugin/scrollReveal.js（見 app.js 的
   window.scrollReveal({...}) 呼叫），HTML 用 data-scroll-reveal 屬性驅動，
   不再需要這裡的 [data-scroll-class] / .ani_* / html.no_js 這一整套。 */

/* 滑鼠磁力吸附效果 */
.effect_mousemove_magnet {
    opacity: 1;
}
.effect_mousemove_magnet > * {
    will-change: transform; /* 預先告知瀏覽器將要發生的變化 */
    z-index: 1;
    cursor: pointer;
}
.effect_mousemove_magnet > *:hover {
    z-index: 100 !important;
}

.effect_messy_layout {
    opacity: 1;
}
.effect_messy_layout > *:not(.messy_off):hover {
    transform: translate(0) !important;
    z-index: 100 !important;
    cursor: pointer;
}

/* 使用者在系統中選擇「減少動態效果」時，停用動畫並直接顯示內容，
   scrollReveal.js 是用標準 CSS transition 做位移/淡入，這裡歸零
   transition-duration 一樣攔得住，不需要額外處理。 */
@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
 * 深色區塊
 * 在任一容器加上 .theme_dark（或 .bg_carbon）即可整段轉為深色配色，
 * 內部文字、邊框、表單、次要文字都會一併調整。
 * ===================================================================== */
.bg_carbon {
    background-color: var(--color_carbon) !important;
}

.theme_dark,
.bg_carbon {
    color: #ffffff;
}

.theme_dark .text_muted,
.bg_carbon .text_muted,
.theme_dark .text-muted,
.bg_carbon .text-muted {
    color: rgba(255, 255, 255, 0.62) !important;
}

.theme_dark hr,
.bg_carbon hr {
    border-color: var(--color_border_dark);
    opacity: 1;
}

.theme_dark .border,
.bg_carbon .border,
.theme_dark .border-top,
.bg_carbon .border-top,
.theme_dark .border-bottom,
.bg_carbon .border-bottom {
    border-color: var(--color_border_dark) !important;
}

.theme_dark .form-control,
.theme_dark .form-select,
.bg_carbon .form-control,
.bg_carbon .form-select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color_border_dark);
    color: #ffffff;
}

/* 淺色的主色底（提示區、標籤用） */
.bg_ci_soft {
    background-color: rgba(var(--color_ci_rgb), 0.1);
}

.text_muted {
    color: var(--color_muted);
}

/* 區塊上下留白（跟著斷點縮放） */
.section_py {
    padding-top: var(--section_py);
    padding-bottom: var(--section_py);
}

/* 錨點捲動時預留固定 header 的高度（讓 --header_height 真正生效） */
:target,
[id] {
    scroll-margin-top: calc(var(--header_height) + var(--sp_3));
}