@charset "UTF-8";

/* ============================================================
   SUIO 官方網站全域主樣式表 (Main Stylesheet)
   ============================================================ */

:root {
  --suio-blue: #0A66C2;
  --suio-blue-hover: #0052a3;
  --suio-aqua: #00D2D3;
  --suio-dark: #0A0E1A;
  --suio-dark-card: #121829;
  --suio-border-dark: rgba(255, 255, 255, 0.08);
}

/* 全域字體與平滑滾動 */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  background-color: #FAFBFC;
  color: #0F172A;
}

/* 自定義漸層背景與光斑 */
.hero-glow-bg {
  background: radial-gradient(circle at 50% -20%, rgba(10, 102, 194, 0.15), rgba(0, 210, 211, 0.05) 50%, transparent 80%);
}

.dark-section-glow {
  background: radial-gradient(circle at 50% 0%, rgba(10, 102, 194, 0.25), rgba(9, 13, 22, 0) 70%), #090D16;
}

/* 玻璃擬態效果 */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-panel-dark {
  background: rgba(18, 24, 41, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUIO Board 電視外框 Mockup */
.tv-screen-frame {
  position: relative;
  background: #000000;
  border: 12px solid #1E293B;
  border-radius: 28px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 40px rgba(10, 102, 194, 0.2);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.tv-screen-frame.portrait-mode {
  aspect-ratio: 9 / 16;
  max-width: 440px;
}

.tv-screen-stand {
  width: 180px;
  height: 24px;
  background: linear-gradient(180deg, #334155 0%, #1E293B 100%);
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.tv-screen-base {
  width: 320px;
  height: 10px;
  background: #475569;
  margin: 0 auto;
  border-radius: 20px;
}

/* 看板頻道 Tab 樣式 */
.board-channel-tab {
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

.board-channel-tab.active-channel {
  background: rgba(0, 186, 136, 0.15);
  border-color: rgba(0, 186, 136, 0.4);
  color: #00BA88;
}

/* 漂浮視窗效果 (Hero Floating Windows) */
.hero-mockup-window {
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  background: #FFFFFF;
}

/* 程式碼塊高亮仿製樣式 */
.code-box {
  background: #0F172A;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

/* 自定義 Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}