/* ==========================================
   各種國家考試時間軸 - 專用原生 CSS 樣式表
   ========================================== */

/* 全域重設與變數 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-bg-slate-50: #f8fafc;
    --color-text-slate-800: #1e293b;
    --color-text-slate-500: #64748b;
    --color-border-slate-200: #e2e8f0;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
}


/* 隱藏滾動條但保留滾動功能 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 主要內容區 */
.crd26-grid {
    flex-grow: 1;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: 1rem; */
}


/* 互動時間軸容器外框 */
.timeline-outer-frame {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    position: relative;
}

/* 左右漸變遮罩 */
.gradient-mask-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to right, #ffffff, transparent);
    pointer-events: none;
    z-index: 15;
    opacity: 0.7;
}

.gradient-mask-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to left, #ffffff, transparent);
    pointer-events: none;
    z-index: 15;
    opacity: 0.7;
}

/* 時間軸容器：PC */
.timeline-container {
    overflow-x: auto;
    user-select: none;
    padding: 1rem 0;
    width: 100%;
}

.timeline-container:active {
    cursor: grabbing;
}

.timeline-scroll-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 210%;
    /* width: 3600px; */
    /* height: 250px; */
    justify-content: space-between;
}


/* 時間軸容器：手機版 */
@media (max-width: 768px) {
    /* 縮小卡片寬度 */
    .card-body {
        width: 110px !important;
        padding: 0.6rem !important;
    }
    /* 調整卡片標題字體 */
    .card-title {
        font-size: 0.75rem !important;
    }
    /* 調整時間軸容器內間距，增加月份刻度間距 */
    .timeline-scroll-content {
        width: 380%; /* 依項目數量動態調整以撐開間距 */
    }
    /* 月份刻度氣泡在手機版適當縮小 */
    .month-bubble {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.75rem;
    }
    /* 確保卡片內容在窄螢幕下不會過度擠壓 */
    .card-info-row {
        font-size: 0.65rem;
    }
}


/* 中央偏下水平軸線 */
.horizontal-line {
    position: absolute;
    top: 164px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #fbbf24, #fb923c, #3b82f6);
    border-radius: 9999px;
    opacity: 0.8;
}

.line-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border-top: 4px solid #3b82f6;
    border-right: 4px solid #3b82f6;
    rotate: 45deg;
    margin-right: 0.25rem;
    border-radius: 2px;
}

/* 【上半部考試卡片區】 */
.top-cards-layer {
    position: relative;
    height: 125px;
    display: flex;
    /* align-items: flex-end; */
    align-items: flex-start;
}

/* 考試卡片包裝 */
.exam-card-wrapper {
    position: absolute;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 10;
    /* 關鍵點：防止因為 translateX 導致的水平溢出 */
    white-space: nowrap;
}

/* 被點選時的「最上方」與「高亮」效果 */
.exam-card-wrapper.active-card {
    z-index: 50 !important;
}

.exam-card-wrapper.active-card .card-body {
    border-color: var(--color-amber-500) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    background-color: #ffffff !important;
}

.card-inner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-body {
    width: 12rem;
    border-radius: 0.75rem;
    padding: 0.875rem;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card-body:hover {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
}

.card-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.card-icon-span {
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: #1a2e5a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2rem;
}
.card-title > a{
    display: block !important;
}
.card-title > a:hover{
    font-weight: 900;
}

.card-info-row {
    font-size: 0.75rem;
    color: var(--color-text-slate-500);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card-info-row span {
    font-weight: 500;
    color: #334155;
}

/* 卡片連線與圓點 */
.connection-line {
    width: 2px;
    height: 1rem;
    background-color: rgba(251, 191, 36, 0.6);
    margin-top: 0rem;
    transition: background-color 0.2s ease;
}

.exam-card-wrapper:hover .connection-line {
    background-color: #f59e0b;
}

.axis-dot {
    display: none;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-amber-500);
    border-radius: 9999px;
    border: 1px solid #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 顏色主題變量 (原生 CSS 定義) */
.theme-emerald { background-color: #ecfdf5; border-color: #a7f3d0; }
.theme-emerald .card-icon-span { color: #059669; border-color: #a7f3d0; }

.theme-indigo { background-color: #e0e7ff; border-color: #c7d2fe; }
.theme-indigo .card-icon-span { color: #4f46e5; border-color: #c7d2fe; }

.theme-teal { background-color: #f0fdf4; border-color: #bbf7d0; }
.theme-teal .card-icon-span { color: #0d9488; border-color: #bbf7d0; }

.theme-orange { background-color: #fff7ed; border-color: #fed7aa; }
.theme-orange .card-icon-span { color: #ea580c; border-color: #fed7aa; }

.theme-cyan { background-color: #ecfeff; border-color: #cffafe; }
.theme-cyan .card-icon-span { color: #0891b2; border-color: #cffafe; }

.theme-amber { background-color: #fefbeb; border-color: #fde68a; }
.theme-amber .card-icon-span { color: #d97706; border-color: #fde68a; }

.theme-amber-dark { background-color: rgba(254, 251, 235, 0.7); border-color: #fcd34d; }
.theme-amber-dark .card-icon-span { color: #b45309; border-color: #fcd34d; }

.theme-slate { background-color: #f1f5f9; border-color: #cbd5e1; }
.theme-slate .card-icon-span { color: #475569; border-color: #cbd5e1; }

.theme-green { background-color: #f0fdf4; border-color: #bbf7d0; }
.theme-green .card-icon-span { color: #16a34a; border-color: #bbf7d0; }

.theme-blue { background-color: #eff6ff; border-color: #bfdbfe; }
.theme-blue .card-icon-span { color: #2563eb; border-color: #bfdbfe; }

.theme-purple { background-color: #faf5ff; border-color: #e9d5ff; }
.theme-purple .card-icon-span { color: #9333ea; border-color: #e9d5ff; }


/* 【月份刻度軸】 */
.months-axis-layer {
    position: relative;
    height: 50px;
    /* height: 60px; */
    display: flex;
    align-items: flex-start;
    margin-top: 0.25rem;
}

.month-bubble-container {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

.month-bubble {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: #f07d4c;
    color: #000000;
    /* color: #fef3c7; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(69, 26, 3, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.month-bubble:hover {
    background-color: #d84202;
    transform: scale(1.1);
}

.month-tick {
    width: 4px;
    height: 12px;
    background-color: #d97706;
    margin-top: 0.25rem;
    border-radius: 2px;
    display: none;
}




/* 萬文區 */
.wan-wun-fb{padding-top: .7rem;}
.wan-wun-fb span{font-size: 1rem;color: #ef7d1a;font-style:normal;padding-left: 1rem;font-weight: 500;}
.wan-wun-fb span a{padding-left: 1rem;;}
        .wan-wun-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            max-width: 1280px;
            margin: 0 auto;
            width: 100%;
            align-items: start;
        }
        @media (min-width: 768px) {
            .wan-wun-grid {
                grid-template-columns: repeat(3, 1fr);
            }			
        }
@media (max-width: 768px) {
    .wan-wun-grid {
        margin-top: 15px;
    }
    .wan-wun-fb span {
        /* font-size: 1rem;
        color: #ef7d1a;
        padding-left: 0rem;
        font-weight: 500;
        font-style: normal; */
        display: block;
        top: 2.3rem;
        position: absolute;
        margin-left: -75px;
    }
}

        .wan-wun-box {
            background-color: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            border-radius: 1rem;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.3s ease;
            justify-content: flex-start;
        }
        .wan-wun-box:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .box-badge-header {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            margin-bottom: 0.75rem;
            color: var(--color-text-slate-500);
        }
        .badge-dot {
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 9999px;
        }
        .badge-dot.emerald { background-color: #10b981; }
        .badge-dot.amber { background-color: #f59e0b; }
        .badge-dot.blue { background-color: #3b82f6; }

        /* 內框一內容 */
        .box-info-body {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 0.25rem;
        }
        .box-large-icon {
            font-size: 1.875rem;
            padding: 0.875rem;
            background-color: #ecfdf5;
            border-radius: 1rem;
            color: #059669;
            border: 1px solid #a7f3d0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box-info-text h2 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
        }
        .box-info-text span {
            display: inline-block;
            margin-top: 0.375rem;
            padding: 0.125rem 0.75rem;
            background-color: #f1f5f9;
            color: #475569;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* 內框二內容 */
        .schedule-row-container {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        .schedule-item {
            padding: 0.75rem;
            border-radius: 0.75rem;
            border: 1px solid;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .schedule-item a i {
            color: #ef7d1a;
            font-size: 80%;
            margin-left: 0.35rem;margin-right: 0.35rem 
        }
        .schedule-item.amber {
            background-color: rgba(254, 251, 235, 0.4);
            border-color: rgba(253, 230, 138, 0.5);
        }
        .schedule-item.blue {
            background-color: #e2fdff85;
            border-color: #bafaff9e;
        }
        .schedule-item-icon {
            background-color: #ffffff;
            padding: 0.375rem;
            border-radius: 0.5rem;
            border: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .schedule-item.amber .schedule-item-icon {
            color: #f07d4c;
            border-color: #fdb98a;
        }
        .schedule-item.blue .schedule-item-icon {
            color: #1cb0c1;
            border-color: #b0e2e8;
        }
        .schedule-text-label {
            font-size: 0.8rem;
            font-weight: 500;
            display: block;
            padding-top: 3px;
        }
        .schedule-item.amber .schedule-text-label { color: #f07d4c; }
        .schedule-item.blue .schedule-text-label { color: #1cb0c1; }
        .schedule-text-value {
            font-size: 0.9rem;
            font-weight: 500;
            color: #334155;
        }

.schedule-item.amber:hover {
background-color: #fffbeb; /* Light amber background /
border-color: #f59e0b;     / Amber border */
}
.schedule-item.blue:hover {
background-color: #cff1f5; /* Light amber background */
}

.schedule-text-value a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
/* display: block; */
}
.schedule-text-value i {
color: #ef7d1a;
}
.schedule-text-value i:nth-child(2) {
color: #ef7d1a;font-size: 80%;margin-left: 0.5rem;
}
.schedule-text-value a:hover {
color: #000000; /* Darker amber color on hover */
font-weight: 600;
}

        /* 內框三內容 */
        .desc-box-content {
            margin-top: 0.25rem;
        }
        .desc-title-row {
            font-weight: 700;
            color: #1a2e5a;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 1rem;
        }
        .desc-title-row i {
            color: var(--color-amber-500);
        }
        .desc-text-para {
            color: var(--color-text-slate-800);
            font-size: 0.9rem;
            line-height: 1.625;
            display: -webkit-box;
            -webkit-line-clamp: 8;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: justify;
        }
        .fb_more{margin-top: 5px;text-align: right;}
        .fb_more a{font-size: 0.9rem;line-height: 1.5rem;}
        .fb_more a:hover{font-weight: 700;}