:root{
  --carbon: #eef2f9;
  --carbon-2: #ffffff;
  --carbon-3: #e4ebf6;
  --teal: #1B5FA8;
  --teal-bright: #2A72B2;
  --copper: #1B5FA8;
  --copper-bright: #916400;
  --paper: #16223a;
  --ink: #33425c;
  --ink-dim: #606E85;
  --line: rgba(22,34,58,0.08);
  --line-strong: rgba(22,34,58,0.16);
}
*{ box-sizing: border-box; margin:0; padding:0; }
/* 視覺上隱藏，但螢幕報讀器讀得到——用於只需要語意標籤、不需要視覺顯示的情況（例如搜尋欄位的 label） */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 跳到主要內容：預設整個藏到畫面外，鍵盤Tab聚焦時才滑入顯示，滑鼠使用者完全看不到也不受影響 */
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:200;
  background: var(--teal); color:#eaf6ff; padding:12px 22px; border-radius:8px;
  font-family:'Outfit',sans-serif; font-size:14px; font-weight:600;
  transition: top .15s ease;
}
.skip-link:focus{ top:12px; outline:2px solid var(--teal-bright); outline-offset:2px; }
html{ scroll-behavior: smooth; }
body{
  background: var(--carbon);
  background-image: radial-gradient(circle at 1px 1px, rgba(111,214,255,0.12) 1px, transparent 0);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.label{ font-family: 'Outfit', sans-serif; letter-spacing: 0.02em; }
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 48px;
  background: rgba(7,13,26,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:1; overflow:hidden; }
.nav-brand img{ height:42px; width:auto; flex-shrink:0; }
.nav-brand .name{ font-size: 14.5px; font-weight:500; color: var(--paper); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-brand .name small{ display:block; font-size:11px; color: var(--ink-dim); font-weight:400; letter-spacing:0.03em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-links{ position:fixed; top:0; right:48px; height:73px; z-index:51; display:flex; gap:30px; font-size: 14px; color: var(--ink-dim); align-items:center; }
.nav-links a:hover{ color: var(--teal-bright); }
.nav-links .drop{ position:relative; }
.nav-links .drop-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:18px; display:none;
}
.nav-links .drop-panel .drop-inner{
  background: var(--carbon-2); border:1px solid var(--line-strong); border-radius:14px; min-width:190px;
  padding: 10px 0; display:flex; flex-direction:column; box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.nav-links .drop:hover .drop-panel{ display:block; }
.drop-panel a{ padding: 10px 20px; font-size:13.5px; }
.drop-panel a:hover{ background: var(--carbon-3); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background: var(--paper); border-radius:2px; transition: transform .2s, opacity .2s; }
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- 子頁面：回首頁小圖示 ---------- */
.back-home{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  font-family:'Outfit',sans-serif; font-size:13px; color: var(--ink-dim);
}
.back-home:hover{ color: var(--teal-bright); }
.back-home .arrow{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:14px; transition: all .2s;
}
.back-home:hover .arrow{ border-color: var(--teal-bright); background: rgba(111,214,255,0.08); }

/* ---------- hero ---------- */
.hero{ position: relative; padding: 100px 48px 90px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-glow{ position:absolute; z-index:0; border-radius:50%; filter: blur(90px); pointer-events:none; }
.hero-glow.blue{ width:520px; height:520px; background: radial-gradient(circle, var(--copper) 0%, transparent 70%); top:-160px; left:-120px; opacity:0.55; }
.hero-glow.yellow{ width:340px; height:340px; background: radial-gradient(circle, var(--copper-bright) 0%, transparent 70%); top:60px; right:0; opacity:0.18; }
.network-svg{ position:absolute; inset:0; z-index:0; opacity:0.55; }
.hero-inner{ position:relative; z-index:1; max-width: 1180px; }
.hero h1{ font-size: clamp(34px, 5vw, 56px); font-weight: 700; color: var(--paper); max-width: 800px; letter-spacing: 0.005em; }
.hero h1 .accent{
  background: linear-gradient(90deg, var(--copper) 10%, var(--teal-bright) 60%, var(--copper-bright) 100%);
  -webkit-background-clip: text; background-clip:text; color:transparent; font-weight:800;
}
.hero p.lede{ margin-top: 24px; max-width: 560px; font-size: 16px; color: var(--ink-dim); font-weight:300; }
.hero-cta{ margin-top: 42px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{ font-family:'Outfit', sans-serif; font-size:14.5px; font-weight:600; padding: 14px 30px; letter-spacing:0.01em; border-radius:999px; border:1px solid var(--line-strong); transition: all .2s; cursor:pointer; background:transparent; color:inherit; }
.btn.primary{ background: linear-gradient(90deg, var(--teal), var(--copper)); border-color: transparent; color:#eaf6ff; box-shadow: 0 8px 30px rgba(33,150,216,0.35); }
.btn.primary:hover{ box-shadow: 0 10px 40px rgba(33,150,216,0.55); transform: translateY(-1px); }
.btn.ghost{ color: var(--paper); }
.btn.ghost:hover{ border-color: var(--teal-bright); color: var(--teal-bright); }

/* ---------- section shell ---------- */
section.block{ padding: 88px 48px; border-bottom: 1px solid var(--line); position:relative; }
.block-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 48px; max-width:1180px; margin-left:auto; margin-right:auto; }
.block-head h2{ font-size: 27px; font-weight:700; color: var(--paper); }
.block-head .idx{ font-family:'Outfit',sans-serif; font-size:13px; color: var(--teal-bright); }
.block-inner{ max-width: 1180px; margin: 0 auto; }

/* ---------- 內頁標頭 ---------- */
.page-header{ padding: 56px 48px 50px; border-bottom: 1px solid var(--line); }
.page-header .inner{ max-width: 1180px; margin: 0 auto; }
.page-header .eyebrow{ font-family:'Outfit',sans-serif; font-size:13px; color: var(--teal-bright); letter-spacing:0.03em; margin-bottom:14px; }
.page-header h1{ font-size: 32px; color: var(--paper); font-weight:700; }

/* ---------- glass 卡片基底 ---------- */
.glass{
  background: linear-gradient(160deg, rgba(19,36,73,0.55), rgba(13,24,48,0.55));
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.glass:hover{ border-color: rgba(111,214,255,0.5); box-shadow: 0 16px 50px rgba(33,150,216,0.18); transform: translateY(-2px); }

/* ---------- 中心簡介：左圖右文橫向卡片 ---------- */
.about-rows{ display:flex; flex-direction:column; gap:28px; }
.about-row{ display:flex; overflow:hidden; }
.about-row .img-col{ width:38%; flex-shrink:0; aspect-ratio:16/9; align-self:flex-start; }
.about-row .img-col img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.about-row .img-col.empty{ background: linear-gradient(135deg, var(--carbon-3), var(--carbon-2)); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:12px; }
.about-row .text-col{ flex:1; padding: 40px 44px; min-width:0; }
.about-row .text-col .tag{ font-size:12px; color:var(--teal-bright); letter-spacing:0.05em; margin-bottom:14px; display:block; }
.about-row .text-col h2{ font-size:22px; color:var(--paper); font-weight:700; margin-bottom:16px; }
.about-row .text-col p{ font-size:14.5px; color:var(--ink-dim); white-space:pre-line; line-height:1.9; }
.about-row .text-col p.clamp{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.about-row .read-more{
  display:inline-block; margin-top:14px; font-size:12.5px; color: var(--copper-bright); cursor:pointer;
  border-bottom:1px solid transparent;
}
.about-row .read-more:hover{ border-bottom-color: var(--copper-bright); }

/* ---------- about tiles（也用於場地/教職員/合作夥伴列表） ---------- */
.about-tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-tiles.cols-3{ grid-template-columns: repeat(3, 1fr); }
.tile{
  padding: 28px 24px;
  background: linear-gradient(160deg, rgba(19,36,73,0.55), rgba(13,24,48,0.55));
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.tile:hover{ border-color: rgba(111,214,255,0.5); box-shadow: 0 16px 50px rgba(33,150,216,0.18); transform: translateY(-2px); }
.tile .n{ font-family:'Outfit',sans-serif; font-size:11.5px; color: var(--teal-bright); margin-bottom:14px; display:block; letter-spacing:0.03em; }
.tile h3{ font-size:16px; color: var(--paper); font-weight:600; margin-bottom:8px; }
.tile p{ font-size:12.5px; color: var(--ink-dim); white-space:pre-line; }
.tile img.photo{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:16px; border-radius:12px; border:1px solid var(--line-strong); }

/* ---------- feature banner（研習報名系統獨立卡片） ---------- */
.feature-banner{
  position:relative; display:flex; justify-content:space-between; align-items:center; gap:40px;
  padding: 42px 46px; flex-wrap:wrap; overflow:hidden;
}
.feature-banner::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(circle at 85% 30%, rgba(255,210,0,0.10), transparent 55%); }
.feature-banner .fb-text{ max-width: 620px; position:relative; z-index:1; }
.feature-banner .fb-tag{ font-family:'Outfit',sans-serif; font-size:12px; color: var(--teal-bright); letter-spacing:0.03em; margin-bottom:12px; display:block; }
.feature-banner h3{ font-size:23px; color: var(--paper); font-weight:700; margin-bottom:12px; }
.feature-banner p{ font-size:14.5px; color: var(--ink-dim); }
.feature-banner .fb-cta{ flex-shrink:0; position:relative; z-index:1; }

/* ---------- 中心動態 / FAQ 清單 ---------- */
.ann-list{ display:flex; flex-direction:column; gap:2px; border-top:none; }
.ann-item{ display:grid; grid-template-columns: 120px 1fr; align-items:baseline; padding: 20px 22px; border-radius:14px; transition: background .2s; }
.ann-item:hover{ background: rgba(33,150,216,0.08); }
.ann-item .date{ font-family:'Outfit',sans-serif; font-size:12.5px; color: var(--ink-dim); }
.ann-item .dot{ display:none; }
.ann-item .txt{ font-size:15px; color: var(--ink); font-weight:400; }
.ann-item .txt .pin{
  font-size:11px; font-family:'Outfit',sans-serif; margin-right:10px; padding:3px 10px; border-radius:999px;
  background: rgba(33,150,216,0.16); color: var(--teal-bright); border:none;
}
.ann-item .txt .pin.tag-media{ background: rgba(217,230,250,0.10); color: var(--ink-dim); }
.ann-item .txt .pin.tag-industry{ background: rgba(255,210,0,0.14); color: var(--copper-bright); }
.ann-item:hover .txt{ color: var(--paper); }
.feed-more{ text-align:right; margin-top:20px; }
.feed-more a{ font-family:'Outfit',sans-serif; font-size:13px; color: var(--teal-bright); }

.faq-item{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-item .q{ font-size:16px; color: var(--paper); font-weight:500; margin-bottom:8px; }
.faq-item .a{ font-size:14px; color: var(--ink-dim); }

/* ---------- 獲獎榮譽 ---------- */
.honors{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.honor-card{ padding: 30px 26px 28px; }
.honor-card .photo{ width:100%; aspect-ratio: 4/3; object-fit:cover; margin-bottom:20px; border-radius:14px; border:1px solid var(--line-strong); }
.honor-card .medal{
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--copper));
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow: 0 6px 20px rgba(33,150,216,0.4);
}
.honor-card .medal::before{ content:""; width:14px; height:14px; background: var(--copper-bright); border-radius:50%; }
.honor-card .yr{ font-family:'Outfit',sans-serif; font-size:12px; color: var(--ink-dim); margin-bottom:10px; display:block; }
.honor-card h3{ font-size:16px; color: var(--paper); font-weight:600; margin-bottom:10px; }
.honor-card p{ font-size:12.5px; color: var(--ink-dim); }
.honor-card .level{
  margin-top:16px; display:inline-block; font-family:'Outfit',sans-serif; font-size:11px;
  color: #071426; background: var(--copper-bright); border-radius:999px; padding:4px 12px; font-weight:600;
}

/* ---------- 活動相簿 ---------- */
.gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery .ph{ position:relative; aspect-ratio: 4/3; overflow:hidden; border-radius:16px; border: 1px solid var(--line-strong); }
.gallery .ph:first-child{ grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
.gallery .ph img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.02); }
.gallery .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background: linear-gradient(0deg, rgba(7,13,26,0.92), transparent); font-size:12.5px; color: var(--paper); font-family:'Outfit',sans-serif; }

/* ---------- 燈箱 ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background: rgba(7,13,26,0.92); backdrop-filter: blur(6px);
  display:none; align-items:center; justify-content:center; z-index:999; padding:40px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay .lightbox-image{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close{
  position:absolute; top:24px; right:32px; width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid var(--line-strong); color: var(--paper);
  font-size:18px; cursor:pointer;
}
.lightbox-close:hover{ border-color: var(--teal-bright); color: var(--teal-bright); }

/* ---------- footer ---------- */
footer{ padding: 60px 48px 36px; }
.footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; }
.footer-grid h4{ font-family:'Outfit',sans-serif; font-size:12.5px; color: var(--ink-dim); margin-bottom:18px; letter-spacing:0.02em; }
.footer-grid p, .footer-grid a{ font-size:14px; color: var(--ink); display:block; margin-bottom:10px; }
.footer-grid a:hover{ color: var(--teal-bright); }

.footer-systems{ max-width:1180px; margin: 46px auto 0; padding-top: 30px; border-top:1px solid var(--line); }
.footer-systems .fs-label{ font-family:'Outfit',sans-serif; font-size:12px; color: var(--ink-dim); display:block; margin-bottom:16px; }
.sys-cards{ display:flex; gap:14px; flex-wrap:wrap; }
.sys-card{
  display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:14px;
  border:1px solid var(--line-strong); background: rgba(19,36,73,0.35); transition: all .2s;
}
.sys-card:hover{ border-color: var(--teal-bright); background: rgba(33,150,216,0.10); }
.sys-card .logo-slot{
  width:42px; height:42px; border-radius:10px; flex-shrink:0; overflow:hidden; background: var(--carbon-2);
  display:flex; align-items:center; justify-content:center;
}
.sys-card .logo-slot img{ width:100%; height:100%; object-fit:cover; transform: scale(1.35); }
.sys-card .sys-name{ font-size:13.5px; color: var(--ink); }
.sys-card:hover .sys-name{ color: var(--paper); }

.footer-bottom{
  max-width:1180px; margin: 34px auto 0; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; font-size:12px; color: var(--ink-dim);
  font-family:'Outfit',sans-serif;
}
.footer-bottom .footer-legal{ font-family:'Noto Sans TC',sans-serif; display:flex; flex-wrap:wrap; gap:4px 16px; }
.footer-bottom .footer-legal a{ color: var(--ink-dim); }
.footer-bottom .footer-legal a:hover{ color: var(--teal-bright); }

/* ---------- 後台管理專用 ---------- */
.admin-shell{ min-height:100vh; }
.admin-topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 32px; border-bottom:1px solid var(--line); background: var(--carbon-2);
}
.admin-topbar a{ font-size:13px; color: var(--ink-dim); }
.admin-topbar a:hover{ color: var(--teal-bright); }
.admin-body{ max-width: 980px; margin: 0 auto; padding: 48px 32px; }
.admin-body h1{ font-size:24px; color: var(--paper); margin-bottom:30px; font-weight:700; }
.admin-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.admin-grid a{ background: var(--carbon-2); border:1px solid var(--line-strong); border-radius:14px; padding: 26px; font-size:14px; color: var(--paper); transition: all .2s; }
.admin-grid a:hover{ background: var(--carbon-3); color: var(--teal-bright); border-color: var(--teal-bright); }
table.admin-table{ width:100%; border-collapse: collapse; margin-top:20px; table-layout:fixed; }
table.admin-table th, table.admin-table td{
  text-align:left; padding: 12px 10px; border-bottom:1px solid var(--line); font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:0;
}
table.admin-table th{ color: var(--ink-dim); font-family:'Outfit',sans-serif; font-weight:500; font-size:12px; }
table.admin-table td:last-child, table.admin-table th:last-child{ width:1%; white-space:nowrap; overflow:visible; }
.status-badge{ font-family:'Outfit',sans-serif; font-size:11px; padding:2px 10px; border-radius:999px; border:1px solid var(--line-strong); }
.status-badge.published{ border-color: var(--teal-bright); color: var(--teal-bright); }
.status-badge.draft{ border-color: var(--copper-bright); color: var(--copper-bright); }
.admin-form label{ display:block; font-size:13px; color: var(--ink-dim); margin: 18px 0 6px; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=date], .admin-form select, .admin-form textarea{
  width:100%; background: var(--carbon-2); border:1px solid var(--line-strong); border-radius:10px; color: var(--ink);
  padding: 10px 12px; font-family:'Noto Sans TC', sans-serif; font-size:14px;
}
.admin-form input[type=file]{ color: var(--ink-dim); font-size:13px; }
.crop-area{ margin-top:14px; max-width:420px; }
.crop-area .crop-preview-img{ display:block; max-width:100%; }
.crop-actions{ display:flex; gap:10px; margin-top:12px; }
.crop-actions button{ font-family:'Outfit',sans-serif; font-size:13px; padding:8px 18px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; }
.crop-actions .btn-crop-apply{ background: linear-gradient(90deg, var(--teal), var(--copper)); border-color:transparent; color:#eaf6ff; }
.crop-actions button:hover{ opacity:0.85; }
.crop-status{ font-size:12px; color: var(--teal-bright); margin-top:8px; }
.admin-form textarea{ min-height: 120px; }
.admin-actions{ margin-top: 28px; display:flex; gap:12px; }
.login-box{ max-width: 360px; margin: 120px auto; padding: 40px; border:1px solid var(--line-strong); border-radius:18px; background: var(--carbon-2); }
.login-box h1{ font-size:19px; color: var(--paper); margin-bottom: 24px; }
.error-msg{ color: var(--copper-bright); font-size:13px; margin-bottom:16px; }

/* ---------- 左右分割卡片（場地、獲獎榮譽明細用）---------- */
.split-card{ display:flex; overflow:hidden; }
.split-card .split-img{ width:260px; flex-shrink:0; aspect-ratio:4/3; object-fit:cover; }
.split-card .split-img-ph{
  width:260px; flex-shrink:0; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--carbon-3), var(--carbon-2)); color: var(--ink-dim); font-size:12px;
}
.split-card .split-content{ flex:1; display:flex; flex-direction:column; padding:26px 28px; min-width:0; }
.split-card .split-top{ font-size:17px; color: var(--paper); font-weight:600; margin-bottom:10px; }
.split-card .split-top .tag{ font-family:'Outfit',sans-serif; font-size:11px; color: var(--teal-bright); display:block; margin-bottom:8px; }
.split-card .split-bottom{ font-size:13.5px; color: var(--ink-dim); flex:1; white-space:pre-line; }
.split-card .split-bottom .level{
  margin-top:14px; display:inline-block; font-family:'Outfit',sans-serif; font-size:11px;
  color: #071426; background: var(--copper-bright); border-radius:999px; padding:4px 12px; font-weight:600;
}
.split-card-list{ display:flex; flex-direction:column; gap:16px; }

/* ---------- 活動行事曆 ---------- */
.cal-legend{ display:flex; gap:22px; margin-bottom:20px; font-size:12.5px; color:var(--ink-dim); }
.cal-legend span{ display:inline-flex; align-items:center; gap:7px; }
.cal-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cal-dot.workshop{ background: var(--teal-bright); }
.cal-dot.announcement{ background: var(--copper-bright); }
.cal-dot.gallery{ background: #7de89a; }

.cal-nav{ display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:24px; }
.cal-nav h2{ font-size:18px; color:var(--paper); font-family:'Outfit',sans-serif; min-width:160px; text-align:center; }

.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-bottom:48px; }
.calendar-weekday{ text-align:center; font-size:12px; color:var(--ink-dim); padding-bottom:8px; }
.calendar-day{ aspect-ratio:1; border-radius:10px; background: var(--carbon-2); border:1px solid var(--line); padding:8px; display:flex; flex-direction:column; }
.calendar-day.empty{ background:none; border:none; }
.calendar-day.today{ border-color: var(--teal-bright); background: rgba(111,214,255,0.08); }
.cal-daynum{ font-size:12px; color:var(--ink-dim); }
.calendar-day.today .cal-daynum{ color:var(--teal-bright); font-weight:700; }
.cal-dots{ display:flex; gap:4px; flex-wrap:wrap; margin-top:auto; }

.cal-agenda-title{ font-size:16px; color:var(--paper); margin-bottom:18px; }
.cal-agenda{ display:flex; flex-direction:column; gap:14px; }
.cal-agenda-day{ display:flex; gap:20px; }
.cal-agenda-date{ flex-shrink:0; width:90px; font-size:12.5px; color:var(--ink-dim); padding-top:10px; }
.cal-agenda-items{ flex:1; display:flex; flex-direction:column; gap:6px; }
.cal-agenda-item{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background:var(--carbon-2); transition:background .2s; }
.cal-agenda-item:hover{ background:var(--carbon-3); }
.cal-agenda-label{ font-size:11px; color:var(--ink-dim); flex-shrink:0; }
.cal-agenda-text{ font-size:13.5px; color:var(--ink); }

@media (max-width:860px){
  .calendar-day{ padding:4px; }
  .cal-daynum{ font-size:10px; }
  .cal-agenda-day{ flex-direction:column; gap:6px; }
  .cal-agenda-date{ width:auto; padding-top:0; }
}

/* ---------- 首頁研習列表 ---------- */
.workshop-list{ display:flex; flex-direction:column; gap:10px; }
.workshop-item{ display:block; padding: 18px 22px; border-radius:14px; background: var(--carbon-2); transition: background .2s; }
.workshop-item:hover{ background: var(--carbon-3); }
.workshop-item-main{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.workshop-item .workshop-date{ font-family:'Outfit',sans-serif; font-size:12.5px; color: var(--teal-bright); flex-shrink:0; min-width:70px; }
.workshop-item .workshop-title{ font-size:15px; color: var(--ink); font-weight:400; }
.workshop-item:hover .workshop-title{ color: var(--paper); }
.workshop-item .workshop-badge{ font-size:11px; padding:3px 10px; border-radius:999px; background: rgba(255,210,0,0.14); color: var(--copper-bright); }
.workshop-item-meta{ font-size:12px; color: var(--ink-dim); margin-top:4px; margin-left:84px; }

/* ---------- 新手指南／系統導覽 ---------- */
.guide-intro{ max-width:640px; margin: 0 auto 50px; text-align:center; }
.guide-intro p{ color: var(--ink-dim); font-size:15px; margin-top:14px; }

.system-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-bottom:60px; }
.system-card{ display:flex; flex-direction:column; padding: 26px 22px; }
.system-card .sc-logo{ width:56px; height:56px; border-radius:14px; overflow:hidden; margin-bottom:18px; background:var(--carbon-3); }
.system-card .sc-logo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.3); }
.system-card h3{ font-size:16px; color:var(--paper); font-weight:600; margin-bottom:8px; }
.system-card .sc-tagline{ font-size:12px; color:var(--teal-bright); margin-bottom:14px; display:block; }
.system-card p{ font-size:13px; color:var(--ink-dim); flex:1; margin-bottom:18px; }
.system-card .sc-btn{
  display:block; text-align:center; font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
  padding:10px 0; border-radius:999px; background:linear-gradient(90deg,var(--teal),var(--copper)); color:#eaf6ff;
}
.system-card .sc-btn.sc-current{ background:var(--carbon-3); color:var(--ink-dim); }

.scenario-table{ max-width:820px; margin:0 auto; }
.scenario-table h2{ font-size:20px; color:var(--paper); margin-bottom:24px; text-align:center; }
.scenario-row{ display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:10px; }
.scenario-row .sr-q{ flex:1; font-size:14.5px; color:var(--ink); }
.scenario-row .sr-arrow{ color:var(--ink-dim); font-family:'Outfit',sans-serif; font-size:13px; }
.scenario-row .sr-a{ flex-shrink:0; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--teal-bright); font-weight:600; }
.scenario-row .sr-a img{ width:22px; height:22px; border-radius:6px; object-fit:cover; }

@media (max-width:860px){
  .system-cards{ grid-template-columns: 1fr 1fr; }
  .scenario-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------- 中心影音報導 ---------- */
.video-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.video-card{ overflow:hidden; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; background: var(--carbon-3); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed-error{ display:flex; align-items:center; justify-content:center; color: var(--ink-dim); font-size:12px; }
.video-card-body{ padding: 20px 22px 24px; }
.video-card-body h3{ font-size:16px; color: var(--paper); font-weight:600; margin-bottom:8px; }
.video-card-body p{ font-size:13px; color: var(--ink-dim); white-space:pre-line; }

/* ---------- 分類選單卡片（所在地／年度列表用）---------- */
.group-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.group-tile{ padding: 36px 28px; text-align:center; }
.group-tile .g-name{ font-size:18px; color: var(--paper); font-weight:600; margin-bottom:10px; }
.group-tile .g-count{ font-family:'Outfit',sans-serif; font-size:12.5px; color: var(--teal-bright); }

/* ---------- 分頁 ---------- */
.pagination{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:40px; }
.pagination a, .pagination span{
  font-family:'Outfit',sans-serif; font-size:13.5px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line-strong); color: var(--ink);
}
.pagination a:hover{ border-color: var(--teal-bright); color: var(--teal-bright); }
.pagination .current{ background: linear-gradient(90deg, var(--teal), var(--copper)); border-color:transparent; color:#eaf6ff; }
.pagination .disabled{ opacity:0.35; pointer-events:none; }

@media (max-width: 640px){
  .split-card{ flex-direction:column; }
  .split-card .split-img, .split-card .split-img-ph{ width:100%; aspect-ratio:16/9; }
  .group-tiles{ grid-template-columns: 1fr; }
  .video-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .nav{ padding:14px 22px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; position:fixed; top:73px; left:0; right:0; bottom:0; height:auto; z-index:100;
    background: var(--carbon); flex-direction:column; gap:0; padding:12px 24px 40px; overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links > a{ padding:18px 4px; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-links .drop{ border-bottom:1px solid var(--line); }
  .nav-links .drop > a{ display:block; padding:18px 4px 8px; font-size:16px; }
  .nav-links .drop-panel{
    position:static; transform:none; display:block !important; padding:0 0 14px 12px;
  }
  .nav-links .drop-panel .drop-inner{
    background:none; border:none; box-shadow:none; padding:0; min-width:0;
  }
  .nav-links .drop-panel a{ padding:10px 4px; font-size:14.5px; color:var(--ink-dim); }
  .hero{ padding:80px 22px 70px; }
  section.block{ padding:60px 22px; }
  .about-tiles{ grid-template-columns: 1fr 1fr; }
  .about-row{ flex-direction:column; }
  .about-row .img-col{ width:100%; }
  .about-row .img-col img{ min-height:0; aspect-ratio:16/9; }
  .about-row .img-col.empty{ aspect-ratio:16/9; }
  .about-row .text-col{ padding: 28px 24px; }
  .about-tiles.cols-3{ grid-template-columns: 1fr; }
  .honors{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .gallery .ph:first-child{ grid-column: span 2; grid-row: span 1; aspect-ratio:16/9; }
  .footer-grid{ grid-template-columns: 1fr; gap:34px; }
  .admin-grid{ grid-template-columns: 1fr; }
}

/* ---------- 淺色主題覆蓋（柔霧藍版） ---------- */
body{ background-image: radial-gradient(circle at 1px 1px, rgba(27,95,168,0.07) 1px, transparent 0); }
.nav{ background: rgba(255,255,255,0.88); box-shadow: 0 1px 0 rgba(22,34,58,0.06); }
.nav-brand .name{ color: var(--paper); }
.glass, .tile{ background: #ffffff; box-shadow: 0 2px 10px rgba(22,34,58,0.05); }
.glass:hover, .tile:hover{ border-color: rgba(27,95,168,0.35); box-shadow: 0 12px 34px rgba(22,34,58,0.10); }
.sys-card{ background: #ffffff; box-shadow: 0 1px 6px rgba(22,34,58,0.05); }
.sys-card:hover{ background: #f3f7fd; }
.ann-item .txt .pin.tag-media{ background: rgba(22,34,58,0.06); }
.hero-glow.blue{ opacity:0.28; }
.hero-glow.yellow{ opacity:0.10; }