/* =========================
   yles503 學生端：完整樣式 + 行動切換(UA) + 動畫
   ========================= */

/* 變數 */
:root{
  --bg:#f6f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280; --ring:#e5e7eb;
  /* ✅ 改成天藍色主題 */
  --brand:#3B82F6;     /* 藍色主色（天藍） */
  --brand-2:#2563EB;   /* 次主色（稍深） */
  --accent:#0EA5E9;    /* 輔助色（青藍） */
  --card-dark:#1F2A44; --bg-dark:#111827; --text-dark:#e5e7eb;
  --muted-dark:#9ca3af; --ring-dark:#374151;
  --radius:16px; --shadow:0 4px 12px rgba(0,0,0,.04); --shadow-strong:0 10px 30px rgba(0,0,0,.12);
  --t-fast:.18s cubic-bezier(.2,.8,.2,1); --t-base:.28s cubic-bezier(.2,.8,.2,1);
}


/* Reset & base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition: background var(--t-base), color var(--t-base);
}
.dark body{ background:var(--bg-dark); color:var(--text-dark); }

.container{ max-width:1100px; margin:auto; padding:20px; }
@media (max-width:768px){ .container{ padding:12px; } }

.muted{ color:var(--muted); } .dark .muted{ color:var(--muted-dark); }
.hidden{ display:none !important; }
.h-bold{ font-weight:700; }

/* === 連結（無底線） === */
a{ color:var(--brand); text-decoration:none; transition: color .2s ease, background .2s ease; }
a:hover{ color:var(--brand-2); text-decoration:none; }
a:visited{ color:var(--brand); }
a.card{ display:block; color:inherit; text-decoration:none; }
a.card:hover{ text-decoration:none; }

/* === Header / 導覽 === */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ring);
}
.dark header{ background:rgba(17,24,39,.75); border-bottom-color:var(--ring-dark); }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:36px; height:36px; border-radius:12px; color:#fff; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 6px 16px rgba(79,70,229,.30);
}

/* === 上方導覽（桌機/平板） === */
/* === 覆蓋：把上方選單灰色背景拿掉、hover/active 走天藍 === */
.tabs{
  background: transparent !important;
  padding: 0 !important;
}
.tabs a{
  border-radius: 999px;
  padding: 10px 14px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tabs a:hover{
  background: rgba(59,130,246,.12) !important; /* 天藍 hover */
  color: var(--brand) !important;
  text-decoration: none;
}
.tabs a.active{
  background: rgba(59,130,246,.18) !important; /* 天藍 active */
  color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(59,130,246,.18);
}

.dark .tabs a:hover{ background:rgba(129,140,248,.18); color:#93c5fd; }
.dark .tabs a.active{ background:rgba(129,140,248,.22); color:#93c5fd; }

/* === 控制元件 === */
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--ring);
  background:#fff; color:inherit; cursor:pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), transform .1s ease;
  min-height:40px; display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,.08); }
.btn:active{ transform:scale(.98); }
.dark .btn{ background:var(--card-dark); border-color:var(--ring-dark); color:var(--text-dark); }

.input{
  padding:10px 12px; border-radius:12px; border:1px solid var(--ring); background:#fff; color:inherit;
  min-width:220px; outline:none; font-size:16px; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.dark .input{ background:var(--card-dark); border-color:var(--ring-dark); color:var(--text-dark); }

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--ring); background:linear-gradient(180deg,#fff,rgba(255,255,255,.92)); font-size:12px;
}
.dark .pill{ background:var(--card-dark); border-color:var(--ring-dark); }

/* === 卡片（含動畫） === */
.card{
  background:var(--card); border:1px solid var(--ring); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color var(--t-fast), background var(--t-fast);
}
.card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-strong); }
.dark .card{ background:var(--card-dark); border-color:var(--ring-dark); }
.card-title{ font-weight:700; margin-bottom:6px; }

.tool-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }

/* === Grid === */
.grid{ display:grid; gap:12px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1024px){ .grid-2{ grid-template-columns:1fr; } }

/* === 公告列表簡式 === */
.article-list{ display:grid; gap:12px; }

/* === 課表 === */
.schedule-wrap{ overflow:auto; }
.schedule-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; min-width:600px; }
.schedule-table th,.schedule-table td{ padding:12px 10px; border-bottom:1px solid var(--ring); text-align:center; vertical-align:middle; }
.dark .schedule-table th,.dark .schedule-table td{ border-bottom-color:var(--ring-dark); }
.schedule-table th{ font-weight:700; background:linear-gradient(180deg,rgba(0,0,0,.02),transparent); }
.period-col{
  width:180px; min-width:180px; max-width:180px; text-align:left; font-weight:700;
  background:var(--card); position:sticky; left:0; z-index:1;
}
.dark .period-col{ background:var(--card-dark); }
.chip{
  display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:4px 12px;
  border-radius:20px; border:1px solid var(--ring);
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.92)); white-space:nowrap; font-size:14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.1); }
.dark .chip{ background:var(--card-dark); border-color:var(--ring-dark); }
@media (max-width:1024px){ .period-col{ width:160px; min-width:160px; max-width:160px; } }
@media (max-width:640px){
  .period-col{ width:140px; min-width:140px; max-width:140px; }
  .schedule-table th,.schedule-table td{ padding:10px 6px; font-size:13px; }
  .chip{ font-size:12px; min-height:30px; padding:4px 10px; }
}

/* === 相簿（含 hover 動畫） === */
.gallery{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.gallery .item{
  border:1px solid var(--ring); border-radius:12px; overflow:hidden; background:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition: transform .3s ease, box-shadow .3s ease, border-color var(--t-fast);
}
.gallery .item:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.dark .gallery .item{ background:var(--card-dark); border-color:var(--ring-dark); }
.gallery img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
@media (max-width:420px){ .gallery{ grid-template-columns:1fr; } }

/* === Toast === */
.toast{ position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:60; }
.toast .item{ background:#111827; color:#fff; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow-strong); animation:fadeIn .3s ease; }

/* === 登入 Modal 動畫（若仍有使用） === */
#loginModal{ position:fixed; inset:0; display:grid; place-items:center; z-index:60; background:rgba(0,0,0,.55); animation:fadeIn .25s ease; }
#loginModal.hidden{ display:none !important; }
#loginModal .card{ animation:zoomIn .25s ease; }
.login-form label{ display:grid; gap:6px; font-size:14px; color:var(--muted); }
.dark .login-form label{ color:var(--muted-dark); }

/* === 頁腳 === */
footer{ margin:24px 0; color:var(--muted); text-align:center; font-size:12px; }
.dark footer{ color:var(--muted-dark); }

/* === 動畫關鍵影格 === */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes zoomIn{ from{transform:scale(.9); opacity:0} to{transform:scale(1); opacity:1} }

/* === 列印 === */
@media print{
  header,.tool-row,#loginModal,.toast,.mobile-tabbar{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ box-shadow:none; border-color:#ccc; }
}

/* === RWD（桌機網格） === */
@media (max-width:1024px){ .grid-2{ grid-template-columns:1fr; } }

/* =========================
   行動切換：僅 UA 命中時生效（.is-mobile）
   ========================= */
.hide-on-mobile { display: block; }
.show-on-mobile { display: none; }

.is-mobile .hide-on-mobile { display: none !important; }
.is-mobile .show-on-mobile { display: inline-flex; }

/* 內容避免被底部 Tabbar 擋住 */
.is-mobile body{ padding-bottom:84px; }

/* 行動底部導覽列（Tab Bar） */
.mobile-tabbar{ display:none; }
.is-mobile .mobile-tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5,1fr); gap:0;
  background: var(--card); border-top:1px solid var(--ring);
  padding: 8px 6px env(safe-area-inset-bottom, 0);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
.dark.is-mobile .mobile-tabbar{ background: var(--card-dark); border-top-color: var(--ring-dark); }
.is-mobile .mobile-tabbar a{
  display: grid; gap: 4px; place-items: center; padding: 8px 6px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  border-radius: 10px; transition: background var(--t-fast), color var(--t-fast), transform .1s ease;
  min-height: 56px;
}
.is-mobile .mobile-tabbar a:hover{ background: rgba(99,102,241,.10); color: var(--brand); text-decoration:none; }
.is-mobile .mobile-tabbar a.active{ color: var(--brand); font-weight: 700; }
.dark.is-mobile .mobile-tabbar a:hover{ background: rgba(99,102,241,.18); color: #93c5fd; }
.dark.is-mobile .mobile-tabbar a.active{ color: #93c5fd; }

/* === 觸控優化 === */
button, .btn, .tab, .mobile-tabbar a { touch-action: manipulation; }
input, button, .btn, .tab { font-size: 16px; } /* iOS 避免縮放 */