body, html {
  height: 100%; /* 修改為100% */
  margin: 0;
}


/* 主容器樣式 */
.main-container {
  padding: 2rem;
  padding-bottom: 70px; /* 與 Footer 高度一致 */
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
    background: linear-gradient(135deg, #1e3c72, #2a5298); /* 深藍色漸層 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
}

.header-content {
  display: flex;
  align-items: center;    /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  gap: 10px;              /* Logo 和標題之間的間距 */
}

.header-logo {
  max-height: 250px; 
  max-width: 250px; 
  flex-shrink: 0; 
}

.header-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}
/*
.header {
  overflow: hidden; 
}

.header-content {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  margin: 0;
}

.header-logo {
  max-height: 250px; 
  max-width: 250px; 
  flex-shrink: 0; 
}

.header-title {
  font-size: 2rem; 
  color: white; 
  text-decoration: none; 
}
*/

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px; /* Footer 高度 */
}

/* 預設樣式 */
h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.scan {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-align: center;
}

/* 標題樣式 */
.external-events h2,
.internal-events h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  text-align: center;
}

/* 活動標題顏色 */
.external-events h2 {
  color: #155724; /* 深綠色 */
}

.external-events-T {
  color: #28a745; 
}

.internal-events h2 {
  color: #003366; /* 深藍色 */
}

.internal-events-WH {
  color: #4C256D; 
}

.internal-events-WHP {
  color: #D53E22; 
}

.internal-events-WI {
  color: #27306B; 
}

.internal-events-WP {
  color: #157E61; 
}

.internal-events-WZ {
  color: #3195CF; 
}

.internal-events-WL {
  color: #3B0825; 
}

.internal-events-WPLG {
  color: #776d1b; 
}

.event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;  /* 增加圓形的寬度 */
  height: 40px; /* 增加圓形的高度 */
  border-radius: 50%; /* 使元素變成圓形 */
  background-color: #ffffff; /* 圓形背景顏色 */
  color: #28a745; /* 圓形內文字顏色 */
  font-size: 1rem; /* 調整文字大小 */
  margin-right: 10px; /* 圓形與文字的間距 */
  font-weight: bold; /* 文字加粗 */
  text-align: center; /* 文字居中對齊 */
  white-space: nowrap; /* 保證文字不換行 */
}

/* 校內活動圓形文字背景顏色 */
.internal-events .event-icon {
  background-color: #ffffff; /* 圓形背景顏色 */
  color: #003366; /* 圓形內文字顏色 */
}

/* 活動列表樣式 */
.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-list li {
  margin: 0.5rem 0;
}

/* 超連結按鈕樣式 */
.event-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  transition: all 0.3s ease;
}

.external-events .event-link {
  background-color: #28a745; /* 淺綠色 */
}

/* 各校區代表色 */
.internal-events .event-link-WH {
  background-color: #4C256D; /* 中學部 */
}

.internal-events .event-link-WHP {
  background-color: #D53E22; /* 北小 */
}

.internal-events .event-link-WI {
  background-color: #27306B; /* 國際部 */
}

.internal-events .event-link-WP {
  background-color: #157E61; /* 西小 */
}

.internal-events .event-link-WZ {
  background-color: #3195CF; /* 忠明 */
}

.internal-events .event-link-WL {
  background-color: #3B0825; /* 賴厝 */
}

.internal-events .event-link-WPLG {
  background-color: #776d1b; /* 安管 */
}

.event-link:hover {
  background-color: #006400;
  transform: translateY(-2px);
}

.event-link-WH:hover {
  background-color: #A40A5E;
  transform: translateY(-2px);
}

.event-link-WHP:hover {
  background-color: #F39800;
  transform: translateY(-2px);
}

.event-link-WI:hover {
  background-color: #0F6EB8;
  transform: translateY(-2px);
}

.event-link-WP:hover {
  background-color: #8EC31F;
  transform: translateY(-2px);
}

.event-link-WZ:hover {
  background-color: #0F6FB9;
  transform: translateY(-2px);
}

.event-link-WL:hover {
  background-color: #822E47;
  transform: translateY(-2px);
}

.event-link-WPLG:hover {
  background-color:  #cc4e01;
  transform: translateY(-2px);
}

.event-link:active {
  background-color: #004085;
  transform: translateY(0);
}

.event-link-WH:active {
  background-color: #A40A5E;
  transform: translateY(-2px);
}

.event-link-WHP:active {
  background-color: #F39800;
  transform: translateY(-2px);
}

.event-link-WI:active {
  background-color: #0F6EB8;
  transform: translateY(-2px);
}

.event-link-WP:active {
  background-color: #8EC31F;
  transform: translateY(-2px);
}

.event-link-WZ:active {
  background-color: #0F6FB9;
  transform: translateY(-2px);
}

.event-link-WL:active {
  background-color: #822E47;
  transform: translateY(-2px);
}

/* 用 flexbox 實現左右區塊並對半分配 */
.events-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.external-events, .internal-events {
  flex: 1; /* 每個區塊占用相同的寬度 */
}

/* 設定對外活動區塊背景為淺綠色 */
.external-events {
  background-color: #d4edda; /* 淺綠色背景 */
  padding: 2rem;
  border-radius: 8px;
  color: #ffffff; /* 確保文字顏色為白色，與淺綠背景對比 */
}

/* 設定校內活動區塊背景為深藍色 */
.internal-events {
  background-color: #cce5ff; /* 淡藍色背景 */
  padding: 2rem;
  border-radius: 8px;
  color: #ffffff; /* 確保文字顏色為白色，與深藍背景對比 */
}

#ScanCodeReader {
  width: 800px;
  height: 200px;
  border: 2px solid #dee2e6;
  border-radius: 8px;

  display: flex;
  flex-direction: column;   /* 上下排列 */
  justify-content: center;  /* 垂直置中 */
  align-items: center;      /* 水平置中 */
  text-align: center;       /* label 文字置中 */
}

#ScanCodeReader label {
  font-size: 1.8rem;  /* 調大字體 */
  font-weight: bold;  /* 如果想要加粗 */
  text-align: center;
  width: 100%;        /* 讓文字置中有效 */
  margin-bottom: 0.5rem; /* 跟 input 保持點距離 */
}

#scan_code {
  font-size: 1.8rem;
  padding: 1.2rem;
  width: 90%;
  max-width: 700px;
  text-align: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 0.5rem; /* label 與 input 間距 */
}

/* 響應式設計：當螢幕小於 768px 時，讓區塊垂直排列 平板畫質 */
@media (min-width: 768px) and (max-width: 1024px) {
  .events-wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  .main-container {
    padding: 1rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .event-link {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }
}

@media (max-width: 767px) {
  .header-logo {
    content: url('../images/logo_mobile.png'); /* Change to mobile logo */
    max-height: 50px; /* Smaller logo size for mobile */
  }

  .header-title {
    font-size: 1.8rem; /* Adjust font size for smaller screens */
  }

  .events-wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  .main-container {
    padding: 1rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .event-link {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }

}