/* Gudubi — 手抄本風：皮紙、鐵膽墨、朱紅標題、青金石與金箔；背景是會隨捲動變化的天色（落日→夜→黎明） */
:root{
  --vellum:#E8DCC0; --vellum-2:#D8C6A0; --vellum-3:#C9B486;
  --ink:#2B2219; --ink-soft:#5E5142; --ink-faint:#8C7C64;
  --rubric:#A3301E; --rubric-deep:#7E2316;
  --lapis:#2C4A86; --lapis-deep:#1A2D57;
  --gold:#C59B3F; --gold-hi:#EBD08A;
  --night:#0D1328; --on-night:#E9DFC9; --on-night-soft:#AFA690;
  --hand:"LXGW WenKai TC","Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","PMingLiU","MingLiU",serif;
  --serif:"Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","思源宋體","PMingLiU","MingLiU",serif;
  --mark:"Grenze Gotisch","UnifrakturMaguntia",serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;touch-action:manipulation}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--night);color:var(--on-night);font-family:var(--serif);font-size:17px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* 天色畫布：整頁共用一片天 */
/* 高度用 100lvh（網址列收起來時的高度），手機捲動時網址列伸縮不會讓天空露邊或重畫 */
#gdbSky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;display:block;background:var(--night)}

/* ---------- 導覽列 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:62px;display:flex;align-items:center;gap:22px;padding:0 clamp(16px,4vw,48px);
  transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.nav.solid{background:rgba(11,15,32,.72);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 1px 0 rgba(197,155,63,.25)}
.nav .mark{font-family:var(--mark);font-size:30px;line-height:1;text-decoration:none;color:var(--gold-hi);letter-spacing:.02em;
  text-shadow:0 0 18px rgba(235,208,138,.25);margin-right:auto}
.nav a.lnk{position:relative;text-decoration:none;color:var(--on-night);font-family:var(--hand);font-size:17px;letter-spacing:.12em;padding:4px 0}
.nav a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a.lnk:hover::after,.nav a.lnk[aria-current="page"]::after{transform:scaleX(1)}
.nav a.lnk.priv{color:var(--gold-hi)}
.nav a.lnk.priv::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rubric);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 2px rgba(163,48,30,.3)}
.seal{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--hand);font-size:17px;color:#F6E7C9;
  background:radial-gradient(circle at 35% 30%,#C4452E,var(--rubric) 45%,var(--rubric-deep) 100%);
  box-shadow:inset 0 0 0 3px rgba(255,220,190,.18),inset 0 -3px 6px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.seal:hover{box-shadow:inset 0 0 0 3px rgba(255,220,190,.35),inset 0 -3px 6px rgba(0,0,0,.35),0 0 14px rgba(163,48,30,.55)}
.seal.guest:hover{background:rgba(235,208,138,.08)}
.seal.guest{background:none;border:1.5px solid rgba(235,208,138,.55);color:var(--gold-hi);box-shadow:none;width:auto;padding:0 16px;border-radius:20px;font-size:15px;letter-spacing:.15em}
.menu{position:absolute;top:58px;right:clamp(16px,4vw,48px);min-width:200px;padding:10px 0;background:var(--vellum);color:var(--ink);border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);display:none}
.menu.open{display:block;animation:unroll .32s var(--ease)}
.menu .who{padding:4px 18px 10px;border-bottom:1px solid var(--vellum-3);font-family:var(--hand)}
.menu .who small{display:block;color:var(--ink-faint);font-family:var(--serif);font-size:13px}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:8px 18px;border:0;background:none;text-decoration:none;cursor:pointer;font-size:15px}
.menu a:hover,.menu button:hover{background:rgba(163,48,30,.08);color:var(--rubric)}
/* 後台齒輪 */
.nav .gear{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--gold-hi);transition:background .25s,transform .5s var(--ease)}
.nav .gear svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.nav .gear:hover{background:rgba(235,208,138,.1);transform:rotate(60deg)}
.nav .gear[aria-current="page"]{background:rgba(235,208,138,.14)}
@media (max-width:640px){.nav{gap:14px}.nav a.lnk{font-size:15px;letter-spacing:.06em}.nav .mark{font-size:26px}.nav a.lnk.hide-sm{display:none}}

/* ---------- 皮紙 ---------- */
.sheet{position:relative;color:var(--ink);background-color:var(--vellum);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%,rgba(255,250,235,.35),transparent 70%);
  box-shadow:inset 0 0 80px rgba(120,82,30,.28),inset 0 0 0 1px rgba(120,82,30,.18),0 30px 80px rgba(0,0,0,.45);border-radius:2px}
.sheet::before,.sheet::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23A3301E' stroke-width='1.3'%3E%3Cpath d='M4 42V10q0-6 6-6h32'/%3E%3Cpath d='M10 36V16q0-6 6-6h20' stroke='%23C59B3F'/%3E%3Ccircle cx='10' cy='10' r='2.4' fill='%23A3301E'/%3E%3C/svg%3E") no-repeat}
.sheet::before{top:12px;left:12px}
.sheet::after{bottom:12px;right:12px;transform:rotate(180deg)}
.sheet.plain::before,.sheet.plain::after{display:none}

/* 標題與內文 */
.h-hand{font-family:var(--hand);font-weight:400;letter-spacing:.12em;line-height:1.35}
.rubric{color:var(--rubric)}
.lede{font-size:18px;color:var(--ink-soft)}
.prose{max-width:34em}
.prose p{margin:0 0 1.1em;text-align:justify;text-justify:inter-ideograph}
.prose h2{font-family:var(--hand);font-weight:400;font-size:26px;letter-spacing:.14em;color:var(--rubric);margin:1.8em 0 .6em}
.prose h3{font-family:var(--hand);font-weight:400;font-size:20px;letter-spacing:.1em;margin:1.5em 0 .4em}
.prose a{color:var(--lapis);text-decoration-color:rgba(44,74,134,.4);text-underline-offset:3px}
.prose a:hover{color:var(--rubric)}
.prose blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.2em;border-left:2px solid var(--gold);color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:1.4em}
.prose hr{border:0;height:18px;margin:2em 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18'%3E%3Cpath d='M0 9h48M72 9h48' stroke='%23C59B3F'/%3E%3Cpath d='M60 2l7 7-7 7-7-7z' fill='%23A3301E'/%3E%3C/svg%3E") center/120px 18px no-repeat}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-family:var(--hand);font-size:18px;letter-spacing:.18em;
  padding:12px 26px 12px 28px;border-radius:2px;transition:transform .2s var(--ease),box-shadow .3s,background .3s}
.btn-rubric{color:#F6E7C9;background:linear-gradient(180deg,#B5392A,var(--rubric) 55%,var(--rubric-deep));
  box-shadow:inset 0 0 0 1px rgba(235,208,138,.5),inset 0 0 0 4px var(--rubric-deep),inset 0 0 0 5px rgba(235,208,138,.35),0 6px 20px rgba(0,0,0,.35)}
.btn-rubric:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(235,208,138,.8),inset 0 0 0 4px var(--rubric-deep),inset 0 0 0 5px rgba(235,208,138,.55),0 10px 26px rgba(163,48,30,.35)}
.btn-line{color:var(--gold-hi);background:transparent;box-shadow:inset 0 0 0 1px rgba(235,208,138,.55)}
.btn-line:hover{background:rgba(235,208,138,.08)}
.sheet .btn-line{color:var(--lapis);box-shadow:inset 0 0 0 1px rgba(44,74,134,.5)}
.sheet .btn-line:hover{background:rgba(44,74,134,.07)}

/* ---------- 版面 ---------- */
.wrap{width:min(1120px,calc(100% - 32px));margin:0 auto}
.page-top{padding-top:110px}
section.block{padding:clamp(70px,10vw,140px) 0}
.foot{padding:80px 0 60px;text-align:center;color:var(--on-night-soft);font-size:14px}
.foot .mark{font-family:var(--mark);font-size:34px;color:var(--gold-hi);display:block;margin-bottom:6px}
.foot nav{display:flex;gap:22px;justify-content:center;margin-top:12px;font-family:var(--hand);letter-spacing:.1em}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--gold-hi)}
.foot.dawn{color:#5a4532}.foot.dawn .mark{color:var(--rubric)}.foot.dawn nav a:hover{color:var(--rubric)}

/* ---------- 登入框 ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(5,8,18,.6);backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal .sheet{width:min(430px,100%);padding:42px 40px 34px;animation:unroll .55s var(--ease)}
@keyframes unroll{from{clip-path:inset(48% 0 48% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.modal .sheet,.menu.open{animation:none}}
.modal h2{margin:0 0 4px;font-family:var(--hand);font-weight:400;font-size:28px;letter-spacing:.2em;color:var(--rubric)}
.modal .sub{margin:0 0 20px;color:var(--ink-soft);font-size:14px}
.modal .x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:6px}
.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:4px;letter-spacing:.06em}
.field input{width:100%;padding:10px 12px;background:rgba(255,252,240,.55);border:0;border-bottom:1.5px solid var(--vellum-3);border-radius:2px 2px 0 0;outline:none;transition:border-color .2s,background .2s}
.field input:focus{border-color:var(--rubric);background:rgba(255,252,240,.85)}
.field.bad input{border-color:var(--rubric)}
.form-err{min-height:1.6em;margin:0 0 8px;color:var(--rubric);font-size:14px}
.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.swap{border:0;background:none;color:var(--lapis);cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.stamp{animation:stamp .5s var(--ease)}
@keyframes stamp{0%{transform:scale(1)}35%{transform:scale(.92) rotate(-3deg)}70%{transform:scale(1.04) rotate(1deg)}100%{transform:scale(1)}}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:70;opacity:0;pointer-events:none;
  background:var(--vellum);color:var(--ink);padding:10px 22px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 0 1px var(--gold);font-size:15px;transition:all .35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}