/* 芮芮神顯 v2 共用樣式（2026-10-07）——跟官網 ruirui.tech/v2 同一套黑金：色票、字體、導覽、按鈕、區塊、頁尾 */
:root { --bg:#060a16; --ink:#f4ecdc; --muted:#b9b1a0; --faint:#7d7768; --gold:#d6ad5c; --gold2:#f0d595; --teal:#3cbfb2; --line:rgba(214,173,92,.32);
        --serif:'Noto Serif TC',serif; --sans:'Noto Sans TC',-apple-system,'PingFang TC',sans-serif; --en:'Cormorant Garamond',serif; --script:'Great Vibes',cursive; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } img { max-width:100%; }
.nav { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; gap:20px; padding:12px max(24px,4vw); background:linear-gradient(180deg, rgba(6,10,22,.85), rgba(6,10,22,0)); transition:background .4s; }
.nav.solid { background:rgba(6,10,22,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(214,173,92,.14); }
.nav .brand img { height:42px; display:block; } .nav .sitename { font-family:var(--serif); font-size:15px; letter-spacing:4px; color:var(--gold2); padding-left:16px; border-left:1px solid rgba(214,173,92,.35); }
.nav .links { display:flex; gap:clamp(16px,2.6vw,38px); margin:0 auto; font-family:var(--serif); font-size:15.5px; letter-spacing:2px; color:#eadfca; } .nav .links a:hover { color:var(--gold2); }
.nav .member { height:38px; display:inline-flex; align-items:center; padding:0 16px; border-radius:19px; border:1px solid rgba(214,173,92,.7); color:var(--gold2); font-family:var(--serif); font-size:14px; letter-spacing:1.5px; background:rgba(214,173,92,.06); white-space:nowrap; }
.burger { display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.25); align-items:center; justify-content:center; } .burger svg { width:18px; stroke:var(--gold2); stroke-width:2; stroke-linecap:round; }
.btn { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:23px; border:1px solid rgba(232,200,130,.75); background:rgba(10,14,28,.35); color:#fbefd2; font-family:var(--serif); font-size:15.5px; letter-spacing:2px; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s, box-shadow .3s; }
.btn:hover { background:rgba(214,173,92,.18); box-shadow:0 0 22px rgba(214,173,92,.25); } .btn.solid { border:none; background:linear-gradient(180deg,#f6dd98,#c99a45); color:#14120f; font-weight:600; }
.sec { position:relative; max-width:1240px; margin:0 auto; padding:64px max(20px,3vw) 0; }
.sh2 { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap; } .sh2 h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:28px; letter-spacing:6px; color:#fbf3e2; }
.sh2 small { font-family:var(--en); font-size:12px; letter-spacing:4px; color:var(--muted); } .sh2 small::before { content:"— "; }
.glass { border-radius:16px; border:1px solid rgba(214,173,92,.28); background:linear-gradient(180deg, rgba(18,24,44,.78), rgba(10,14,28,.9)); box-shadow:0 14px 40px rgba(0,0,0,.4); }
.foot { position:relative; margin-top:70px; height:330px; overflow:hidden; } .foot .mt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70%; }
.foot::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, var(--bg) 0%, rgba(6,10,22,.2) 35%, rgba(6,10,22,.15) 60%, rgba(6,10,22,.92) 100%); }
.foot .say { position:absolute; z-index:2; left:50%; top:28%; transform:translateX(-50%); text-align:center; white-space:nowrap; } .foot .say b { display:block; font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:6px; color:#fbf3e2; }
.foot .say small { display:block; margin-top:8px; font-family:var(--en); font-size:12px; letter-spacing:5px; color:#e8dcc4; }
.foot .say i { display:block; margin:12px auto 0; width:200px; height:10px; position:relative; background:linear-gradient(90deg, transparent, rgba(214,173,92,.7) 40%, transparent 40% 60%, rgba(214,173,92,.7) 60%, transparent) center/100% 1px no-repeat; }
.foot .say i::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border:1px solid var(--gold); transform:translate(-50%,-50%) rotate(45deg); }
.foot .bar { position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:16px max(24px,3vw) calc(16px + env(safe-area-inset-bottom)); }
.foot .fm { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:15px; letter-spacing:3px; color:#eadfca; } .foot .fm img { width:30px; }
.foot .fl { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); } .foot .fl a:hover { color:var(--gold2); } .foot .cp { margin-left:auto; font-size:12px; color:var(--faint); }
.rv { opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); } .rv.in { opacity:1; transform:none; }
@media (max-width:860px) {
  .nav { padding:10px 14px; gap:10px; } .nav .brand img { height:34px; } .nav .sitename { font-size:13px; padding-left:10px; letter-spacing:2px; } .nav .member { display:none; } .burger { display:flex; margin-left:auto; } .nav .links { display:none; }
  .nav .links.open { display:flex; position:fixed; top:58px; left:12px; right:12px; flex-direction:column; gap:2px; padding:10px; border-radius:16px; background:rgba(8,12,26,.97); border:1px solid var(--line); } .nav .links.open a { padding:12px 8px; border-bottom:1px solid rgba(214,173,92,.12); }
  .sec { padding:46px 16px 0; } .sh2 h2 { font-size:22px; letter-spacing:4px; } .sh2 small { display:none; }
  .foot { height:300px; } .foot .say b { font-size:19px; letter-spacing:4px; } .foot .bar { justify-content:center; } .foot .cp { margin-left:0; width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .rv { opacity:1; transform:none; } }