@charset "UTF-8";
/* ==========================================================================
   custom.css — 追加樣式（於 style.css 之後載入）

   為什麼獨立成檔而不直接改 style.css：
   style.css 是 sass/style.sass 經 autoprefixer 處理後壓縮的產物，但專案內
   未保留任何建置設定（無 package.json / gulpfile / postcss.config），
   重新編譯會靜默掉失既有的瀏覽器前綴（例如 -o-object-fit:cover）。
   因此新樣式一律追加於此檔，不改寫 style.css。
   對應的 sass 原始碼已同步補進 sass/style.sass，供日後正式重建時使用。

   選擇器一律帶 [data-page="..."] 前綴，用意有二：
   1. 明確高過原規則的特異性，不必依賴「後載入」這個隱含條件。
   2. 把影響範圍限縮在該頁，避免動到其他頁面共用的 .main-container。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 工具列表：左側「工具功能」選單固定 + 獨立捲軸

   aside 本來就寫了 position:sticky; top:63px（style.sass 的 .pages aside），
   但一直沒有生效，原因是父層 .main-container 設了 overflow:hidden——
   祖先元素的 overflow 非 visible 時會成為 sticky 的捲動容器，使 sticky 失效。
   這裡改用 overflow-x:clip 保留原本的水平防溢出，同時不建立捲動容器。
   -------------------------------------------------------------------------- */
[data-page="tool-list"] .main-container {
    overflow-x: clip;
    overflow-y: visible;
}

/* 「進階篩選／搜尋框／應用面」這一塊原本就寫了 position:sticky，但因為
   .main-container 的 overflow:hidden 而一直失效。上面把 overflow 改成 clip
   之後它會連帶生效——這並非預期行為，因此明確還原為不固定。 */
[data-page="tool-list"] .tool-list-main .tool-list-title-wrap {
    position: static;
}

/* 桌機（sm 以上）：左欄自成捲動區，不隨右側工具列表捲動。
   手機版 aside 是橫向捲動的選單，不套用高度限制。 */
@media screen and (min-width: 576px) {
    [data-page="tool-list"] .main-container main > aside {
        /* sticky 停在 top:63px，因此最大高度取視窗剩餘空間 */
        max-height: calc(100vh - 63px);
        overflow-y: auto;
        /* 捲到底時不把捲動事件傳給頁面，避免右側跟著跳動 */
        overscroll-behavior: contain;
        padding-bottom: 40px;
        /* 捲軸位於 aside 右緣，緊貼右側工具列表會顯得侷促，
           用外距把整個左欄（含捲軸）與右側內容拉開。 */
        margin-right: 20px;
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .25) transparent;
    }

    /* 捲軸造型對齊 sass 既有的 scrollbar mixin（寬度 7px） */
    [data-page="tool-list"] .main-container main > aside::-webkit-scrollbar {
        width: 7px;
    }

    [data-page="tool-list"] .main-container main > aside::-webkit-scrollbar-track {
        background-color: transparent;
        border: 0;
        border-radius: 5px;
    }

    [data-page="tool-list"] .main-container main > aside::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .25);
        border-radius: 5px;
    }

    [data-page="tool-list"] .main-container main > aside:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .45);
    }
}


/* --------------------------------------------------------------------------
   4. 工具列表：站內搜尋的「相關專題」區塊

   只在有關鍵字且比對到專題標題時輸出（由 view 的條件式控制），
   無結果時整塊不存在，不影響原本的瀏覽動線。
   造型沿用站上既有的膠囊標籤語言。
   -------------------------------------------------------------------------- */
[data-page="tool-list"] .related-topics {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

[data-page="tool-list"] .related-topics-title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

/* 標題底線用主色，呼應站上 aside 連結 hover 的表現方式 */
[data-page="tool-list"] .related-topics-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: -1;
    width: 100%;
    height: 5px;
    background-color: #A4FF00;
}

[data-page="tool-list"] .related-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[data-page="tool-list"] .related-topic-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 18px;
    border: 1px solid #000;
    border-radius: 19px;
    color: #000;
    font-size: .9375rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
    /* 專題標題可能很長，限制單行並以 ... 收尾 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[data-page="tool-list"] .related-topic-item:hover {
    background-color: #000;
    color: #fff;
}

@media screen and (max-width: 575.98px) {
    [data-page="tool-list"] .related-topics {
        margin-bottom: 24px;
    }

    [data-page="tool-list"] .related-topic-item {
        font-size: .875rem;
        padding: 6px 14px;
    }
}


/* --------------------------------------------------------------------------
   3. Header 站內搜尋框

   沿用工具列表既有的 .input-search 樣式（圓角外框 + 右側放大鏡按鈕），
   僅調整寬度以配合 header 版面。header .menu 是 space-between 的 flex，
   桌機時 .hamburger 隱藏，因此排列為：logo | nav | 搜尋框。
   -------------------------------------------------------------------------- */
/* 桌機：搜尋框是 nav > ul 的最後一個 li。
   既有規則 nav > ul > li:not(:last-child) 會給前面各項 margin-right: 40px，
   搜尋框身為最後一項不帶右間距，無需另外覆寫。 */
header .menu nav .desktop-menu-item--search {
    display: flex;
    align-items: center;
}

header .menu nav .header-search input {
    width: 200px;
}

/* nav 本身在 lg 以下即 display:none，搜尋框隨之隱藏；
   這條僅作保險，避免日後 nav 顯示規則調整時意外露出。 */
@media screen and (max-width: 991.98px) {
    header .menu nav .header-search {
        display: none;
    }
}

/* 手機：搜尋框是 .menu-list 的最後一個 li。
   .menu-link 的視覺左右間距為 margin 10px + padding 10px = 20px，
   這裡以 li 的 padding 對齊，讓搜尋框與上方選單項目切齊。 */
.mobile-menu .menu-item--search {
    padding: 6px 20px 0;
}

/* 只讓輸入框填滿選單寬度即可。高度、字級、放大鏡按鈕的定位一律沿用
   .input-search 既有樣式——它在 sm 以下有 padding:10px 0 且按鈕 top:10px，
   若在此覆寫 top/height 會使按鈕脫離輸入框。 */
.mobile-menu .header-search--mobile input {
    width: 100%;
}


/* --------------------------------------------------------------------------
   2. 工具內頁：「前往官網」按鈕

   原本標題旁只有一個裸的 icon-link.svg：沒有文字、沒有任何樣式定義，
   而且 md 以下直接 display:none（手機完全看不到）。
   改為沿用 .btn-radius 的膠囊造型（h46 / r23），並以品牌主色 mainG
   (#A4FF00) 填色，讓它成為頁面上的主要行動點。
   -------------------------------------------------------------------------- */
[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap {
    /* 標題與按鈕在窄螢幕可換行，避免長工具名把按鈕擠出畫面 */
    flex-wrap: wrap;
    gap: 12px 0;
}

[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: 20px;
    padding: 0 26px;
    height: 46px;
    border-radius: 23px;
    background-color: #A4FF00;
    border: 1px solid #A4FF00;
    color: #000;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.8;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(164, 255, 0, .45);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}

[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official img {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official:hover {
    background-color: #000;
    border-color: #000;
    color: #A4FF00;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
    transform: translateY(-2px);
}

/* icon 為深色線稿，hover 轉為黑底時需反白才看得見 */
[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official:hover img {
    transform: translate(2px, -2px);
    filter: invert(1);
}

[data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* md 以下：原樣式把標題旁的連結整個藏起來，這裡讓按鈕維持顯示並縮小尺寸 */
@media screen and (max-width: 767.98px) {
    [data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official {
        display: inline-flex;
        margin-left: 0;
        padding: 0 20px;
        height: 40px;
        border-radius: 20px;
        font-size: .875rem;
    }

    [data-page="tool-content"] .tool-content-main .content-wrap .title-wrap a.btn-official img {
        width: 14px;
        height: 14px;
    }
}