html {
    font-size: 16px;
}

/* === 主題配色方案 === */
/* 預設主題 (綠色系) */
:root {
    /* === 主要背景色系 === */
    --primary-color: rgba(141, 176, 1, 0.2);
    --secondary-color: rgba(176, 121, 3, 0.9);
    --background-light: rgba(255, 235, 235, 0.6);
    --background-white: rgba(255, 255, 255, 0.8);
    --background-solid: #ffffff;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(255, 255, 255, 0.8);
    --background-opt_div_checked: rgba(91, 234, 172, 0.2);
    --accent-color: rgba(3, 176, 171, 0.6);
    --accent-f-color: rgba(15, 17, 17, 0.95);
    --hover-color: rgba(72, 255, 0, 0.3);
    --hover-f-color: rgba(15, 17, 17, 0.5);
    --button-color: rgba(18, 184, 128, 0.9);
    --button-f-color: #ffffff;

    /* === 文字與內容區域 === */
    --text-color: rgba(30, 30, 30, 0.85);
    --question-bg: rgba(176, 101, 3, 0.2);
    --input-bg: rgba(150, 255, 200, 0.6);

    /* === 表格色系 === */
    --table-header-bg: rgba(20, 20, 20, 0.85);
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(3, 176, 171, 0.1);
    --table-row-even-bg: rgba(141, 176, 1, 0.15);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(255, 45, 45, 0.746);
    /* 淡紅警示 */
    --alert-info-color: rgba(255, 255, 255, 0.9);
    /* 強化青綠資訊 */
}

/* 藍色主題 */
[data-theme="theme-2"] {
    /* === 主要背景色系 === */
    --primary-color: rgba(59, 130, 246, 0.2);
    --secondary-color: rgba(37, 99, 235, 0.9);
    --background-light: rgba(241, 245, 249, 0.6);
    --background-white: rgba(248, 250, 252, 0.8);
    --background-solid: #f8fafc;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(248, 250, 252, 0.8);
    --background-opt_div_checked: rgba(41, 128, 128, 0.1);
    --accent-color: rgba(51, 170, 234, 0.6);
    --accent-f-color: rgba(15, 23, 42, 0.95);
    --hover-color: rgba(34, 197, 192, 0.3);
    --hover-f-color: rgba(15, 23, 42, 0.85);
    --button-color: rgba(59, 130, 246, 0.7);
    --button-f-color: #ffffff;

    /* === 文字與內容區域 === */
    --text-color: rgba(15, 23, 42, 0.85);
    --question-bg: rgba(59, 130, 246, 0.2);
    --input-bg: rgba(99, 102, 241, 0.5);

    /* === 表格色系 === */
    --table-header-bg: rgba(15, 23, 42, 0.85);
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(59, 130, 246, 0.1);
    --table-row-even-bg: rgba(99, 102, 241, 0.15);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(255, 0, 0, 0.6);
    /* 淡紅警示 */
    --alert-info-color: rgb(255, 255, 255);
    /* 深藍資訊 */
}

/* 紫紅色主題 */
[data-theme="theme-3"] {
    /* === 主要背景色系 === */
    --primary-color: rgba(236, 72, 153, 0.2);
    --secondary-color: rgba(190, 24, 93, 0.9);
    --background-light: rgba(253, 244, 255, 0.6);
    --background-white: rgba(255, 251, 254, 0.8);
    --background-solid: #fffbff;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(255, 251, 254, 0.8);
    --background-opt_div_checked: rgba(192, 60, 180, 0.2);
    --accent-color: rgba(168, 85, 247, 0.6);
    --accent-f-color: #ffffff;
    --hover-color: rgba(251, 191, 36, 0.3);
    --hover-f-color: rgba(24, 24, 27, 0.85);
    --button-color: rgba(236, 72, 153, 0.7);
    --button-f-color: #ffffff;

    /* === 文字與內容區域 === */
    --text-color: rgba(24, 24, 27, 0.85);
    --question-bg: rgba(236, 72, 153, 0.2);
    --input-bg: rgba(168, 85, 247, 0.5);

    /* === 表格色系 === */
    --table-header-bg: rgba(24, 24, 27, 0.85);
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(236, 72, 153, 0.1);
    --table-row-even-bg: rgba(168, 85, 247, 0.15);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(58, 224, 50, 0.6);
    /* 主色延伸警示 */
    --alert-info-color: rgba(168, 85, 247, 0.9);
    /* 紫色資訊強調 */
}

/* 橘黃色主題 */
[data-theme="theme-4"] {
    /* === 主要背景色系 === */
    --primary-color: rgba(251, 191, 36, 0.2);
    --secondary-color: rgba(249, 115, 22, 0.9);
    --background-light: rgba(254, 252, 232, 0.8);
    --background-white: rgba(255, 251, 235, 0.9);
    --background-solid: #fffbeb;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(254, 252, 232, 0.8);
    --background-opt_div_checked: rgba(139, 183, 35, 0.4);
    --accent-color: rgba(217, 119, 6, 0.8);
    --accent-f-color: #ffffff;
    --hover-color: rgba(253, 224, 71, 0.4);
    --hover-f-color: rgba(51, 38, 22, 0.85);
    --button-color: rgba(245, 158, 11, 0.9);
    --button-f-color: #ffffff;

    /* === 文字與內容區域 === */
    --text-color: rgba(51, 38, 22, 0.85);
    --question-bg: rgba(251, 146, 60, 0.2);
    --input-bg: rgba(254, 215, 170, 0.6);

    /* === 表格色系 === */
    --table-header-bg: rgba(61, 48, 32, 0.9);
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(251, 191, 36, 0.1);
    --table-row-even-bg: rgba(253, 224, 71, 0.15);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(52, 22, 249, 0.6);
    /* 橘紅警示 */
    --alert-info-color: rgba(255, 219, 178, 0.9);
    /* 深橘資訊 */
}

/* 灰白色主題 */
[data-theme="theme-5"] {
    /* === 主要背景色系 === */
    --primary-color: rgba(229, 231, 235, 0.5);
    --secondary-color: rgba(55, 65, 81, 0.9);
    --background-light: rgba(243, 244, 246, 0.8);
    --background-white: rgba(249, 250, 251, 0.9);
    --background-solid: #f9fafb;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(249, 250, 251, 0.9);
    --background-opt_div_checked: rgba(197, 197, 198, 0.3);
    --accent-color: rgba(107, 114, 128, 0.8);
    --accent-f-color: #ffffff;
    --hover-color: rgba(156, 163, 175, 0.3);
    --hover-f-color: rgba(17, 24, 39, 0.9);
    --button-color: rgba(75, 85, 99, 0.9);
    --button-f-color: #ffffff;

    /* === 文字與內容區域 === */
    --text-color: rgba(17, 24, 39, 0.9);
    --question-bg: rgba(209, 213, 219, 0.4);
    --input-bg: rgba(229, 231, 235, 0.7);

    /* === 表格色系 === */
    --table-header-bg: rgba(17, 24, 39, 1);
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(229, 231, 235, 0.2);
    --table-row-even-bg: rgba(209, 213, 219, 0.2);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(255, 45, 45, 0.746);
    /* 淡紅警示 */
    --alert-info-color: rgba(232, 234, 238, 0.9);
    /* 中性灰資訊 */
}

/* 明亮主題 */
[data-theme="theme-6"] {
    /* === 主要背景色系 === */
    --primary-color: rgba(128, 161, 186, 0.599);
    /* 主色系：柔和藍灰 */
    --secondary-color: rgba(69, 97, 97, 0.8);
    /* 次色系：清新青綠 */
    --background-light: rgba(255, 247, 221, 0.6);
    /* 背景色：米白暖光 */
    --background-white: rgba(255, 247, 221, 0.9);
    --background-solid: #fffaf0;

    /* === 強調與互動色系 === */
    --background-opt_div: rgba(255, 247, 221, 0.9);
    --background-opt_div_checked: rgba(204, 239, 114, 0.2);
    --accent-color: rgba(180, 222, 189, 0.7);
    /* 強調色：淡雅綠 */
    --accent-f-color: rgba(15, 17, 17, 0.95);
    --hover-color: rgba(128, 161, 186, 0.3);
    /* hover 效果：柔和藍灰淡化 */
    --hover-f-color: rgba(15, 17, 17, 0.5);
    --button-color: rgba(145, 196, 195, 0.95);
    /* 按鈕色：清新青綠強化 */
    --button-f-color: rgba(79, 97, 119, 0.95);

    /* === 文字與內容區域 === */
    --text-color: rgba(30, 30, 30, 0.85);
    /* 文字色：深灰，保持可讀性 */
    --question-bg: rgba(135, 210, 208, 0.475);
    /* 問題區塊背景：清新青綠淡化 */
    --input-bg: rgba(180, 222, 189, 0.5);
    /* 輸入框背景：淡雅綠淡化 */

    /* === 表格色系 === */
    --table-header-bg: rgba(128, 161, 186, 0.85);
    /* 表格標題背景：柔和藍灰深化 */
    --table-header-text: #ffffff;
    --table-row-odd-bg: rgba(180, 222, 189, 0.2);
    /* 表格列背景：交錯使用淡雅綠與清新青綠 */
    --table-row-even-bg: rgba(145, 196, 195, 0.2);

    /* === 警示與提示色系 === */
    --alert-bg-color: rgba(240, 18, 18, 0.741);
    /* 淡紅警示 */
    --alert-info-color: rgba(232, 234, 238, 0.9);
    /* 中性灰資訊 */
}



:root {
    /* === 尺寸與排版 === */
    --td-padding: 10px;
    --main_div_padding: 2rem;
    --f_base: 1rem;
    --f_title: 2.5rem;
    --f_question: 1.5rem;
    --f_option: 1.25rem;
    --f_label_option: 1.25rem;
    --f_button: 1.5rem;

    --input_radio_w: 1rem;
    --input_text_height: 1.5rem;
    --grid_col_orign2: 2;
    --main-table-width: 70vw;
    --max-main-table-wideh: 80vw;
    --table_div_width: 80%;

    --parsley-info-translateX: -2em;
}

/* === 通用設定 === */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--primary-color);
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
}

/* === RWD響應式設計 === */
@media (max-aspect-ratio: 3/4) {
    html {
        font-size: 16px;
    }

    :root {
        --td-padding: 0.2rem;
        --main_div_padding: 0.2rem;
        --f_base: 1rem;
        --f_title: 1.5em;
        --f_question: 1.1rem;
        --f_option: 1rem;
        --f_label_option: 1rem;
        --f_button: 1.25rem;
        --input_radio_w: 0.75rem;
        --input_text_height: 1.75rem;
        --grid_col_orign2: 1;
        --main-table-width: 95vw;
        --max-main-table-wideh: 95vw;
        --table_div_width: 100%;

        --parsley-info-translateX: -1em;
    }

    .header {
        width: 100%;
    }

    .opt {
        grid-column: span 1 !important;
    }
}

/* === 主要區塊結構 === */
.header {
    margin: 0 auto;
    width: var(--max-main-table-wideh);
}

.main {
    margin: 2em auto;
    padding: var(--main_div_padding);
    font-size: var(--f_base);
    min-width: var(--main-table-width);
    max-width: var(--max-main-table-wideh);
    background-color: var(--background-light);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main div {
    padding: var(--td-padding);
}

.footer {
    display: flex;
    justify-content: center;
}

/* === 標題與內文 === */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5em;
    width: 100%;
}

.inner {
    display: flex;
    padding: 0.2em;
    margin-bottom: 0.2em;
    gap: 1em;
    justify-content: center;
    align-items: center;
    font-size: var(--f_title);
    background-color: var(--background-white);
    width: 100%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

#title {
    font-weight: bold;
    color: var(--secondary-color);
    text-shadow:
        0 -1px 2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
    /*text-indent: -20px;
    padding-left: 20px;*/
}

.context {
    padding: 0.5rem;
    font-size: 1.2em;
    background-color: var(--background-white);
    text-align: justify;
}

.ps {
    margin-top: 1em;
    display: flex;
}

.ps::before {
    content: "註：";
    font-weight: bold;
    margin-right: 0.3em;
    color: var(--text-color);
}

/* === 問題與選項 === */
.question {
    display: flex;
    background-color: var(--question-bg);
    font-weight: 600;
    font-size: var(--f_question);
    margin-top: 1em;
    padding: 0.75em 1em;
    border-left: 4px solid var(--accent-color);
    border-radius: 6px;
    align-items: flex-start;
    text-align: justify;
    line-height: 1.5em;
}

.question::before {
    content: attr(data-qn) ". ";
    font-weight: bold;
    color: var(--text-color);

}

.opt_div,
.opt_div_question {
    background-color: var(--background-opt_div);
}

.opt_div {
    font-size: var(--f_option);
    padding: 1em 0;
    display: grid;
    grid-template-columns: repeat(var(--grid_col_orign2), 1fr);
    text-align: left;
    min-height: 5em;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.opt_div.answered {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.67);
    background-color: var(--background-opt_div_checked);
}

.opt {
    display: flex;
    transition: all 0.3s ease;
    padding: 0.5em;
    border-radius: 6px;
    margin: 2px 1px;
    box-shadow: 0px 1px 1px rgba(90, 90, 90, 0.5);

}

.opt:hover {
    background-color: var(--hover-color);
    color: var(--hover-f-color) !important;
    transform: translate(-2px, -4px) scale(1.01);
    box-shadow: 2px 4px 2px rgba(90, 90, 90, 0.646);
    z-index: 2;

}

.opt label {
    display: grid;
    font-size: var(--f_label_option);
    grid-template-columns: minmax(3.2em, max-content) 1fr;
    gap: 0.5em;
    align-items: baseline;
}

.sub_div {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(1, 1fr);
    background-color: rgba(161, 227, 7, 0.1);
    border: 1px solid rgba(200, 200, 200, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 1em;
}

.sub_opt_div {
    grid-template-columns: repeat(1, 1fr);
}

/* === 表格相關 === */
.table_div {
    margin: 0 auto;
    width: var(--table_div_width);
    padding: 1.5em 0 0.5em 0;
    position: relative;
    /* 限定 sticky 的範圍 */
    display: grid;
    grid-auto-rows: auto;
}

.table_question {
    text-align: justify;
}

.th_div {
    position: sticky; /* 固定在上方 */
    top: 0;
    z-index: 10;
    /* 確保在其他元素之上 */

    box-sizing: border-box;
    display: grid;
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: bold;
    font-size: var(--f_option);
    text-align: center;
    

}

.th_div div {
    text-align: center;
}

.table_div_odd,
.table_div_even {
    box-sizing: border-box;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: var(--f_option);
    text-align: left;
    padding: 0.5em 0;
    min-height: 3em;
    border-bottom: 2px solid var(--accent-color);
}

.table_div_odd {
    background-color: var(--table-row-odd-bg) !important;
}

.table_div_even {
    background-color: var(--table-row-even-bg) !important;
}

.ps_table {
    align-self: center;
    min-width: 60%;
    border: solid 1px #000;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.34);
    font-size: 1.5em;
}

.ps_table tr:nth-child(even) {
    background-color: rgba(242, 242, 242, 0.38);
}

.ps_table tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.56);
    color: white;
}

/* === 輸入控制項 === */
input[type="submit"],
button {
    padding: 10px 24px;
    margin-bottom: 3rem;
    background-color: var(--button-color);
    font-size: var(--f_button);
    color: var(--button-f-color);
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input[type="submit"]:hover,
button:hover {
    background-color: var(--accent-color);
    color: var(--accent-f-color);
    transform: translate(3px, 2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type='radio'],
input[type='checkbox'] {
    height: var(--input_radio_w);
    width: var(--input_radio_w);
}

textarea {
    display: block;
    width: 100%;
    font-size: var(--f_option);
    padding: 0.75em 1em;

    background-color: rgba(200, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    resize: vertical;
    color: var(--text-color);
}

textarea:focus {
    transform: scale(1.02);
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(3, 176, 171, 0.2);
    outline: none;
}

.text_div {
    display: flex;
    flex-direction: column;
    min-height: 5em;
    border-radius: 8px;
    padding: 1em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}



input[type='text'],
input[type='password'] {
    width: 100%;
    height: var(--input_text_height);
    font-size: var(--f_option);
    padding: 0.5em 0.75em;
    background: var(--input-bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    color: var(--text-color);
}

.text_div input[type='text'],
.text_div input[type='password'] {
    height: 2em;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.4);
    background-color: rgba(200, 255, 255, 0.3);
}

input[type='text']:focus,
input[type='password']:focus {
    transform: scale(1.02);
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(3, 176, 171, 0.2);
    outline: none;
}

input[type='text'][disabled],
input[type='password'][disabled] {
    background: rgba(200, 200, 200, 0.3) !important;
    color: rgba(100, 100, 100, 0.6);
    cursor: not-allowed;
    box-shadow: none;
}

input[type='text'].validate[required] {
    background: rgba(255, 99, 99, 0.2);
    box-shadow: inset 0 0 4px rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.3);
}

/* === 特殊元件 === */
.info_div {
    font-size: 1.5rem;
    margin: 0.5rem;
    border: 1px solid #ccc;
    padding: 0.5rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.header .info_div {
    background-color: var(--accent-color);
    color: var(--accent-f-color);
    font-weight: 700;
    padding: 0.05rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.opt_div_question {
    display: flex;
    font-size: var(--f_option);
    padding: 0 0.3em 0;
    justify-content: left;
    line-height: 1.5em;
}

.opt_div_question::before {
    content: attr(data-qn) ".";
    margin-right: 0.2em;
}

.opt_div_point {
    display: grid;
    background-color: rgba(141, 184, 227, 0.4);
    justify-content: center;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.1em 3px 0.2em 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-1px, -2px);
}

.check_div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    max-width: 2em;
    min-width: 1.75em;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    background-color: var(--background-white);
    border-radius: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.check_div:hover {
    background-color: var(--hover-color);
    color: var(--hover-f-color);
    transform: translate(-2px, -4px) scale(1.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.check_div input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    margin: 0;
}

.check_div .value_text {
    z-index: 1;
    pointer-events: none;
    font-weight: bold;
    font-size: 1em;
}

.check_div input:checked~.value_text {
    font-weight: bold;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
}

.div-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto auto;
    padding: 0.5em 1em;
    border: 1px solid transparent;
    background-color: rgba(235, 235, 235, 0.4);
    border-radius: 1em;
    height: 2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.div-radio:hover {
    background-color: var(--hover-color);
    transform: translate(-2px, -4px) scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.concept_div {
    background-color: rgba(40, 40, 40, 0.5);
    color: white;
    font-weight: bold;
    font-size: var(--f_option);
    text-align: left !important;
}

.note {
    grid-column: 1 / -1 !important;

    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3px;
    align-items: center;
    background-color: var(--background-white);
    color: var(--text-color);
    font-size: var(--f_option);

    margin: 0.5em 0;
    padding: 0.75em 1em;
    border-left: 4px solid var(--accent-color);
    border-radius: 6px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.check_opt {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.67);
    color: white;
    background-color: var(--button-color);
}

.check_opt:hover {
    color: white;
    background-color: var(--accent-color);
}

.highlight {
    font-weight: bolder;
    color: #ff0000;
}

.signature_text {
    display: flex;
    flex-direction: column;
    max-width: 25em;
    margin-left: auto !important;
}

.operator {
    width: 100%;
    display: flex;
    font-weight: bold;
    margin: 0;
}

.operator::before {
    content: attr(data-title)":";
}

.logo_class {
    max-height: 5em;
}

video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background-color: black;
}

/* === 功能性樣式 === */
.no-before::before {
    content: none !important;
    display: none !important;
}

.full_column {
    grid-column: 1/-1 !important;
    width: 100%;
    display: block;
    /* 或 inline-block, 或 grid/flex 視需求 */
}

.slide-box {
    min-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.slide-box .close {
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0 !important;
}


/* === 彈出式視窗 (Alert) === */
#overlay,
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    /* Ensures content is centered */
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#alert_message_div,
.alert_info {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 將視窗置中 */
    min-width: 300px;
    padding: 2em;
    background: var(--background-solid);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-size: 1.5em;
    border-top: 5px solid var(--accent-color);
    text-align: center;
    cursor: default;
    /* 在視窗內恢復預設鼠標 */

}

#alert_message {
    margin: 0 0 1.5rem 0;
    font-size: var(--f_option);
    color: var(--text-color);
    line-height: 1.7;
}

#alert_confirm,
.alert_info button {
    padding: 10px 24px;
    margin-bottom: 0;
    background-color: var(--button-color);
    font-size: 1.2rem;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#alert_confirm:hover,
.alert_info button:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/*  parsley 驗證器錯誤提示class 為 filled*/
.parsley-errors-list.filled {
    position: absolute;
    list-style: none;
    transform: translate(var(--parsley-info-translateX), -4.5em);
    padding: 8px 12px;
    margin: 0;
    background: var(--alert-bg-color);
    color: var(--alert-info-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0.95;
    margin-top: 5px;
}

.parsley-errors-list[aria-hidden='true'] {
    display: none;
}

/*
.parsley-errors-list::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--secondary-color);
}
    */