/* ========= 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:#FF6A5A;
  --secondary:#FFB34E;
  --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); }

/* ===== Hero ===== */
.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; 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% }

/* 黑金版帳密提示卡 */
.note-card{ position:relative; border-radius:.6rem; padding:1rem 1.1rem; overflow:hidden; }
.note-card.blackgold{
  background: linear-gradient(180deg,#141A20 0%,#0E1419 100%);
  border:1px solid rgba(224,160,21,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(224,160,21,.20);
}
@keyframes note-sheen{ from{ transform:translateX(-130%) skewX(-18deg) } to{ transform:translateX(130%) skewX(-18deg) } }
.note-card.blackgold::before{
  content:""; position:absolute; inset:-4px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%);
  mix-blend-mode:screen; animation: note-sheen 2.2s ease-in-out infinite;
}
@keyframes note-glow{
  0%,100%{ box-shadow:0 0 0 1px rgba(224,160,21,.55), 0 0 14px rgba(224,160,21,.22), inset 0 0 16px rgba(224,160,21,.16) }
  50%    { box-shadow:0 0 0 1px rgba(224,160,21,.75), 0 0 22px rgba(224,160,21,.34), inset 0 0 22px rgba(224,160,21,.22) }
}
.note-card.blackgold::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation: note-glow 3.6s ease-in-out infinite }
@keyframes twinkle{
  0%,100%{ opacity:.15; transform:scale(.8) translateY(0) }
  50%    { opacity:.95; transform:scale(1) translateY(-2px) }
}
.note-twinkle{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.5) 40%, rgba(255,231,168,.75) 41%, rgba(224,160,21,0) 70%);
  box-shadow:0 0 12px rgba(255,231,168,.55);
  animation: twinkle 2.8s ease-in-out infinite;
}
.note-twinkle.t1{ left:10%; top:22%; animation-delay:.2s }
.note-twinkle.t2{ left:26%; top:38%; animation-delay:1.0s }
.note-twinkle.t3{ right:18%; top:28%; animation-delay:.6s }
.note-twinkle.t4{ right:8%; bottom:18%; animation-delay:1.6s }
.note-card.blackgold p{ color:rgba(255,255,255,.92) }
.note-link{ color:#FFE7A8; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#FFC957 }
.note-chip{
  padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; text-shadow:none;
  color:#FBF7E8; font-family:ui-monospace,Menlo,Monaco,"Courier New",monospace;
}
@media (prefers-reduced-motion: reduce){
  .note-card.blackgold::before, .note-card.blackgold::after, .note-twinkle{ animation:none!important }
}

/* 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;
  }
}