/* ═══════════════════════════════════════════════
   同緣共聚．觀夕自在 — 學德佛堂 2025 夕陽遊船
   styles.css  |  全站樣式
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --gold:        #C8960C;
  --gold-light:  #F5D96B;
  --gold-pale:   #FFF8E1;
  --navy:        #1A2744;
  --navy-mid:    #243460;
  --sky:         #2E7CB8;
  --sky-light:   #E8F4FD;
  --orange:      #E8682A;
  --pink:        #D4507A;
  --green:       #2E7D52;
  --green-light: #E8F5EE;
  --text:        #1A1A1A;
  --mid:         #4A4A4A;
  --muted:       #757575;
  --bg:          #FAFAF8;
  --white:       #ffffff;
  --border:      rgba(0,0,0,.08);
  --r:           14px;
  --rs:          8px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Serif TC', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}

/* ════════════════ HERO ════════════════ */
.hero {
  position: relative;
  min-height: 90vh;
  background: linear-gradient(160deg,#0D1F3C 0%,#1A2744 35%,#243460 60%,#1B3A5C 80%,#0D2B45 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 60px 20px 100px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 78%, rgba(232,104,42,.25) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 70% 82%, rgba(212,80,122,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 20% at 30% 72%, rgba(200,150,12,.15) 0%, transparent 50%);
  pointer-events: none;
}
.hero-content  { position: relative; z-index: 2; max-width: 820px; }
.hero-badge {
  display: inline-block;
  background: rgba(200,150,12,.2);
  border: 1px solid rgba(200,150,12,.5);
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 3px;
  padding: 6px 22px;
  border-radius: 100px;
  margin-bottom: 28px;
  font-family: 'Noto Sans TC', sans-serif;
}
.hero h1 {
  font-size: clamp(34px,6vw,60px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero-sub {
  font-size: clamp(15px,2.5vw,21px);
  color: rgba(255,255,255,.8);
  margin-bottom: 28px;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 1px;
}
.divider { width: 56px; height: 2px; background: var(--gold); margin: 0 auto 28px; border-radius: 2px; }
.hero-meta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.meta-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  padding: 10px 18px;
  border-radius: 100px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
}
.meta-pill .ic { font-size: 17px; }
.cta {
  display: inline-block;
  background: linear-gradient(135deg,#C8960C,#E8B830);
  color: #1A1A00;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 48px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 1px;
  font-family: 'Noto Sans TC', sans-serif;
  box-shadow: 0 8px 32px rgba(200,150,12,.4);
  transition: transform .2s, box-shadow .2s;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(200,150,12,.5); }
.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.35);
  font-size: 12px;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 2px;
  animation: bob 2s infinite;
}
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* ════════════════ LAYOUT HELPERS ════════════════ */
.sec     { padding: 72px 20px; }
.wrap    { max-width: 900px; margin: 0 auto; }
.sbadge  { font-family:'Noto Sans TC',sans-serif; font-size:12px; font-weight:700; letter-spacing:3px; color:var(--gold); margin-bottom:12px; }
.stitle  { font-size:clamp(22px,3.5vw,34px); font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.3; }
.sdesc   { font-size:15px; color:var(--mid); margin-bottom:36px; font-family:'Noto Sans TC',sans-serif; max-width:620px; }
.dl      { width:46px; height:3px; background:var(--gold); border-radius:2px; margin-bottom:14px; }

/* Dark section overrides */
.dark .sbadge  { color: var(--gold-light); }
.dark .stitle  { color: #fff; }
.dark .sdesc   { color: rgba(255,255,255,.7); }
.dark .dl      { background: var(--gold-light); }

/* Info boxes */
.infobox      { border-radius:var(--rs); padding:14px 18px; font-family:'Noto Sans TC',sans-serif; font-size:13px; margin-top:16px; }
.infobox.warn { background:#FFF8E1; border:1px solid rgba(200,150,12,.3); color:#7C5E00; }
.infobox.tip  { background:var(--green-light); border:1px solid rgba(46,125,82,.25); color:#1B5E3A; }
.infobox.alert{ background:rgba(232,104,42,.1); border:1px solid rgba(232,104,42,.35); color:#9A3412; }

/* ════════════════ HIGHLIGHTS ════════════════ */
.hi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; }
.hi-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:26px 20px; text-align:center; transition:transform .2s,box-shadow .2s;
}
.hi-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.hi-icon { font-size:36px; margin-bottom:12px; display:block; }
.hi-card h3 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:7px; }
.hi-card p  { font-size:13px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; line-height:1.6; }

/* ════════════════ VESSEL STATS ════════════════ */
.pgrid  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pframe {
  border-radius:var(--rs); overflow:hidden; height:220px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:7px;
  color:rgba(255,255,255,.45); font-family:'Noto Sans TC',sans-serif; font-size:12px; text-align:center; padding:12px;
}
.pframe .fi { font-size:30px; opacity:.45; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; margin-top:28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--rs); padding:22px 24px; }
.stat .num { font-size:26px; font-weight:700; color:var(--gold-light); }
.stat .lbl { font-size:11px; color:rgba(255,255,255,.5); font-family:'Noto Sans TC',sans-serif; margin-top:4px; }

/* ════════════════ TIMELINE ════════════════ */
.tl { position:relative; }
.tl::before { content:''; position:absolute; left:54px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--gold),rgba(200,150,12,.1)); }
.tli  { display:flex; gap:20px; margin-bottom:22px; align-items:flex-start; }
.tlt  { min-width:108px; text-align:right; font-family:'Noto Sans TC',sans-serif; font-size:13px; font-weight:700; color:var(--gold); padding-top:13px; }
.tld  { width:13px; height:13px; border-radius:50%; background:var(--gold); border:3px solid var(--white); box-shadow:0 0 0 2px var(--gold); margin-top:16px; flex-shrink:0; position:relative; z-index:1; }
.tld.peak { width:18px; height:18px; background:var(--orange); box-shadow:0 0 0 2px var(--orange),0 0 14px rgba(232,104,42,.45); }
.tlc { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--rs); padding:12px 16px; }
.tlc h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.tlc p  { font-size:13px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; line-height:1.6; }
.tlc.peak { background:linear-gradient(135deg,#FFF3E0,#FFF8E1); border-color:rgba(200,150,12,.3); }
.tlc.peak h4 { color:var(--orange); }

/* ════════════════ SCRIPT BLOCKS ════════════════ */
.script-block { background:var(--bg); border-left:4px solid var(--gold); border-radius:0 var(--rs) var(--rs) 0; padding:16px 20px; margin-bottom:14px; }
.script-block .phase { font-family:'Noto Sans TC',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; color:var(--gold); margin-bottom:8px; }
.script-block h4 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.script-block p, .script-block li { font-size:13px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; line-height:1.7; }
.script-block ul { margin-left:16px; margin-top:6px; }
.dialogue { background:#fff; border:1px solid var(--border); border-radius:6px; padding:10px 14px; margin-top:8px; font-family:'Noto Sans TC',sans-serif; font-size:13px; color:var(--mid); font-style:italic; line-height:1.65; }
.dialogue strong { color:var(--navy); font-style:normal; }

/* ════════════════ ROUTE ════════════════ */
.route-bg { background:var(--sky-light); }
.route-flow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.rnode { background:#fff; border:1.5px solid var(--sky); color:var(--navy); font-family:'Noto Sans TC',sans-serif; font-size:13px; font-weight:700; padding:9px 16px; border-radius:100px; white-space:nowrap; }
.rnode.s { background:var(--navy); color:#fff; border-color:var(--navy); }
.rnode.e { background:var(--green); color:#fff; border-color:var(--green); }
.rarrow  { color:var(--sky); font-size:18px; font-weight:700; }
.tcards  { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.tcard   { background:#fff; border:1px solid var(--border); border-radius:var(--rs); padding:18px 20px; }
.tcard h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; font-family:'Noto Sans TC',sans-serif; }
.tcard ul { list-style:none; }
.tcard li { font-size:12px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; padding:5px 0; border-bottom:1px solid var(--border); display:flex; gap:6px; }
.tcard li:last-child { border-bottom:none; }
.tcard li::before { content:'▸'; color:var(--sky); flex-shrink:0; }

/* ════════════════ SAFETY ════════════════ */
.safety-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:28px; }
.scard { border-left:4px solid var(--green); background:var(--green-light); border-radius:0 var(--rs) var(--rs) 0; padding:16px 18px; }
.scard h4 { font-size:14px; font-weight:700; color:var(--green); margin-bottom:5px; font-family:'Noto Sans TC',sans-serif; }
.scard p  { font-size:13px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; }
.checklist { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:22px 26px; }
.checklist h4 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:14px; font-family:'Noto Sans TC',sans-serif; }
.cklist { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:8px; }
.cklist li { font-size:13px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; display:flex; align-items:flex-start; gap:7px; }
.cklist li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }

/* ════════════════ REGISTRATION ════════════════ */
.reg-bg { background:linear-gradient(135deg,var(--navy) 0%,#243460 50%,#1B3A5C 100%); padding:72px 20px; }
.reg-layout { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.rbox { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:var(--r); padding:26px; }
.rrow { display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.rrow:last-child { border-bottom:none; }
.ric  { font-size:20px; flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(200,150,12,.15); border-radius:9px; color:var(--gold-light); }
.rlbl { font-size:10px; font-family:'Noto Sans TC',sans-serif; color:rgba(255,255,255,.45); letter-spacing:1px; margin-bottom:3px; }
.rval { font-size:14px; color:#fff; font-family:'Noto Sans TC',sans-serif; font-weight:500; }
.rval.price { font-size:30px; font-weight:700; color:var(--gold-light); }
.bankbox { background:rgba(200,150,12,.1); border:1px solid rgba(200,150,12,.3); border-radius:var(--rs); padding:14px 18px; margin-top:14px; }
.bankbox .bt { font-family:'Noto Sans TC',sans-serif; font-size:11px; color:var(--gold-light); letter-spacing:2px; margin-bottom:8px; }
.bankbox .bd { font-family:monospace; font-size:16px; color:#fff; letter-spacing:1px; }
.bankbox .bs { font-family:'Noto Sans TC',sans-serif; font-size:11px; color:rgba(255,255,255,.45); margin-top:4px; }
.warnbox { background:rgba(232,104,42,.15); border:1px solid rgba(232,104,42,.4); border-radius:var(--rs); padding:12px 16px; margin-top:14px; font-family:'Noto Sans TC',sans-serif; font-size:13px; color:#FFB384; }
/* 退費政策 box */
.refund-box { background:rgba(46,125,82,.12); border:1px solid rgba(46,125,82,.4); border-radius:var(--rs); padding:14px 18px; margin-top:14px; font-family:'Noto Sans TC',sans-serif; font-size:13px; color:#A8F0C6; line-height:1.75; }
.refund-box strong { color:#6EE7B7; }
.bclassbox { background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.bclass-head { background:linear-gradient(135deg,var(--gold),#E8B830); padding:14px 20px; font-family:'Noto Sans TC',sans-serif; font-size:14px; font-weight:700; color:#1A1A00; }
.bclass-frame iframe { width:100%; height:580px; border:none; display:block; }

/* ════════════════ STAFF ════════════════ */
.staff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:14px; }
.sfc { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:20px; }
.sfr { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.rb       { font-family:'Noto Sans TC',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; padding:3px 11px; border-radius:100px; }
.rb.lead  { background:#E8F4FD; color:var(--sky); }
.rb.nav   { background:#FFF3E0; color:var(--orange); }
.rb.host  { background:#F3E8FF; color:#7C3AED; }
.rb.care  { background:var(--green-light); color:var(--green); }
.rb.photo { background:#FCE7F3; color:var(--pink); }
.rb.prop  { background:#FEF9C3; color:#92400E; }
.sc { font-family:'Noto Sans TC',sans-serif; font-size:11px; color:var(--muted); margin-left:auto; }
.sfc h4 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:9px; }
.stasks { list-style:none; }
.stasks li { font-size:12px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; padding:5px 0; border-bottom:1px solid var(--border); display:flex; gap:6px; }
.stasks li:last-child { border-bottom:none; }
.stasks li::before { content:'•'; color:var(--gold); flex-shrink:0; }
.claim { display:inline-block; font-family:'Noto Sans TC',sans-serif; font-size:11px; background:#F0F7FF; color:var(--sky); border:1px solid rgba(46,124,184,.3); padding:4px 11px; border-radius:100px; margin-top:11px; cursor:pointer; transition:background .15s; }
.claim:hover { background:#D6ECFF; }
.mtable { width:100%; border-collapse:collapse; font-family:'Noto Sans TC',sans-serif; font-size:13px; }
.mtable th { text-align:left; padding:10px 13px; color:var(--muted); font-weight:500; border-bottom:1px solid var(--border); background:var(--bg); }
.mtable td { padding:10px 13px; border-bottom:1px solid var(--border); vertical-align:top; }
.mtable td:first-child { color:var(--gold); font-weight:700; white-space:nowrap; }
.mtable tr:last-child td { border-bottom:none; }

/* ════════════════ CONCERNS ════════════════ */
.clist { display:flex; flex-direction:column; gap:12px; }
.citem { display:flex; gap:14px; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:var(--rs); padding:16px 18px; }
.citem.warn { border-left:4px solid var(--gold); }
.citem.ok   { border-left:4px solid var(--green); }
.cico { font-size:22px; flex-shrink:0; }
.cbody h4 { font-size:14px; font-weight:700; margin-bottom:4px; font-family:'Noto Sans TC',sans-serif; }
.warn .cbody h4 { color:#B45309; }
.ok   .cbody h4 { color:var(--green); }
.cbody p { font-size:12px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; line-height:1.65; }

/* ════════════════ SHOPS ════════════════ */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:28px; }
.shopcard { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; transition:transform .2s; }
.shopcard:hover { transform:translateY(-3px); }
.shopcard.veg { border-left:3px solid var(--green); }
.stag       { font-family:'Noto Sans TC',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; padding:3px 10px; border-radius:100px; margin-bottom:8px; display:inline-block; }
.stag.food  { background:#FFF3E0; color:var(--orange); }
.stag.veg   { background:var(--green-light); color:var(--green); }
.stag.sweet { background:#FCE7F3; color:var(--pink); }
.shopcard h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.shopcard p  { font-size:12px; color:var(--mid); font-family:'Noto Sans TC',sans-serif; line-height:1.6; }

/* ════════════════ PROMO COPY ════════════════ */
.promo-ver { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:22px 24px; margin-bottom:16px; }
.promo-ver .label { display:inline-block; font-family:'Noto Sans TC',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; padding:3px 12px; border-radius:100px; background:var(--sky-light); color:var(--sky); margin-bottom:12px; }
.promo-ver h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:10px; font-family:'Noto Sans TC',sans-serif; }
.promo-text { font-family:'Noto Sans TC',sans-serif; font-size:13px; color:var(--mid); line-height:1.85; white-space:pre-line; }

/* Copy button */
.copy-btn { display:inline-flex; align-items:center; gap:6px; font-family:'Noto Sans TC',sans-serif; font-size:12px; background:var(--sky-light); color:var(--sky); border:1px solid rgba(46,124,184,.3); padding:5px 14px; border-radius:100px; margin-top:12px; cursor:pointer; transition:background .15s; }
.copy-btn:hover { background:#BDDBF5; }
.copy-btn.copied { background:#D1FAE5; color:var(--green); border-color:rgba(46,125,82,.3); }

/* ════════════════ FOOTER ════════════════ */
footer { background:var(--navy); color:rgba(255,255,255,.55); text-align:center; padding:48px 20px; font-family:'Noto Sans TC',sans-serif; font-size:13px; }
footer strong { color:var(--gold-light); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width:680px) {
  .reg-layout { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .pgrid { grid-template-columns:1fr; }
  .tcards { grid-template-columns:1fr; }
  .route-flow { flex-direction:column; align-items:flex-start; }
  .tl::before { left:46px; }
  .tlt { min-width:88px; font-size:11px; }
}

/* ════════════════ PHOTO GRID（實際照片）════════════════ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.photo-wrap {
  border-radius: var(--rs);
  overflow: hidden;
  height: 220px;          /* 固定高度，三格等高 */
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 裁切填滿，不變形 */
  object-position: center;
  display: block;
  transition: transform .35s ease;
}
.photo-wrap:hover img { transform: scale(1.04); }
.photo-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: rgba(255,255,255,.88);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 12px;
  padding: 16px 10px 8px;
  text-align: center;
}
@media (max-width: 580px) {
  .pgrid { grid-template-columns: 1fr; }
  .photo-wrap { height: 200px; }
}