/* ========= Base ========= */
html{ scroll-behavior:smooth }
[x-cloak]{ display:none!important }

:root{
  --ink:#1E2630;
  --ink-70:rgba(30,38,48,.72);
  --rule:#1f29371a;
  --paper:#FFFFFF;
  --primary:#826DFA;     /* 藍紫（點綴） */
  --secondary:#F7D800;   /* 金橙（主要CTA） */
  --accent:#2CA8E2;      /* 天藍（輔助） */
  --shadow:0 10px 24px rgba(0,0,0,.10);
  --ctrl-h:38px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.text-ink{ color:var(--ink) }
.bg-paper{ background:var(--paper)!important }
.masthead{ font-family:"Inter","Noto Sans TC",system-ui,sans-serif; letter-spacing:.2px }

/* 細線/外框 */
.rule-b{ box-shadow: inset 0 -1px 0 var(--rule) }
.rule-t{ box-shadow: inset 0 1px 0 var(--rule) }
.rule-y{ box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule) }
.rule-x{ box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule) }
.ornate{ position: relative; border: none; background: #fff; border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.ornate:hover{ box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }

/* ===== 全幅主視覺（延展左右邊緣） ===== */
.edge-bleed{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
}

.hero{ position:relative; overflow:hidden; line-height:0; }
.hero picture{ display:block; }
.hero-img{
  display:block; position:relative; width:100%; height:auto;
  object-fit:contain; object-position:center; vertical-align:top;
}
.hero-veil{ display:none; }
.hero-inner{ position:absolute; inset:0; height:auto; padding:0; margin:0; pointer-events:none; }
.hero-inner .min-w-0{ padding:0; }

/* Tabs */
.tablink{ border-bottom:4px solid transparent; color:#475569; position:relative }
.tablink:hover{ color:var(--ink) }
.tablink.active{ border-color:var(--primary); color:var(--ink); font-weight:600 }

/* About 文字排版 */
.copy-serif{ font-family:inherit }
.about-copy{ max-width:none; line-height:1.85; color:var(--ink) }
.about-copy > * + *{ margin-top:.85rem }
.about-copy h2,.about-copy h3{ line-height:1.35; margin-top:1.2rem; margin-bottom:.4rem }
.about-copy p{ margin:.6rem 0 }
.about-copy ul, .about-copy ol{ padding-left:1.25rem; margin:.6rem 0 }
.about-copy li{ margin:.35rem 0 }
.about-copy ul ul, .about-copy ol ol{ margin-top:.35rem }
.about-copy strong{ font-weight:700 }
.about-copy .note{ color:var(--ink-70); font-size:.92rem }
.about-copy .with-bullet{ position:relative; padding-left:1.4em }
.about-copy .with-bullet::before{ content:"➤"; position:absolute; left:0; color:var(--ink); font-weight:700 }

/* 表單欄位 */
.field{
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  border-radius:.55rem;
  height:var(--ctrl-h);
  padding:0 .8rem;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.field:focus{
  outline:none; border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(255,179,78,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
select.field{ appearance:auto; line-height:1.2 }
.ctrl{ box-sizing:border-box; height:var(--ctrl-h) }

/* 按鈕 */
@keyframes sheen{ from{ transform: translateX(-120%) skewX(-15deg) } to{ transform: translateX(220%) skewX(-15deg) } }
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:.72rem; font-weight:700; letter-spacing:.2px; line-height:1;
  padding:.7rem 1.1rem; transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, filter .2s ease;
  isolation:isolate; overflow:hidden; -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(44,168,226,.22), 0 0 0 6px rgba(44,168,226,.12) }
.btn::before{
  content:""; position:absolute; inset:-2px; pointer-events:none; z-index:0;
  background:linear-gradient(120deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%) skewX(-15deg);
}
.btn:hover::before{ animation:sheen 1.2s ease forwards }
.btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) }

.btn-solid{
  color:#fff; border:1px solid rgba(0,0,0,.45);
  background: linear-gradient(180deg, #2B3340 0%, #1E2630 100%);
  box-shadow: 0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-outline{
  color:var(--ink);
  border:1.6px solid var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 14px rgba(0,0,0,.10);
}
.btn-outline:hover{ transform:translateY(-1px) }
.btn-aurum{
  color:#20160B;
  border:1px solid #E0A015;
  background: linear-gradient(180deg, #FFE7A8 0%, #FFC957 60%, #FFB34E 100%);
  box-shadow: 0 10px 22px rgba(255,179,78,.28), inset 0 1px 0 rgba(255,255,255,.70);
}
.btn .btn-sparkle{
  position:absolute; z-index:1; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.4) 40%, rgba(255,231,168,.6) 41%, rgba(255,179,78,0) 80%);
  box-shadow:0 0 12px rgba(255,231,168,.45);
  opacity:0; transform: translateY(4px) scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.btn:hover .btn-sparkle, .btn:focus-visible .btn-sparkle{ opacity:1; transform:translateY(0) scale(1) }
.btn .btn-sparkle.s1{ left:10%; top:18% }
.btn .btn-sparkle.s2{ right:12%; bottom:16% }

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); z-index:1000;
  padding:.65rem .9rem; border-radius:.65rem; box-shadow:0 10px 20px rgba(0,0,0,.18);
  border:1px solid; pointer-events:none; font-weight:600; line-height:1.2
}
.toast--success{ background:rgba(30,38,48,.96); color:#fff; border-color:rgba(44,168,226,.4) }
.toast--error{ background:rgba(255,106,90,.95); color:#fff; border-color:rgba(255,255,255,.25) }

/* 進場 reveal */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none } }

@media (max-width:640px){
  table td:nth-child(3),
  table th:nth-child(3){
    width: 4em;
    min-width: 4em;
    max-width: 4.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==== 隨機雜誌翻牌卡片 ==== */
.deck{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (min-width:640px){ .deck{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.card{ perspective:900px; border:0; background:transparent; padding:0; cursor:pointer }
.card-inner{ position:relative; width:100%; height:120px; transform-style:preserve-3d; transition:transform .6s }
.card-inner.is-flipped{ transform:rotateY(180deg) }

.card-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:.75rem;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:.8rem;
  box-shadow:var(--shadow)
}
.card-back{
  background:linear-gradient(135deg,#1E2630 0%, #2B3340 100%);
  color:#fff; font-weight:800; letter-spacing:.5px
}
.card-front{
  background:#fff; border:1px solid var(--rule);
  transform:rotateY(180deg)
}
.card-front .title{ font-weight:700; line-height:1.25; margin-bottom:.25rem }
.card-front .hint{ font-size:.8rem; opacity:.75 }