:root{
  --olive:#546A3A;
  --muted:#6b6f6a;
  --slate:#2F3A3B;
  --ivory:#F9F8F3;
  --container:1100px;
  --radius:10px;
}

/* reset */
*{box-sizing:border-box}
body{
  font-family: "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;color:var(--slate);background:linear-gradient(180deg,var(--ivory),#fff);
}
.container{max-width:var(--container);margin:0 auto;padding:1rem}

/* header */
.site-header{background:var(--ivory);border-bottom:1px solid #e9e9e9;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.8rem}
.brand{display:flex;align-items:center;gap:0.75rem}
.logo{height:60px;border-radius:8px;object-fit:cover}
.brand-text h1{margin:0;font-size:1.05rem;color:var(--olive)}
.slogan{margin:0;font-size:0.82rem;color:var(--muted)}
.main-nav{display:flex;gap:0.6rem;align-items:center}
.main-nav a{padding:0.45rem 0.6rem;color:var(--slate);text-decoration:none}
.nav-toggle{display:none;border:none;background:transparent;font-size:1.25rem}

/* hero */
.hero{padding:2rem 0}
.hero-inner{display:flex;gap:1.2rem;align-items:center}
.hero-text h2{margin:0;font-size:1.5rem;color:var(--slate)}
.hero-image img{width:420px;max-width:100%;height:auto;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.muted{color:var(--muted)}

/* sections */
.section{padding:1.4rem 0}
.section.alt{background:#fff}
h3{margin:0 0 0.6rem 0;color:var(--olive)}
.lead{margin:0 0 0.5rem 0;color:var(--slate)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--ivory);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 22px rgba(0,0,0,0.04)}
.glance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.glance-grid dt{font-weight:700;color:var(--slate)}
.glance-grid dd{margin:0 0 0.75rem 0;color:var(--muted)}
.accordion{margin-bottom:0.6rem;border-radius:8px;overflow:hidden}
.accordion-btn{width:100%;text-align:left;padding:0.85rem 1rem;font-weight:700;background:#f7f9f6;border:none;border-bottom:1px solid #eee;cursor:pointer}
.accordion-panel{padding:0.6rem 1rem;display:none;background:#fff;border-left:4px solid var(--olive)}
.timetable{width:100%;border-collapse:collapse}
.timetable th,.timetable td{padding:0.55rem;border-bottom:1px dashed #eee;text-align:left;font-size:0.95rem}

.checklist-grid{display:flex;gap:1.5rem}
.checklist-grid ul{list-style:disc;margin:0;padding-left:1.1rem;color:var(--slate)}
.packing-actions{margin-top:0.8rem}

.btn{background:var(--olive);color:#fff;padding:0.6rem 0.9rem;border-radius:8px;text-decoration:none;display:inline-block;margin-right:0.5rem;border:none;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--olive);color:var(--olive)}

.instructor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.instr-card{background:#fff;padding:0.6rem;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.04);text-align:center}
.instr-card img{width:100%;height:140px;object-fit:cover;border-radius:6px}

.site-footer{background:#fff;border-top:1px solid #eee;padding:1rem 0;margin-top:1rem;text-align:center;color:var(--muted)}

/* gate */
.gate{position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35));display:flex;align-items:center;justify-content:center;z-index:999}
.gate-panel{background:#fff;padding:24px;border-radius:12px;width:min(560px,96%);text-align:center;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.gate-logo{height:64px;border-radius:8px;object-fit:cover}
.gate input{width:70%;padding:10px;margin:12px 0;border:1px solid #ddd;border-radius:8px}

/* Camp Wall */
.post-form{background:#fff;padding:12px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.03);margin-bottom:12px}
.post-form label{display:block;margin:8px 0}
#postText{width:100%;min-height:90px;padding:8px;border-radius:6px;border:1px solid #eee}
.form-actions{display:flex;gap:8px;margin-top:8px;align-items:center}
.feed{display:grid;gap:12px;margin-top:14px}
.post-card{border-radius:8px;padding:10px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.post-card .meta{font-size:0.85rem;color:var(--muted);margin-bottom:6px}

/* admin UI small */
.admin-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:8px}
.admin-section{background:#fff;padding:12px;border-radius:8px;margin-bottom:12px}

/* responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .instructor-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column-reverse;align-items:flex-start}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .hero-image img{width:100%}
    /* 當選單被加上 .open 時顯示出來 */
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; /* 剛好在 header 下方 */
    left: 0;
    right: 0;
    background: var(--ivory);
    border-bottom: 1px solid #e9e9e9;
    padding: 1rem;
    gap: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  }

  /* 讓 body 在選單打開時不能捲動 (選用) */
  body.menu-open {
    overflow: hidden;
  }
}
@media (max-width:560px){
  .glance-grid{grid-template-columns:1fr}
  .instructor-grid{grid-template-columns:1fr}
  .hero-image img{height:180px;object-fit:cover}
}