/* 基礎無障礙設定 */
:root{
  --bg:#fff8e8;
  --surface:#ffffff;
  --warm:#fff0cc;
  --text:#2f2118;
  --muted:#665447;
  --primary:#0c4f8a;
  --primary-dark:#07365f;
  --accent:#f26a21;
  --focus:#111111;
  --border:#ead7b7;
  --shadow:0 10px 30px rgba(45, 29, 12, .12);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(255,248,232,.82), rgba(255,248,232,.90)),
    url("assets/banner.png") center / cover fixed no-repeat;
  line-height:1.75;
  font-size:18px;
}

a{color:var(--primary); text-underline-offset:.2em}
a:hover{color:var(--accent)}
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus{
  outline:4px solid var(--focus);
  outline-offset:4px;
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-100px;
  background:#111;
  color:#fff;
  padding:.75rem 1rem;
  z-index:999;
  border-radius:0 0 10px 10px;
}
.skip-link:focus{top:0}

.container{
  width:min(1120px, calc(100% - 2rem));
  margin-inline:auto;
}
.narrow{width:min(860px, calc(100% - 2rem))}

.site-header{
  background:rgba(255,248,232,.72);
  border-bottom:1px solid rgba(234,215,183,.8);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(45,29,12,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}
.brand h1{
  margin:.1rem 0;
  font-size:clamp(1.2rem, 2.6vw, 1.8rem);
  line-height:1.25;
}
.eyebrow,.subtitle{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.site-nav ul{
  display:flex;
  align-items:center;
  list-style:none;
  gap:.2rem;
  padding:0;
  margin:0;
}
.site-nav a{
  display:block;
  padding:.65rem .8rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
}
.site-nav a:hover{background:var(--warm)}
.menu-button{display:none}

.hero{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 96px);
  padding:4.5rem 0;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,248,232,.92) 0%, rgba(255,248,232,.72) 48%, rgba(255,238,190,.46) 100%),
    url("assets/banner.png") center / cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,226,150,.74) 0, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(12,79,138,.16) 0, transparent 34%),
    linear-gradient(180deg, rgba(255,248,232,.26), rgba(255,240,204,.78));
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,248,232,.10);
  backdrop-filter:blur(2px) saturate(1.05);
  z-index:-1;
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(330px,.72fr);
  gap:2rem;
  align-items:center;
}
.hero-text{
  background:rgba(255,248,232,.82);
  border:1px solid rgba(255,255,255,.72);
  border-radius:34px;
  padding:1.6rem;
  box-shadow:0 18px 55px rgba(45, 29, 12, .20);
  backdrop-filter:blur(14px);
}

.tag{
  display:inline-block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.35rem .8rem;
  color:var(--primary-dark);
  font-weight:800;
}
.hero h2{
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.12;
  margin:.75rem 0 1rem;
}
.hero p{font-size:1.12rem}

.lobby-shell{
  position:relative;
}
.lobby-panel{
  position:relative;
}
.lobby-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
  margin-top:1.35rem;
}
.lobby-action{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.65rem;
  row-gap:.1rem;
  align-items:center;
  min-height:92px;
  padding:.85rem;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(234,215,183,.92);
  border-radius:20px;
  box-shadow:0 4px 14px rgba(45,29,12,.08);
}
.lobby-action:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.94);
  color:var(--primary-dark);
  box-shadow:0 12px 24px rgba(45,29,12,.13);
}
.lobby-action span{
  grid-row:1 / span 2;
  font-size:1.9rem;
}
.lobby-action strong{
  font-size:1.08rem;
  line-height:1.25;
}
.lobby-action small{
  color:var(--muted);
  line-height:1.35;
}

.monthly-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.74);
  border-radius:34px;
  padding:1.15rem;
  box-shadow:0 18px 55px rgba(45, 29, 12, .20);
  backdrop-filter:blur(14px);
}
.month-label{
  display:inline-block;
  margin:0 0 .25rem;
  background:var(--warm);
  color:var(--primary-dark);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.25rem .75rem;
  font-weight:900;
}
.monthly-card h3{
  margin:.25rem 0 .75rem;
  font-size:1.45rem;
  line-height:1.35;
}
.monthly-image{
  margin:0 0 1rem;
}
.monthly-image img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:22px;
  border:1px solid var(--border);
}
figcaption{
  font-size:.9rem;
  color:var(--muted);
  margin:.5rem .2rem 0;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem;
}
.button{
  display:inline-block;
  border:0;
  border-radius:999px;
  padding:.8rem 1.25rem;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  font-size:1rem;
}
.primary{background:var(--primary); color:#fff}
.primary:hover{background:var(--primary-dark); color:#fff}
.secondary{background:#fff; color:var(--primary); border:2px solid var(--primary)}
.secondary:hover{background:var(--warm)}

.section,.quick-links{padding:3rem 0}
.section > .container,
.quick-links > .container{
  background:rgba(255,248,232,.90);
  border:1px solid rgba(255,255,255,.62);
  border-radius:30px;
  padding:1.5rem;
  box-shadow:0 12px 36px rgba(45,29,12,.10);
  backdrop-filter:blur(10px);
}
.warm{background:rgba(255,240,204,.50)}
.section-heading{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  margin-bottom:1.5rem;
}
.section h2,.quick-links h2{
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  margin:0 0 .5rem;
}
.section-heading p{margin:0;color:var(--muted)}

.cards{
  display:grid;
  gap:1rem;
}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:0 4px 16px rgba(45, 29, 12, .06);
}
.link-card{
  text-decoration:none;
  color:var(--text);
}
.link-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.card h3{
  margin:.2rem 0 .5rem;
  font-size:1.35rem;
}
.icon{font-size:2rem}

.search-label{
  display:block;
  font-weight:800;
  margin-bottom:.4rem;
}
.search-input,input,select,textarea{
  width:100%;
  border:2px solid #9d8b73;
  border-radius:14px;
  padding:.8rem 1rem;
  font:inherit;
  background:#fff;
  color:var(--text);
}
.help-text,.status{
  color:var(--muted);
  font-size:.95rem;
}
.table-wrap{
  overflow:auto;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(45, 29, 12, .06);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}
caption{
  text-align:left;
  font-weight:800;
  padding:1rem;
}
th,td{
  padding:.85rem 1rem;
  border-top:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
th{
  background:#fff4d8;
}

.resource-list{
  padding-left:1.2rem;
}
.form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:0 4px 16px rgba(45, 29, 12, .06);
}
.field{margin-bottom:1rem}
.field label{
  display:block;
  font-weight:800;
  margin-bottom:.35rem;
}
.timeline{
  list-style:none;
  padding:0;
  display:grid;
  gap:1rem;
}
.timeline li{
  background:#fff;
  border:1px solid var(--border);
  border-left:8px solid var(--accent);
  border-radius:var(--radius);
  padding:1rem;
}
.timeline time{
  display:block;
  color:var(--primary-dark);
  font-weight:800;
}
.timeline strong{display:block;font-size:1.2rem}

.faq{
  display:grid;
  gap:1rem;
}
details{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
}
summary{
  cursor:pointer;
  font-weight:900;
  color:var(--primary-dark);
}
summary::marker{color:var(--accent)}

.site-footer{
  background:#2f2118;
  color:#fff8e8;
  padding:2rem 0;
}
.site-footer p{margin:.25rem 0}

[hidden]{display:none !important}

@media (max-width:900px){
  .hero-grid,.cards.two,.cards.three,.cards.four{
    grid-template-columns:1fr;
  }
  .hero{
    padding:2rem 0;
    background-position:center top;
  }
  .hero-text,
.lobby-shell{
  position:relative;
}
.lobby-panel{
  position:relative;
}
.lobby-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
  margin-top:1.35rem;
}
.lobby-action{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.65rem;
  row-gap:.1rem;
  align-items:center;
  min-height:92px;
  padding:.85rem;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(234,215,183,.92);
  border-radius:20px;
  box-shadow:0 4px 14px rgba(45,29,12,.08);
}
.lobby-action:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.94);
  color:var(--primary-dark);
  box-shadow:0 12px 24px rgba(45,29,12,.13);
}
.lobby-action span{
  grid-row:1 / span 2;
  font-size:1.9rem;
}
.lobby-action strong{
  font-size:1.08rem;
  line-height:1.25;
}
.lobby-action small{
  color:var(--muted);
  line-height:1.35;
}

.monthly-card{
    background:rgba(255,248,232,.94);
  }
  .menu-button{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    border:0;
    border-radius:999px;
    padding:.65rem 1rem;
    font-weight:800;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff8e8;
    border-bottom:1px solid var(--border);
    padding:1rem;
  }
  .site-nav.open{display:block}
  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
  }
  .site-nav a{border-radius:12px}
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}


@media (max-width:1100px){
  .lobby-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  body{font-size:17px}
  .hero h2{font-size:clamp(2rem,12vw,3.2rem)}
  .lobby-actions{grid-template-columns:1fr}
  .section > .container,
  .quick-links > .container{
    padding:1rem;
    border-radius:22px;
  }
}