/* ＝ 全站 & 首頁通用樣式 ＝ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:linear-gradient(to bottom,#D4E4C9,#7F9A65);
  color:#5B7F47;scroll-behavior:smooth;
  transition:background .3s,color .3s;
  animation: fadeIn 0.5s ease-out;
}
body.dark-mode{
  background:linear-gradient(to bottom,#0A1C2B,#1A3C5A);
  color:#E6F0FA
}
/* 背景浮點 */
body.dark-mode::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:radial-gradient(circle,rgba(173,216,230,.3)1px,transparent 1px) 0/30px 30px
}
body.dark-mode::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.1)1px,transparent 1px) 0/50px 50px
}
/* header */
.header{
  position:fixed;top:0;width:100%;z-index:100;
  display:flex;justify-content:flex-end;align-items:center;
  padding:15px 20px;background:#5B7F47;transition:background .3s
}
body.dark-mode .header{background:#0A1C2B}
/* 漢堡 */
.hamburger{
  position:fixed;top:20px;left:20px;z-index:101;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  font-size:32px;cursor:pointer;
  background:#5B7F47;color:#F5F5F5;transition:background .3s
}
body.dark-mode .hamburger{background:#0A1C2B}
/* nav */
.nav{display:flex;gap:20px}
.nav-item{position:relative}
.nav-item>a{
  text-decoration:none;color:#F5F5F5;
  padding:10px 20px;border-radius:8px;
  transition:background .2s,color .2s
}
.nav-item:hover>a{background:#A8C090;color:#5B7F47}
body.dark-mode .nav-item:hover>a{background:#2A4B7C;color:#E6F0FA}
/* dropdown */
.dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:#A8C090;border-radius:8px;min-width:150px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);transition:background .3s
}
body.dark-mode .dropdown{background:#2A4B7C}
.nav-item.active .dropdown{display:block}
.dropdown a{
  display:block;padding:10px 15px;color:#5B7F47;
  transition:background .2s,color .2s;text-decoration:none
}
body.dark-mode .dropdown a{color:#E6F0FA}
.dropdown a:hover{background:#7F9A65}
body.dark-mode .dropdown a:hover{background:#4A7B9D}
/* sidebar */
.sidebar{
  position:fixed;top:0;left:-300px;width:300px;height:100%;
  background:#5B7F47;display:flex;flex-direction:column;
  transition:left .3s,background .3s, transform 0.3s ease-out, box-shadow 0.3s ease;z-index:100
}
body.dark-mode .sidebar{background:#0A1C2B}
.sidebar.active{left:0}
.sidebar-menu{flex:1;overflow-y:auto;margin-top:60px;padding:15px;
  -ms-overflow-style:none;scrollbar-width:none}
.sidebar-menu::-webkit-scrollbar{display:none}
.sidebar ul{list-style:none;display:flex;flex-direction:column}
.sidebar li{margin:10px 0}
.sidebar a{text-decoration:none;color:#F5F5F5;font-size:18px}
body.dark-mode .sidebar a{color:#E6F0FA}
/* menu tree */
.menu-item{display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition: all 0.3s ease;}
.menu-item .arrow{font-size:14px;color:#F5F5F5;transition:transform .3s}
body.dark-mode .menu-item .arrow{color:#E6F0FA}
.menu-item.active .arrow{transform:rotate(90deg)}
.sub-menu{
  height:0;opacity:0;margin-top:0;padding:0;overflow:hidden;
  transition:height .3s,opacity .3s,margin-top .3s,padding .3s, all 0.3s ease;
}
.sub-menu.active{height:auto;opacity:1;margin-top:5px;padding:5px 0}
.sub-menu a{display:block;padding:10px 15px;font-size:16px;color:#F5F5F5}
body.dark-mode .sub-menu a{color:#E6F0FA}
.sub-menu a:hover{background:#7F9A65}
body.dark-mode .sub-menu a:hover{background:#4A7B9D}
/* sidebar utility icons */
.sidebar-icons{
  position:absolute;bottom:20px;left:20px;display:flex;gap:5px
}
.sidebar-icons>div{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  font-size:24px;background:#5B7F47;color:#F5F5F5;transition:background .3s
}
body.dark-mode .sidebar-icons>div{background:#0A1C2B}
/* ＝ 首頁專用區塊（Hero / Feature / Auth）＝ */
.hero{
  min-height:100vh;margin-top:60px;padding:20px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%235B7F47' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,106.7C672,96,768,128,864,154.7C960,181,1056,203,1152,192C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") bottom/cover no-repeat
}
body.dark-mode .hero{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%232A4B7C' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,106.7C672,96,768,128,864,154.7C960,181,1056,203,1152,192C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") bottom/cover no-repeat,#0A1C2B
}
.hero h1{font-size:36px;margin-bottom:15px;color:#f5f5f5;text-shadow:0 1px 1px rgba(0,0,0,.2)}
body.dark-mode .hero h1{color:#E6F0FA}
.hero p{font-size:18px;max-width:600px;line-height:1.6;color:#f5f5f5}
body.dark-mode .hero p{color:#E6F0FA}
/* Feature */
.feature-section{
  min-height:600px;padding:80px 20px;display:flex;align-items:center;justify-content:center;
  transition:background .3s
}
.feature-section:nth-child(odd){background:#A8C090}
body.dark-mode .feature-section:nth-child(odd){background:#1A3C5A}
.feature-section:nth-child(even){background:rgb(238, 237, 237)}
body.dark-mode .feature-section:nth-child(even){background:#2A4B7C}
.feature-content{
  max-width:1400px;margin:auto;display:flex;align-items:center;gap:60px;
  animation:slideIn .5s forwards, fadeInUp 0.5s ease-out;opacity:0
}
.feature-content.reverse{flex-direction:row-reverse}
.feature-content:nth-child(1){animation-delay:.1s}
.feature-content:nth-child(2){animation-delay:.2s}
.feature-content:nth-child(3){animation-delay:.3s}
.feature-content:nth-child(4){animation-delay:.4s}

@keyframes slideIn{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-text{flex:1;text-align:left}
.feature-text h2{font-size:32px;margin-bottom:20px;color:#5B7F47}
body.dark-mode .feature-text h2{color:#E6F0FA}
.feature-text p{font-size:18px;margin-bottom:30px;line-height:1.6;color:#5B7F47}
body.dark-mode .feature-text p{color:#E6F0FA}
.feature-text a {
  display: inline-block;
  padding: 12px 30px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #5B7F47, #8CA878);
  color: #F5F5F5;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.2s, filter 0.3s;
  box-shadow: 0 2px 5px rgba(91, 127, 71, 0.3);
}
.feature-text a:hover {
  transform: scale(1.05);
  filter: brightness(1.08);
}


body.dark-mode .feature-text a {
  background: linear-gradient(135deg, #2A4B7C, #4A7B9D);
  color: #E6F0FA;
}
body.dark-mode .feature-text a:hover {
  filter: brightness(1.1);
}

.feature-icon{flex:0 0 150px;font-size:80px;text-align:center}
/* Auth CTA */
.auth-section{
  min-height:100vh;padding:20px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%235B7F47' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,106.7C672,96,768,128,864,154.7C960,181,1056,203,1152,192C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") bottom/cover no-repeat;
  transition:background .3s
}
body.dark-mode .auth-section{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%232A4B7C' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,106.7C672,96,768,128,864,154.7C960,181,1056,203,1152,192C1248,181,1344,139,1392,117.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") bottom/cover no-repeat,#0A1C2B
}
.auth-section h2{font-size:36px;margin-bottom:20px;color:#F5F5F5;text-shadow:0 1px 1px rgba(0,0,0,.2)}
body.dark-mode .auth-section h2{color:#E6F0FA}
.auth-buttons {
  display: flex;
  gap: 30px;
}

.auth-buttons a {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #5b7f47, #859e6c);
  color: #f5f5f5;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.3s, filter 0.3s;
  box-shadow: 0 2px 6px rgba(91, 127, 71, 0.15);
}

.auth-buttons a:hover {
  transform: scale(1.05);
  filter: brightness(1.08);
}

body.dark-mode .auth-buttons a {
  background: linear-gradient(135deg, #2a4b7c, #4a6d99);
  color: #e6f0fa;
  box-shadow: 0 2px 6px rgba(42, 75, 124, 0.2);
}

body.dark-mode .auth-buttons a:hover {
  filter: brightness(1.1);
}

/* footer */
.footer{background:#5B7F47;color:#F5F5F5;padding:50px 20px;text-align:center;transition:background .3s}
body.dark-mode .footer{background:#0A1C2B}
.footer-content{
  max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:40px
}
.footer-content h3{font-size:20px;margin-bottom:10px}
.footer-content p,.footer-content a{font-size:16px;color:#F5F5F5;text-decoration:none}
body.dark-mode .footer-content p,body.dark-mode .footer-content a{color:#E6F0FA}
.footer-content a:hover{text-decoration:underline}
/* RWD */
@media(max-width:768px){
  .header{display:none}
  .hamburger{left:auto;right:20px;background:rgba(91,127,71,.8)}
  body.dark-mode .hamburger{background:rgba(10,28,43,.8)}
  .sidebar{width:100%;left:0;top:-100%;height:auto;max-height:50vh;border-radius:0;transition:top .3s}
  .sidebar.active{top:0}
  .sidebar-menu{margin-top:60px;padding:10px;max-height:calc(50vh - 120px)}
  .sidebar-icons{top:10px;left:20px;bottom:auto}
  .sidebar-icons>div{width:36px;height:36px;font-size:18px}
  .sidebar ul{gap:10px}
  .sidebar li{margin:5px 0}
  .sidebar a{font-size:16px;padding:8px 12px}
  .menu-item{padding:8px 12px;border-radius:4px}
  .menu-item .arrow{font-size:12px;margin-left:10px}
  .sub-menu{padding-left:20px}
  .feature-content,.feature-content.reverse{flex-direction:column;text-align:center}
  .feature-text{text-align:center}
  .feature-icon{margin-bottom:20px}
  .hero h1{font-size:28px}.hero p{font-size:16px}
  .feature-section{min-height:auto;padding:50px 20px}
  .feature-text h2{font-size:28px}.feature-text p{font-size:16px}
  .auth-section h2{font-size:28px}
  .auth-buttons{flex-direction:column;gap:20px}
  .footer-content{grid-template-columns:1fr}
}

/* 功能尚未開通彈窗樣式 */
.feature-modal-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.feature-modal-overlay.active {
  display: flex;
}

.feature-modal-box {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.feature-modal-box h3 {
  margin-top: 0;
  color: #5B7F47;
}

.feature-modal-box p {
  margin: 15px 0;
  color: #333;
}

.feature-modal-box button {
  background-color: #5B7F47;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.feature-modal-box button:hover {
  background-color: #7F9A65;
}

body.dark-mode .feature-modal-box {
  background-color: #1A3C5A;
}

body.dark-mode .feature-modal-box h3,
body.dark-mode .feature-modal-box p {
  color: #E6F0FA;
}

body.dark-mode .feature-modal-box button {
  background-color: #2A4B7C;
}

body.dark-mode .feature-modal-box button:hover {
  background-color: #4A7B9D;
}

/* 頁面轉場效果 */
#page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* 主要內容區塊的動畫 */
.container, 
main, 
.content-container,
.card,
.panel {
  animation: fadeInUp 0.5s ease-out;
}

/* 淡入淡出的閃爍按鈕提示 */
a:not([href="#"]):not(.auth-required):hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  animation: pulse 1s infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes pulse {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* 按鈕交互效果 */
button, .button, [type="button"], [type="submit"] {
  transition: all 0.2s ease !important;
  position: relative;
  overflow: hidden;
}

button:active, .button:active, [type="button"]:active, [type="submit"]:active {
  transform: translateY(2px);
}

/* 表單元素交互效果 */
input, textarea, select {
  transition: all 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 點擊波紋效果 - 通過 JS 觸發 */
.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* 手機版波紋效果調整 */
@media(max-width:768px) {
  .ripple {
    background: rgba(255, 255, 255, 0.4); /* 手機版波紋透明度更高 */
  }
  
  @keyframes ripple {
    to {
      transform: scale(0.6); /* 手機版波紋擴散範圍更小 */
      opacity: 0;
    }
  }
}

/* 深色模式過渡 */
body, body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 公告區 */








/* ===== 公告區（唯一版本） ===== */
.announcement-board-home{
  /* ✅ 視窗寬  ⇒ 320 – 1400px         */
  /* ✅ 中段寬 ⇒ 90 vw，不會塞滿畫面 */
  width: clamp(320px, 90vw, 1400px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 80px)
           clamp(4vw, 6vw, 60px)
           clamp(40px, 6vw, 100px);
  background: linear-gradient(135deg, #5B7F47, #88b87a);
  border-radius: 32px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  color: #fff;
  text-align: left;
}
body.dark-mode .announcement-board-home{
  background: linear-gradient(135deg,#0f3d63,#164a75);
}

.announcement-title{
  font-size: clamp(26px, 3vw + 10px, 42px);
  margin-bottom: 32px;
  font-weight: bold;
  color: #fff;
}
body.dark-mode .announcement-title{color:#e6f6ff}

/* 跑馬燈容器：恢復較大尺寸 */
.announcement-marquee {
  max-height: 280px;
  overflow: hidden;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* 跑馬燈內容 */
.scroll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: scrollY 15s linear infinite;
}

.scroll-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  font-size: 18px;
  white-space: nowrap;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.announce-title {
  font-weight: bold;
  color: #fff;
  min-width: 80px;
  font-size: 16px;
}

.announce-content {
  flex: 1;
  color: #f0f8ff;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

.announce-date {
  font-size: 13px;
  color: #e0e8f0;
  min-width: 90px;
  text-align: right;
}

body.dark-mode .scroll-list li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .announce-title {
  color: #e6f6ff;
}

body.dark-mode .announce-content {
  color: #d0e0f0;
}

body.dark-mode .announce-date {
  color: #c0d0e0;
}

/* 動畫定義 */
@keyframes scrollY {
  100% { transform: translateY(-50%); }
}

/* 單個公告的淡入淡出動畫 */
@keyframes fadeInOut {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ✅ 手機版響應式設計 */
@media(max-width:768px){
 .announcement-board-home{padding:24px 20px 40px;margin:0 16px}
  .announcement-title{font-size:26px;margin-bottom:16px}
  
  .announcement-marquee {
    max-height: 160px;
  }
  
  .scroll-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    white-space: normal;
  }
  
  .announce-title {
    font-size: 14px;
    min-width: auto;
    font-weight: bold;
  }
  
  .announce-content {
    font-size: 13px;
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  
  .announce-date {
    font-size: 11px;
    min-width: auto;
    text-align: left;
    align-self: flex-end;
  }
}

/* 平板尺寸優化 */
@media(max-width:1024px) and (min-width:769px){
  .announcement-board-home{padding:36px 40px 60px}
  
  .scroll-list li {
    font-size: 15px;
    padding: 10px 14px;
  }
  
  .announce-content {
    font-size: 14px;
  }
}

/* 動態響應式：確保窗口調整時的流暢過渡 */
.announcement-board-home,
.announcement-title,
.announcement-marquee,
.scroll-list li {
  transition: all 0.3s ease;
}

/* 針對較小的桌面窗口（但不是手機）進行優化 */
@media(max-width:1200px) and (min-width:769px) {
  .announcement-board-home {
    padding: 40px 60px 80px;
  }
  
  .announcement-title {
    font-size: 36px;
    margin-bottom: 24px;
  }
  
  .scroll-list li {
    font-size: 16px;
    padding: 14px 16px;
  }
}