/* ==========================================
   考試時間軸
   ========================================== */
/* 全域重設與變數 */
* { 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}
/* 互動時間軸容器外框 */
.timeline-outer-frame{background-color:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000000d 0 4px 6px -4px #0000000d;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,#fff,transparent);pointer-events:none;z-index:15;opacity:.7}
.gradient-mask-right{position:absolute;right:0;top:0;bottom:0;width:3rem;background:linear-gradient(to left,#fff,transparent);pointer-events:none;z-index:15;opacity:.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%;justify-content:space-between}

/* 時間軸容器：手機版 */
@media (max-width: 768px) {
    .card-body{width:110px!important;padding:.6rem!important}
    .card-title{font-size:.75rem!important}
    .timeline-scroll-content{width:380%}
    .month-bubble{width:2.5rem;height:2.5rem;font-size:.75rem}
    .card-info-row{font-size:.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:.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:.25rem;border-radius:2px}

/* 月份刻度軸 */
.months-axis-layer{position:relative;height:50px;display:flex;align-items:flex-start;margin-top:.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:#000;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;border:2px solid #fff;box-shadow:0 4px 6px -1px #451a034d;transition:all .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:.25rem;border-radius:2px;display:none}

/* 考試卡片區 */
.top-cards-layer{position:relative;height:125px;display:flex;align-items:flex-start}
/* 考試卡片包裝 */
.exam-card-wrapper{position:absolute;transform:translateX(-50%);transition:all .3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;z-index:10;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:.75rem;padding:.875rem;border-width:1px;border-style:solid;box-shadow:0 1px 2px 0 #0000000d;transition:all .3s ease}
.card-body:hover{background-color:#fff!important;box-shadow:0 4px 6px -1px #0000000d 0 2px 4px -1px #0000000d;transform:translateY(-4px)}
.card-header-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.card-icon-span{font-size:1rem;background-color:#fffc;padding:.375rem;border-radius:.5rem;border:1px solid inherit;display:flex;align-items:center;justify-content:center}
.card-title{font-weight:700;font-size:.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:.75rem;color:var(--color-text-slate-500);display:flex;flex-direction:column;gap:.125rem}
.card-info-row span{font-weight:500;color:#334155}
/* 卡片連線與圓點 */
.connection-line{width:2px;height:1rem;background-color:#fbbf2499;margin-top:0;transition:background-color .2s ease}
.exam-card-wrapper:hover .connection-line{background-color:#f59e0b}
.axis-dot{display:none;width:.625rem;height:.625rem;background-color:var(--color-amber-500);border-radius:9999px;border:1px solid #fff;box-shadow:0 1px 2px 0 #0000000d}
/* 顏色主題變量 (原生 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; }

/* 萬文區 */
.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}
.wan-wun-box{background-color:#fff;border:1px solid #e2e8f0cc;box-shadow:0 4px 6px -1px #0000000d;border-radius:1rem;padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;transition:all .3s ease;justify-content:flex-start}
.wan-wun-box:hover{box-shadow:0 10px 15px -3px #0000001a}
.box-badge-header{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:.25rem;margin-bottom:.75rem;color:var(--color-text-slate-500)}
.badge-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px}
.badge-dot.emerald{background-color:#10b981}
.badge-dot.amber{background-color:#f59e0b}
.badge-dot.blue{background-color:#3b82f6}

@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{display:block;top:2.3rem;position:absolute;margin-left:-75px}
}
/* 內容框一 */
.box-info-body{display:flex;align-items:center;gap:1rem;margin-top:.25rem}
.box-large-icon{font-size:1.875rem;padding:.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:.375rem;padding:.125rem .75rem;background-color:#f1f5f9;color:#475569;border-radius:9999px;font-size:.75rem;font-weight:600}

/* 內容框二 */
.schedule-row-container{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}
.schedule-item{padding:.75rem;border-radius:.75rem;border:1px solid;display:flex;align-items:center;gap:.75rem}
.schedule-item a i{color:#ef7d1a;font-size:80%;margin-left:.35rem;margin-right:.35rem}
.schedule-item.amber{background-color:#fefbeb66;border-color:#fde68a80}
.schedule-item.blue{background-color:#e2fdff85;border-color:#bafaff9e}
.schedule-item-icon{background-color:#fff;padding:.375rem;border-radius:.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:.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:.9rem;font-weight:500;color:#334155}
.schedule-item.amber:hover{background-color:#fffbeb}
.schedule-item.blue:hover{background-color:#cff1f5}
.schedule-text-value a{text-decoration:none;color:inherit;transition:color .3s ease}
.schedule-text-value i{color:#ef7d1a}
.schedule-text-value i:nth-child(2){color:#ef7d1a;font-size:80%;margin-left:.5rem}
.schedule-text-value a:hover{color:#000;font-weight:600}

/* 內容框三 */
.desc-box-content{margin-top:.25rem}
.desc-title-row{font-weight:700;color:#1a2e5a;margin-bottom:.5rem;display:flex;align-items:center;gap:.375rem;font-size:1rem}
.desc-title-row i{color:var(--color-amber-500)}
.desc-text-para{color:var(--color-text-slate-800);font-size:.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:.9rem;line-height:1.5rem}
.fb_more a:hover{font-weight:700}