@charset "UTF-8";
/*風格細節調整*/
/*for dashboard*/
:root {
    /*色調*/
    /* 色調（淺亮風格）*/
    --color-main: #472aa5; /* 主色，偏冷藍紫作為點綴 */
    --color-border: #e8ebff; /* 淺邊框色 */
    --color-read: #f4f6fb; /* 讀取/次要背景 */
    --color-pair: #7885c2; /* 配色對色，淺藍紫 */
    --color-scrollbar: rgb(150, 155, 184);
    --logo-path: url("/images/imrs/imrs-lab-light.svg");

    /* 背景顏色（以白/乳白為主）*/
    --color-dev: #f0f8ff25; /* 開發/標記用輕微冷色遮罩 */
    --color-bg-main: #d5daef; /* 主要背景為純白 */
    --color-bg-second: #fbfbfd; /* 次要區塊，微微區隔白色 */
    --color-bg-popup: #ffffff; /* popup 也維持白色，搭配陰影 */
    --bg-highlight: rgba(255, 255, 255, 0.7);
    --rd-area: 25px;
    --rd-item: 10px;
    --gap: 10px;
    --gap-mobile: 20px;

    /* 高亮色（淺且清爽）*/
    --color-highlight-first: #472aa5;
    --color-highlight-second: #564794;
    --color-highlight-third: #3e365e;

    --bg-nav-mobile: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
    --bg-switch: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
    --bg-channel-card: linear-gradient(170deg, #eef3ff 0%, #f7f9ff 80%);

    --font-default: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial, sans-serif;

    /* 按鈕文字/狀態色 */
    --text-btn--primary: #3341a8; /* 深藍作為按鈕文字/主色 */
    --text-btn-hover--primary: #2a37a0;

    /* 遊戲對話背景（改為淺色漸層）*/
    /* --bg-game-chat: linear-gradient(to bottom, rgba(250, 251, 255, 0.9) 10%, rgba(244, 248, 255, 0.95) 70%),
        linear-gradient(to bottom, rgba(230, 238, 255, 0) 0%, rgba(230, 238, 255, 0.6) 15%, rgba(230, 238, 255, 0.4) 100%); */
    --bg-game-chat:
        linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);

    --height-header: 80px;

    /* 主要背景色系（淺）*/
    --bg-img-path: url("/images/imrs/bg-grid.svg");
    --bg-img-mode: plus-lighter;
    --bg-primary: #ffffff;
    --bg-header: linear-gradient(to bottom, var(--bg-primary) 15%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
    --bg-secondary: rgba(245, 247, 255, 0.6);
    --bg-tertiary: rgba(240, 244, 255, 0.6);
    --bg-fade: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    --bg-gradient: linear-gradient(to bottom, #e1e5f3, #eaedf9 50%, #d5daef 100%);

    /* 漸層（淺色調）*/
    --gradient-primary: linear-gradient(to bottom, rgba(91, 108, 255, 0.06), rgba(91, 108, 255, 0.02));
    --gradient-secondary: linear-gradient(135deg, rgba(91, 108, 255, 0.12), rgba(120, 140, 255, 0.06));

    /* 邊框顏色（淺淡）*/
    --border-primary: rgba(50, 63, 120, 0.08);
    --border-secondary: rgba(80, 95, 200, 0.12);
    --border-light: rgba(16, 24, 40, 0.06);

    /* 文字顏色（深色字在淺背景上）*/
    --text-primary: #0f1724; /* 主要文字：接近黑但較柔和 */
    --text-secondary: rgba(15, 23, 36, 0.75);
    --text-tertiary: rgba(15, 23, 36, 0.5);
    --text-highlight: #4757ff; /* 強調文字色，對比白底 */
    --text-highlight-colorful: #6e59ff;
    --text-primary-dark: #2b2f45;
    --text-gradient: linear-gradient(to bottom, #6a5cff 0%, #473e89 50%, #6a5cff 50%, #9f94ff 100%);

    --input-bg: rgba(255, 255, 255, 0.7);
    --input-text: var(--text-secondary);
    --input-border: var(--a);
    --input-text-focus: var(--text-primary);
    --input-bg-focus: rgb(255, 255, 255);
    --input-border-focus: rgba(150, 152, 255, 0.5);
    --input-shadow-focus: 0 0 8px rgba(150, 152, 255, 0.5);
    --dropdown-bg: rgba(240, 243, 255, 0.98);
    --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* 特效顏色（淡淡光暈）*/
    --glow-primary: rgba(42, 50, 130, 0.12);
    --glow-secondary: rgba(143, 166, 255, 0.08);
    --glow-accent: rgba(109, 127, 199, 0.06);

    /* 功能性顏色 */
    --switch-active: var(--color-main);
    --error: rgb(220, 70, 70);

    /* 共用顏色變數 */
    --blur-overlay: rgba(10, 14, 30, 0.04); /* 輕微遮罩 */
    --white-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95), transparent);
    --scrollbar-color: #d2d6ff;

    /* 寬度 */
    --width-small: clamp(480px, 50%, 720px);
    --width-large: clamp(480px, 70vw, 1200px);
    /* post 卡片（淺亮漸層）*/
    --bg-game-card: linear-gradient(30deg, #f5f7ff 0%, #eef3ff 100%);

    --shadow-cover-post: rgba(21, 24, 33, 0.04) 0px 6px 18px;
    --shadow-shine: 0 0 20px rgba(109, 127, 199, 0.06), inset 0 0 30px rgba(255, 255, 255, 0.7), inset 0 0 20px rgba(109, 127, 199, 0.03);
    --color-border-post: #e6e9f7;
    --color-bg-post: linear-gradient(to bottom, #ffffff, #fbfbffbb);

    --title-gradient: linear-gradient(to bottom, #9ba8ff 0%, #ffffff 50%, #e9eaff 100%);
    --title-size: clamp(20px, 2.75vh, 36px);

    --game-list-search-bg: #ffffff9e;
    --game-list-search-border: rgb(255, 255, 255);
    --game-list-search-text: #443658;
    --game-list-search-shadow: rgb(212, 217, 244) 0px 0px 8px, rgba(255, 255, 255, 0.5) 0px 3px 6px inset;
    --game-list-search-border-focus: rgb(255, 255, 255);
    --game-list-search-shadow-focus: rgba(159, 172, 237, 0.7) 0px 0px 20px, rgba(255, 255, 255, 0.7) 0px 3px 7px inset;
    --game-card-shadow: rgba(108, 85, 189, 0.1);
    --game-card-shadow-hover: rgba(46, 35, 84, 0.2);
    /*setting*/
    --nav-bg: linear-gradient(
        to bottom,
        rgba(171, 183, 230, 0.6),
        rgb(239 242 255 / 60%) 30px,
        rgb(177 188 241 / 60%) calc(100% - 30px),
        rgba(118, 138, 212, 0.3) 100%
    );
    --profile-border: var(--border-primary);
    --profile-shadow: var(--glow-accent);
    --settings-bg: radial-gradient(circle, var(--bg-secondary) 0%, var(--bg-tertiary) 30%, var(--bg-primary) 90%);

    /* 新增的設定 */
    --tab-divider: var(--border-light);
    --tab-text: var(--text-tertiary);
    --tab-text-hover: var(--text-secondary);
    --tab-text-active: var(--text-primary);
    --tab-line: var(--text-primary);
    --tab-line-glow: var(--glow-primary);
    --tab-bg-inactive: #fff;

    --scrollbar-thumb: var(--scrollbar-color);

    --profile-text: var(--text-highlight);
    --profile-title-glow: rgba(188, 202, 255, 0.7);
    --profile-ai-border: rgba(129, 150, 234, 0.4);
    --profile-ai-label: rgba(143, 166, 255, 0.8);
    --profile-ai-bg: rgba(89, 107, 177, 0.15);
    --profile-description-border: rgba(129, 150, 234, 0.2);
    --bg-namecard: linear-gradient(
        -45deg,
        rgba(113, 134, 217, 0.6) 0%,
        rgba(234, 219, 255, 0.3) 35%,
        rgba(222, 245, 255, 0.6) 70%,
        rgba(217, 234, 255, 0.6) 100%
    );
    --text-partner: #fff;
    --bg-partner-inside: rgba(222, 245, 255, 0.8);
    --bg-partner: linear-gradient(
        135deg,
        #321c82 0%,
        /* 1. 起點：比原版稍亮一點的深紫，減少沉悶感 */ #472aa5 30%,
        /* 2. 核心：品牌主色，維持視覺重心 */ #6e52d8 55%,
        /* 3. 橋接：新增的過渡紫，讓光影變化更平滑 */ #9680f7 80%,
        /* 4. 提亮：更明亮的電光紫，營造背光發光的視覺質感 */ #42e2d8 100% /* 5. 亮點：更清透的青色，像光束一樣切入 */
    );
    --shadow-point: rgba(255, 255, 255, 0.6);
    --bg-point: rgba(255, 255, 255, 0.3);
    --menu-link: var(--text-secondary);
    --menu-link-hover: var(--color-highlight-first);
    --menu-divider: rgba(255, 255, 255, 0.2);
    --menu-divider-hover: rgba(255, 255, 255, 0.5);
    --menu-logout: rgba(222, 69, 69, 0.8);
    --menu-logout-hover: rgba(167, 13, 13, 0.8);

    --form-border: rgba(160, 193, 209, 0.08);
    --switch-bg: rgba(160, 157, 173, 0.9);
    --switch-dot: #fff;
    --switch-dot-shadow: rgba(86, 83, 98, 0.3);
    --radio-border: rgba(160, 157, 173, 0.9);

    /* 新增或修改的變數 */
    --nav-container-shadow: rgba(89, 107, 177, 0.08);
    --avatar-inset-glow: rgba(105, 126, 207, 0.05);

    --menu-text-shadow: rgba(255, 255, 255, 0.1);
    --menu-logout-shadow: rgba(255, 100, 100, 0.3);
    --menu-logout-shadow-2: rgba(255, 100, 100, 0.2);

    --profile-text-shadow: rgba(76, 70, 149, 0.2);

    /* 其他相關的陰影效果 */
    --profile-title-shadow: 0 0 10px var(--profile-title-glow), 0 0 20px var(--glow-secondary), 0 0 35px var(--glow-secondary);
    --profile-stat-shadow: 0 0 10px var(--glow-secondary);
    --menu-hover-shadow: 0 0 10px var(--glow-primary), 0 0 20px var(--glow-primary);

    /* 組織相關的陰影效果 */
    --shadow-effects: {
        --nav-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        --profile-shadow: 0 0 20px var(--glow-accent);
        --avatar-shadow: 0 0 20px var(--glow-accent);
        --ai-companion-shadow: 0 0 10px var(--glow-accent);
    };

    /* 組織相關的背景效果 */
    --background-effects: {
        --nav-bg-gradient: var(--gradient-secondary), var(--gradient-primary);
        --form-bg-gradient: linear-gradient(to bottom, var(--blur-overlay), transparent);
    };
    /* 遊戲內，深色淺色相同*/
    --color-main-game: #879ffd;
    --text-primary-game: #fff;
    --text-secondary-game: rgba(227, 238, 245, 0.8);
    --text-tertiary-game: rgba(224, 235, 243, 0.5);
    --text-highlight-game: #c0bdff;
    --text-highlight-colorful-game: #ae84ff;
    --bg-game-card-game: linear-gradient(30deg, #879ffd 0%, #435084 100%);
    --bg-game-chat-game:
        linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);
}
@media (prefers-color-scheme: dark) {
    :root {
        /*色調*/
        --color-main: #879ffd;
        --color-border: #3c3e52;
        --color-read: #dfdfdf;
        --color-pair: #72799a;
        --color-scrollbar: rgb(74, 77, 107);
        --logo-path: url("/images/imrs/imrs-lab-dark.svg");
        /*背景顏色*/
        --color-dev: #8ce3dd25;
        --color-bg-main: #262836; /*#252734*/
        --color-bg-second: #1e1f2b;
        --color-bg-popup: #303242; /*#252734*/
        --bg-highlight: rgba(136, 160, 255, 0.3);
        --rd-area: 25px;
        --rd-item: 10px;
        --gap: 10px;
        --gap-mobile: 20px;
        --color-highlight-first: #fff;
        --color-highlight-second: #cfd8fc;
        --color-highlight-third: #b0bceb;
        --bg-nav-mobile: linear-gradient(to bottom, #2628368c 0%, #262836 80%);
        --bg-switch: linear-gradient(to top, #262836b1 0%, #262836 100%);
        --bg-channel-card: linear-gradient(170deg, #6c77a4 0%, #515a7ca4 80%);
        /* --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%); */
        --font-default: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
        --text-btn--primary: #3c2077;

        /* --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%); */
        /*遊戲對話背景*/
        --bg-game-chat:
            linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
            linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);
        --height-header: 80px;

        /*  */
        /* 主要背景色系 */
        --bg-img-path: url("/images/imrs/bg-grid.svg");
        --bg-img-mode: lighten;
        --bg-primary: rgb(37, 39, 52);
        --bg-header: linear-gradient(to bottom, var(--bg-primary) 15%, rgba(37, 39, 52, 0.7) 60%, rgba(37, 39, 52, 0) 100%);
        /*rgb(23, 28, 48)*/
        --bg-secondary: rgba(51, 65, 119, 0.5);
        --bg-tertiary: rgba(50, 61, 107, 0.6);
        --bg-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
        --bg-gradient: linear-gradient(to bottom, #262836, #171821, #262836 70%, #2f3960 100%);
        /* 漸層背景 */
        --gradient-primary: linear-gradient(to bottom, rgba(89, 107, 177, 0.08), rgba(89, 107, 177, 0.03));
        --gradient-secondary: linear-gradient(135deg, rgba(89, 107, 177, 0.346), rgba(44, 57, 107, 0.675));
        /* 邊框顏色 */
        --border-primary: rgba(105, 126, 207, 0.3);
        --border-secondary: rgba(129, 150, 234, 0.7);
        --border-light: rgba(255, 255, 255, 0.1);
        /* 文字顏色 */
        --text-primary: #fff;
        --text-secondary: rgba(227, 238, 245, 0.8);
        --text-tertiary: rgba(224, 235, 243, 0.5);
        --text-highlight: #c0bdff;
        --text-highlight-colorful: #ae84ff;
        --text-btn--primary: #3c2077;
        --text-btn-hover--primary: #543695;
        --text-primary-dark: #3d2f5b;
        --text-gradient: linear-gradient(to bottom, #a296ff 0%, #f1efff 50%, #a296ff 50%, #cac3ff 100%);
        --input-bg: rgba(62, 65, 89, 0.1);
        --input-text: var(--text-secondary);
        --input-border: var(--a);
        --input-text-focus: var(--text-primary);
        --input-bg-focus: rgba(62, 65, 89, 0.3);
        --input-border-focus: rgba(162, 150, 255, 0.5);
        --input-shadow-focus: 0 0 8px rgba(162, 150, 255, 0.5);
        --dropdown-bg: rgba(49, 52, 74, 0.98);
        --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        /* 特效顏色 */
        --glow-primary: rgba(255, 255, 255, 0.5);
        --glow-secondary: rgba(143, 166, 255, 0.4);
        --glow-accent: rgba(109, 127, 199, 0.8);
        /* 功能性顏色 */
        --switch-active: #88a0ff;
        --error: rgb(255, 100, 100);
        /* 新增一些共用的顏色變數 */
        --blur-overlay: rgba(0, 0, 0, 0.2);
        --white-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
        --scrollbar-color: #8899f0;
        /*寬度*/
        --width-small: clamp(480px, 50%, 720px);
        /*post卡片*/
        --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%);

        --shadow-cover-post: rgba(18, 12, 33, 0.6) 0px 0px 8px;
        --shadow-shine: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
        --color-border-post: #5b607a;
        --color-bg-post: linear-gradient(to bottom, #191c2b, #35394c);

        --title-gradient: linear-gradient(to bottom, #a296ff 0%, #f1efff 50%, #a296ff 50%, #cac3ff 100%);
        --title-size: clamp(20px, 2.75vh, 36px);
        --game-list-search-bg: rgba(38, 42, 74, 0.69);
        --game-list-search-border: rgba(65, 74, 110);
        --game-list-search-text: #ffffff;
        --game-list-search-shadow: rgba(67, 76, 114, 1) 0px 0px 8px, rgba(0, 0, 0, 0.4) 0px 3px 6px inset;
        --game-list-search-border-focus: rgb(71, 81, 121);
        --game-list-search-shadow-focus: rgba(92, 104, 156, 0.7) 0px 0px 15px, rgba(0, 0, 0, 0.4) 0px 3px 6px inset;
        --game-card-shadow: rgba(0, 0, 0, 0.1);
        --game-card-shadow-hover: rgba(0, 0, 0, 0.15);

        /*setting*/
        --nav-bg: linear-gradient(135deg, rgba(35, 46, 92, 0.8), rgba(35, 46, 92, 0.6) 40%, rgba(35, 46, 92, 0.4) 70%, rgba(35, 46, 92, 0.2));
        --profile-border: var(--border-primary);
        --profile-shadow: var(--glow-accent);
        --settings-bg: radial-gradient(circle, var(--bg-secondary) 0%, var(--bg-tertiary) 30%, var(--bg-primary) 90%);

        /* 新增的設定 */
        --tab-divider: var(--border-light);
        --tab-text: var(--text-tertiary);
        --tab-text-hover: var(--text-secondary);
        --tab-text-active: var(--text-primary);
        --tab-line: var(--text-primary);
        --tab-line-glow: var(--glow-primary);
        --tab-bg-inactive: var(--blur-overlay);

        --scrollbar-thumb: var(--scrollbar-color);

        --profile-text: var(--text-highlight);
        --profile-title-glow: rgba(188, 202, 255, 0.7);
        --profile-ai-border: rgba(129, 150, 234, 0.4);
        --profile-ai-label: rgba(143, 166, 255, 0.8);
        --profile-ai-bg: rgba(89, 107, 177, 0.15);
        --profile-description-border: rgba(129, 150, 234, 0.2);
        --bg-namecard: linear-gradient(
            -45deg,
            rgba(28, 38, 82, 0.3) 0%,
            rgba(72, 91, 170, 0.2) 35%,
            rgba(99, 98, 162, 0.2) 70%,
            rgba(70, 69, 128, 0.3) 100%
        );
        --shadow-point: rgba(128, 160, 255, 0.6);
        --bg-point: rgba(128, 160, 255, 0.15);
        --text-partner: #fff;
        --bg-partner-inside: var(--nav-bg);
        --bg-partner: linear-gradient(
            135deg,
            #321c82 0%,
            /* 1. 起點：比原版稍亮一點的深紫，減少沉悶感 */ #472aa5 30%,
            /* 2. 核心：品牌主色，維持視覺重心 */ #6e52d8 55%,
            /* 3. 橋接：新增的過渡紫，讓光影變化更平滑 */ #9680f7 80%,
            /* 4. 提亮：更明亮的電光紫，營造背光發光的視覺質感 */ #42e2d8 100% /* 5. 亮點：更清透的青色，像光束一樣切入 */
        );
        --menu-link: var(--text-secondary);
        --menu-link-hover: var(--text-primary);
        --menu-divider: rgba(255, 255, 255, 0.2);
        --menu-divider-hover: rgba(255, 255, 255, 0.5);
        --menu-logout: rgba(255, 100, 100, 0.8);
        --menu-logout-hover: rgb(255, 100, 100);

        --form-border: rgba(160, 193, 209, 0.08);
        --switch-bg: rgba(255, 255, 255, 0.2);
        --switch-dot: var(--text-primary);
        --switch-dot-shadow: rgba(48, 62, 119, 0.3);
        --radio-border: rgba(255, 255, 255, 0.3);

        /* 新增或修改的變數 */
        --nav-container-shadow: rgba(89, 107, 177, 0.08);
        --avatar-inset-glow: rgba(105, 126, 207, 0.05);

        --menu-text-shadow: rgba(255, 255, 255, 0.1);
        --menu-logout-shadow: rgba(255, 100, 100, 0.3);
        --menu-logout-shadow-2: rgba(255, 100, 100, 0.2);

        --profile-text-shadow: rgba(76, 70, 149, 0.2);

        /* 其他相關的陰影效果 */
        --profile-title-shadow: 0 0 10px var(--profile-title-glow), 0 0 20px var(--glow-secondary), 0 0 35px var(--glow-secondary);
        --profile-stat-shadow: 0 0 10px var(--glow-secondary);
        --menu-hover-shadow: 0 0 10px var(--glow-primary), 0 0 20px var(--glow-primary);

        /* 組織相關的陰影效果 */
        --shadow-effects: {
            --nav-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            --profile-shadow: 0 0 20px var(--glow-accent);
            --avatar-shadow: 0 0 20px var(--glow-accent);
            --ai-companion-shadow: 0 0 10px var(--glow-accent);
        }

        /* 組織相關的背景效果 */
        --background-effects: {
            --nav-bg-gradient: var(--gradient-secondary), var(--gradient-primary);
            --form-bg-gradient: linear-gradient(to bottom, var(--blur-overlay), transparent);
        }
    ;
    }
}

/* 手動覆寫暗色主題：當在 HTML / BODY 或根容器加上 .dark-theme 時會套用（優先於 :root） */
.dark-theme,
html.dark-theme,
body.dark-theme {
}

/* 使用說明：在 JS 中切換暗色主題 */
/* document.documentElement.classList.add('dark-theme') */
/* document.documentElement.classList.remove('dark-theme') */

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Keyframes for the rotating animation */
@keyframes rotating {
    0% {
        --a: 0deg;
    }
    100% {
        --a: 360deg;
    }
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}
.--pos-1:before {
    -webkit-mask-position: 0% 0;
}

.--pos-2:before {
    -webkit-mask-position: 1.45% 0;
}

.--pos-3:before {
    -webkit-mask-position: 2.9% 0;
}

.--pos-4:before {
    -webkit-mask-position: 4.35% 0;
}

.--pos-5:before {
    -webkit-mask-position: 5.8% 0;
}

.--pos-6:before {
    -webkit-mask-position: 7.25% 0;
}

.--pos-7:before {
    -webkit-mask-position: 8.7% 0;
}

.--pos-8:before {
    -webkit-mask-position: 10.14% 0;
}

.--pos-9:before {
    -webkit-mask-position: 11.59% 0;
}

.--pos-10:before {
    -webkit-mask-position: 13.04% 0;
}

.--pos-11:before {
    -webkit-mask-position: 14.49% 0;
}

.--pos-12:before {
    -webkit-mask-position: 15.94% 0;
}

.--pos-13:before {
    -webkit-mask-position: 17.39% 0;
}

.--pos-14:before {
    -webkit-mask-position: 18.84% 0;
}

.--pos-15:before {
    -webkit-mask-position: 20.29% 0;
}

.--pos-16:before {
    -webkit-mask-position: 21.74% 0;
}

.--pos-17:before {
    -webkit-mask-position: 23.19% 0;
}

.--pos-18:before {
    -webkit-mask-position: 24.64% 0;
}

.--pos-19:before {
    -webkit-mask-position: 26.09% 0;
}

.--pos-20:before {
    -webkit-mask-position: 27.54% 0;
}

.--pos-21:before {
    -webkit-mask-position: 28.99% 0;
}

.--pos-22:before {
    -webkit-mask-position: 30.43% 0;
}

.--pos-23:before {
    -webkit-mask-position: 31.88% 0;
}

.--pos-24:before {
    -webkit-mask-position: 33.33% 0;
}

.--pos-25:before {
    -webkit-mask-position: 34.78% 0;
}

.--pos-26:before {
    -webkit-mask-position: 36.23% 0;
}

.--pos-27:before {
    -webkit-mask-position: 37.68% 0;
}

.--pos-28:before {
    -webkit-mask-position: 39.13% 0;
}

.--pos-29:before {
    -webkit-mask-position: 40.58% 0;
}

.--pos-30:before {
    -webkit-mask-position: 42.03% 0;
}

.--pos-31:before {
    -webkit-mask-position: 43.48% 0;
}

.--pos-32:before {
    -webkit-mask-position: 44.93% 0;
}

.--pos-33:before {
    -webkit-mask-position: 46.38% 0;
}

.--pos-34:before {
    -webkit-mask-position: 47.83% 0;
}

.--pos-35:before {
    -webkit-mask-position: 49.28% 0;
}

.--pos-36:before {
    -webkit-mask-position: 50.72% 0;
}

.--pos-37:before {
    -webkit-mask-position: 52.17% 0;
}

.--pos-38:before {
    -webkit-mask-position: 53.62% 0;
}

.--pos-39:before {
    -webkit-mask-position: 55.07% 0;
}

.--pos-40:before {
    -webkit-mask-position: 56.52% 0;
}

.--pos-41:before {
    -webkit-mask-position: 57.97% 0;
}

.--pos-42:before {
    -webkit-mask-position: 59.42% 0;
}

.--pos-43:before {
    -webkit-mask-position: 60.87% 0;
}

.--pos-44:before {
    -webkit-mask-position: 62.32% 0;
}

.--pos-45:before {
    -webkit-mask-position: 63.77% 0;
}

.--pos-46:before {
    -webkit-mask-position: 65.22% 0;
}

.--pos-47:before {
    -webkit-mask-position: 66.67% 0;
}

.--pos-48:before {
    -webkit-mask-position: 68.12% 0;
}

.--pos-49:before {
    -webkit-mask-position: 69.57% 0;
}

.--pos-50:before {
    -webkit-mask-position: 71.01% 0;
}

.--pos-51:before {
    -webkit-mask-position: 72.46% 0;
}

.--pos-52:before {
    -webkit-mask-position: 73.91% 0;
}

.--pos-53:before {
    -webkit-mask-position: 75.36% 0;
}

.--pos-54:before {
    -webkit-mask-position: 76.81% 0;
}

.--pos-55:before {
    -webkit-mask-position: 78.26% 0;
}

.--pos-56:before {
    -webkit-mask-position: 79.71% 0;
}

.--pos-57:before {
    -webkit-mask-position: 81.16% 0;
}

.--pos-58:before {
    -webkit-mask-position: 82.61% 0;
}

.--pos-59:before {
    -webkit-mask-position: 84.06% 0;
}

.--pos-60:before {
    -webkit-mask-position: 85.51% 0;
}

.--pos-61:before {
    -webkit-mask-position: 86.96% 0;
}

.--pos-62:before {
    -webkit-mask-position: 88.41% 0;
}

.--pos-63:before {
    -webkit-mask-position: 89.86% 0;
}

.--pos-64:before {
    -webkit-mask-position: 91.3% 0;
}

.--pos-65:before {
    -webkit-mask-position: 92.75% 0;
}

.--pos-66:before {
    -webkit-mask-position: 94.2% 0;
}

.--pos-67:before {
    -webkit-mask-position: 95.65% 0;
}

.--pos-68:before {
    -webkit-mask-position: 97.1% 0;
}

.--pos-69:before {
    -webkit-mask-position: 98.55% 0;
}

.--pos-70:before {
    -webkit-mask-position: 100% 0;
}

.imrs-icon {
    font-size: 0;
    display: block;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: transform;
}

.imrs-icon:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    -webkit-mask-image: url("../images/imrs-iconset.svg");
    -webkit-mask-size: auto 100%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--color-pair);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: background-color;
    width: 26px;
    height: 26px;
}

.imrs-icon.--small:before {
    width: 18px;
    height: 18px;
}

html,
body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
    line-height: 1.375;
    color: #000;
    font-size: 1em;
    background-color: var(--color-bg-main);
    font-family: var(--font-default);
    color: var(--color-read);
}

html {
    /* 為 Webkit 瀏覽器（如 Chrome 和 Safari）設定滾動條樣式 */
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
    /* 滾動條顏色 背景顏色 */
}

html::-webkit-scrollbar {
    width: 12px;
    /* 滾動條寬度 */
}

html::-webkit-scrollbar-track {
    background: transparent;
    /* 滾動條背景顏色 */
}

html::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    /* 滾動條顏色 */
    border-radius: 20px;
    /* 滾動條圓角 */
    transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}