/* ═══════════════════════════════════════════
   海風 SeaWind — Main Stylesheet
   ═══════════════════════════════════════════
   Structure:
   1. Reset / Variables / Base
   2. Global UI (atmosphere, scroll progress)
   3. Navigation
   4. Hero Section
   5. Page Layout / Sections
   6. Buttons
   7. Cards / Features
   8. Bulletin / Announcements
   9. Culture Gallery (Lore)
   10. Photos / Carousel
   11. Partner
   12. Member
   13. Guide / Callouts
   14. Rules / Penalties
   15. Articles / TOC
   16. Community
   17. Team
   18. Links
   19. Footer
   20. Lightbox
   21. Miscellaneous
   22. Keyframe Animations
   23. Responsive / Media Queries

   Each dark-mode section is followed by its
   [data-theme="light"] overrides.
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════
   Reset / Variables / Base Styles
   ═══════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--sky:#9dafff;--sand:#deac80;--foam:#a8e6cf;--shell:#ffebcd;--ocean-blue:#578aff;--royal:#8800ff;--emerald:#00794c;--teal:#58c2b0;--blush:#e0b5d4;--lavender:#ab72f9;--rose:#ffb6c1;--mint:#e7ffcd;--ice:#85b1e0;--peach:#ffe2dd;--deep:#0d1117;--ocean:#161b22;--drift:#1c2333;--mist:#21283b;--fog:#8b949e;--cloud:#c9d1d9;--white:#e6edf3;--text-muted:#5a5e74;--font-body:'Noto Sans TC','Inter',system-ui,-apple-system,sans-serif;--font-display:'Noto Sans TC','Inter',system-ui,-apple-system,sans-serif;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--ease:cubic-bezier(0.4,0,0.2,1);--duration:0.3s}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--deep);color:var(--cloud);line-height:1.7;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color 0.4s ease,color 0.4s ease}

/* ═══════════════════════════════════════
   Global UI (atmosphere, scroll progress, particles)
   ═══════════════════════════════════════ */

.skip-link{position:absolute;top:-100%;left:16px;z-index:10000;padding:12px 24px;background:var(--sky);color:var(--deep);font-weight:700;border-radius:0 0 var(--radius-md)var(--radius-md);text-decoration:none;transition:top 0.2s ease}
.skip-link:focus{top:0}
.bg-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--sky),var(--foam),var(--sky));background-size:200% 100%;animation:progress-shimmer 3s linear infinite;z-index:9999;transition:width 0.1s linear;will-change:width}
.bg-atmosphere::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse 600px 400px at 20% 30%,rgba(157,175,255,0.06)0%,transparent 70%),radial-gradient(ellipse 500px 500px at 80% 60%,rgba(168,230,207,0.04)0%,transparent 70%),radial-gradient(ellipse 400px 300px at 60% 20%,rgba(222,172,128,0.03)0%,transparent 70%);animation:drift 30s ease-in-out infinite alternate}
.particle{position:fixed;width:2px;height:2px;background:var(--sky);border-radius:50%;opacity:0;pointer-events:none;z-index:1;animation:float-up linear infinite}
.bg-atmosphere::after{content:'';position:absolute;bottom:0;left:-10%;width:120%;height:300px;background:radial-gradient(ellipse 800px 200px at 50% 100%,rgba(87,138,255,0.05)0%,transparent 70%);animation:wave-float 12s ease-in-out infinite;pointer-events:none}
.bg-atmosphere{contain:strict;pointer-events:none}
.bg-atmosphere::before {
  animation: drift 30s ease-in-out infinite alternate, atmosphere-breathe 8s ease-in-out infinite;
}

[data-theme="light"] .bg-atmosphere::before{background:radial-gradient(ellipse 600px 400px at 20% 30%,rgba(157,175,255,0.08)0%,transparent 70%),radial-gradient(ellipse 500px 500px at 80% 60%,rgba(168,230,207,0.06)0%,transparent 70%),radial-gradient(ellipse 400px 300px at 60% 20%,rgba(222,172,128,0.04)0%,transparent 70%)}
[data-theme="light"] .particle{opacity:0.2}
[data-theme="light"] .text-highlight{color:#b8860b}
[data-theme="light"] .particle{background:rgba(157,175,255,0.4)}
[data-theme="light"] .rain-toggle{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.08);color:rgba(0,0,0,0.4);box-shadow:0 4px 16px rgba(0,0,0,0.08)}
[data-theme="light"] .rain-toggle:hover{background:#fff;color:rgba(0,0,0,0.7)}
[data-theme="light"] .rain-toggle.active{color:var(--sky);background:rgba(157,175,255,0.1)}
[data-theme="light"] .back-to-top{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.1);color:var(--navy)}
[data-theme="light"] .back-to-top:hover{background:rgba(255,255,255,1);border-color:rgba(0,0,0,0.2)}

/* ═══════════════════════════════════════
   Navigation
   ═══════════════════════════════════════ */

.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--space-md)var(--space-xl);display:flex;align-items:center;justify-content:space-between;background:rgba(13,17,23,0.35);backdrop-filter:blur(28px)saturate(1.5);-webkit-backdrop-filter:blur(28px)saturate(1.5);border-bottom:1px solid rgba(255,255,255,0.06);transition:background var(--duration)var(--ease),box-shadow var(--duration)var(--ease)}
.nav.scrolled{background:rgba(13,17,23,0.5);box-shadow:0 4px 24px rgba(0,0,0,0.3)}
.nav-logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--white);font-size:1.2rem;font-weight:700;letter-spacing:-0.02em}
.nav-logo .logo-icon{font-size:1.4rem}
.nav-logo-img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.nav-right{display:flex;align-items:center;gap:var(--space-md);margin-left:auto}
.nav-links{display:flex;align-items:center;gap:var(--space-lg);list-style:none}
.nav-links a{color:var(--fog);text-decoration:none;font-size:0.9rem;font-weight:500;transition:color var(--duration)var(--ease);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--sky);border-radius:1px;transition:width var(--duration)var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-discord{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(157,175,255,0.1);border:1px solid rgba(157,175,255,0.2);border-radius:var(--radius-md);color:var(--sky);text-decoration:none;font-size:0.85rem;font-weight:600;transition:all var(--duration)var(--ease)}
.nav-discord:hover{background:rgba(157,175,255,0.18);border-color:var(--sky);transform:translateY(-1px)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-sm);position:relative;width:36px;height:36px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--cloud);margin:5px 0;border-radius:2px;transition:all var(--duration)var(--ease);position:absolute;left:50%;transform:translateX(-50%)}
.nav-toggle span:nth-child(1){top:10px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:24px}
.nav-toggle.active span:nth-child(1){top:17px;transform:translateX(-50%)rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:translateX(-50%)scaleX(0)}
.nav-toggle.active span:nth-child(3){top:17px;transform:translateX(-50%)rotate(-45deg)}
.nav-theme{background:none;border:none;border-radius:0;padding:6px 4px;cursor:pointer;font-size:1.1rem;color:var(--cloud);transition:color var(--duration)var(--ease);line-height:1;display:inline-flex;align-items:center;justify-content:center}
.nav-theme svg{display:block}
.nav-theme:hover{color:var(--white)}
.nav-dropdown{position:relative;list-style:none}
.nav-dropdown-toggle .arrow{font-size:0.7em;margin-left:2px;transition:transform var(--duration)var(--ease)}
.nav-dropdown:hover .arrow,.nav-dropdown.open .arrow{transform:rotate(180deg)}
.dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:180px;background:rgba(22,27,34,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);padding:var(--space-sm);list-style:none;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu{display:block}
.dropdown-menu li a{display:block;padding:8px 14px;border-radius:var(--radius-sm);font-size:0.85rem;color:var(--fog);text-decoration:none;transition:all var(--duration)var(--ease)}
.dropdown-menu li a:hover,.dropdown-menu li a.active{background:rgba(255,255,255,0.06);color:var(--white)}
.dropdown-menu li a::after{display:none}

[data-theme="light"] .nav.scrolled{background:rgba(240,242,245,0.6);box-shadow:0 4px 24px rgba(0,0,0,0.08)}
[data-theme="light"] .nav-theme{color:var(--cloud)}
[data-theme="light"] .nav-links a{color:var(--fog)}
[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{color:var(--white)}
[data-theme="light"] .nav-discord{background:rgba(157,175,255,0.08);border-color:rgba(157,175,255,0.15)}
[data-theme="light"] .nav-discord:hover{background:rgba(157,175,255,0.15)}
[data-theme="light"] .dropdown-menu{background:rgba(255,255,255,0.96);border-color:rgba(0,0,0,0.06);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
[data-theme="light"] .dropdown-menu li a:hover,[data-theme="light"] .dropdown-menu li a.active{background:rgba(0,0,0,0.04)}
[data-theme="light"] .nav{background:rgba(240,242,245,0.55);border-bottom-color:rgba(0,0,0,0.06)}
[data-theme="light"] .nav-logo-img{border-color:rgba(0,0,0,0.08)}

/* ═══════════════════════════════════════
   Hero Section
   ═══════════════════════════════════════ */

.hero{min-height:85vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;background:linear-gradient(135deg,#0f1117 0%,#1a2340 50%,#0f1117 100%);overflow:hidden;padding:80px 24px 24px}
.hero::before{content:'';position:absolute;inset:0;background:image-set(url('assets/img/homeHero.webp')type('image/webp'),url('assets/img/homeHero.png')type('image/png'))center/cover no-repeat,radial-gradient(ellipse 600px 400px at 30% 20%,rgba(157,175,255,.06)0%,transparent 70%),radial-gradient(ellipse 500px 300px at 70% 60%,rgba(168,230,207,.04)0%,transparent 70%);pointer-events:none;filter:brightness(0.85)contrast(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.38),linear-gradient(to bottom,rgba(0,0,0,0.15)0%,transparent 30%,transparent 60%,var(--deep)100%);pointer-events:none;z-index:1}
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-content{position:relative;z-index:2;padding:0 24px}
.hero-collapsed .hero-subtitle,.hero-collapsed .hero-actions,.hero-collapsed .hero-info,.hero-collapsed .hero-tips{opacity:0;transform:translateY(12px);pointer-events:none;transition:none}
.hero-collapsed~.hero-scroll{opacity:0;pointer-events:none}
.hero-prompt{display:inline-block;font-size:1.4rem;color:var(--sky);font-weight:400;animation:blink 0.8s step-end infinite;margin-top:12px;cursor:pointer}
.hero-collapsed .hero-prompt{opacity:1;transform:none}
.hero-content:not(.hero-collapsed).hero-prompt{opacity:0;transform:scale(0.5);transition:all 0.3s ease;pointer-events:none;position:absolute}
.hero-content:not(.hero-collapsed).hero-subtitle,.hero-content:not(.hero-collapsed).hero-actions,.hero-content:not(.hero-collapsed).hero-info,.hero-content:not(.hero-collapsed).hero-tips{opacity:1;transform:translateY(0);pointer-events:auto}
.hero-content:not(.hero-collapsed).hero-subtitle{transition:opacity 0.5s ease 0.1s,transform 0.5s ease 0.1s}
.hero-content:not(.hero-collapsed).hero-actions{transition:opacity 0.5s ease 0.3s,transform 0.5s ease 0.3s}
.hero-content:not(.hero-collapsed).hero-info{transition:opacity 0.5s ease 0.3s,transform 0.5s ease 0.3s}
.hero-content:not(.hero-collapsed).hero-tips{transition:opacity 0.5s ease 0.3s,transform 0.5s ease 0.3s}
.hero-content:not(.hero-collapsed)~.hero-scroll{opacity:1;pointer-events:auto;transition:opacity 0.5s ease 0.3s}
.hero-content::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(0,0,0,0.45)0%,transparent 70%);pointer-events:none;z-index:-1}
.hero-badge{display:inline-block;background:linear-gradient(135deg,rgba(87,138,255,0.2),rgba(136,0,255,0.12));border:1px solid rgba(87,138,255,0.3);padding:8px 22px;border-radius:100px;font-size:.85rem;color:#b3c8ff;margin-bottom:24px;letter-spacing:1.5px;text-shadow:0 1px 4px rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(3.5rem,10vw,7rem);font-weight:600;background:linear-gradient(135deg,#fff 0%,#c8deff 50%,var(--sky)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:20px;filter:drop-shadow(0 2px 20px rgba(0,0,0,0.6))drop-shadow(0 0 60px rgba(100,160,255,0.15))}
.hero h1 .accent{background:linear-gradient(135deg,var(--sky),var(--foam));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-family:'Noto Sans TC',sans-serif;font-size:clamp(0.95rem,1.8vw,1.15rem);color:var(--cloud);font-weight:400;letter-spacing:0.04em;margin-bottom:4px;min-height:1.6em;text-shadow:0 2px 12px rgba(0,0,0,0.5)}
.hero-subtitle .cursor{display:inline-block;color:var(--sky);font-weight:400;margin-left:1px;vertical-align:text-bottom;animation:blink 0.8s step-end infinite}
.hero-subtitle.done .cursor{animation:blink 0.8s step-end 3;opacity:0;animation-fill-mode:forwards}
.tw-cursor{color:var(--sky);font-weight:400;animation:blink 0.8s step-end infinite}
.hero-buttons{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-xl)}
.hero-meta{display:flex;gap:var(--space-xl);flex-wrap:wrap;justify-content:center}
.hero-entrance{animation:hero-rise 1s cubic-bezier(0.22,1,0.36,1)forwards}
.hero-info{display:flex;gap:var(--space-lg);justify-content:center;flex-wrap:nowrap;margin-top:var(--space-lg);max-width:860px;margin-left:auto;margin-right:auto}
.hero-desc{color:var(--text-muted,var(--fog));font-size:.95rem;margin-bottom:32px}
.hero-actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap;margin-bottom:32px}
.hero-scroll{position:absolute;bottom:32px;text-align:center;color:var(--text-muted,var(--fog));font-size:0.8rem;z-index:2;animation:pulse-down 2s ease-in-out infinite;cursor:pointer}
.scroll-arrow{font-size:1.2rem;margin-top:4px}
.hero-title{font-family:'Noto Serif TC',serif;font-size:5rem;font-weight:700;letter-spacing:0.08em;position:relative;display:inline-block;transform-origin:center bottom;background:linear-gradient(135deg,#fff 0%,var(--sky)40%,var(--foam)60%,#fff 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-title::after{display:none}
.hero-tips{margin-top:var(--space-md);display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.9rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:10px 20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.hero-tips-hash{color:var(--sky);font-weight:800;font-size:1.1rem;flex-shrink:0}
.hero-tips .tips-text{color:#fff;opacity:0;transition:opacity 0.4s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}
.hero-tips .tips-text.tip-visible{opacity:1}
.hero-scroll{color:var(--white);opacity:0.9;cursor:pointer}
.hero-scroll span{font-weight:600;font-size:0.85rem}
.scroll-arrow{animation:bounce-down 2s ease-in-out infinite}
.hero-particles{contain:strict;pointer-events:none}
.hero-content{opacity:1;animation:hero-fade-in 0.8s ease-out forwards}
.hero-title .char:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 0 12px rgba(157,175,255,0.5));
  transition: filter 0.3s;
}
.hero-subtitle .cursor.cursor-pause {
  /* 停頓時只閃爍，無呼吸效果 */
}
.hero-info .info-card:nth-child(1) { animation-delay: 2.2s; }
.hero-info .info-card:nth-child(2) { animation-delay: 2.4s; }
.hero-info .info-card:nth-child(3) { animation-delay: 2.6s; }
.btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:18px 40px;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:700;text-decoration:none;cursor:pointer;color:var(--white);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);transition:all var(--duration)var(--ease);font-family:inherit;min-width:200px}
.btn-hero:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.info-card-copy{cursor:pointer;position:relative}
.info-card-copy:hover{background:rgba(255,255,255,0.14);border-color:rgba(157,175,255,0.35)}
.copy-hint{position:absolute;top:-8px;right:-8px;background:var(--foam);color:var(--deep);font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:100px;opacity:0;transform:translateY(4px);transition:all 0.3s ease;pointer-events:none}
.copy-hint.show{opacity:1;transform:translateY(0)}
.skeleton{background:linear-gradient(90deg,rgba(157,175,255,0.05)25%,rgba(157,175,255,0.1)50%,rgba(157,175,255,0.05)75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}
.skeleton-line{height:14px;margin-bottom:10px;border-radius:4px}
.skeleton-line.short{width:60%}
.skeleton-line.medium{width:80%}
.info-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:16px 24px;flex:1 1 0;min-width:0;backdrop-filter:blur(16px)saturate(1.3);-webkit-backdrop-filter:blur(16px)saturate(1.3);box-shadow:0 4px 16px rgba(0,0,0,0.15),0 0 0 1px rgba(255,255,255,0.05);transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;text-align:center}
.info-card:hover{transform:translateY(-2px) scale(1.04);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);box-shadow:0 8px 24px rgba(0,0,0,0.2),0 0 0 1px rgba(255,255,255,0.06)}
.info-label{display:block;font-size:.75rem;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;white-space:nowrap}
.info-value{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,0.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-value.status-online{color:var(--foam)}
.info-card{transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease)}
.info-card:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.info-card-copy{cursor:pointer}
.info-card-copy:hover{animation:pulse-glow 1.5s ease-in-out infinite}
.tips-text{font-size:0.9rem;color:var(--cloud);opacity:0;transition:opacity 0.4s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tips-text.tip-visible{opacity:1}
.hero-title .char {
  display: inline-block;
  animation: wind-sway 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s);
  transform-origin: bottom center;
}
.hero-title .char {
  background: linear-gradient(135deg, #fff 0%, var(--sky) 40%, var(--foam) 60%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: wind-sway 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s);
  transform-origin: bottom center;
}
.hero-subtitle .cursor {
  animation: blink 0.8s step-end infinite;
  transition: opacity 0.8s;
}
.hero-title .char {
  animation: wind-sway 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s + 0.7s), calc(var(--i) * 0.15s + 0.1s);
  opacity: 0;
  animation-name: wind-sway, char-rise;
  animation-duration: 4s, 0.6s;
  animation-timing-function: ease-in-out, cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
  animation-delay: calc(var(--i) * 0.6s + 0.7s), calc(var(--i) * 0.15s + 0.1s);
}
.hero-content:not(.hero-collapsed) .hero-subtitle {
  opacity: 0;
  animation: subtitle-fade-in 0.8s ease-out 0.5s forwards;
}
.hero-actions {
  opacity: 0;
  animation: actions-rise 0.6s ease-out 1.8s forwards;
}
.hero-info .info-card {
  opacity: 0;
  transform: translateY(12px);
  animation: info-card-in 0.5s ease-out forwards;
}
.hero-tips {
  opacity: 0;
  animation: tips-fade-in 0.6s ease-out 2.8s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: scroll-arrow-in 0.5s ease-out 3.2s forwards;
}
.hero::before {
  animation: hero-bg-drift 20s ease-in-out infinite alternate;
}
.hero-title {
  animation: hero-breathe 6s ease-in-out infinite;
  animation-delay: 1s;
}

[data-theme="light"] .btn-hero{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .btn-hero:hover{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.1);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
[data-theme="light"] .skeleton{background:linear-gradient(90deg,rgba(0,0,0,0.04)25%,rgba(0,0,0,0.08)50%,rgba(0,0,0,0.04)75%);background-size:200% 100%}
[data-theme="light"] .hero-content::before{background:radial-gradient(ellipse,rgba(0,0,0,0.08)0%,transparent 70%)}
[data-theme="light"] .hero-subtitle{text-shadow:0 1px 6px rgba(255,255,255,0.8)}
[data-theme="light"] #particles .particle{position:absolute;width:2px;height:28px;background:linear-gradient(to bottom,transparent,rgba(174,194,224,0.7));border-radius:0 0 1px 1px;animation:snowfall linear infinite;pointer-events:none;transform:rotate(15deg)}
[data-theme="light"] .hero{background:linear-gradient(180deg,var(--deep)0%,var(--ocean)100%)}
[data-theme="light"] .hero::before{background:image-set(url('assets/img/homeHero.webp')type('image/webp'),url('assets/img/homeHero.png')type('image/png'))center/cover no-repeat,radial-gradient(ellipse 600px 400px at 30% 20%,rgba(157,175,255,.08)0%,transparent 70%),radial-gradient(ellipse 500px 300px at 70% 60%,rgba(168,230,207,.06)0%,transparent 70%);opacity:0.85;filter:brightness(1.05)contrast(1.05)saturate(1.1)}
[data-theme="light"] .hero::after{background:rgba(240,242,245,0.1),linear-gradient(to bottom,transparent 65%,var(--deep)100%)}
[data-theme="light"] .hero-tips .tips-text{color:#1a1e24}
[data-theme="light"] .hero-tips{background:rgba(255,255,255,0.85);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-lg);padding:10px 18px;box-shadow:0 2px 8px rgba(0,0,0,0.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="light"] .info-card{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.08);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
[data-theme="light"] .info-card:hover{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.12);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
[data-theme="light"] .info-label{color:#7a8394}
[data-theme="light"] .info-value{color:var(--cloud)}
[data-theme="light"] .hero{background:linear-gradient(180deg,var(--deep)0%,var(--ocean)100%)}
[data-theme="light"] .hero-title{background:linear-gradient(135deg,var(--cloud)0%,var(--sky)35%,var(--foam)65%,var(--cloud)100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
[data-theme="light"] .hero-title::after{background:linear-gradient(135deg,var(--sky),var(--foam));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="light"] .hero-subtitle{color:var(--fog)}
[data-theme="light"] .hero-scroll span{color:var(--fog)}
[data-theme="light"] .hero-scroll .scroll-arrow{color:var(--fog)}
[data-theme="light"] .cursor{color:var(--sky)}
[data-theme="light"] .copy-hint{background:rgba(168,230,207,0.2);color:#2d8a5e}
[data-theme="light"] .hero-info .info-card {
  animation-name: info-card-in-light;
}
[data-theme="light"] .hero::before {
  animation-name: hero-bg-drift-light;
}
[data-theme="light"] #particles .snowflake {
  background: radial-gradient(circle, rgba(200,210,230,0.8) 0%, rgba(180,200,220,0.4) 100%);
  border-radius: 50%;
}

/* ═══════════════════════════════════════
   Page Layout / Sections
   ═══════════════════════════════════════ */

.page{position:relative;z-index:2;min-height:100vh;padding-top:80px}
.page-hero{text-align:center;padding:var(--space-2xl)var(--space-xl)var(--space-xl)}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--white);letter-spacing:-0.02em;margin-bottom:var(--space-sm)}
.page-hero p{color:var(--fog);font-size:1.05rem;max-width:500px;margin:0 auto}
.page-revise{text-align:center;font-size:0.75rem;color:var(--fog);opacity:0.5;padding:16px 0 8px}
.page-content{max-width:900px;margin:0 auto;padding:0 var(--space-xl)var(--space-2xl)}
.page-content .card{padding:var(--space-xl)}
.page-content .card h2{font-size:1.3rem;color:var(--white);margin-bottom:var(--space-sm)}
.page-content .card p{color:var(--fog);margin-bottom:var(--space-md)}
.page-content .card ul{list-style:none;padding:0}
.page-content .card ul li{padding:var(--space-sm)0;border-bottom:1px solid rgba(255,255,255,0.04)}
.page-content .card ul li:last-child{border-bottom:none}
.page-content .card ul li a{color:var(--sky);text-decoration:none;font-size:0.95rem;transition:opacity var(--duration)var(--ease)}
.page-content .card ul li a:hover{opacity:0.8}
.page{animation:page-enter 0.4s ease-out}
.page-hero h1{margin-bottom:var(--space-sm)}
.page-hero .section-desc{margin-top:0}
.content-section{max-width:960px;margin:0 auto;padding:var(--space-2xl)var(--space-xl);position:relative;background:linear-gradient(180deg,#0d1117 0%,#0c1018 20%,#090e16 50%,#070b12 100%)}
.content-section::before{display:none}
.section-header{margin-bottom:var(--space-xl);text-align:center}
.section-header h2{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:800;color:var(--white);letter-spacing:-0.02em;margin-bottom:var(--space-sm)}
.section-header p{color:var(--fog);font-size:1rem}
.section-divider{width:48px;height:3px;background:linear-gradient(90deg,var(--sky),var(--foam));border-radius:2px;margin-top:var(--space-sm)}
.intro-lead{font-size:1.15rem;font-weight:400;line-height:1.8;color:var(--cloud)}
.text-accent{color:var(--sky);font-weight:700}
.section-divider{position:relative;overflow:hidden}
.section-divider::after{content:'';display:block;width:60px;height:2px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--sky),transparent);transition:width 0.8s cubic-bezier(0.22,1,0.36,1)}
.section-tag{display:inline-block;padding:4px 12px;background:rgba(157,175,255,0.08);border:1px solid rgba(157,175,255,0.12);border-radius:100px;font-size:0.78rem;color:var(--sky);font-weight:600;letter-spacing:0.04em;margin-bottom:var(--space-md)}
.section-desc{color:var(--fog);font-size:1.05rem;max-width:500px;margin:0 auto}
.section-actions{display:flex;justify-content:flex-end;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.intro-block{text-align:center;margin-bottom:var(--space-xl)}
.intro-slogan{font-size:1.15rem;color:var(--fog);line-height:1.8;margin-bottom:var(--space-lg)}
.home-intro{margin-bottom:var(--space-xl);padding:var(--space-xl)var(--space-lg);text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.home-intro p{color:var(--cloud);font-size:1rem;line-height:2;margin-bottom:var(--space-md)}
.home-intro p:last-child{margin-bottom:0}
.section-header h2{position:relative}
.intro-block{animation:fade-up-slow 1s var(--ease)both}
.content-section .photo-sub-bg{border-radius:var(--radius-lg);margin-bottom:var(--space-md)}
.section-header{contain:layout}
.guide-layout .page-hero{padding-bottom:var(--space-lg)}
.photo-page .content-section{max-width:100%;padding:var(--space-xl)var(--space-lg)}
.fade-in.visible .section-divider::after,.reveal-up.visible .section-divider::after{width:120px}

[data-theme="light"] .page-content .card ul li{border-bottom-color:rgba(0,0,0,0.05)}
[data-theme="light"] .home-intro{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.04)}
[data-theme="light"] .page{background:var(--deep)}
[data-theme="light"] .content-section{background:linear-gradient(180deg,#f0f2f5 0%,#e8ecf2 30%,#f5f7fa 60%,#ffffff 100%)}
[data-theme="light"] .content-section::before{background:linear-gradient(90deg,transparent,rgba(74,108,247,0.2),transparent)}
[data-theme="light"] .section-header h2{color:var(--cloud)}
[data-theme="light"] .section-divider{background:linear-gradient(90deg,transparent,rgba(74,108,247,0.25),transparent)}
[data-theme="light"] .page-hero{background:linear-gradient(180deg,rgba(157,175,255,0.06),transparent)}
[data-theme="light"] .page-hero h1{color:var(--cloud)}
[data-theme="light"] .section-tag{color:var(--sky);background:rgba(157,175,255,0.1)}
[data-theme="light"] .section-desc{color:var(--fog)}
[data-theme="light"] .intro-block{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.05)}
[data-theme="light"] .intro-slogan{color:var(--fog)}
[data-theme="light"] .intro-lead{color:var(--cloud)}
[data-theme="light"] .text-accent{color:var(--sky)}
[data-theme="light"] .page-revise{color:var(--fog)}
[data-theme="light"] .section-actions{border-top-color:rgba(0,0,0,0.06)}

/* ═══════════════════════════════════════
   Buttons
   ═══════════════════════════════════════ */

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-md);font-size:0.95rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:all var(--duration)var(--ease);font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--foam));color:var(--deep)}
.btn-primary:hover{background:linear-gradient(135deg,#b3c4ff,#c4f5e0);transform:translateY(-2px);box-shadow:0 8px 30px rgba(157,175,255,0.3)}
.btn-secondary{background:rgba(255,255,255,0.05);color:var(--white);border:1px solid rgba(255,255,255,0.1)}
.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.btn-discord{background:rgba(157,175,255,0.1);color:var(--sky);border:1px solid rgba(157,175,255,0.2)}
.btn-discord:hover{background:rgba(157,175,255,0.2);border-color:var(--sky);transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-md);font-size:0.95rem;font-weight:600;text-decoration:none;cursor:pointer;color:var(--white);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all var(--duration)var(--ease);font-family:inherit}
.btn-outline:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.35);transform:translateY(-2px)}
.btn{position:relative;overflow:hidden;transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease),background 0.3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.btn:active{transform:translateY(0);transition-duration:0.1s}
.btn-sm {
  padding: 8px 18px;
  font-size: 0.8rem;
}
.guide-nav .btn{flex:0 1 auto;font-size:0.85rem;padding:var(--space-sm)var(--space-lg)}

[data-theme="light"] .btn-outline{color:var(--white);border-color:rgba(0,0,0,0.15)}
[data-theme="light"] .btn-outline:hover{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.25)}
[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#6b8aff,#5cc9a0);color:#fff}
[data-theme="light"] .btn-primary:hover{background:linear-gradient(135deg,#8aa4ff,#7dd8b5)}
[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#4a6cf7,#6366f1);color:#fff;box-shadow:0 2px 8px rgba(74,108,247,0.25)}
[data-theme="light"] .btn-primary:hover{background:linear-gradient(135deg,#5b7bf8,#7476f2);box-shadow:0 4px 16px rgba(74,108,247,0.35)}
[data-theme="light"] .btn-outline{border-color:rgba(74,108,247,0.35);color:#4a6cf7}
[data-theme="light"] .btn-outline:hover{background:rgba(74,108,247,0.08);border-color:rgba(74,108,247,0.5)}

/* ═══════════════════════════════════════
   Cards / Features
   ═══════════════════════════════════════ */

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);justify-content:center}
.card-grid>*{width:100%}
.card-grid-equal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);justify-content:center}
.card-grid-equal>*{width:100%;display:flex;flex-direction:column}
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all var(--duration)var(--ease)}
.card:hover{background:rgba(255,255,255,0.05);border-color:rgba(157,175,255,0.15);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.card-icon{font-size:1.6rem;margin-bottom:var(--space-md)}
.card h3{font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:var(--space-sm)}
.card p{color:var(--fog);font-size:0.9rem;line-height:1.7}
.card-grid{align-items:stretch}
.card-grid .card{display:flex;flex-direction:column}
.card-grid .card p{flex:1}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-lg)}
.feature-card{position:relative;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-xl)var(--space-lg);text-align:center;transition:all 0.35s var(--ease);overflow:hidden;contain:layout style;will-change:transform}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent,var(--sky));opacity:0;transition:opacity 0.35s var(--ease)}
.feature-card:hover{background:linear-gradient(135deg,rgba(157,175,255,0.08),rgba(168,230,207,0.04));border-color:rgba(157,175,255,0.25);transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.2)}
.feature-card:hover::before{opacity:1}
.feature-card-icon{font-size:2.4rem;margin-bottom:var(--space-md);display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:rgba(157,175,255,0.12);transition:background 0.35s var(--ease)}
.feature-card-icon img{width:32px;height:32px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3))}
.feature-card:hover .feature-card-icon{background:rgba(157,175,255,0.12)}
.feature-card h4{font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:var(--space-sm);letter-spacing:0.02em}
.feature-card p{color:var(--cloud);font-size:0.9rem;line-height:1.7}
.feature-card{transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease),border-color 0.4s var(--ease)}
.feature-card:hover{will-change:transform;transform:translateY(-8px)scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,0.25),0 0 20px rgba(157,175,255,0.12);border-color:rgba(157,175,255,0.35)}
.feature-card .feature-card-icon{transition:transform 0.4s var(--ease),filter 0.4s var(--ease)}
.feature-card:hover .feature-card-icon{transform:scale(1.15)rotate(-5deg);filter:drop-shadow(0 0 8px var(--card-accent,var(--sky)))}
.feature-grid-3{grid-template-columns:repeat(3,1fr)}
.feature-grid-4{grid-template-columns:repeat(4,1fr)}
.feature-grid .feature-card:nth-child(1){transition-delay:0s}
.feature-grid .feature-card:nth-child(2){transition-delay:0.1s}
.feature-grid .feature-card:nth-child(3){transition-delay:0.2s}
.feature-grid .feature-card:nth-child(4){transition-delay:0.3s}
.feature-grid>*{opacity:1;transform:none}

[data-theme="light"] .card,[data-theme="light"] .partner-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .card:hover,[data-theme="light"] .partner-card:hover{background:rgba(0,0,0,0.04);border-color:rgba(224,181,212,0.3);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
[data-theme="light"] .feature-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
[data-theme="light"] .feature-card:hover{background:#ffffff;border-color:rgba(100,130,220,0.25);box-shadow:0 8px 24px rgba(0,0,0,0.08),0 0 0 1px rgba(100,130,220,0.12)}
[data-theme="light"] .feature-card::before{opacity:0.6}
[data-theme="light"] .feature-card:hover::before{opacity:1}
[data-theme="light"] .feature-card h4{color:var(--cloud)}
[data-theme="light"] .feature-card p{color:#5a6270}
[data-theme="light"] .feature-card-icon{background:rgba(240,242,255,0.9);border:1px solid rgba(100,130,220,0.12)}
[data-theme="light"] .feature-card{position:relative;overflow:hidden}

/* ═══════════════════════════════════════
   Bulletin / Announcements
   ═══════════════════════════════════════ */

.bulletin-wave {
  display: block;
  width: 60px;
  height: 2px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, var(--sky), var(--foam), transparent);
  border-radius: 2px;
  opacity: 0.6;
}
.bulletin-toggle .b-id-wrap {
  flex-shrink: 0;
}
.bulletin-toggle .b-id {
  font-size: 0.75rem;
  color: var(--sky);
  font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
  font-weight: 600;
  background: rgba(157,175,255,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
  min-width: 48px;
  text-align: center;
}
.bulletin-toggle .b-id-empty {
  background: none;
  min-width: 48px;
}
.bulletin-toggle .b-title {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: left;
  color: var(--cloud);
}
.bulletin-toggle .b-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bulletin-toggle .b-date {
  font-size: 0.72rem;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bulletin-toggle .b-tag {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 500;
  white-space: nowrap;
}
.bulletin-toggle .b-arrow {
  font-size: 0.7rem;
  color: var(--fog);
  transition: transform 0.25s ease;
  width: 16px;
  text-align: center;
}
.bulletin-item.open .b-arrow { transform: rotate(180deg); }
.b-content blockquote.ann-quote[data-depth="2"] {
  border-left-color: rgba(168,230,207,0.3);
  background: rgba(168,230,207,0.04);
}
.b-content code {
  background: rgba(157,175,255,0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--sky);
}
.b-content h2, .b-content h3, .b-content h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--cloud);
  margin: 0.6em 0 0.3em;
}
.b-content h2 { font-size: 1.1em; }
.b-content del { color: var(--fog); opacity: 0.7; }
.b-content u { text-decoration-color: var(--sky); text-underline-offset: 3px; }
.b-content ul, .b-content ol {
  padding-left: 1.4em;
  margin: 4px 0;
}
.b-content .ann-sub-item {
  padding-left: 0;
  list-style-type: circle;
  color: var(--fog);
  font-size: 0.9em;
}
.b-content .ann-small {
  display: block;
  color: var(--fog);
  font-size: 0.78em;
  opacity: 0.8;
  margin-top: 2px;
}
.b-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.b-images .ann-img {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
}
.bulletin-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  border-left: 3px solid transparent;
  transition: all 0.3s var(--ease), transform 0.3s var(--ease);
  overflow: hidden;
}
.bulletin-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  transform: translateX(2px);
}
.bulletin-item.pinned {
  border-left-color: var(--sand) !important;
  background: rgba(222,172,128,0.04);
}
.bulletin-item.pinned:hover {
  background: rgba(222,172,128,0.07);
}
.bulletin-item.open {
  border-color: rgba(157,175,255,0.15);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.bulletin-item[data-tag="公告"] { border-left-color: rgba(87,138,255,0.45); }
.bulletin-item[data-tag="更新"] { border-left-color: rgba(100,220,180,0.45); }
.bulletin-item[data-tag="活動"] { border-left-color: rgba(255,170,50,0.45); }
.bulletin-item[data-tag="維護"] { border-left-color: rgba(255,130,130,0.45); }
.bulletin-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  width: 100%;
  background: none;
  border: none;
  color: var(--cloud);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s var(--ease);
  min-height: 48px;
}
.bulletin-toggle:hover {
  background: rgba(255,255,255,0.02);
}
.bulletin-toggle .b-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bulletin-toggle .b-date {
  font-size: 0.72rem;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.bulletin-toggle .b-title {
  flex: 1;
  font-weight: 500;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulletin-toggle .b-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bulletin-toggle .b-tag {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
  white-space: nowrap;
}
.bulletin-toggle .b-arrow {
  color: var(--fog);
  font-size: 0.7rem;
  transition: transform 0.3s var(--ease);
  display: inline-block;
}
.bulletin-item.open .b-arrow { transform: rotate(180deg); }
.bulletin-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.bulletin-item.open .bulletin-body {
  max-height: 3000px;
}
.bulletin-body .b-content {
  font-size: 0.9rem;
  color: var(--cloud);
  line-height: 1.9;
  padding: 14px 18px 16px;
  background: rgba(255,255,255,0.012);
  border-top: 1px solid rgba(157,175,255,0.08);
}
.bulletin-body .b-content .b-id {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--sky);
  font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
  font-weight: 600;
  background: rgba(157,175,255,0.06);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.bulletin-body .b-content p { margin-bottom: 0.6em; }
.bulletin-body .b-content p:last-child { margin-bottom: 0; }
.bulletin-body .b-content ul,
.bulletin-body .b-content ol { padding-left: 1.4em; margin: 6px 0; }
.bulletin-body .b-content li { margin-bottom: 2px; }
.bulletin-body .b-content a { color: var(--sky); text-decoration: none; border-bottom: 1px solid rgba(157,175,255,0.25); }
.bulletin-body .b-content a:hover { border-bottom-color: var(--sky); }
.bulletin-body .b-content code {
  background: rgba(157,175,255,0.1);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--sky);
}
.bulletin-body .b-content blockquote {
  border-left: 3px solid rgba(157,175,255,0.25);
  padding: 8px 16px;
  margin: 10px 0;
  background: rgba(157,175,255,0.04);
  border-radius: 0 8px 8px 0;
  color: var(--fog);
}
.bulletin-more {
  text-align: center;
  padding: var(--space-lg) 0 0;
}
.b-pin { font-size: 0.75rem; flex-shrink: 0; }
.b-reaction-count {
  font-size: 0.65rem;
  color: var(--fog);
  flex-shrink: 0;
  white-space: nowrap;
}
.b-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(157,175,255,0.1);
}
.b-meta-id {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sky);
  background: rgba(157,175,255,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.b-meta-author {
  font-size: 0.78rem;
  color: var(--cloud);
}
.b-meta-time {
  font-size: 0.75rem;
  color: var(--fog);
}
.b-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.b-reaction-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  padding: 3px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  cursor: default;
  transition: background 0.2s;
}
.b-reaction-item:hover {
  background: rgba(255,255,255,0.08);
}
.b-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.b-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.b-img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.b-text {
  font-size: 0.9rem;
  color: var(--cloud);
  line-height: 1.9;
}
.b-text p { margin-bottom: 0.6em; }
.b-text p:last-child { margin-bottom: 0; }
.b-text ul, .b-text ol { padding-left: 1.4em; margin: 6px 0; }
.b-text li { margin-bottom: 2px; }
.b-text a { color: var(--sky); text-decoration: none; border-bottom: 1px solid rgba(157,175,255,0.25); }
.b-text a:hover { border-bottom-color: var(--sky); }
.b-text code {
  background: rgba(157,175,255,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.b-discord-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--sky);
  text-decoration: none;
  padding: 4px 12px;
  background: rgba(157,175,255,0.06);
  border: 1px solid rgba(157,175,255,0.12);
  border-radius: 100px;
  transition: all 0.2s;
}
.b-discord-link:hover {
  background: rgba(157,175,255,0.12);
  border-color: rgba(157,175,255,0.25);
}
.bulletin-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.25s var(--ease);
  border-left: 3px solid var(--tag-color, rgba(157,175,255,0.3));
}
.bulletin-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  border-left-color: var(--tag-color, var(--sky));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.bulletin-item.open {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
  border-left-width: 3px;
}
.bulletin-item.pinned {
  background: rgba(157,175,255,0.04);
  border-color: rgba(157,175,255,0.1);
}
.bulletin-toggle:hover {
  background: rgba(255,255,255,0.015);
}
.b-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.bulletin-item:hover .b-dot {
  transform: scale(1.3);
}
.b-date {
  font-size: 0.72rem;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.b-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.b-preview {
  font-size: 0.75rem;
  color: var(--fog);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.bulletin-item:hover .b-preview {
  opacity: 1;
}
.bulletin-item.open .b-preview {
  display: none;
}
.b-pin {
  font-size: 0.8rem;
}
.b-tag {
  font-size: 0.62rem;
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: transform 0.2s;
}
.bulletin-item:hover .b-tag {
  transform: scale(1.05);
}
.b-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fog);
  transition: transform 0.3s var(--ease), color 0.2s;
}
.bulletin-item.open .b-arrow {
  transform: rotate(180deg);
  color: var(--sky);
}
.bulletin-item.open .bulletin-body {
  max-height: 2000px;
}
.b-content {
  padding: 4px 16px 16px 116px;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--cloud);
}
.b-content p { margin-bottom: 0.5em; }
.b-content p:last-child { margin-bottom: 0; }
.b-content ul, .b-content ol { padding-left: 1.4em; margin: 6px 0; }
.b-content li { margin-bottom: 2px; }
.b-content a { color: var(--sky); text-decoration: none; border-bottom: 1px solid rgba(157,175,255,0.25); }
.b-content a:hover { border-bottom-color: var(--sky); }
.b-content code {
  background: rgba(157,175,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', monospace;
  color: var(--sky);
}
.b-content blockquote {
  border-left: 2px solid rgba(157,175,255,0.2);
  padding: 8px 14px;
  margin: 8px 0;
  background: rgba(157,175,255,0.03);
  border-radius: 0 8px 8px 0;
  color: var(--fog);
}
.b-meta-id {
  background: rgba(157,175,255,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--sky);
}
.b-meta-sep {
  opacity: 0.3;
}
.b-images img {
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(255,255,255,0.06);
}
.b-images img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.b-discord-link:hover {
  background: rgba(157,175,255,0.12);
}
.bulletin-count {
  font-size: 0.75rem;
  color: var(--fog);
  opacity: 0.6;
}
.bulletin-featured:hover {
  border-color: var(--tag-color, var(--sky));
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.bf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bf-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.bf-date {
  font-size: 0.72rem;
  color: var(--fog);
}
.bf-pin {
  font-size: 0.75rem;
  margin-left: auto;
}
.bf-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.4;
}
.bf-body .b-content {
  font-size: 0.88rem;
  color: var(--fog);
  line-height: 1.8;
}
.bulletin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bulletin-compact {
  background: var(--ocean);
  border: 1px solid var(--mist);
  border-left: 3px solid var(--tag-color, var(--mist));
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: border-color 0.2s, background 0.2s;
}
.bulletin-compact:hover {
  border-color: var(--tag-color, var(--sky));
  background: var(--drift);
}
.bulletin-compact .b-images {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bulletin-compact .b-img {
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
}
.bh-left { display: flex; align-items: baseline; gap: 10px; }
.bh-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.bh-count {
  font-size: 0.72rem;
  color: var(--fog);
  background: rgba(157,175,255,0.06);
  padding: 2px 10px;
  border-radius: 100px;
  font-weight: 600;
}
.bh-all {
  font-size: 0.82rem;
  color: var(--sky);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}
.bh-all:hover { opacity: 0.7; }
.bulletin-scroll::-webkit-scrollbar { width: 4px; }
.bulletin-scroll::-webkit-scrollbar-thumb {
  background: rgba(157,175,255,0.12);
  border-radius: 2px;
}
.bulletin-row:hover {
  background: rgba(255,255,255,0.03);
}
.br-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.br-date {
  font-size: 0.7rem;
  color: var(--fog);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 62px;
}
.br-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cloud);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.br-tag {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.tag-公告{background:rgba(87,138,255,0.12);color:#7aa4ff;border:1px solid rgba(87,138,255,0.2)}
.tag-更新{background:rgba(100,220,180,0.12);color:#6dd8b4;border:1px solid rgba(100,220,180,0.2)}
.tag-活動{background:rgba(255,170,50,0.12);color:#ffc566;border:1px solid rgba(255,170,50,0.2)}
.tag-維護{background:rgba(255,130,130,0.12);color:#ff9a9a;border:1px solid rgba(255,130,130,0.2)}
.tag-處分{background:rgba(200,80,80,0.12);color:#e87070;border:1px solid rgba(200,80,80,0.2)}
.ann-filters{display:flex;gap:8px;flex-wrap:wrap}
.ann-filter{
  padding:7px 14px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  color:var(--fog);font-size:0.82rem;font-weight:500;
  cursor:pointer;transition:all 0.2s ease;font-family:inherit
}
.ann-filter:hover{
  background:rgba(157,175,255,0.08);
  border-color:rgba(157,175,255,0.15);color:var(--cloud)
}
.ann-filter.active{
  background:rgba(157,175,255,0.12);
  border-color:rgba(157,175,255,0.25);
  color:var(--sky);font-weight:600
}
.ann-search input{
  padding:7px 14px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  color:var(--cloud);font-size:0.82rem;
  width:180px;font-family:inherit;
  transition:all 0.2s ease
}
.ann-search input:focus{
  outline:none;
  border-color:rgba(157,175,255,0.3);
  background:rgba(157,175,255,0.05);
  width:240px
}
.ann-search input::placeholder{color:var(--text-muted)}
.ann-stats{color:var(--fog);font-size:0.82rem;margin-bottom:var(--space-md)}
.ann-empty{text-align:center;color:var(--fog);padding:var(--space-2xl)}
.ann-list{
  display:flex;flex-direction:column;gap:6px
}
.ann-list .bulletin-item{border-radius:10px}
.ann-list 

@media(max-width:768px){
  .ann-filter-bar{flex-direction:column;align-items:stretch}
  .ann-search input,.ann-search input:focus{width:100%}
  
  
  
  
  
}
.bulletin-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
}
.b-content blockquote.ann-quote {
  margin: 8px 0;
  padding: 6px 14px;
  border-left: 3px solid rgba(157,175,255,0.3);
  background: rgba(157,175,255,0.04);
  border-radius: 0 6px 6px 0;
  color: var(--cloud);
  font-size: 0.88rem;
}
.ann-spoiler {
  background: var(--cloud);
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}
.ann-spoiler.revealed {
  color: var(--deep);
  background: rgba(157,175,255,0.15);
}
.ann-img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.ann-img:hover { transform: scale(1.02); }
.bulletin-board {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tag-dot-公告 { background: rgba(87,138,255,0.7); }
.tag-dot-更新 { background: rgba(100,220,180,0.7); }
.tag-dot-活動 { background: rgba(255,170,50,0.7); }
.tag-dot-維護 { background: rgba(255,130,130,0.7); }
.tag-公告 { background: rgba(87,138,255,0.1); color: rgba(87,138,255,0.9); }
.tag-更新 { background: rgba(100,220,180,0.1); color: rgba(100,220,180,0.9); }
.tag-活動 { background: rgba(255,170,50,0.1); color: rgba(255,170,50,0.9); }
.tag-維護 { background: rgba(255,130,130,0.1); color: rgba(255,130,130,0.9); }
.bulletin-board {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bulletin-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-height: 56px;
}
.b-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 90px;
}
.b-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.b-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bulletin-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.b-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: var(--fog);
}
.b-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.b-discord-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--sky);
  text-decoration: none;
  padding: 4px 12px;
  background: rgba(157,175,255,0.06);
  border-radius: 100px;
  transition: background 0.2s;
}
.bulletin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0 0;
  margin-top: 4px;
}
.bulletin-featured {
  background: var(--ocean);
  border: 1px solid var(--mist);
  border-left: 3px solid var(--tag-color, var(--sky));
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bc-date {
  font-size: 0.7rem;
  color: var(--fog);
  flex-shrink: 0;
  min-width: 65px;
}
.bc-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cloud);
  flex: 1;
}
.bc-tag {
  font-size: 0.56rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}
.bc-body {
  margin-top: 6px;
}
.bc-body .b-content {
  font-size: 0.82rem;
  color: var(--fog);
  line-height: 1.7;
}
.bulletin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bulletin-scroll {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(157,175,255,0.12) transparent;
  padding-right: 4px;
}
.bulletin-hidden {
  display: none !important;
}
.bulletin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.2s;
  cursor: default;
}
.bulletin-expand {
  text-align: center;
  padding: 8px 0 0;
}

[data-theme="light"] .tag-公告{background:rgba(74,108,247,0.1);color:#4a6cf7;border-color:rgba(74,108,247,0.2)}
[data-theme="light"] .tag-更新{background:rgba(0,180,120,0.1);color:#00b478;border-color:rgba(0,180,120,0.2)}
[data-theme="light"] .tag-活動{background:rgba(230,140,30,0.1);color:#e68c1e;border-color:rgba(230,140,30,0.2)}
[data-theme="light"] .tag-維護{background:rgba(220,60,60,0.1);color:#dc3c3c;border-color:rgba(220,60,60,0.2)}
[data-theme="light"] 

/* --- 公告頁面篩選列 --- */
.ann-filter-bar{
  display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-md);
  margin-bottom:var(--space-xl);flex-wrap:wrap
}
[data-theme="light"] .ann-filter{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .ann-filter.active{background:rgba(74,108,247,0.1);border-color:rgba(74,108,247,0.2);color:#4a6cf7}
[data-theme="light"] .ann-search input{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .b-content code {
  background: rgba(74,108,247,0.1);
  color: #4a6cf7;
}
[data-theme="light"] .ann-spoiler.revealed {
  background: rgba(74,108,247,0.1);
}
[data-theme="light"] .bulletin-item { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .b-meta { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .b-meta-id { background: rgba(74,108,247,0.08); color: var(--sky); }
[data-theme="light"] .b-meta-author { color: var(--cloud); }
[data-theme="light"] .b-reaction-item { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .b-reaction-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .b-text code { background: rgba(74,108,247,0.08); }
[data-theme="light"] .b-discord-link { background: rgba(74,108,247,0.06); border-color: rgba(74,108,247,0.15); }
[data-theme="light"] .b-discord-link:hover { background: rgba(74,108,247,0.1); }
[data-theme="light"] .bulletin-item:hover { background: #f8f9fb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .bulletin-item.pinned { background: rgba(222,172,128,0.06); }
[data-theme="light"] .bulletin-item.open { background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
[data-theme="light"] .bulletin-toggle .b-title { color: var(--cloud); }
[data-theme="light"] .bulletin-body .b-content { background: rgba(0,0,0,0.01); border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .tag-公告 { background: rgba(74,108,247,0.08); color: #4a6cf7; }
[data-theme="light"] .tag-更新 { background: rgba(0,150,100,0.08); color: #009664; }
[data-theme="light"] .tag-活動 { background: rgba(220,140,30,0.08); color: #dc8c1e; }
[data-theme="light"] .tag-維護 { background: rgba(220,80,80,0.08); color: #dc5050; }
[data-theme="light"] .bulletin-item:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
[data-theme="light"] .bulletin-featured {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .bulletin-featured:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
[data-theme="light"] .bf-title { color: var(--cloud); }
[data-theme="light"] .bf-body .b-content { color: #4a5260; }
[data-theme="light"] .bulletin-compact {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .bulletin-compact:hover {
  background: #fafbfc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .bc-title { color: var(--cloud); }
[data-theme="light"] .bc-body .b-content { color: #5a6270; }
[data-theme="light"] .bulletin-item.open {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .bulletin-item.pinned {
  background: rgba(157,175,255,0.06);
  border-color: rgba(157,175,255,0.12);
}
[data-theme="light"] .bulletin-toggle:hover {
  background: rgba(0,0,0,0.01);
}
[data-theme="light"] .b-title { color: var(--cloud); }
[data-theme="light"] .b-preview { color: #6b7280; }
[data-theme="light"] .b-content { color: #3a4250; }
[data-theme="light"] .b-content blockquote {
  background: rgba(74,108,247,0.03);
  border-left-color: rgba(74,108,247,0.2);
  color: #5a6270;
}
[data-theme="light"] .b-images img { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .b-images img:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .bulletin-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .bh-title { color: var(--cloud); }
[data-theme="light"] .bulletin-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .br-title { color: var(--cloud); }
[data-theme="light"] .bulletin-body .b-content{color:#3a4250}
[data-theme="light"] .b-content blockquote.ann-quote {
  background: rgba(74,108,247,0.05);
  border-left-color: rgba(74,108,247,0.3);
}
[data-theme="light"] .bulletin-item {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════
   Culture Gallery (Lore)
   ═══════════════════════════════════════ */

.lore-block{margin-bottom:var(--space-xl);padding-left:var(--space-lg);border-left:2px solid rgba(157,175,255,0.12)}
.lore-block h3{font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}
.lore-block p{color:var(--cloud);font-size:0.95rem;line-height:1.9;margin-bottom:var(--space-sm)}
.lore-block .lore-note{color:var(--fog);font-size:0.85rem;font-style:italic}
.lore-block a{color:var(--sky);text-decoration:none;border-bottom:1px solid rgba(157,175,255,0.3);padding:0;display:inline;background:none;border-radius:0}
.lore-block a:hover{text-decoration:none;border-bottom-color:var(--sky)}
.lore-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);padding:var(--space-sm) 0}
.lore-preview-card{display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);text-decoration:none;transition:all var(--duration)var(--ease)}
.lore-preview-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(157,175,255,0.2);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,0.25)}
.lore-preview-card img{transition:transform 0.6s var(--ease),filter 0.4s var(--ease)}
.lore-preview-card:hover img{transform:scale(1.05);filter:brightness(1.1)}
.lore-preview-card img{width:100%;height:160px;object-fit:cover}
.lore-preview-info{padding:var(--space-lg);flex:1}
.lore-preview-tag{display:inline-block;padding:3px 10px;background:rgba(157,175,255,0.08);border:1px solid rgba(157,175,255,0.12);border-radius:100px;font-size:0.7rem;color:var(--sky);font-weight:600;letter-spacing:0.04em;margin-bottom:var(--space-sm)}
.lore-preview-info h4{font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:var(--space-xs)}
.lore-preview-info p{font-size:0.85rem;color:var(--fog);line-height:1.6}
.lore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.lore-card{display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:all var(--duration)var(--ease);position:relative}
.lore-card-num{position:absolute;top:8px;left:8px;z-index:2;background:rgba(13,17,23,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--sky);font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:0.5px}
.lore-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(157,175,255,0.2);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.lore-card-img{width:100%;height:180px;object-fit:cover}
.lore-card-img-placeholder{width:100%;height:180px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:rgba(255,255,255,0.03)}
.lore-card-body{padding:var(--space-lg);flex:1;display:flex;flex-direction:column}
.lore-card-tag{display:inline-block;padding:3px 10px;background:rgba(157,175,255,0.08);border:1px solid rgba(157,175,255,0.12);border-radius:100px;font-size:0.72rem;color:var(--sky);font-weight:600;letter-spacing:0.04em;margin-bottom:var(--space-sm);align-self:flex-start}
.lore-card-body h3{font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:var(--space-xs)}
.lore-card-body p{font-size:0.85rem;color:var(--fog);line-height:1.6;flex:1}
.lore-card-creator{font-size:0.75rem;color:var(--text-muted,var(--fog));margin-top:var(--space-sm)}
.lore-preview-card,.postcard-item,.community-card{contain:layout style}
.lore-preview-grid,.postcard-section{content-visibility:auto;contain-intrinsic-size:auto 400px}
.lore-card{transition:all 0.3s var(--ease)}
.lore-card:hover .lore-card-img{transform:scale(1.05)}
.lore-card-img{transition:transform 0.4s var(--ease)}

[data-theme="light"] .lore-block{border-left-color:rgba(157,175,255,0.15)}
[data-theme="light"] .lore-preview-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .lore-preview-card:hover{background:rgba(0,0,0,0.04);border-color:rgba(157,175,255,0.2);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
[data-theme="light"] .lore-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .lore-card-num{background:rgba(255,255,255,0.8);color:var(--sky)}
[data-theme="light"] .lore-card:hover{background:rgba(0,0,0,0.04);border-color:rgba(157,175,255,0.2);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
[data-theme="light"] .lore-preview-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
[data-theme="light"] .lore-preview-card:hover{background:#ffffff;border-color:rgba(0,0,0,0.12);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
[data-theme="light"] .lore-preview-tag{color:#4a6cf7;background:rgba(74,108,247,0.1)}
[data-theme="light"] .lore-preview-card h4{color:var(--cloud)}
[data-theme="light"] .lore-preview-card p{color:#5a6270}
[data-theme="light"] .lore-card-tag{color:var(--sky);background:rgba(157,175,255,0.12)}

/* ═══════════════════════════════════════
   Photos / Carousel / Postcards
   ═══════════════════════════════════════ */

.photo-hero{position:relative;min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px var(--space-xl)var(--space-2xl);background:linear-gradient(135deg,#0f1117 0%,#1a2340 50%,#0f1117 100%);overflow:hidden}
.photo-hero::before{content:'';position:absolute;inset:0;background:image-set(url('assets/img/photo-sub-bg.webp')type('image/webp'),url('assets/img/photo-sub-bg.png')type('image/png'))center/cover no-repeat;pointer-events:none;filter:brightness(0.7)contrast(1.1)}
.photo-hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35),linear-gradient(to bottom,rgba(0,0,0,0.1)0%,transparent 30%,transparent 60%,var(--deep)100%);pointer-events:none;z-index:1}
.photo-hero>*{position:relative;z-index:2}
.photo-section{margin-bottom:var(--space-xl)}
.photo-section-title{font-size:1rem;font-weight:600;color:var(--cloud);margin-bottom:var(--space-md);padding-left:var(--space-sm);border-left:3px solid var(--sky)}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:1200px;margin:0 auto}
.photo-item{width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;transition:all var(--duration)var(--ease);cursor:zoom-in;border:1px solid transparent}
.photo-item:hover{border-color:rgba(157,175,255,0.25);transform:scale(1.04);box-shadow:0 8px 30px rgba(0,0,0,0.25);filter:brightness(1.1);z-index:2;position:relative}
.photo-hidden{display:none}
.photo-placeholder{grid-column:1 / -1;padding:var(--space-2xl);text-align:center;color:var(--fog);font-size:0.95rem;background:rgba(255,255,255,0.02);border:1px dashed rgba(255,255,255,0.1);border-radius:var(--radius-md)}
.photo-more-btn{display:block;margin:var(--space-lg)auto 0}
.photo-actions{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap}
.photo-sentinel{padding:var(--space-lg)0}
.photo-loading{text-align:center;color:var(--fog);font-size:0.85rem;animation:pulse-fade 1.5s ease-in-out infinite}
.photo-counter{text-align:center;color:var(--fog);font-size:0.78rem;margin-top:var(--space-md);opacity:0.7}
.photo-item{cursor:pointer}
.photo-cover{margin-bottom:var(--space-lg);border-radius:var(--radius-lg);overflow:hidden;max-height:300px}
.photo-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s var(--ease)}
.photo-cover:hover img{transform:scale(1.03)}
.photo-cover-download{position:absolute;bottom:12px;right:12px;background:rgba(22,27,34,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#c9d1d9;padding:6px 14px;border-radius:8px;font-size:0.8rem;text-decoration:none;transition:all 0.2s;z-index:2}
.photo-cover-download:hover{background:rgba(22,27,34,0.95);color:#fff;border-color:rgba(157,175,255,0.4);transform:translateY(-1px)}
.photo-sub-bg{position:relative;width:100%;height:260px;border-radius:0;overflow:hidden;background-image:image-set(url('assets/img/photo-sub-bg.webp')type('image/webp'),url('assets/img/photo-sub-bg.png')type('image/png'));background-size:cover;background-position:center;transition:transform 0.6s var(--ease)}
.photo-sub-bg:hover{transform:scale(1.01)}
.photo-sub-download{position:absolute;bottom:12px;right:12px;background:rgba(22,27,34,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#c9d1d9;padding:6px 14px;border-radius:8px;font-size:0.8rem;text-decoration:none;transition:all 0.2s}
.photo-sub-download:hover{background:rgba(22,27,34,0.95);color:#fff;border-color:rgba(157,175,255,0.4);transform:translateY(-1px)}
.photo-carousel{overflow:hidden;border-radius:var(--radius-lg);position:relative}
.photo-carousel-track{display:flex;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.carousel-slide{flex:0 0 20%;padding:0 4px;box-sizing:border-box;min-width:0}
.carousel-slide img{display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--radius-md);transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease)}
.carousel-slide img:hover{transform:scale(1.03);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.photo-carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-lg)}
.carousel-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--mist);cursor:pointer;transition:all 0.3s var(--ease);padding:0}
.carousel-dot.active{background:var(--sky);width:24px;border-radius:4px}
.carousel-dot:hover{background:var(--fog)}
.postcard-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}
.postcard-item{border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:3 / 4}
.postcard-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease),filter 0.4s var(--ease)}
.postcard-item:hover img{transform:scale(1.08);filter:brightness(1.1)saturate(1.1)}
.postcard-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.3)100%);pointer-events:none;border-radius:var(--radius-lg)}
.photo-date-card{text-align:center;padding:12px 24px;margin:0 auto var(--space-lg);max-width:400px;background:rgba(157,175,255,0.06);border:1px solid rgba(157,175,255,0.12);border-radius:var(--radius-md);font-size:0.85rem;color:var(--fog);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.photo-float-counter{position:fixed;bottom:140px;right:20px;z-index:900;padding:8px 14px;background:rgba(13,17,23,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(157,175,255,0.15);border-radius:10px;font-size:0.8rem;color:var(--cloud);pointer-events:none;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.carousel-slide img{cursor:zoom-in;transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease)}
.carousel-slide img:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.photo-carousel{overflow:hidden;border-radius:var(--radius-lg)}
.postcard-fallback::after {
  content: '📷 圖片暫時無法載入';
  color: var(--fog);
  font-size: 0.85rem;
}
video.photo-item{cursor:pointer;height:200px;border:1px solid transparent}
.postcard-fallback {
  background: rgba(157,175,255,0.06);
  border: 1px dashed rgba(157,175,255,0.2);
  border-radius: var(--radius-md);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .photo-item{border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .photo-item:hover{border-color:rgba(157,175,255,0.25);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
[data-theme="light"] .photo-placeholder{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .photo-placeholder{background:#f5f7fa;border-color:rgba(0,0,0,0.08);color:#8a94a6}
[data-theme="light"] .photo-counter{color:var(--fog)}
[data-theme="light"] .photo-loading{color:var(--fog)}
[data-theme="light"] .photo-cover-download{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.1);color:#1f2328}
[data-theme="light"] .photo-cover-download:hover{background:#fff;color:#000}
[data-theme="light"] .photo-sub-download{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.1);color:#1f2328}
[data-theme="light"] .photo-sub-download:hover{background:#fff;color:#000}
[data-theme="light"] .photo-date-card{background:rgba(157,175,255,0.08);border-color:rgba(157,175,255,0.18)}
[data-theme="light"] .photo-float-counter{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.1);color:var(--cloud);box-shadow:0 4px 12px rgba(0,0,0,0.08)}

/* ═══════════════════════════════════════
   Partner
   ═══════════════════════════════════════ */

.partner-tag{display:inline-block;background:linear-gradient(135deg,rgba(255,105,180,0.15),rgba(136,0,255,0.1));border:1px solid rgba(255,105,180,0.25);color:#ff8ec4;font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:middle;letter-spacing:0.5px}
.partner-badges{display:flex;gap:6px;flex-shrink:0;align-items:center}
.partner-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--fog);font-size:0.8rem;cursor:pointer;transition:all var(--duration)var(--ease)}
.partner-expand-btn:hover{background:rgba(157,175,255,0.15);color:var(--sky);border-color:rgba(157,175,255,0.3)}
.partner-expand-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--fog);font-size:0.8rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease;flex-shrink:0}
.partner-expand-btn:hover{background:rgba(157,175,255,0.15);color:var(--sky);border-color:rgba(157,175,255,0.3)}
.partner-detail{max-height:0;overflow:hidden;transition:max-height 0.4s ease,opacity 0.3s ease;opacity:0}
.partner-detail.open{max-height:600px;opacity:1}
.partner-detail-card{margin:var(--space-sm)0 var(--space-lg);padding:var(--space-xl);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);border-left:3px solid rgba(255,105,180,0.3)}
.partner-detail-banner{background:linear-gradient(135deg,rgba(255,105,180,0.12),rgba(255,165,0,0.08));border:1px solid rgba(255,105,180,0.2);border-radius:var(--radius-md);padding:10px 18px;font-size:0.95rem;font-weight:700;color:#ff8ec4;margin-bottom:var(--space-lg);text-align:center}
.partner-detail-desc{color:var(--cloud);font-size:0.9rem;margin-bottom:var(--space-sm);text-align:center}
.partner-detail-section{margin:var(--space-md)0}
.partner-detail-section strong{color:var(--white);font-size:0.9rem;display:block;margin-bottom:var(--space-sm)}
.partner-detail-section ul{list-style:none;padding:0}
.partner-detail-section li{color:var(--fog);font-size:0.85rem;line-height:1.8;padding-left:4px}
.partner-detail-quote{color:var(--sky);font-size:0.85rem;text-align:center;font-style:italic;margin-top:var(--space-sm)}
.partner-detail-join{display:block;text-align:center;margin-top:var(--space-lg);padding:10px 24px;background:rgba(157,175,255,0.1);border:1px solid rgba(157,175,255,0.2);border-radius:var(--radius-md);color:var(--sky);font-size:0.9rem;font-weight:600;text-decoration:none;transition:all var(--duration)var(--ease)}
.partner-detail-join:hover{background:rgba(157,175,255,0.18);border-color:var(--sky);transform:translateY(-1px)}
.partner-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all var(--duration)var(--ease);display:flex;flex-direction:column}
.partner-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(224,181,212,0.25);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.partner-type{display:inline-flex;align-items:center;gap:4px;font-size:0.75rem;color:var(--blush);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:var(--space-sm)}
.partner-card h3{font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:var(--space-sm)}
.partner-card p{color:var(--fog);font-size:0.9rem;line-height:1.7;flex:1;margin-bottom:var(--space-lg)}
.partner-links{display:flex;gap:var(--space-sm)}
.partner-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-size:0.8rem;font-weight:600;text-decoration:none;transition:all var(--duration)var(--ease)}
.partner-link-site{background:rgba(255,255,255,0.06);color:var(--cloud);border:1px solid rgba(255,255,255,0.08)}
.partner-link-site:hover{background:rgba(255,255,255,0.1)}
.partner-link-discord{background:rgba(157,175,255,0.08);color:var(--sky);border:1px solid rgba(157,175,255,0.15)}
.partner-link-discord:hover{background:rgba(157,175,255,0.15)}
.partner-category{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);margin-top:var(--space-2xl)}
.partner-category:first-child{margin-top:0}
.partner-category h3{font-size:1rem;font-weight:700;color:var(--white)}
.partner-category .cat-line{flex:1;height:1px;background:rgba(255,255,255,0.06)}
.partner-detail{margin-bottom:var(--space-2xl);padding:var(--space-xl);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg)}
.partner-banner{width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--space-lg);border:1px solid rgba(255,255,255,0.06)}
.partner-header{margin-bottom:var(--space-lg)}
.partner-header h2{font-size:1.5rem;font-weight:800;color:var(--white);margin-top:var(--space-sm)}
.partner-detail>p{color:var(--cloud);font-size:0.95rem;line-height:1.9;margin-bottom:var(--space-md)}
.partner-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md);margin:var(--space-lg)0}
.partner-detail .partner-links{margin-top:var(--space-lg)}
.partner-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-xl)}
.partner-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg)var(--space-xl);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);text-decoration:none;transition:all var(--duration)var(--ease)}
.partner-row:hover{background:rgba(255,255,255,0.04);border-color:rgba(157,175,255,0.15);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.partner-row-info h3{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:2px}
.partner-row-info p{font-size:0.85rem;color:var(--fog);line-height:1.5}
.partner-row-badge{flex-shrink:0;padding:4px 12px;background:rgba(157,175,255,0.08);border:1px solid rgba(157,175,255,0.12);border-radius:100px;font-size:0.72rem;color:var(--sky);font-weight:600;white-space:nowrap}
.partner-detail-features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-top:var(--space-md)}
.partner-inline-detail{margin-top:var(--space-sm);padding:var(--space-md);background:rgba(255,105,180,0.04);border:1px solid rgba(255,105,180,0.1);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:4px}
.partner-inline-detail strong{color:#ff8ec4;font-size:0.8rem;margin-bottom:4px}
.partner-inline-detail span{color:var(--fog);font-size:0.8rem;line-height:1.6}
.partner-row-wrap{border-radius:var(--radius-lg);transition:all var(--duration)var(--ease)}
.partner-row-wrap.open{background:rgba(157,175,255,0.03)}
.partner-row-wrap.open .partner-expand-btn{transform:rotate(180deg);background:rgba(157,175,255,0.15);color:var(--sky)}
.partner-detail-dropdown{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;opacity:0}
.partner-row-wrap.open .partner-detail-dropdown{max-height:300px;opacity:1}
.partner-detail-inner{padding:var(--space-md)var(--space-lg)var(--space-lg);display:flex;flex-direction:column;gap:4px}
.partner-detail-inner strong{color:var(--sky);font-size:0.85rem;margin-bottom:4px}
.partner-detail-inner span{color:var(--fog);font-size:0.85rem;line-height:1.8}

[data-theme="light"] .partner-category .cat-line{background:rgba(0,0,0,0.06)}
[data-theme="light"] .partner-detail{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .partner-banner{border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .partner-row{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .partner-row:hover{background:rgba(0,0,0,0.04);border-color:rgba(157,175,255,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.05)}
[data-theme="light"] .partner-inline-detail{background:rgba(255,105,180,0.03);border-color:rgba(255,105,180,0.12)}
[data-theme="light"] .partner-row-wrap.open{background:rgba(157,175,255,0.04)}
[data-theme="light"] .partner-expand-btn{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}

/* ═══════════════════════════════════════
   Member
   ═══════════════════════════════════════ */

.member-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.06)}
.member-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.member-table thead{background:rgba(157,175,255,0.08)}
.member-table th{padding:var(--space-md)var(--space-lg);text-align:center;font-weight:700;color:var(--sky);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:2px solid rgba(157,175,255,0.15)}
.member-table th:first-child{text-align:left}
.member-table td{padding:var(--space-sm)var(--space-lg);border-bottom:1px solid rgba(255,255,255,0.04);color:var(--cloud);text-align:center}
.member-table td:first-child{text-align:left;font-weight:500}
.member-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.member-cat td{background:rgba(157,175,255,0.05);font-weight:700;color:var(--white);font-size:0.85rem;padding:var(--space-sm)var(--space-lg);border-bottom:1px solid rgba(157,175,255,0.1)}

[data-theme="light"] .member-table-wrap{border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .member-table th{color:var(--sky);border-bottom-color:rgba(157,175,255,0.2)}
[data-theme="light"] .member-table td{color:var(--cloud);border-bottom-color:rgba(0,0,0,0.05)}
[data-theme="light"] .member-table tbody tr:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .member-cat td{background:rgba(157,175,255,0.06);color:var(--cloud);border-bottom-color:rgba(157,175,255,0.15)}

/* ═══════════════════════════════════════
   Guide / Callouts
   ═══════════════════════════════════════ */

.inline-cmd{background:rgba(157,175,255,0.08);border:1px solid rgba(157,175,255,0.12);border-radius:4px;padding:2px 8px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:0.85em;color:var(--sky)}
.guide-step{display:flex;gap:var(--space-lg);margin-bottom:var(--space-xl);align-items:flex-start}
.cmd-box{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);padding:var(--space-md)var(--space-lg);font-family:'JetBrains Mono','Fira Code',monospace;font-size:0.85rem;color:var(--foam);margin:var(--space-sm)0;display:flex;align-items:center;gap:var(--space-sm)}
.cmd-box .cmd-prefix{color:var(--fog);user-select:none}
.guide-img-wrap{margin:var(--space-lg)0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.guide-img-wrap img{width:100%;display:block;border-radius:var(--radius-lg)}
.guide-img-caption{display:block;text-align:center;font-size:0.78rem;color:var(--fog);padding:8px 12px;background:rgba(0,0,0,0.2)}
.steps a{color:var(--sky);text-decoration:none;border-bottom:1px solid rgba(157,175,255,0.3);padding:0;display:inline;background:none;border-radius:0}
.steps a:hover{border-bottom-color:var(--sky)}
.guide-screenshot{max-width:100%;max-width:500px;width:100%;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.06)}
.guide-toc{margin-top:var(--space-lg);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.guide-layout{display:flex;gap:var(--space-xl);max-width:1300px;margin:0 auto;padding:var(--space-2xl)var(--space-xl)}
.guide-sidebar{width:260px;flex-shrink:0;position:sticky;top:80px;align-self:flex-start}
.guide-sidebar-inner{padding:var(--space-lg);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg)}
.guide-sidebar-title{font-size:0.95rem;font-weight:700;color:var(--white);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid rgba(255,255,255,0.06)}
.guide-sidebar-nav{display:flex;flex-direction:column;gap:12px}
.guide-sb-group{display:flex;flex-direction:column;position:relative}
.guide-sb-heading{display:block;padding:6px 10px 4px;font-size:0.78rem;font-weight:700;color:var(--cloud);letter-spacing:0.02em}
.guide-sb-link{display:block;padding:4px 10px 4px 20px;font-size:0.78rem;color:var(--fog);text-decoration:none;border-radius:var(--radius-sm);transition:all 0.15s ease;position:relative}
.guide-sb-root{padding-left:10px !important;font-weight:600;color:var(--sky);font-size:0.82rem}
.guide-sb-link:hover,.guide-sb-link.active{background:rgba(157,175,255,0.08);color:var(--sky)}
.guide-main{flex:1;min-width:0;padding:0;max-width:none;background:none}
.guide-main::before{display:none}
.callout{display:flex;gap:var(--space-md);padding:var(--space-lg)var(--space-xl);border-radius:var(--radius-md);margin-bottom:var(--space-lg);font-size:0.9rem;line-height:1.7}
.callout-icon{flex-shrink:0;font-size:1.2rem;margin-top:2px}
.callout-tip{background:rgba(0,121,76,0.06);border:1px solid rgba(0,121,76,0.2);color:var(--foam)}
.callout-info{background:rgba(157,175,255,0.06);border:1px solid rgba(157,175,255,0.15);color:var(--sky)}
.callout-warn{background:rgba(255,226,221,0.08);border:1px solid rgba(255,226,221,0.2);color:var(--sand)}
.callout code{background:rgba(255,255,255,0.08);padding:2px 8px;border-radius:4px;font-size:0.85em}
.guide-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid rgba(255,255,255,0.06);flex-wrap:wrap}
.steps{counter-reset:step-counter;list-style:none;padding:0;margin:var(--space-lg)0}
.steps li{counter-increment:step-counter;display:flex;gap:var(--space-md);padding:var(--space-md)0;border-bottom:1px solid rgba(255,255,255,0.03);align-items:flex-start}
.steps li::before{content:counter(step-counter);flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),var(--foam));border-radius:50%;font-size:0.85rem;font-weight:800;color:var(--deep)}
.steps li:last-child{border-bottom:none}
.guide-toc{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.guide-sidebar-inner{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(157,175,255,0.15)transparent}
.guide-sidebar-inner::-webkit-scrollbar{width:4px}
.guide-sidebar-inner::-webkit-scrollbar-thumb{background:rgba(157,175,255,0.15);border-radius:2px}
.guide-sb-heading{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fog);font-weight:700;padding:var(--space-md)0 var(--space-xs);margin-top:var(--space-sm)}
.guide-sb-link{display:block;padding:6px 12px;margin:2px 0;border-radius:var(--radius-sm);font-size:0.85rem;color:var(--fog);text-decoration:none;transition:all 0.2s var(--ease);position:relative}
.guide-sb-link:hover,.guide-sb-link.active{background:rgba(157,175,255,0.08);color:var(--sky)}
.guide-sb-link.active{font-weight:600}
.guide-sb-link.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--sky);border-radius:2px}
.guide-sb-root{font-weight:600;color:var(--sky);background:rgba(157,175,255,0.06);border:1px solid rgba(157,175,255,0.1);margin-bottom:var(--space-sm)}
.guide-sb-root:hover{background:rgba(157,175,255,0.12);border-color:rgba(157,175,255,0.2)}

[data-theme="light"] .cmd-box{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .guide-img-wrap{border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .guide-img-caption{background:rgba(0,0,0,0.03);color:var(--fog)}
[data-theme="light"] .inline-cmd{background:rgba(157,175,255,0.06);border-color:rgba(157,175,255,0.15)}
[data-theme="light"] .guide-sidebar-inner{background:#ffffff;border-color:rgba(0,0,0,0.06);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
[data-theme="light"] .guide-sidebar-title{color:var(--cloud);border-bottom-color:rgba(0,0,0,0.06)}
[data-theme="light"] .guide-sb-heading{color:var(--cloud)}
[data-theme="light"] .guide-sb-link:hover,[data-theme="light"] .guide-sb-link.active{background:rgba(157,175,255,0.08)}
[data-theme="light"] .callout-tip{background:rgba(0,121,76,0.08);border-color:rgba(0,121,76,0.2)}
[data-theme="light"] .callout-info{background:rgba(157,175,255,0.1);border-color:rgba(157,175,255,0.25)}
[data-theme="light"] .callout-warn{background:rgba(255,226,221,0.15);border-color:rgba(255,226,221,0.35)}
[data-theme="light"] .guide-nav{border-top-color:rgba(0,0,0,0.06)}

/* ═══════════════════════════════════════
   Rules / Penalties
   ═══════════════════════════════════════ */

.rules-list{list-style:none}
.rules-list li{padding:var(--space-lg);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-md);margin-bottom:var(--space-sm);display:flex;align-items:flex-start;gap:var(--space-md);transition:all var(--duration)var(--ease)}
.rules-list li:hover{background:rgba(255,255,255,0.04);border-color:rgba(157,175,255,0.1)}
.rules-intro{margin-bottom:var(--space-2xl);padding:var(--space-lg);background:rgba(157,175,255,0.04);border:1px solid rgba(157,175,255,0.08);border-radius:var(--radius-lg)}
.rules-intro p{color:var(--cloud);font-size:0.95rem;line-height:1.8;margin-bottom:var(--space-sm)}
.rules-intro ul{list-style:none;padding:0;margin-top:var(--space-sm)}
.rules-intro ul li{position:relative;padding-left:18px;color:var(--fog);font-size:0.9rem;line-height:2}
.rules-intro ul li::before{content:'•';position:absolute;left:0;color:var(--sky);font-weight:700}
.rules-intro a{color:var(--sky);text-decoration:none;border-bottom:1px solid rgba(157,175,255,0.3);padding:0;display:inline;background:none;border-radius:0}
.rules-intro a:hover{text-decoration:none;border-bottom-color:var(--sky)}
.rules-container{margin-bottom:var(--space-2xl)}
.rules-chapter{margin-bottom:var(--space-2xl)}
.rules-chapter h2{font-size:1.3rem;font-weight:700;color:var(--white);padding-bottom:var(--space-sm);border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:var(--space-lg)}
.rules-meta{text-align:center;padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,0.05)}
.rules-meta p{color:var(--fog);font-size:0.8rem}
.rules-table-wrap{overflow-x:auto;margin-top:var(--space-md);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.06)}
.rules-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.rules-table thead{background:rgba(157,175,255,0.06)}
.rules-table th{padding:var(--space-md)var(--space-lg);text-align:left;font-weight:600;color:var(--sky);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255,255,255,0.06)}
.rules-table td{padding:var(--space-md)var(--space-lg);border-bottom:1px solid rgba(255,255,255,0.03);color:var(--fog)}
.rules-table tr:last-child td{border-bottom:none}
.rules-table tr:hover td{background:rgba(255,255,255,0.02)}
.rules-table code{background:rgba(157,175,255,0.08);padding:3px 10px;border-radius:4px;font-size:0.85em;color:var(--white);white-space:nowrap;font-family:'JetBrains Mono','Fira Code','Cascadia Code',monospace}
.rules-note{color:var(--fog);font-size:0.85rem;opacity:0.7;margin-bottom:var(--space-md)}
.penalty-table{width:100%;border-collapse:collapse;margin-top:var(--space-lg)}
.penalty-table th,.penalty-table td{padding:var(--space-md)var(--space-lg);text-align:left;border-bottom:1px solid rgba(255,255,255,0.05);font-size:0.9rem}
.penalty-table th{color:var(--sky);font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em}
.penalty-table td{color:var(--cloud)}
.penalty-table tbody tr:hover{background:rgba(255,255,255,0.02)}

[data-theme="light"] .rules-list li{background:rgba(0,0,0,0.01);border-color:rgba(0,0,0,0.05)}
[data-theme="light"] .rules-list li:hover{background:rgba(0,0,0,0.03);border-color:rgba(157,175,255,0.12)}
[data-theme="light"] .penalty-table th{color:var(--sky)}
[data-theme="light"] .penalty-table td{color:var(--cloud)}
[data-theme="light"] .penalty-table tbody tr:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .penalty-table th,[data-theme="light"] .penalty-table td{border-bottom-color:rgba(0,0,0,0.05)}
[data-theme="light"] .rules-intro{background:rgba(157,175,255,0.05);border-color:rgba(157,175,255,0.1)}
[data-theme="light"] .rules-intro a,[data-theme="light"] .lore-block a,[data-theme="light"] .steps a{border-bottom-color:rgba(87,138,255,0.3)}
[data-theme="light"] .rules-intro a:hover,[data-theme="light"] .lore-block a:hover,[data-theme="light"] .steps a:hover{border-bottom-color:var(--ocean-blue)}
[data-theme="light"] .rules-chapter h2{border-bottom-color:rgba(0,0,0,0.06)}
[data-theme="light"] .rules-meta{border-top-color:rgba(0,0,0,0.05)}
[data-theme="light"] .rules-table thead{background:rgba(157,175,255,0.08)}
[data-theme="light"] .rules-table code{background:rgba(157,175,255,0.12)}

/* ═══════════════════════════════════════
   Articles / Table of Contents
   ═══════════════════════════════════════ */

.article-hero{margin-bottom:var(--space-xl)}
.article-cover{width:100%;max-height:400px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:var(--space-lg);border:1px solid rgba(255,255,255,0.06)}
.article-cover-placeholder{width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--fog);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}
.article-hero h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:var(--white);margin-bottom:var(--space-xs)}
.article-subtitle{color:var(--fog);font-size:1rem}
.article-body h2{font-size:1.2rem;font-weight:700;color:var(--white);margin-top:var(--space-xl);margin-bottom:var(--space-sm)}
.article-body h3{font-size:1.05rem;font-weight:700;color:var(--white);margin-top:var(--space-lg);margin-bottom:var(--space-xs)}
.article-body p{color:var(--cloud);font-size:0.95rem;line-height:2;margin-bottom:var(--space-sm)}
.article-body ul{list-style:none;padding-left:0;margin-bottom:var(--space-sm)}
.article-body ul li{position:relative;padding-left:18px;color:var(--cloud);font-size:0.95rem;line-height:2}
.article-body ul li::before{content:'•';position:absolute;left:0;color:var(--sky);font-weight:700}
.article-body em{color:var(--cloud);font-style:italic}
.article-footer{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,0.06);font-size:0.85rem;color:var(--fog)}
.toc-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:20px;transition:all var(--duration)var(--ease)}
.toc-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
.toc-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.toc-card-icon{font-size:1.6rem;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(157,175,255,0.08);border-radius:12px}
.toc-card h3{font-size:1rem;font-weight:700;color:var(--white);margin:0}
.toc-card-desc{font-size:0.8rem;color:var(--fog);margin:2px 0 0}
.toc-links{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.toc-links a{display:inline-block;padding:6px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:100px;color:var(--cloud);font-size:0.85rem;text-decoration:none;transition:all var(--duration)var(--ease);white-space:nowrap;flex-shrink:0}
.toc-links a:hover{background:rgba(157,175,255,0.1);border-color:rgba(157,175,255,0.25);color:var(--white);transform:translateY(-1px)}
.toc-main{background:linear-gradient(135deg,rgba(157,175,255,0.1),rgba(168,230,207,0.06))!important;border-color:rgba(157,175,255,0.2)!important;font-weight:600 !important;padding:8px 16px !important}
.toc-main:hover{background:linear-gradient(135deg,rgba(157,175,255,0.18),rgba(168,230,207,0.1))!important;border-color:var(--sky)!important}
.toc-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all 0.25s var(--ease);position:relative;overflow:hidden}
.toc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--foam));opacity:0;transition:opacity 0.3s var(--ease)}
.toc-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(157,175,255,0.15);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.toc-card:hover::after{opacity:1}

[data-theme="light"] .article-cover-placeholder{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .article-footer{border-top-color:rgba(0,0,0,0.06)}
[data-theme="light"] .toc-links a{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06);color:var(--cloud)}
[data-theme="light"] .toc-links a:hover{background:rgba(157,175,255,0.08);border-color:rgba(157,175,255,0.2);color:var(--white)}
[data-theme="light"] .toc-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .toc-card:hover{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .toc-card h3{color:var(--white)}
[data-theme="light"] .toc-card-desc{color:#6b7280}
[data-theme="light"] .article-cover{border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .article-hero h1{color:var(--cloud)}
[data-theme="light"] .article-subtitle{color:var(--fog)}
[data-theme="light"] .article-body h2{color:var(--cloud);border-bottom-color:rgba(0,0,0,0.06)}
[data-theme="light"] .article-body h3{color:var(--cloud)}
[data-theme="light"] .article-body p{color:var(--cloud)}
[data-theme="light"] .article-body ul li{color:var(--cloud)}
[data-theme="light"] .article-body em{color:var(--fog)}
[data-theme="light"] .article-footer{border-top-color:rgba(0,0,0,0.06);color:var(--fog)}
[data-theme="light"] .toc-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .toc-card:hover{background:rgba(0,0,0,0.03);border-color:rgba(157,175,255,0.2);box-shadow:0 8px 24px rgba(0,0,0,0.05)}

/* ═══════════════════════════════════════
   Community
   ═══════════════════════════════════════ */

.discord-cta{position:relative;z-index:2;padding:var(--space-2xl)var(--space-xl);text-align:center}
.discord-cta-inner{max-width:500px;margin:0 auto;padding:var(--space-2xl);background:rgba(157,175,255,0.04);border:1px solid rgba(157,175,255,0.1);border-radius:var(--radius-xl);transition:all var(--duration)var(--ease)}
.discord-cta-inner:hover{background:rgba(157,175,255,0.06);border-color:rgba(157,175,255,0.18);box-shadow:0 8px 32px rgba(157,175,255,0.06)}
.discord-cta-icon{font-size:2.4rem;display:block;margin-bottom:var(--space-md)}
.discord-cta h2{font-size:1.6rem;font-weight:800;color:var(--white);margin-bottom:var(--space-sm)}
.discord-cta p{color:var(--fog);font-size:0.95rem;margin-bottom:var(--space-lg);line-height:1.7}
.community-card{display:flex;flex-direction:column;background:rgba(255,255,255,0.04);border:1px solid rgba(157,175,255,0.08);border-radius:var(--radius-md);cursor:pointer;transition:all 0.3s var(--ease);overflow:hidden;text-decoration:none;color:var(--cloud)}
.community-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(157,175,255,0.2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.community-icon{font-size:1.3rem;flex-shrink:0}
.community-name{font-weight:600;font-size:0.95rem}
.community-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md)var(--space-lg)}
.community-arrow{margin-left:auto;font-size:0.8rem;color:var(--fog);transition:transform 0.25s ease}
.community-card.open .community-arrow{transform:rotate(180deg)}
.community-body{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;padding:0 var(--space-lg)}
.community-card.open .community-body{max-height:200px;padding:0 var(--space-lg)var(--space-md)}
.community-body p{font-size:0.85rem;color:var(--fog);line-height:1.6;margin:0}
.community-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.community-card{background:var(--ocean);border:1px solid var(--mist);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration)var(--ease)}
.community-card:hover{border-color:rgba(157,175,255,0.2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.community-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg);cursor:pointer;background:none;border:none;width:100%;font:inherit;color:inherit;text-align:left}
.community-header:focus-visible{outline:2px solid var(--sky);outline-offset:-2px;border-radius:var(--radius-lg)}
.community-icon{font-size:1.4rem;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(157,175,255,0.08);border-radius:var(--radius-md)}
.community-name{flex:1;font-weight:700;color:var(--white);font-size:1rem}
.community-arrow{font-size:0.9rem;color:var(--fog);transition:transform 0.3s var(--ease);flex-shrink:0}
.community-card.open .community-arrow{transform:rotate(180deg)}
.community-body{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),padding 0.3s ease;padding:0 var(--space-lg)}
.community-card.open .community-body{max-height:300px;padding:0 var(--space-lg)var(--space-lg)}
.community-body p{color:var(--fog);font-size:0.9rem;line-height:1.8}
.community-empty{color:var(--text-muted);font-size:0.85rem;font-style:italic}

[data-theme="light"] .discord-cta-inner{background:rgba(157,175,255,0.05);border-color:rgba(157,175,255,0.15)}
[data-theme="light"] .discord-cta-inner:hover{background:rgba(157,175,255,0.08);border-color:rgba(157,175,255,0.25);box-shadow:0 8px 32px rgba(157,175,255,0.08)}
[data-theme="light"] .community-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
[data-theme="light"] .community-card:hover{background:#ffffff;border-color:rgba(74,108,247,0.2);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
[data-theme="light"] .community-body p{color:#4a5260}
[data-theme="light"] .community-card{background:#fff;border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .community-card:hover{border-color:rgba(157,175,255,0.25);box-shadow:0 8px 24px rgba(0,0,0,0.06)}

/* ═══════════════════════════════════════
   Team
   ═══════════════════════════════════════ */

.wind-status{margin-top:var(--space-xl);padding:var(--space-lg)var(--space-xl);background:rgba(168,230,207,0.04);border:1px solid rgba(168,230,207,0.1);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--space-lg)}
.team-stats{display:flex;gap:var(--space-xl);justify-content:center;margin-bottom:var(--space-2xl);padding:var(--space-lg);background:rgba(157,175,255,0.03);border-radius:var(--radius-lg);border:1px solid rgba(157,175,255,0.08)}
.team-stat{text-align:center}
.team-stat-num{display:block;font-size:2rem;font-weight:800;color:var(--sky);line-height:1}
.team-stat-label{font-size:0.8rem;color:var(--fog);margin-top:4px;display:block}
.team-dept{margin-bottom:var(--space-2xl);padding:var(--space-lg);background:rgba(255,255,255,0.02);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.04)}
.team-dept-title{font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:var(--space-xs)}
.team-dept-desc{font-size:0.85rem;color:var(--fog);margin-bottom:var(--space-lg)}
.team-members{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
.team-member{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);transition:background 0.3s var(--ease)}
.team-member:hover{background:rgba(157,175,255,0.05)}
.team-skin{width:40px;height:40px;border-radius:var(--radius-sm);image-rendering:pixelated;flex-shrink:0}
.team-member-info{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.team-name{font-weight:600;color:var(--cloud);font-size:0.95rem}
.team-role{font-size:0.75rem;padding:2px 10px;border-radius:var(--radius-xl);background:rgba(157,175,255,0.1);color:var(--sky)}
.team-role.role-owner{background:rgba(222,172,128,0.15);color:var(--sand)}
.team-role.role-lead{background:rgba(168,230,207,0.12);color:var(--foam)}
.team-badge{font-size:0.7rem;padding:1px 8px;border-radius:var(--radius-xl);background:rgba(255,255,255,0.06);color:var(--fog)}
.team-sub{font-size:0.75rem;color:var(--text-muted)}
.team-note{font-size:0.85rem;color:var(--fog);margin-top:var(--space-sm);padding-left:var(--space-md)}

[data-theme="light"] .wind-status{background:rgba(168,230,207,0.06);border-color:rgba(168,230,207,0.12)}

/* ═══════════════════════════════════════
   Links
   ═══════════════════════════════════════ */

.link-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);text-decoration:none;transition:all var(--duration)var(--ease)}
.link-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(157,175,255,0.15);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.link-icon{font-size:1.6rem;flex-shrink:0}
.link-favicon{width:32px;height:32px;flex-shrink:0;border-radius:6px;object-fit:contain;filter:brightness(0.9)}
.link-card h3{font-size:0.95rem;font-weight:700;color:var(--white);margin-bottom:2px}
.link-card p{font-size:0.8rem;color:var(--fog);margin:0}
.link-badge{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:100px;font-size:0.7rem;font-weight:600}
.badge-building{background:rgba(222,172,128,0.12);color:var(--sand);border:1px solid rgba(222,172,128,0.2)}

[data-theme="light"] .link-favicon{filter:brightness(1)}
[data-theme="light"] .link-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .link-card:hover{background:rgba(0,0,0,0.04);border-color:rgba(157,175,255,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.06)}
[data-theme="light"] .link-card h3{color:var(--cloud)}
[data-theme="light"] .link-card p{color:var(--fog)}
[data-theme="light"] .link-badge{background:rgba(0,0,0,0.06);color:var(--fog)}
[data-theme="light"] .badge-building{background:rgba(222,172,128,0.15);color:#b87333}

/* ═══════════════════════════════════════
   Footer
   ═══════════════════════════════════════ */

.footer{border-top:1px solid rgba(255,255,255,0.05);padding:var(--space-xl)var(--space-xl);text-align:center;margin-top:var(--space-2xl)}
.footer p{font-size:0.8rem;color:var(--fog)}
.footer a{color:var(--sky);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer-inner{max-width:600px;margin:0 auto}
.footer-brand{margin-bottom:var(--space-lg)}
.footer-logo{font-size:1.2rem;font-weight:700;color:var(--white)}
.footer-links{display:flex;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-lg)}
.footer-links a{color:var(--fog);font-size:0.85rem;text-decoration:none;transition:color var(--duration)var(--ease)}
.footer-links a:hover{color:var(--sky)}
.footer-bottom p{font-size:0.75rem;color:var(--fog);opacity:0.7}
.footer-date{font-size:0.7rem;opacity:0.4;margin-top:4px}
.footer{content-visibility:auto;contain-intrinsic-size:auto 200px}

[data-theme="light"] .footer{border-top-color:rgba(0,0,0,0.06)}
[data-theme="light"] .footer{background:var(--ocean);border-top-color:rgba(0,0,0,0.08)}
[data-theme="light"] .footer-brand .footer-logo{color:var(--cloud)}
[data-theme="light"] .footer-brand p{color:var(--fog)}
[data-theme="light"] .footer-links a{color:var(--fog)}
[data-theme="light"] .footer-links a:hover{color:var(--sky)}
[data-theme="light"] .footer-bottom p{color:var(--fog)}

/* ═══════════════════════════════════════
   Lightbox
   ═══════════════════════════════════════ */

.lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox-img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:var(--radius-md);user-select:none}
.lightbox-close{position:fixed;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;z-index:10000;opacity:0.7;transition:opacity var(--duration)var(--ease)}
.lightbox-close:hover{opacity:1}
.lightbox-prev,.lightbox-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#fff;font-size:1.5rem;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0.6;transition:all var(--duration)var(--ease);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lightbox-prev:hover,.lightbox-next:hover{opacity:1;background:rgba(255,255,255,0.15)}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:0.85rem;z-index:10000;pointer-events:none}

[data-theme="light"] .lightbox{background:rgba(240,242,245,0.95)}
[data-theme="light"] .lightbox-close{color:var(--cloud);background:rgba(0,0,0,0.06)}
[data-theme="light"] .lightbox-prev,[data-theme="light"] .lightbox-next{color:var(--cloud);background:rgba(0,0,0,0.06)}
[data-theme="light"] .lightbox-counter{color:var(--fog);background:rgba(0,0,0,0.06)}

/* ═══════════════════════════════════════
   Miscellaneous
   ═══════════════════════════════════════ */

:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.feature-showcase{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.feature-main{background:linear-gradient(135deg,rgba(157,175,255,0.08),rgba(168,230,207,0.05));border:1px solid rgba(157,175,255,0.12);border-radius:var(--radius-lg);padding:var(--space-2xl);display:flex;flex-direction:column;justify-content:center;text-align:center;transition:all var(--duration)var(--ease)}
.feature-main:hover{border-color:rgba(157,175,255,0.25);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.15)}
.feature-main-icon{font-size:3rem;margin-bottom:var(--space-md)}
.feature-main h3{font-size:1.4rem;font-weight:700;color:var(--white);margin-bottom:var(--space-sm)}
.feature-main p{color:var(--fog);font-size:0.95rem;line-height:1.7}
.feature-side{display:flex;flex-direction:column;gap:var(--space-md);justify-content:center}
.feature-side-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);background:rgba(255,255,255,0.02);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.04);transition:all var(--duration)var(--ease)}
.feature-side-item:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
.feature-dot{width:8px;height:8px;border-radius:50%;background:var(--sky);flex-shrink:0;margin-top:8px}
.feature-side-item strong{display:block;color:var(--white);font-size:0.95rem;margin-bottom:var(--space-xs)}
.feature-side-item p{color:var(--fog);font-size:0.85rem;line-height:1.6}
.status-offline{color:#ff6b6b}
.status-offline::before{content:'● ';font-size:0.7rem}
.status-loading{animation:status-pulse 1.5s ease-in-out infinite}
.status-online::before{content:'● ';font-size:.7rem}
.feature-item{padding:var(--space-lg);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-md)}
.feature-item h4{font-size:0.95rem;font-weight:700;color:var(--white);margin-bottom:var(--space-xs)}
.feature-item p{font-size:0.85rem;color:var(--fog);line-height:1.7}
.be-hint {
  font-size: 0.75rem;
  color: var(--fog);
  opacity: 0.6;
  animation: pulse-fade 2s ease-in-out infinite;
}
.meta-item{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--fog)}
.meta-item .meta-icon{font-size:1rem}
.meta-item .meta-value{color:var(--cloud);font-weight:600;font-family:'JetBrains Mono','Fira Code',monospace}
.wind-icon{font-size:2rem;animation:sway 3s ease-in-out infinite}
.wind-label{font-size:0.8rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.1em}
.wind-value{font-size:1.1rem;color:var(--foam);font-weight:700}
.tips-ticker{display:flex;align-items:center;gap:var(--space-md);padding:14px 24px;background:rgba(157,175,255,0.06);border:1px solid rgba(157,175,255,0.1);border-radius:var(--radius-md);margin-bottom:var(--space-2xl);overflow:hidden}
.tips-label{font-size:0.85rem;font-weight:700;color:var(--sky);white-space:nowrap;flex-shrink:0}
.intro-highlight{text-align:center;margin-bottom:var(--space-2xl)}
.intro-features{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.intro-feature{display:flex;align-items:flex-start;gap:var(--space-lg);padding:var(--space-lg);background:rgba(255,255,255,0.02);border-left:3px solid rgba(157,175,255,0.2);border-radius:0 var(--radius-md)var(--radius-md)0;transition:all var(--duration)var(--ease)}
.intro-feature:hover{background:rgba(255,255,255,0.04);border-left-color:var(--sky);transform:translateX(4px)}
.intro-feature-icon{font-size:2rem;flex-shrink:0;margin-top:2px}
.intro-feature strong{display:block;color:var(--white);font-size:1.05rem;margin-bottom:var(--space-xs)}
.intro-feature p{color:var(--fog);font-size:0.9rem;line-height:1.6}
.home-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
.home-split h3{font-size:1.3rem;font-weight:700;color:var(--white);display:flex;align-items:center;gap:var(--space-sm)}
.back-link{display:inline-block;color:var(--sky);font-size:0.85rem;text-decoration:none;margin-bottom:var(--space-xl);transition:opacity var(--duration)var(--ease)}
.back-link:hover{opacity:0.7}
.rule-number{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(157,175,255,0.1);border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;color:var(--sky)}
.rule-content h4{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:4px}
.rule-content p{font-size:0.9rem;color:var(--fog);line-height:1.6}
.step-number{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),var(--foam));border-radius:50%;font-size:1.2rem;font-weight:800;color:var(--deep)}
.step-content h3{font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:var(--space-xs)}
.step-content p{font-size:0.9rem;color:var(--fog);line-height:1.7}
.chapter-sub{font-size:1.05rem;font-weight:700;color:var(--sky);margin-top:var(--space-xl);margin-bottom:var(--space-md)}
.rule-item{margin-bottom:var(--space-lg);padding-left:var(--space-sm)}
.rule-item>p{color:var(--cloud);font-size:0.95rem;line-height:1.8;margin-bottom:var(--space-xs)}
.rule-item>p strong{color:var(--sky);margin-right:6px;font-weight:700}
.rule-item ul{list-style:none;padding-left:20px;margin-top:var(--space-xs)}
.rule-item ul li{position:relative;padding-left:16px;color:var(--fog);font-size:0.88rem;line-height:2}
.rule-item ul li::before{content:'—';position:absolute;left:0;color:var(--sky);opacity:0.5}
.breadcrumb{display:flex;align-items:center;gap:var(--space-sm);font-size:0.85rem;color:var(--fog);margin-bottom:var(--space-lg);flex-wrap:wrap}
.breadcrumb a{color:var(--sky);text-decoration:none;transition:color var(--duration)var(--ease)}
.breadcrumb a:hover{color:var(--foam)}
.breadcrumb .sep{color:var(--fog);opacity:0.4}
.breadcrumb .current{color:var(--white);font-weight:500}
.links-group{margin-bottom:var(--space-2xl)}
.links-group h2{font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:var(--space-lg)}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md)}
.load-more-btn{display:block;margin:var(--space-xl)auto 0}
.pfc-text{white-space:nowrap;font-variant-numeric:tabular-nums}
.rain-toggle{position:fixed;bottom:130px;right:24px;z-index:998;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(22,27,34,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:rgba(255,255,255,0.5);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.rain-toggle:hover{background:rgba(22,27,34,0.95);border-color:rgba(157,175,255,0.3);color:rgba(255,255,255,0.8)}
.rain-toggle.active{color:var(--sky);border-color:rgba(157,175,255,0.4);background:rgba(157,175,255,0.12)}
.back-to-top{position:fixed;bottom:1.5rem;right:2rem;z-index:900;width:44px;height:44px;border-radius:50%;border:1px solid rgba(157,175,255,0.2);background:rgba(13,17,23,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--sky);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),background 0.2s;will-change:opacity,transform}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:rgba(157,175,255,0.15);border-color:rgba(157,175,255,0.4)}
.back-to-top{bottom:80px;right:20px}
.violation-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
/* 公告頁日期顯示在標題欄 */
/* ═══════════════════════════════════════
   公告系統 — 全新設計
   ═══════════════════════════════════════ */
/* --- 標籤顏色 --- */
/* --- 首頁公告欄 --- */
/* 標籤顏色對應左邊框 */
/* --- 公告頁面卡片（與首頁相同結構，但更寬鬆）--- */
/* ═══ 海風逐字風吹搖曳 ═══ */
/* ═══ 公告編號 ═══ */
/* ═══ 公告頁面重新設計 ═══ */
/* 公告內容 Markdown 樣式 */
/* Light theme */
/* 舊版響應式已整合至公告欄區塊 */
/* 修復：.char 繼承父層漸層文字效果 */
/* ═══ 公告欄完整樣式（首頁 + 公告頁面共用） ═══ */
/* ═══ 公告欄 ═══ */
/* ═══════════════════════════════════════════
   手機端體驗優化 v2
   ═══════════════════════════════════════════ */
/* 全域防溢出 */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* 更大的觸控目標 */
/* 小螢幕 (iPhone SE 等) */
/* 觸控優化 */
/* 橫幅手機 */
/* ═══ 打字機增強 + 首頁動畫 v2 ═══ */
/* 打字機游標 — 底線閃爍 */
/* 打字機第二段微調 */
.typewriter-part2 {
  opacity: 1;
  display: inline;
}
/* 打字機載入中 dots */
.loading-dots {
  color: var(--fog);
  font-size: 0.9em;
  opacity: 1;
  transition: opacity 0.4s;
  animation: dots-blink 1.2s ease-in-out infinite;
}
/* Hero 標題入場動畫 — 逐字浮現然後搖曳 */
/* Hero 副標題區域入場 */
/* Hero 按鈕延遲入場 */
/* Hero 資訊卡片 — 錯開入場 */
/* Hero 提示輪播入場 */
/* Hero 向下探索箭頭入場 */
/* 背景氛圍光暈動態 */
/* Hero 背景 — 深色模式光暈 */
/* Hero 標題微風搖曳 */
/* ═══ 淺色模式動畫適配 ═══ */
/* ═══ 手機端動畫精簡 ═══ */
/* 減少動效偏好 */
/* Postcard image fallback */
/* ═══════════════════════════════════════
   首頁公告欄重新設計 v2 (2026.04.12)
   ═══════════════════════════════════════ */
/* Toggle 按鈕 */
/* 左側：日期 + 圓點 */
/* 中間：標題 + 預覽 */
/* 右側：標籤 + 箭頭 */
/* 展開內容 */
/* 元資訊 */
/* 圖片 */
/* Discord 連結 */
/* 底部：統計 + 按鈕 */
/* ═══ 公告欄 v2 — 雜誌式卡片 ═══ */
/* 淺色模式 */
/* 響應式 */
/* ═══ 下雪效果 (2026.04.12) ═══ */
.snowflake {
  position: fixed;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(200,220,255,0.6) 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: snowfall linear infinite;
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}
/* 淺色模式雪花 */
/* 淺色模式 hero 裡的雨滴改為雪花 */
/* 減少動效 */
/* 手機端隱藏（效能考量） */
/* ═══════════════════════════════════════
   公告欄 v2 — 標題列 + 可捲動列表
   設計理念：首頁公告欄像報紙頭版，
   有清楚的「最新公告」標題和數量標示，
   一則精選 + 緊湊行列表，
   預設 7 篇，捲動可見至 12 篇。
   ═══════════════════════════════════════ */
/* 可捲動內容區 */
/* 隱藏項目（捲動才顯示） */
/* 緊湊行 */
/* 展開提示 */
/* 響應式 */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}
.stagger>*:nth-child(1){transition-delay:0s}
.stagger>*:nth-child(2){transition-delay:0.08s}
.stagger>*:nth-child(3){transition-delay:0.16s}
.stagger>*:nth-child(4){transition-delay:0.24s}
.stagger>*:nth-child(5){transition-delay:0.32s}
.stagger>*:nth-child(6){transition-delay:0.40s}
.slide-up{opacity:0;transform:translateY(30px)scale(0.95);transition:opacity 0.5s var(--ease),transform 0.6s cubic-bezier(0.22,1,0.36,1)}
.slide-up.visible{opacity:1;transform:translateY(0)scale(1)}
.zoom-in{opacity:0;transform:scale(0.85);transition:opacity 0.5s var(--ease),transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}
.zoom-in.visible{opacity:1;transform:scale(1)}
.slide-left{opacity:0;transform:translateX(-40px);transition:opacity 0.5s var(--ease),transform 0.6s var(--ease)}
.slide-left.visible{opacity:1;transform:translateX(0)}
.slide-right{opacity:0;transform:translateX(40px);transition:opacity 0.5s var(--ease),transform 0.6s var(--ease)}
.slide-right.visible{opacity:1;transform:translateX(0)}
.reveal-up{opacity:0;transform:translateY(50px);transition:opacity 0.7s var(--ease),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
.reveal-up.visible{opacity:1;transform:translateY(0)}

[data-theme="light"]{--deep:#f0f2f5;--ocean:#ffffff;--drift:#e8ecf1;--mist:#dde1e8;--fog:#4a5260;--cloud:#1f2328;--white:#0d1117}
[data-theme="light"] .scroll-progress{background:linear-gradient(90deg,var(--ocean-blue),var(--sky),var(--foam));background-size:200% 100%;animation:progress-shimmer 3s linear infinite}
[data-theme="light"] .feature-item{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.04)}
[data-theme="light"] .back-link{color:var(--sky)}
[data-theme="light"] .snowflake {
  background: radial-gradient(circle, rgba(200,210,230,0.7) 0%, rgba(180,200,220,0.3) 100%);
  box-shadow: 0 0 3px rgba(0,0,0,0.05);
}

/* ═══════════════════════════════════════
   Keyframe Animations
   ═══════════════════════════════════════ */

@keyframes progress-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes drift{0%{transform:translate(0,0)rotate(0deg)}100%{transform:translate(-3%,2%)rotate(3deg)}}
@keyframes float-up{0%{opacity:0;transform:translateY(100vh)translateX(0)}10%{opacity:0.4}90%{opacity:0.1}100%{opacity:0;transform:translateY(-10vh)translateX(40px)}}
@keyframes blink{50%{opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes status-pulse{0%,100%{opacity:0.5}50%{opacity:1}}
@keyframes hero-rise{from{opacity:0;transform:translateY(30px)scale(0.98)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes skeleton-pulse{0%,100%{opacity:0.4}50%{opacity:0.8}}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pulse-down{0%,100%{opacity:0.5;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
@keyframes snowfall{0%{transform:rotate(15deg)translateY(-10vh)translateX(0);opacity:0}5%{opacity:0.8}90%{opacity:0.6}100%{transform:rotate(15deg)translateY(100vh)translateX(-40px);opacity:0}}
@keyframes hero-breathe{0%,100%{transform:rotate(0deg)translateX(0)scale(1)}25%{transform:rotate(-0.8deg)translateX(-2px)scale(1.005)}50%{transform:rotate(0.3deg)translateX(1px)scale(1.01)}75%{transform:rotate(0.5deg)translateX(1.5px)scale(1.003)}}
@keyframes hero-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes glow-pulse{0%,100%{opacity:0}50%{opacity:0.4}}
@keyframes pulse-fade{0%,100%{opacity:0.5}50%{opacity:1}}
@keyframes wave-float{0%,100%{transform:translateX(0)translateY(0)}25%{transform:translateX(-15px)translateY(5px)}50%{transform:translateX(0)translateY(-3px)}75%{transform:translateX(15px)translateY(5px)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(157,175,255,0.2)}50%{box-shadow:0 0 20px 4px rgba(157,175,255,0.15)}}
@keyframes bounce-down{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(10px);opacity:1}}
@keyframes fade-up-slow{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-enter{from{opacity:0}to{opacity:1}}
@keyframes wind-sway {
  0%   { transform: rotate(0deg) translateX(0) translateY(0); }
  15%  { transform: rotate(-2.5deg) translateX(-3px) translateY(-2px); }
  30%  { transform: rotate(1.5deg) translateX(4px) translateY(1px); }
  50%  { transform: rotate(-1deg) translateX(-2px) translateY(-3px); }
  65%  { transform: rotate(2deg) translateX(3px) translateY(0); }
  80%  { transform: rotate(-0.5deg) translateX(-1px) translateY(-1px); }
  100% { transform: rotate(0deg) translateX(0) translateY(0); }
}
@keyframes dots-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes char-rise {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes subtitle-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes actions-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes info-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tips-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scroll-arrow-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 0.9; transform: translateY(0); }
}
@keyframes atmosphere-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes hero-bg-drift {
  0% { filter: brightness(0.85) contrast(1.1) hue-rotate(0deg); }
  100% { filter: brightness(0.9) contrast(1.05) hue-rotate(5deg); }
}
@keyframes hero-bg-drift-light {
  0% { filter: brightness(1.05) contrast(1.05) saturate(1.1) hue-rotate(0deg); }
  100% { filter: brightness(1.1) contrast(1.0) saturate(1.15) hue-rotate(3deg); }
}
@keyframes info-card-in-light {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes snowfall {
  0% {
    opacity: 0;
    transform: translateY(-10vh) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(50vh) translateX(30px) rotate(180deg);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) translateX(-20px) rotate(360deg);
  }
}

/* ═══════════════════════════════════════
   Responsive / Media Queries
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  
}
@media (max-width: 768px) {
  /* 導覽漢堡按鈕 */
  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .nav-toggle span {
    width: 20px;
    height: 2px;
  }
  .nav-toggle span:nth-child(1) { top: 12px; }
  .nav-toggle span:nth-child(2) { top: 19px; }
  .nav-toggle span:nth-child(3) { top: 26px; }
  .nav-toggle.active span:nth-child(1) { top: 19px; }
  .nav-toggle.active span:nth-child(3) { top: 19px; }

  /* 導覽連結觸控區域 */
  .nav-links a {
    padding: 10px 4px;
    display: block;
  }
  .nav-links.open {
    gap: 2px;
  }
  .dropdown-menu li a {
    padding: 12px 14px;
  }

  /* 公告卡片觸控 */
  .bulletin-toggle {
    padding: 14px 12px;
    min-height: 48px;
  }
  .ann-card-header {
    padding: 14px 12px;
    min-height: 52px;
  }

  /* 篩選按鈕 */
  .ann-filter {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-height: 44px;
  }
  .guide-qt {
    padding: 10px 16px;
    min-height: 44px;
  }

  /* 按鈕全寬 */
  .btn {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 1rem;
  }
  .btn-primary, .btn-outline {
    width: 100%;
    justify-content: center;
  }

  /* Hero 區域 */
  .hero {
    padding: 100px 16px 60px;
    min-height: 80vh;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
  .hero-title {
    font-size: 3.5rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-info {
    gap: 8px;
  }
  .info-card {
    padding: 12px 16px;
    min-width: unset;
    width: 100%;
    max-width: 280px;
  }
  .info-label {
    font-size: 0.7rem;
  }
  .info-value {
    font-size: 0.95rem;
  }

  /* 內容區域 */
  .page {
    padding-top: 64px;
  }
  .content-section {
    padding: var(--space-xl) 16px;
  }
  .page-hero {
    padding: var(--space-xl) 16px var(--space-lg);
  }
  .page-hero h1 {
    font-size: 1.6rem;
  }
  .section-header h2 {
    font-size: 1.3rem;
  }

  /* 公告頁 */
  .ann-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ann-stat-card {
    padding: 10px 8px;
  }
  .ann-stat-card .stat-num {
    font-size: 1.1rem;
  }
  .ann-stat-card .stat-label {
    font-size: 0.65rem;
  }
  .ann-search input {
    width: 100%;
    font-size: 16px; /* 防止 iOS 縮放 */
    padding: 12px 40px 12px 16px;
  }
  .ann-search input:focus {
    width: 100%;
  }
  .ann-card-images .ann-img {
    max-width: 120px;
    max-height: 90px;
  }

  /* 特色卡片 */
  .feature-card {
    padding: var(--space-lg) var(--space-md);
  }
  .feature-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-sm);
  }
  .feature-card h4 {
    font-size: 1rem;
  }
  .feature-card p {
    font-size: 0.82rem;
  }

  /* 指南頁 */
  .guide-search {
    font-size: 16px; /* 防止 iOS 縮放 */
    padding: 14px 20px 14px 44px;
  }
  .guide-card {
    padding: 14px 12px;
    min-height: 48px;
  }
  .guide-card-arrow {
    opacity: 0.3;
  }

  /* 公告欄 */
  .bulletin-board {
    max-height: 400px;
  }

  /* Footer */
  .footer {
    padding: var(--space-lg) 16px;
  }

  /* Back to top */
  .back-to-top {
    bottom: 72px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  /* 風聲按鈕 */
  .rain-toggle {
    bottom: 124px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  /* 明信片 */
  .postcard-section {
    margin: 0 -16px;
    padding: 0 16px;
  }

  /* 404 遊戲 */
  .game-menu {
    gap: 6px;
  }
  .game-btn {
    padding: 10px 14px;
    font-size: 0.82rem;
    min-height: 44px;
  }
  .mole-grid {
    gap: 8px;
    padding: 12px;
  }
  .color-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .color-btn {
    padding: 14px 8px;
    font-size: 0.9rem;
  }
  .number-btn {
    padding: 14px 20px;
    min-width: 100px;
  }

  /* 文字可讀性 */
  .bulletin-body .b-content {
    font-size: 0.9rem;
  }
  .guide-card-text h4 {
    font-size: 0.92rem;
  }
  .guide-card-text p {
    font-size: 0.78rem;
  }

  /* 鍊結太小 */
  .toc-links a {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* 圖片燈箱 */
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  .lightbox-close {
    font-size: 1.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 375px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero-title {
    font-size: 2.8rem;
  }
  .info-card {
    padding: 10px 12px;
  }
  .ann-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-card-icon {
    font-size: 1.8rem;
  }
}
@media (hover: none) and (pointer: coarse) {
  /* 移除 hover 效果，改用 active */
  .feature-card:hover {
    transform: none;
    box-shadow: none;
  }
  .feature-card:active {
    transform: scale(0.98);
  }
  .guide-card:hover {
    transform: none;
    box-shadow: none;
  }
  .guide-card:active {
    background: rgba(157,175,255,0.08);
  }
  .btn:hover {
    transform: none;
  }
  .btn:active {
    transform: scale(0.97);
  }
  .ann-filter:hover {
    border-color: var(--mist);
  }
  .toc-links a:hover {
    transform: none;
    box-shadow: none;
  }

  /* 更大的點擊區域 */
  .nav-theme {
    min-width: 48px;
    min-height: 48px;
  }
  .bulletin-toggle {
    min-height: 52px;
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 80px 24px 40px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero-title {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  .hero-title .char {
    animation-duration: 0.4s;
  }
  .hero-actions {
    animation-delay: 1.5s;
  }
  .hero-info .info-card:nth-child(1) { animation-delay: 1.8s; }
  .hero-info .info-card:nth-child(2) { animation-delay: 1.9s; }
  .hero-info .info-card:nth-child(3) { animation-delay: 2.0s; }
  .hero-tips {
    animation-delay: 2.2s;
  }
  .hero-scroll {
    animation-delay: 2.5s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .char {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-actions,
  .hero-info .info-card,
  .hero-tips,
  .hero-scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-title {
    animation: none;
  }
  .hero::before {
    animation: none;
  }
  .bg-atmosphere::before {
    animation: drift 30s ease-in-out infinite alternate;
  }
}
@media (max-width: 768px) {
  .bulletin-toggle {
    padding: 12px;
    gap: 8px;
    min-height: 52px;
  }
  .b-left {
    min-width: 70px;
    gap: 6px;
  }
  .b-date { font-size: 0.66rem; }
  .b-title { font-size: 0.82rem; }
  .b-preview { font-size: 0.7rem; }
  .b-tag { font-size: 0.58rem; padding: 2px 8px; }
  .b-content { padding: 4px 12px 12px 12px; }
  .b-dot { display: none; }
  .bulletin-footer { flex-direction: column; gap: 8px; align-items: stretch; }
  .bulletin-footer .btn-sm { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .snowflake {
    animation: none !important;
    opacity: 0.2;
  }
}
@media (max-width: 768px) {
  .snowflake {
    display: none;
  }
}
@media (max-width: 768px) {
  .bulletin-scroll { max-height: 440px; }
  .br-title { font-size: 0.82rem; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){.hero-content{animation:none}.particle{animation:none !important}.community-body{animation:none !important}}
@media (prefers-reduced-motion: reduce) {
  .hero-title .char { animation: none; }
}
@media(max-width:1024px){.card-grid,.card-grid-equal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.nav{padding:var(--space-md)}.nav-right{gap:var(--space-sm)}.nav-links{display:flex;position:absolute;top:100%;left:0;right:0;background:rgba(13,17,23,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;padding:0 var(--space-lg);border-bottom:1px solid rgba(255,255,255,0.05);gap:var(--space-sm);max-height:0;overflow:hidden;opacity:0;transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.25s ease,padding 0.35s ease;padding-top:0;padding-bottom:0}.nav-links.open{max-height:600px;opacity:1;padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.nav-dropdown .dropdown-menu{position:static;transform:none;background:rgba(255,255,255,0.03);border:none;box-shadow:none;padding-left:var(--space-lg);margin-top:var(--space-xs);display:none}.nav-dropdown.open .dropdown-menu{display:block}.nav-toggle{display:block}.hero{padding:var(--space-xl)var(--space-md);min-height:auto}.hero h1{font-size:2.8rem}.hero-buttons{flex-direction:column;align-items:stretch}.btn{justify-content:center}.btn-hero{min-width:auto;padding:16px 28px}.hero-meta{gap:var(--space-md);flex-direction:column;align-items:center}.wind-status{flex-direction:column;text-align:center}.content-section{padding:var(--space-xl)var(--space-md)}.guide-step{flex-direction:column;gap:var(--space-md)}.card-grid{grid-template-columns:1fr}.partner-features{grid-template-columns:1fr}.partner-links{flex-direction:column}.penalty-table{font-size:0.8rem}.penalty-table th,.penalty-table td{padding:var(--space-sm)var(--space-md)}.feature-showcase{grid-template-columns:1fr}.intro-feature{flex-direction:column;gap:var(--space-sm)}.tips-ticker{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}}
@media(max-width:480px){.hero h1{font-size:2.4rem}.page-hero h1{font-size:1.8rem}}
@media(max-width:768px){.lore-preview-grid{grid-template-columns:1fr}}
@media(max-width:1024px)and(min-width:769px){.lore-preview-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hero-info{flex-wrap:wrap;gap:var(--space-sm)}.info-card{flex:1 1 calc(50% - var(--space-sm));min-width:0}}
@media(max-width:768px){.hero-actions{justify-content:center}.section-actions{justify-content:center}}
@media(max-width:768px){.links-grid{grid-template-columns:1fr}}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.photo-grid{grid-template-columns:repeat(2,1fr)}.photo-item{height:160px}video.photo-item{height:160px}.photo-page .content-section{padding:var(--space-lg)var(--space-sm)}}
@media(max-width:480px){.photo-grid{grid-template-columns:repeat(2,1fr);gap:4px}.photo-item{height:140px}video.photo-item{height:140px}}
@media(max-width:768px){.lightbox-prev{left:8px;width:40px;height:40px;font-size:1.2rem}.lightbox-next{right:8px;width:40px;height:40px;font-size:1.2rem}}
@media(max-width:1024px){.lore-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.lore-grid{grid-template-columns:1fr}}
@media(max-width:768px){.partner-row{flex-direction:column;align-items:flex-start;gap:var(--space-sm);padding:var(--space-lg)}}
@media(max-width:900px){.guide-layout{flex-direction:column;padding:var(--space-lg)var(--space-md)}.guide-sidebar{width:100%;position:static;max-height:none}.guide-sidebar-nav{flex-direction:row;flex-wrap:wrap;gap:8px}.guide-sb-group{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}.guide-sb-heading{padding:4px 8px;font-size:0.75rem}.guide-sb-link{padding:5px 10px;font-size:0.78rem}}
@media(max-width:768px){.partner-detail-features{grid-template-columns:1fr}}
@media(max-width:768px){.home-split{grid-template-columns:1fr;gap:var(--space-xl)}}
@media(max-width:1024px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.feature-grid{grid-template-columns:1fr}.feature-card{padding:var(--space-lg)var(--space-md)}}
@media(max-width:768px){[data-theme="light"] .nav-links{background:rgba(240,242,245,0.97);border-bottom-color:rgba(0,0,0,0.06)}[data-theme="light"] .nav-links a{color:var(--cloud)}[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{color:var(--sky);background:rgba(157,175,255,0.08)}[data-theme="light"] .nav-dropdown .dropdown-menu{background:rgba(0,0,0,0.02)}[data-theme="light"] .nav-dropdown .dropdown-menu li a{color:var(--fog)}[data-theme="light"] .nav-dropdown .dropdown-menu li a:hover{color:var(--sky)}[data-theme="light"] .nav-toggle span{background:var(--cloud)}}
@media(max-width:900px){.feature-grid-3{grid-template-columns:repeat(2,1fr)}.feature-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.feature-grid-3{grid-template-columns:1fr}.feature-grid-4{grid-template-columns:1fr}}
@media(max-width:768px){.photo-sub-bg{height:180px}}
@media(min-width:1400px){.photo-carousel{margin:0 calc(-1 * var(--space-xl));padding:0 var(--space-xl)}}
@media(max-width:768px){.guide-toc{grid-template-columns:1fr}}
@media(max-width:768px){.photo-carousel{margin:0 calc(-1 * var(--space-sm));padding:0 var(--space-sm)}.carousel-slide{flex:0 0 100%;padding:0}}
@media(max-width:600px){.team-stats{gap:var(--space-lg)}.team-stat-num{font-size:1.5rem}.team-member{padding:var(--space-xs)var(--space-sm)}.team-skin{width:32px;height:32px}}
@media(max-width:1024px){.postcard-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.postcard-grid{grid-template-columns:repeat(2,1fr)}.postcard-item:last-child{grid-column:span 2;aspect-ratio:16 / 9}}
@media(max-width:768px){.rain-toggle{bottom:72px;right:14px;width:34px;height:34px}}
@media(max-width:768px){.back-to-top{bottom:1rem;right:1.2rem;width:40px;height:40px}}
@media(max-width:768px){.community-grid{grid-template-columns:1fr}}
@media(max-width:768px){.lightbox.open::after{content:'← 左右滑動切換 →';position:fixed;bottom:60px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.3);font-size:0.75rem;pointer-events:none;animation:swipe-hint-fade 3s ease-in-out forwards}@keyframes swipe-hint-fade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}}
@media(max-width:768px){.particle{display:none}.nav-theme{padding:10px;min-width:44px;min-height:44px}.page-hero{padding:var(--space-xl)var(--space-md)var(--space-lg)}.page-hero h1{font-size:1.8rem}.hero-info{gap:var(--space-sm);flex-wrap:nowrap}.info-card{padding:12px 16px;flex:1 1 0}}
@media(max-width:480px){.hero h1{font-size:2.2rem}.hero-title{font-size:3.5rem}.section-header h2{font-size:1.3rem}.feature-card{padding:var(--space-lg)}}
@media(max-width:768px){.back-to-top{bottom:70px;right:14px}}
@media(max-width:1024px){.guide-toc{grid-template-columns:1fr}}
@media(max-width:768px){.guide-layout{flex-direction:column}.guide-sidebar{position:static;width:100%;max-height:none;margin-bottom:var(--space-lg)}.guide-sidebar-inner{position:static;max-height:300px;overflow-y:auto;border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-md);padding:var(--space-md)}}
@media (max-width: 768px) {
  .bulletin-toggle { gap: 6px; padding: 10px 12px; }
  .bulletin-toggle .b-id { font-size: 0.65rem; min-width: 40px; padding: 2px 4px; }
  .bulletin-toggle .b-date { font-size: 0.65rem; }
  .bulletin-toggle .b-tag { font-size: 0.58rem; padding: 1px 6px; }
  .bulletin-toggle .b-title { font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .b-left { min-width: 55px; }
  .b-date { font-size: 0.6rem; }
  .b-right { gap: 4px; }
  .b-tag { font-size: 0.55rem; padding: 2px 6px; }
}