/* we1co.css — LCSD Museums (we1co.me style) */
:root{
  --primary:#0EA5E9;--primary-dark:#0284C7;--secondary:#10B981;--accent:#F97316;
  --status-open:#22C55E;--status-closed:#EF4444;--status-maint:#F59E0B;--status-sus:#6B7280;
  --bg-page:#F8FAFC;--bg-card:#fff;--text-1:#1E293B;--text-2:#64748B;--border:#E2E8F0;
  --brand:#1e3a8a;
  --nav-height:60px;--banner-height:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg-page);color:#333;line-height:1.6;padding-top:80px}
.container{max-width:800px;margin:0 auto;padding:0 16px}
.top-bar{position:fixed;top:0;left:0;right:0;height:24px;background:var(--brand);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:.68rem;z-index:1002}
.top-bar span{white-space:nowrap}
.thunder-banner{display:none;position:fixed;top:24px;left:0;right:0;background:linear-gradient(135deg,#facc15,#f97316);color:#422006;font-weight:700;font-size:.78rem;padding:6px 16px;z-index:1003;text-align:center;animation:thunder-flash 3s ease-in-out infinite;overflow-wrap:break-word;word-wrap:break-word;white-space:normal;line-height:1.4}
body.has-thunder .nav-bar{top:calc(var(--nav-height))}
body.has-thunder{padding-top:calc(var(--nav-height) + var(--banner-height))}
body.has-thunder .index-grid{top:calc(var(--nav-height) + var(--banner-height))}
body.has-thunder section{scroll-margin-top:calc(var(--nav-height) + var(--banner-height))}
@keyframes thunder-flash{0%,100%{opacity:1}50%{opacity:.85}}
.nav-bar{position:fixed;top:24px;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:1001;padding:6px 16px;min-height:36px}
section{scroll-margin-top:calc(var(--nav-height) + 10px)}
.nav-inner{max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav-title{font-weight:700;color:var(--brand);font-size:.95rem;white-space:nowrap}
.lang-switch{display:flex;gap:4px}
.lang-btn{padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:500;text-decoration:none;color:var(--text-2);background:#f1f5f9;border:1px solid var(--border);cursor:pointer}
.lang-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.card{background:var(--bg-card);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin:8px 0;overflow:hidden;border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease,opacity .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card{animation:cardIn .35s ease both}
.card.collapsed .facility-body{display:none}
.card .expand-hint{font-size:.72rem;color:var(--text-2);font-weight:500;margin-left:6px}
.card.collapsed .expand-hint::after{content:attr(data-expand)}
.card:not(.collapsed) .expand-hint::after{content:attr(data-collapse)}
.facility-header{padding:14px 16px;background:#f8fafc;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer}
.facility-header:hover{background:#f1f5f9}
.facility-name{font-size:1rem;font-weight:700;color:var(--text-1)}
.facility-address{font-size:.75rem;color:var(--text-2);margin-top:2px}
.status-badge{padding:5px 12px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.status-open{background:#dcfce7;color:#166534}
.status-upcoming{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;animation:breathe 2s ease-in-out infinite}
.status-closed{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.status-maint{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
.status-partial{background:#fef3c7;color:#92400e}
.status-suspended{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.facility-body{padding:12px 16px}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:.85rem}
.detail-row:last-child{border-bottom:none}
.detail-label{color:var(--text-2)}
.schedule-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.schedule-title{font-weight:600;color:#374151;margin-bottom:8px;font-size:.9rem}

.index-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;position:sticky;top:calc(var(--nav-height) + 12px);z-index:900;background:rgba(248,250,252,.95);backdrop-filter:blur(6px);padding:8px 0;border-radius:12px}
.index-item{padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:8px;font-size:.82rem;color:var(--brand);text-decoration:none;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease}
.index-item:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(30,58,138,.25)}

.updated{text-align:center;color:#94a3b8;font-size:.7rem;margin:12px 0 16px}
.back-to-top{position:fixed;bottom:20px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(30,58,138,.4);display:none;align-items:center;justify-content:center;z-index:999}
.back-to-top.visible{display:flex}
.refresh-btn{display:inline-block;padding:10px 24px;font-size:.85rem;font-weight:600;background:#3b82f6;color:white;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;font-family:inherit}
.refresh-btn:hover{background:#2563eb}
.refresh-btn:active{transform:scale(.97);background:#1d4ed8}

.section-title{font-size:1.1rem;font-weight:700;color:var(--text-1);margin:12px 0 6px;padding-bottom:6px;border-bottom:2px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.section-title .toggle{font-size:.9rem;color:var(--text-2)}
.collapsible .section-content{display:block}
.collapsible.collapsed .section-content{display:none}
.collapsible.collapsed .section-title .toggle::after{content:attr(data-expand)}
.collapsible .section-title .toggle::after{content:attr(data-collapse)}

@media(max-width:640px){.index-grid{grid-template-columns:1fr 1fr;top:calc(var(--nav-height) + 12px)}.facility-header{padding:12px}.facility-body{padding:10px 12px}}