/* 麻吉弟 MAJI_ALSON — 個人網站
   主色白/黑，重點綠，只有「目標」用黃。
   全站 UI 統一走 iOS 毛玻璃：半透明 + backdrop-filter + 上緣高光。
   色塊之間一律用大範圍柔化漸層銜接，不留硬邊。 */

:root {
    --bg: #080a0c;
    --bg-foot: #0c0f12;
    --hair: rgba(255, 255, 255, .09);
    --hair-2: rgba(255, 255, 255, .19);
    --fg: #eceef0;
    --dim: #8b929a;
    --green: #22c55e;
    --green-lit: #4ade80;
    --yellow: #fbbf24;
    --bar: 68px;
    --side: clamp(20px, 5vw, 56px);
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* 玻璃配方，全站共用 */
    --glass-bg: rgba(255, 255, 255, .048);
    --glass-bg-hi: rgba(255, 255, 255, .075);
    --glass-line: rgba(255, 255, 255, .12);
    --glass-line-hi: rgba(255, 255, 255, .2);
    --glass-blur: blur(26px) saturate(170%);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .34);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    position: relative;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
a, button { cursor: pointer; }
::selection { background: var(--green-lit); color: #062713; }
:focus-visible { outline: 2px solid var(--green-lit); outline-offset: 3px; border-radius: 6px; }

.shell { width: min(1080px, 100%); margin: 0 auto; padding: 0 var(--side); position: relative; z-index: 1; }

/* 固定不動的環境光。毛玻璃背後要有東西才模糊得出來，
   純黑底上做 backdrop-filter 等於沒做。捲動時面板滑過這片光，
   玻璃的顏色才會跟著變。 */
.aura {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 34% at 84% 18%, rgba(34, 197, 94, .16), transparent 70%),
        radial-gradient(40% 30% at 8% 62%, rgba(34, 197, 94, .1), transparent 72%),
        radial-gradient(46% 26% at 62% 96%, rgba(34, 197, 94, .08), transparent 74%);
}

/* ---------- 玻璃基底 ---------- */
.glass,
.store,
.social,
.piece,
.lead-face,
.key,
.burger,
.foot {
    position: relative;
    border: 1px solid var(--glass-line);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    transition:
        border-color .38s var(--ease),
        background .38s var(--ease),
        box-shadow .38s var(--ease),
        transform .34s var(--ease),
        color .3s var(--ease);
}
/* 上緣那道斜向高光，玻璃才有厚度 */
.glass::before,
.store::before,
.social::before,
.piece::before,
.lead-face::before,
.key::before,
.foot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(158deg, rgba(255, 255, 255, .1), transparent 44%);
    pointer-events: none;
}
.glass:hover { border-color: var(--glass-line-hi); background: var(--glass-bg-hi); }

/* 不支援 backdrop-filter 就退回實心底，不要變成看不清楚的透明片 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .glass, .store, .social, .piece, .lead-face, .key.ghost, .burger, .foot, .topbar.stuck, .menu {
        background: rgba(26, 32, 38, .96);
    }
}

/* 名字：綠 → 白漸層 */
.mark {
    display: inline-block;
    background: linear-gradient(95deg, var(--green) 0%, var(--green-lit) 42%, #fff 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 900 clamp(15px, 1.5vw, 17px)/1 "Segoe UI", -apple-system, sans-serif;
    letter-spacing: .1em;
    white-space: nowrap;
    transition: filter .32s var(--ease), transform .22s var(--ease);
}
.mark:hover { filter: brightness(1.22) drop-shadow(0 0 15px rgba(74, 222, 128, .38)); }
.mark:active { transform: scale(.96); }

/* ---------- 上排 ---------- */
.topbar {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 100;
    height: var(--bar);
    border-bottom: 1px solid transparent;
    transition: background .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease);
}
.topbar.stuck {
    border-bottom-color: var(--glass-line);
    background: rgba(255, 255, 255, .04);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .34), var(--glass-inset);
}
.bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.menu { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 34px); }
.menu a {
    position: relative;
    padding: 4px 0;
    color: var(--dim);
    font-size: 14.5px;
    font-weight: 700;
    transition: color .26s var(--ease), transform .2s var(--ease);
}
.menu a::after {
    content: "";
    position: absolute;
    right: 0; bottom: -3px; left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--green-lit);
    box-shadow: 0 0 10px rgba(74, 222, 128, .55);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .38s var(--ease);
}
.menu a:hover, .menu a.on { color: #fff; }
.menu a:hover::after, .menu a.on::after { transform: scaleX(1); transform-origin: left; }
.menu a:active { transform: translateY(1px); }

.burger { width: 42px; height: 42px; padding: 0; border-radius: 11px; display: none; }
.burger span { display: block; width: 18px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--fg); transition: transform .3s var(--ease), opacity .24s ease, background .24s ease; }
.burger span + span { margin-top: 5px; }
.burger:hover { border-color: var(--glass-line-hi); background: var(--glass-bg-hi); }
.burger:hover span { background: var(--green-lit); }
.burger:active { transform: scale(.94); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 開頭 ---------- */
.lead {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-content: end;
    padding: calc(var(--bar) + 40px) 0 clamp(48px, 8vh, 92px);
}
.lead-wash {
    position: absolute;
    inset: -10% 0 -26%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(56% 50% at 84% 56%, rgba(34, 197, 94, .19), transparent 68%),
        radial-gradient(70% 40% at 30% 100%, rgba(34, 197, 94, .09), transparent 72%);
    filter: blur(18px);
}
.lead-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-end; gap: clamp(24px, 4vw, 56px); }
.lead-hi {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--green-lit);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 900;
    letter-spacing: .14em;
}
.lead-hi::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 12px rgba(74, 222, 128, .6); }
.lead-name { margin-bottom: 22px; font-size: clamp(32px, 5.6vw, 66px); font-weight: 900; line-height: 1.14; letter-spacing: -.025em; }
.lead-say { max-width: 560px; margin-bottom: 32px; color: #b3bac1; font-size: clamp(14px, 1.5vw, 16px); }
.lead-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* 主按鈕是「綠玻璃」：底色帶綠但仍然透光 */
.key {
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    border-color: rgba(74, 222, 128, .45);
    background: rgba(34, 197, 94, .3);
    color: #eafff1;
    font-size: 14.5px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.key:hover {
    border-color: rgba(134, 239, 172, .7);
    background: rgba(34, 197, 94, .46);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34), 0 0 34px rgba(34, 197, 94, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.key.ghost { border-color: var(--glass-line); background: var(--glass-bg); color: var(--fg); }
.key.ghost:hover { border-color: rgba(134, 239, 172, .55); background: rgba(255, 255, 255, .09); color: #fff; }
.key:active { transform: translateY(0) scale(.97); box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* 頭像放在玻璃相框裡 */
.lead-face { width: clamp(140px, 22vw, 262px); padding: 8px; border-radius: 20px; }
.lead-face img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 13px; transition: transform .55s var(--ease); }
.lead-face:hover { border-color: rgba(74, 222, 128, .5); background: var(--glass-bg-hi); transform: translateY(-5px); box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 44px rgba(34, 197, 94, .18), var(--glass-inset); }
.lead-face:hover img { transform: scale(1.02); }

/* ---------- 區塊 ---------- */
.band { padding: clamp(52px, 6.5vw, 84px) 0; position: relative; }
.band::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 22%, rgba(255, 255, 255, .14) 78%, transparent);
}
.band-top {
    margin-bottom: clamp(26px, 3.4vw, 40px);
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    position: relative;
}
.band-top::before {
    content: "";
    position: absolute;
    top: 4px; bottom: 4px; left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--green);
    box-shadow: 0 0 14px rgba(34, 197, 94, .5);
}
.band-top h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 900; letter-spacing: -.015em; line-height: 1.3; }
.band-top p { color: var(--dim); font-size: 13.5px; }

/* ---------- 關於 ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 30px); align-items: start; }
.glass { border-radius: 20px; }
.about-say { padding: clamp(22px, 3vw, 32px); display: grid; gap: 15px; color: #ccd2d8; font-size: 15.5px; }
.about-say > * { position: relative; z-index: 3; }
.about-say b { color: #fff; }
.about-say b.up { color: var(--green-lit); }

.sheet { padding: clamp(8px, 1.4vw, 12px) clamp(22px, 3vw, 30px); }
.sheet > div { position: relative; z-index: 3; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sheet > div:last-child { border-bottom: 0; }
.sheet dt { color: var(--dim); font-size: 13.5px; font-weight: 700; }
.sheet dd { font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.sheet dd.aim { color: var(--yellow); }

/* ---------- 商城 ---------- */
.store {
    padding: clamp(22px, 3vw, 30px) clamp(20px, 2.6vw, 28px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3.4vw, 42px);
    border-radius: 20px;
}
.store > * { position: relative; z-index: 3; }
.store:hover {
    border-color: rgba(74, 222, 128, .42);
    background: rgba(34, 197, 94, .085);
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 44px rgba(34, 197, 94, .12), var(--glass-inset);
}
.store:active { transform: translateY(-1px) scale(.995); }
.store-logo { width: clamp(112px, 14vw, 168px); height: auto; transition: transform .4s var(--ease); }
.store:hover .store-logo { transform: scale(1.04); }
.store p { color: #b8bfc6; font-size: 15px; }
.store-go { display: inline-flex; align-items: center; gap: 8px; color: var(--green-lit); font-size: 14.5px; font-weight: 900; white-space: nowrap; }
.store-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.store:hover .store-go svg { transform: translateX(6px); }

/* ---------- 作品：玻璃相框，裡面只有圖 ---------- */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.piece { display: block; padding: 7px; border-radius: 18px; }
.piece img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; transition: transform .7s var(--ease); }
.piece:hover {
    border-color: rgba(74, 222, 128, .45);
    background: var(--glass-bg-hi);
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .4), 0 0 40px rgba(34, 197, 94, .12), var(--glass-inset);
}
.piece:hover img { transform: scale(1.035); }
.piece:active { transform: translateY(-1px) scale(.99); }

/* ---------- 社群 ---------- */
.socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.social { padding: clamp(26px, 3.2vw, 36px) 18px; display: grid; justify-items: center; gap: 16px; border-radius: 20px; }
.social svg, .social b { position: relative; z-index: 3; }
.social svg { width: 30px; height: 30px; color: #a8b0b8; transition: color .34s var(--ease), transform .4s var(--ease), filter .34s var(--ease); }
.social b { font-size: 15px; font-weight: 800; }
.social:hover { border-color: var(--glass-line-hi); background: var(--glass-bg-hi); transform: translateY(-4px); }
.social:hover svg { transform: scale(1.14) translateY(-1px); }
.social:active { transform: translateY(-1px) scale(.985); }
.social.yt:hover { border-color: rgba(255, 60, 90, .5); box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 38px rgba(255, 0, 51, .16), var(--glass-inset); }
.social.yt:hover svg { color: #ff2d4f; filter: drop-shadow(0 0 12px rgba(255, 45, 79, .5)); }
.social.dc:hover { border-color: rgba(120, 132, 255, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 38px rgba(88, 101, 242, .2), var(--glass-inset); }
.social.dc:hover svg { color: #7c88ff; filter: drop-shadow(0 0 12px rgba(88, 101, 242, .55)); }
.social.gm:hover { border-color: rgba(74, 222, 128, .5); box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 38px rgba(34, 197, 94, .16), var(--glass-inset); }
.social.gm:hover svg { color: var(--green-lit); filter: drop-shadow(0 0 12px rgba(74, 222, 128, .5)); }

/* ---------- 頁尾：一塊看得見的玻璃板 ---------- */
/* 上方留一段漸層讓底色柔化過去，玻璃板本身有邊界才不會整個溶掉。 */
.foot {
    margin-top: 90px;
    border: 0;
    border-top: 1px solid var(--glass-line);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .03));
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .34), var(--glass-inset);
}
.foot::before {
    content: "";
    position: absolute;
    right: 0; bottom: 100%; left: 0;
    height: 110px;
    inset: auto 0 100% 0;
    background: linear-gradient(180deg, rgba(12, 15, 18, 0), rgba(12, 15, 18, .85));
    pointer-events: none;
}
.foot-shell { padding-top: 38px; padding-bottom: 38px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.foot-note { margin-top: 11px; color: var(--dim); font-size: 13.5px; }
.foot-h { margin-top: 22px; margin-bottom: 8px; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .1em; }

.foot-ico { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--glass-line); display: flex; gap: 12px; }
.foot-ico a {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-inset);
    color: #9ba3ab;
    transition: color .26s var(--ease), border-color .28s var(--ease), background .28s var(--ease), transform .26s var(--ease), box-shadow .28s var(--ease);
}
.foot-ico a svg { width: 20px; height: 20px; }
.foot-ico a:hover { color: #fff; border-color: var(--glass-line-hi); background: var(--glass-bg-hi); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), var(--glass-inset); }
.foot-ico a:active { transform: translateY(-1px) scale(.94); }

/* 頁尾內容要壓在高光層上面 */
.foot-shell { position: relative; z-index: 3; }

/* ---------- 捲動顯現 ---------- */
.rise { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.shown { opacity: 1; transform: none; }
.about .rise:nth-child(2), .works .rise:nth-child(2), .socials .rise:nth-child(2) { transition-delay: .09s; }
.works .rise:nth-child(3), .socials .rise:nth-child(3) { transition-delay: .18s; }

/* ---------- 平板 ---------- */
@media (max-width: 900px) {
    .about { grid-template-columns: 1fr; }
    .store { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .store-logo { width: 128px; }
}

/* ---------- 手機 ---------- */
@media (max-width: 720px) {
    :root { --bar: 60px; }

    .burger { display: block; }
    .menu {
        position: fixed;
        top: calc(var(--bar) + 8px);
        right: var(--side); left: var(--side);
        padding: 6px 18px;
        display: block;
        border: 1px solid var(--glass-line);
        border-radius: 18px;
        background: rgba(255, 255, 255, .055);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .46), var(--glass-inset);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(.98);
        transform-origin: top right;
        transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    }
    .menu.open { opacity: 1; visibility: visible; transform: none; }
    .menu a { display: block; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 16px; }
    .menu a:last-child { border-bottom: 0; }
    .menu a::after { display: none; }

    .lead-shell { grid-template-columns: 1fr; align-items: start; gap: 26px; }
    .lead-face { width: 120px; order: -1; }

    .works, .socials { grid-template-columns: 1fr; }
    .sheet > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
    .foot { margin-top: 66px; }
    .foot-shell { flex-direction: column; align-items: flex-start; gap: 24px; }
    .foot-right { justify-items: start; }
    .foot-friends { justify-content: flex-start; }
    .rise { transition-delay: 0s !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
    * { transition-duration: .01ms !important; }
}

/* 右欄：朋友在上、社群圖示在下，整欄靠右對齊 */
.foot-right { display: grid; justify-items: end; gap: 9px; }
.foot-right .foot-h { margin-top: 0; margin-bottom: 0; }

/* 朋友是「名字」不是按鈕，所以不做成玻璃方塊，
   用純文字 + 自己的顏色，跟下面那排圖示按鈕分開。 */
.foot-friends { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; }
.foot-friends a {
    position: relative;
    padding: 2px 1px;
    color: var(--yellow);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    transition: color .26s var(--ease);
}
.foot-friends a::after {
    content: "";
    position: absolute;
    right: 1px; bottom: 0; left: 1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .34s var(--ease);
}
.foot-friends a:hover { color: #fde68a; }
.foot-friends a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot-friends a:active { opacity: .7; }

/* 手機的靠左覆寫要放在檔案最後。
   上面那段 .foot-right 是後來附加的，排在 720px 的 media 之後，
   同權重後者勝，寫在 media 裡會被蓋掉。 */
@media (max-width: 720px) {
    .foot-right { justify-items: start; }
    .foot-friends { justify-content: flex-start; }
}

/* ---------- 作品放大燈箱 ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 8, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    cursor: zoom-out;
}

.lightbox-frame {
    position: relative;
    max-width: min(1180px, 100%);
    max-height: 100%;
    padding: 8px;
    border: 1px solid var(--glass-line);
    border-radius: 18px;
    background: var(--glass-bg);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6), var(--glass-inset);
    transform: scale(.94) translateY(10px);
    transition: transform .34s var(--ease);
}
.lightbox.is-open .lightbox-frame { transform: none; }
.lightbox-frame img {
    max-width: 100%;
    max-height: calc(100svh - clamp(32px, 8vw, 96px) - 16px);
    width: auto;
    height: auto;
    border-radius: 11px;
    object-fit: contain;
}

/* 關閉與切換都用同一種玻璃圓鈕 */
.lightbox-close,
.lightbox-step {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--glass-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-inset);
    color: var(--fg);
    transition: color .24s var(--ease), background .24s var(--ease),
                border-color .24s var(--ease), transform .22s var(--ease);
}
.lightbox-close svg, .lightbox-step svg { width: 20px; height: 20px; }
.lightbox-close:hover, .lightbox-step:hover {
    color: var(--green-lit);
    border-color: rgba(134, 239, 172, .55);
    background: rgba(34, 197, 94, .16);
    transform: scale(1.08);
}
.lightbox-close:active, .lightbox-step:active { transform: scale(.94); }

.lightbox-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lightbox-step { top: 50%; margin-top: -23px; }
.lightbox-step.prev { left: clamp(10px, 2.4vw, 26px); }
.lightbox-step.next { right: clamp(10px, 2.4vw, 26px); }

.lightbox-hint {
    position: absolute;
    right: 0; bottom: clamp(12px, 2.6vw, 22px); left: 0;
    color: var(--dim);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.lightbox-hint b { color: #cfd5da; font-weight: 900; }
.lightbox-hint i { margin: 0 9px; font-style: normal; opacity: .5; }

/* 燈箱開著時鎖住背景捲動 */
body.lightbox-open { overflow: hidden; }

@media (max-width: 720px) {
    .lightbox-step { width: 40px; height: 40px; margin-top: -20px; }
    .lightbox-close { width: 40px; height: 40px; }
    .lightbox-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox-frame { transition: none; }
    .lightbox-frame { transform: none; }
}