/* 基底與主題 */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:#fff;
  background-image: url('/圖片/DSC_1999.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
  overflow-x: hidden; padding-top: 50px;
}
:root{
  --brand:#0a6dca; --brand-dark:#065aa8;
  --ok:#10b981; --error:#ef4444;
  --glass: rgba(255,255,255,0.18); --glass-2: rgba(255,255,255,0.22);
  --radius: 1.2rem; --shadow: 0 12px 32px rgba(0,0,0,.28);
}

/* 柔光背景動畫 */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(120deg, rgba(0,123,255,.18), rgba(0,212,255,.12) 40%, rgba(0,0,0,0) 70%);
  animation:bgFloat 18s ease-in-out infinite alternate;
}
@keyframes bgFloat{ to{ transform: translateY(-22px); } }

/* 導覽（保留） */
.main-navbar{ position:fixed; top:0; width:100%; background-color: rgba(10,109,202,.7); padding:.2rem 1.5rem; z-index:9999; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.nav-container{ display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; }
.nav-left .logo{ height:50px; display:block; }
.nav-right{ display:flex; align-items:center; }
.nav-right a{ color:#fff; text-decoration:none; margin-left:1.2rem; font-weight:700; transition:color .25s; }
.nav-right a:hover{ color:#63e6be; }

/* Hero */
.hero-section {
  text-align: center;
  padding: 1.2rem 1rem;     /* 內距大幅縮小 */
  background: var(--glass);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  margin: 1rem auto;        /* 外距縮小 */
  max-width: 500px;         /* 寬度再縮窄 */
  box-shadow: var(--shadow);
}

.hero-section h1 {
  font-size: 3rem;        /* 標題字體縮小 */
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* 卡片 */
.camera-card{
  background: var(--glass); backdrop-filter: blur(12px);
  padding: 1.5rem; border-radius: calc(var(--radius) + .3rem);
  margin: 1.5rem auto; width: min(95%, 1100px);
  box-shadow: var(--shadow); border: 1px solid var(--glass-2);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.camera-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,0,0,.32); border-color: rgba(255,255,255,.35); }
.camera-card h2{ margin:.3rem 0 1rem; text-align:center; font-size:1.4rem; font-weight:900; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* 進場 */
.reveal{ opacity:0; transform: translateY(10px) scale(.98); }
.reveal.show{ opacity:1; transform: translateY(0) scale(1); transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1); }

/* === 格子網格 === */
.form-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.input-group{
  display:flex; flex-direction:column; gap:.45rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem; padding: .9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.input-group.full{ grid-column: 1 / -1; }
.input-group textarea, .input-group input{
  width:100%; background: rgb(255, 255, 255); color:#1f2937;
  border:1px solid rgba(0,0,0,.08); border-radius: .9rem; outline:none;
  font-size:1.05rem; line-height:1.6; padding:.85rem 1rem; box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: box-shadow .25s, border-color .25s, transform .1s;
}
.input-group textarea{ resize:none; }
.input-group input:focus, .input-group textarea:focus{
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 12px 28px rgba(13,110,253,.25), 0 0 0 4px rgba(13,110,253,.12);
  transform: translateY(-1px);
}
.input-group > label{ font-weight:800; letter-spacing:.02em; color:#f8fafc; text-shadow:0 1px 2px rgba(0,0,0,.35); }

.assist-row{ display:flex; justify-content:space-between; align-items:center; font-size:.92rem; color:#f8fafc; opacity:.95; }
.counter{ opacity:.9; }

/* Dropzone */
.dropzone{
  border: 2px dashed rgba(255,255,255,.35);
  border-radius: 1rem; background: rgba(255,255,255,.08);
  padding: 1rem; transition: border-color .2s, background .2s;
}
.dropzone.dragover{ border-color:#fff; background: rgba(255,255,255,.16); }
.dropzone-inner{ display:flex; align-items:center; gap:.8rem; }
.dz-icon{ font-size:1.4rem; }
.dz-text{ font-weight:700; }
.dz-sub{ font-size:.9rem; opacity:.9; }
.link-btn{ background:transparent; border:none; color:#fff; text-decoration:underline; cursor:pointer; font-weight:900; }

/* 照片預覽 */
.preview-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:.75rem; margin-top:.8rem;
}
.thumb{
  position:relative; border-radius:.8rem; overflow:hidden; background:#111827; box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.thumb img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.thumb .remove{
  position:absolute; top:.35rem; right:.35rem; border:none; border-radius:.6rem; padding:.25rem .5rem;
  background: rgba(239,68,68,.92); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.3);
}

/* 影片預覽 */
.video-preview{ margin-top:.8rem; display:flex; align-items:center; gap:.6rem; }
.video-chip{
  display:inline-flex; align-items:center; gap:.45rem; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:.45rem .65rem; border-radius:.75rem; box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.video-chip .remove{ background: rgba(239,68,68,.92); color:#fff; border:none; border-radius:.6rem; padding:.25rem .5rem; cursor:pointer; }

/* 按鈕 */
#submit-btn{
  margin-top:1rem; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background: var(--brand); color:#fff; padding: .78rem 1.35rem; border-radius: .95rem; border:none; cursor:pointer;
  font-size:1rem; font-weight:800; letter-spacing:.02em;
  transition: transform .08s, box-shadow .25s, background .25s;
  box-shadow: 0 12px 28px rgba(10,109,202,.36); position:relative; overflow:hidden;
}
#submit-btn:hover{ background: var(--brand-dark); box-shadow:0 16px 36px rgba(6,90,168,.46);}
#submit-btn:active{ transform: translateY(1px) scale(.99); }
#submit-btn.loading{ cursor:wait; }
#submit-btn.loading .btn-text{ opacity:0; }
#submit-btn.loading::after{
  content:""; width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(255,255,255,.55); 
  border-top-color:#fff; 
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ripple */
#submit-btn .ripple{ position:absolute; border-radius:999px; pointer-events:none; width:10px; height:10px; background:#fff; opacity:.35; transform: translate(-50%,-50%); animation:ripple .6s ease-out forwards; }
@keyframes ripple{ to{ width:420px; height:420px; opacity:0; } }
/* 送出按鈕在大螢幕置中 */
#submit-btn {
  display: block;        /* 改成區塊元素 */
  margin: 1.5rem auto 0; /* 上邊距1.5rem，左右自動=置中 */
}

/* 訪問數 pill */
#visitor-count{ display:inline-block; padding:.55rem 1.15rem; margin:2rem auto 2.5rem; background: rgba(17,24,39,.6); border-radius:999px; font-weight:700; backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .25s, background .25s; }
#visitor-count:hover{ transform: translateY(-2px); background: rgba(17,24,39,.75); }

/* Toast & 動效 */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background: rgba(17,24,39,.92); color:#fff; padding:.72rem 1rem; border-radius:.9rem; box-shadow: var(--shadow); opacity:0; pointer-events:none; z-index:9999; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); transition: all .35s; }
.toast.ok{ background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(5,150,105,.95)); }
.toast.err{ background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(185,28,28,.95)); }
.shake{ animation:shake .35s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{ 10%,90%{ transform:translateX(-1px) } 20%,80%{ transform:translateX(2px) } 30%,50%,70%{ transform:translateX(-4px) } 40%,60%{ transform:translateX(4px) } }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:9998; }

/* RWD */
@media (max-width:860px){ .form-grid{ grid-template-columns: 1fr; } }
@media (max-width:560px){
  #submit-btn{ width:100%; }
  .hero-section{ 
    padding: 1.5rem 1rem;   /* 大幅縮小高度 */
    max-width: 90%;        /* 保持手機版更貼合螢幕 */
  }
  .hero-section h1 {
    font-size: 1.4rem;     /* 手機上標題再縮小 */
  }
  .hero-section .subtitle {
    font-size: 0.85rem;    /* 副標更小一點 */
  }
}

/* 藥丸按鈕 */
.pill-btn {
  display:inline-block;
  padding:.6rem 1.4rem;
  border-radius:999px;
  background: rgba(17,24,39,.7);
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
  backdrop-filter: blur(6px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  transition:all .25s;
}
.pill-btn:hover {
  background: rgba(17,24,39,.85);
  transform:translateY(-2px);
}

/* 尼名規則彈窗 */
.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index:10000;
  align-items:center;
  justify-content:center;
}
.modal-content {
  background:#1f2937;
  color:#fff;
  padding:1.5rem;
  border-radius:1rem;
  max-width: 400px;
  width: 90%;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  text-align:left;
}
.modal-content h2 {
  margin-top:0;
  font-size:1.3rem;
  font-weight:800;
}
.close-btn {
  float:right;
  font-size:1.4rem;
  cursor:pointer;
}
/* === Modal 過場動畫 === */
/* 背景層：預設隱藏（透過 opacity/visibility 控制，不用 display） */
.modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;

  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

/* 顯示狀態：觸發淡入 */
.modal.show{
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* 內容卡片的進出場：上滑 + 縮放 */
.modal-content{
  background:#1f2937; color:#fff;
  padding:1.5rem; border-radius:1rem;
  max-width: 420px; width: 90%;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  text-align:left;

  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .28s cubic-bezier(.16,.84,.44,1), opacity .28s ease;
}

/* 開啟時，內容卡片滑入放大並淡入 */
.modal.show .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 關閉時（移除 .show）會自動反向播放至初始狀態達成退場動畫 */