:root {
  --nav-blue: #0480b1;
  --focus-blue: #ffffff;
  --glass-panel: rgba(74, 79, 84, 0.85);
  --glass-border: rgb(255, 255, 255);
  --text-dim: rgb(255, 255, 255);
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #0b1726; 
  background-image: url('/圖片/DSC_1999.avif');
  background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
  color: #fff;
  overflow-x: hidden;
}

.content-limit {
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 18px 60px;
}

/* 🔝 標題區域 */
.page-top-nav { text-align: center; margin-bottom: 25px; }
.page-top-nav h1 { font-size: 2.2rem; font-weight: 900; margin-bottom: 8px; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.886); }
.text-link-btn { background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); color: #fff; border-radius: 50px; padding: 6px 16px; font-size: 0.75rem; cursor: pointer; }

/* 🃏 核心面板 */
.board-panel {
  background: var(--glass-panel); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border); border-radius: 28px; padding: 20px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

/* 🌟 Tab 切換按鈕樣式 */
.tab-switcher { display: flex; gap: 8px; margin-bottom: 24px; background: rgba(0,0,0,0.3); border-radius: 20px; padding: 6px; }
.tab-item {
  flex: 1; border: none; padding: 12px; border-radius: 14px; background: transparent; color: var(--text-dim);
  font-weight: 700; cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s;
}
.tab-item.active { background: #fff; color: #111; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

/* ⌨️ 輸入格 */
.grid-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 5px; }
.item-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.item-group label { font-size: 0.85rem; font-weight: 800; margin-bottom: 8px; color: var(--focus-blue); opacity: 0.9; }
/* ⌨️ 輸入格基礎樣式優化 */
.item-group input, .item-group textarea {
  background: #ffffff;
  border: 2px solid #e0e0e0; /* 稍微加粗邊框 */
  border-radius: 14px;
  color: #333333; 
  padding: 14px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease; /* 讓所有變化都有平滑動畫 */
  caret-color: var(--nav-blue); /* 讓打字的閃爍游標變成藍色 */
}

/* 🌟 當滑鼠點擊輸入框時的「打字中」動畫效果 */
.item-group input:focus, .item-group textarea:focus {
  border-color: var(--nav-blue);
  background: #ffffff;
  /* 增加一個呼吸燈發光效果 */
  box-shadow: 0 0 0 4px rgba(4, 128, 177, 0.15);
  transform: translateY(-2px); /* 輕微浮起感 */
}

/* 讓 Placeholder (提示字) 稍微淡出一點點 */
.item-group input::placeholder, .item-group textarea::placeholder {
  color: #aaa;
  transition: opacity 0.3s ease;
}

.item-group input:focus::placeholder, .item-group textarea:focus::placeholder {
  opacity: 0.5;
}
.item-group input:focus, .item-group textarea:focus { border-color: var(--focus-blue); background: rgb(255, 255, 255); }
.bottom-info { text-align: right; margin-top: 5px; }
.word-count { font-size: 0.75rem; color: var(--text-dim); }

/* 🖼️ 檔案預覽清單 */
.previews-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 15px; }
.thumb-item { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--glass-border); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.del-thumb { position: absolute; top: 0; right: 0; background: #f00; border: none; color: #fff; width: 22px; height: 22px; font-size: 10px; cursor: pointer; font-weight: bold; }

/* 上傳框與按鈕 */
.upload-box { background: rgba(0,0,0,0.25); border: 2px dashed var(--glass-border); border-radius: 20px; padding: 25px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 15px; }
.upload-box:hover { border-color: var(--focus-blue); background: rgba(0,0,0,0.4); }
.send-action { width: 100%; padding: 16px; border: none; border-radius: 18px; background: var(--nav-blue); color: #fff; font-weight: 900; font-size: 1.1rem; cursor: pointer; transition: 0.3s; margin-top: 10px; box-shadow: 0 4px 20px rgba(0, 105, 148, 0.3); }

/* 其他輔助 CSS */
.toast-card { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #fff; color: #111; padding: 12px 25px; border-radius: 50px; font-weight: 800; z-index: 100000; transition: 0.5s cubic-bezier(0.17, 0.88, 0.35, 1.2); }
.toast-card.show { transform: translateX(-50%) translateY(0); }
.reveal { animation: fadeInUp 0.7s ease backwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 針對手機寬度修正 */
@media (max-width: 520px) { .grid-inputs { grid-template-columns: 1fr; } }
/* =========================================
   💡 補上的底部投稿說明樣式
   ========================================= */

.guide-card {
  margin-top: 25px; /* 與上方卡片的間距 */
  background: var(--glass-panel);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 20px 40px rgba(247, 245, 245, 0.3);
}

.guide-card h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--focus-blue);
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 數字圖標小圈圈 */
.guide-item .num {
  width: 20px;
  height: 20px;
  background: var(--focus-blue);
  color: #0b1726;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.guide-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.guide-item b {
  color: var(--focus-blue);
}

/* 讓訪問人數往下移一點，不要擠在一起 */
#visitor-count {
  margin-top: 40px;
  opacity: 0.6;
}