/* ===== Outer/Index 樣式 ===== */
:root {
  --p: #1a4f8a;
  --pd: #0f3060;
  --accent: #e85d14;
  --gold: #c9a227;
  --bg: #f4f7fb;
  --bgc: #ffffff;
  --txt: #1a2535;
  --txtm: #5a6a80;
  --bdr: #d0dcea;
  --green: #1a8a5a;
  --red: #c0392b;
}

/* 通用 */
.idx-wrap { max-width: 1320px; margin: 24px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 420px; gap: 24px; font-size: 1.125rem; }
.idx-card { background: var(--bgc); border-radius: 10px; border: 1px solid var(--bdr); padding: 20px; margin-bottom: 20px; }
.idx-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: var(--pd); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bdr); }
.idx-title::before { content: ''; display: block; width: 4px; height: 20px; background: var(--p); border-radius: 2px; flex-shrink: 0; }

/* 公告跑馬燈 */
.notice-banner { background: #fff8e1; border-bottom: 1px solid #f0d060; padding: 10px 0; overflow: hidden; }
.notice-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 12px; font-size: 1.125rem; }
.notice-badge { background: var(--accent); color: #fff; font-size: 1.125rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.notice-ticker-wrap { flex: 1; overflow: hidden; position: relative; }
.notice-ticker { display: inline-flex; white-space: nowrap; animation: ticker 40s linear infinite; }
.notice-ticker:hover { animation-play-state: paused; }
.ticker-item { display: inline-block; padding-right: 48px; }
.ticker-item a { color: var(--pd); text-decoration: none; }
.ticker-item a:hover { color: var(--accent); text-decoration: underline; }
.ticker-item::before { content: '▸'; color: var(--accent); margin-right: 6px; }
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Tab */
.idx-tab-nav { display: flex; border-bottom: 2px solid var(--bdr); margin-bottom: 16px; }
.idx-tab-btn { padding: 10px 20px; font-size: 1.125rem; font-weight: 500; color: var(--txtm); cursor: pointer; border: none; background: none; font-family: inherit; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .2s; }
.idx-tab-btn.active { color: var(--p); font-weight: 700; border-bottom-color: var(--p); }
.idx-tab-pane { display: none; }
.idx-tab-pane.active { display: block; }

/* 時間軸（垂直） */
.tl-step { display: flex; gap: 14px; margin-bottom: 10px; position: relative; }
.tl-step::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: -10px; width: 2px; background: var(--bdr); }
.tl-step:last-child::before { display: none; }
.tl-dot2 { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; flex-shrink: 0; position: relative; z-index: 1; }
.dot-done { background: var(--green); color: #fff; }
.dot-active { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(232,93,20,.2); }
.dot-upcoming { background: var(--bdr); color: var(--txtm); }
.tl-content { flex: 1; padding-top: 4px; }
.tl-label2 { font-size: 1.125rem; font-weight: 600; color: var(--txt); line-height: 1.3; }
.tl-date2 { font-size: 1.125rem; color: var(--txtm); margin-top: 2px; }
.tl-step.tl-active .tl-label2 { color: var(--accent); }

/* 公告列表 */
.ann-list { list-style: none; padding: 0; margin: 0; }
.ann-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--bdr); font-size: 1.125rem; }
.ann-item:last-child { border-bottom: none; }
.ann-date { font-size: 1.125rem; color: var(--txtm); white-space: nowrap; min-width: 80px; }
.ann-tag { font-size: 1.125rem; padding: 1px 7px; border-radius: 3px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.tag-new { background: #fff0f0; color: var(--red); border: 1px solid #fcc; }
.tag-info { background: #e8f0fe; color: var(--p); border: 1px solid #b3c8f5; }
.ann-link { color: var(--txt); text-decoration: none; flex: 1; line-height: 1.5; }
.ann-link:hover { color: var(--p); text-decoration: underline; }

/* 側欄登入 */
.login-box { background: linear-gradient(135deg, var(--p), var(--pd)); border-radius: 10px; padding: 20px; color: #fff; margin-bottom: 20px; text-align: center; }
.login-box h3 { font-size: 1.25rem; margin-bottom: 14px; font-weight: 700; }
.login-role-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border-radius: 6px; font-size: 1.125rem; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; border: none; transition: all .2s; margin-bottom: 8px; text-decoration: none; }
.login-role-btn.school { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.login-role-btn.school:hover { background: rgba(255,255,255,.25); color: #fff; }
.login-role-btn.admin { background: var(--accent); color: #fff; }
.login-role-btn.admin:hover { background: #cf4d0b; color: #fff; }

/* 狀態徽章 */
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 1.125rem; font-weight: 600; }
.status-open { background: #d1fae5; color: #065f46; }
.status-closed { background: #fee2e2; color: #991b1b; }
.status-upcoming { background: #e0f2fe; color: #0369a1; }
.status-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; margin-bottom: 10px; }

/* 快速連結 */
.ql-list { display: flex; flex-direction: column; gap: 8px; }
.ql-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border-radius: 7px; border: 1px solid var(--bdr); text-decoration: none; color: var(--txt); font-size: 1.125rem; transition: all .18s; }
.ql-item:hover { background: #eef3fb; border-color: var(--p); color: var(--p); }
.ql-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.ql-blue { background: #dbeafe; }
.ql-orange { background: #ffe8d6; }
.ql-green { background: #d1fae5; }
.ql-purple { background: #ede9fe; }

/* 統計 */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-item { background: var(--bg); border-radius: 8px; padding: 12px; text-align: center; border: 1px solid var(--bdr); }
.stat-num { font-size: 1.625rem; font-weight: 900; color: var(--p); line-height: 1; }
.stat-label2 { font-size: 1.125rem; color: var(--txtm); margin-top: 4px; }

/* 服務信箱 */
.contact-box { background: #f0f6ff; border: 1px solid #b3c8f5; border-radius: 10px; padding: 20px; font-size: 1.125rem; }
.contact-box a { color: var(--p); font-weight: 600; }

/* 學年度徽章 */
.year-badge { background: var(--gold); color: #fff; padding: 3px 12px; border-radius: 4px; font-size: 1.125rem; font-weight: 700; letter-spacing: 1px; }

/* RWD - 平板 */
@media (max-width: 992px) {
    .idx-wrap { grid-template-columns: 1fr; padding: 0 16px; gap: 16px; }
    .idx-card { padding: 16px; }
    .idx-title { font-size: 1.2rem; }
    .notice-inner { padding: 0 16px; flex-wrap: wrap; }
    .ann-item { flex-wrap: wrap; }
    .ann-date { min-width: auto; }
}

/* RWD - 手機 */
@media (max-width: 600px) {
    .idx-wrap { padding: 0 12px; gap: 12px; margin: 16px auto; }
    .idx-card { padding: 14px; border-radius: 8px; }
    .idx-title { font-size: 1.125rem; }
    .idx-tab-btn { padding: 8px 14px; font-size: 1rem; }
    .tl-step { gap: 10px; }
    .tl-dot2 { width: 28px; height: 28px; font-size: 1rem; }
    .tl-step::before { left: 13px; top: 28px; }
    .tl-label2 { font-size: 1rem; }
    .tl-date2 { font-size: 1rem; }
    .ann-date { font-size: 1rem; }
    .ann-tag { font-size: 0.95rem; }
    .ann-link { font-size: 1rem; }
    .notice-inner { font-size: 1rem; padding: 0 12px; gap: 8px; }
    .notice-badge { font-size: 1rem; }
    .contact-box { padding: 14px; }
    .year-badge { font-size: 1rem; }
}