/* STREAMING_CHUNK: Defining CSS custom properties and baseline resets... /
/*

軟體資訊平台 - 全域樣式檔 (style.css)

嚴格遵循架構規範：

封裝現代化配色主題變數與排版字系

針對高頻位移與動態組件配置 GPU 硬體加速層

客製化流暢滾動條與 Material Symbols 向量圖示微調
*/

:root {
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--bg-main: #f8fafc;
--surface-card: #ffffff;
--border-color: #f1f5f9;
--text-main: #0f172a;
--text-muted: #64748b;
}

body {
font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
GPU 硬體加速層 (Hardware Acceleration Layers)
針對高頻滾動、縮放、懸浮按鈕與卡片開闢獨立 Composite 層
========================================================================= /
/ STREAMING_CHUNK: Configuring GPU transformation layers... */
.gpu-layer {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
will-change: transform;
}

#scrollTopBtn,
#scrollBottomBtn {
will-change: transform, opacity;
transform: translateZ(0);
}

.software-card {
will-change: transform, box-shadow;
transform: translateZ(0);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.software-card:hover {
transform: translateY(-4px) translateZ(0);
}

/* =========================================================================
客製化捲軸 (Custom Scrollbar)
========================================================================= */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* =========================================================================
Material Symbols 向量圖示居中對齊修正
========================================================================= */
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
display: inline-block;
vertical-align: middle;
line-height: 1;
}

/* 雙模態獨立預覽方框 #preview-box */
#preview-box {
transition: all 0.2s ease-in-out;
}

#preview-box img {
width: 100%;
height: 100%;
object-fit: contain;
}