/* ==================================================================
   嶼心相連 Love∞ | 作品集分頁專屬樣式
   ================================================================== */

.site-nav a.active{color:var(--c-coral); position:relative;}
.site-nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--c-coral); border-radius:2px; opacity:0.8;}

.g-hero{padding:clamp(5rem,10vw,8rem) clamp(1rem,4vw,2rem) clamp(3rem,6vw,5rem); text-align:center; background:rgba(228,215,235,0.55);}
.g-hero-inner{max-width:880px; margin:0 auto;}
.g-title{font-family:var(--font-serif); font-size:clamp(2rem,5vw,3.4rem); letter-spacing:0.4em; font-weight:500; line-height:1.4; margin:0.4em 0 0.2em; color:var(--c-ink);}
.g-en{font-family:var(--font-en); font-style:italic; letter-spacing:0.18em; color:var(--c-ink-2); font-size:clamp(1rem,1.6vw,1.25rem); margin-bottom:1.5em;}
.g-lead{font-family:var(--font-serif); letter-spacing:0.18em; line-height:2.1; color:var(--c-ink-2); margin-bottom:2.5rem; font-size:1rem;}
.g-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:1rem;}
.g-meta span{display:flex; flex-direction:column; align-items:center; font-family:var(--font-en);}
.g-meta b{font-size:1.6rem; font-weight:600; color:var(--c-rose); letter-spacing:0.05em;}
.g-meta small{font-family:var(--font-serif); font-size:0.78rem; letter-spacing:0.22em; color:var(--c-ink-3); margin-top:0.3em;}

/* Shuffle */
.g-shuffle{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem) clamp(2rem,4vw,3.5rem); background:rgba(252,222,230,0.55); text-align:center; border-bottom:1px solid rgba(255,255,255,0.5);}
.g-shuffle-inner{max-width:720px; margin:0 auto;}
.g-shuffle-title{font-family:var(--font-serif); font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:0.4em; color:var(--c-ink); margin:0.4em 0 0.4em; font-weight:500;}
.g-shuffle-sub{font-family:var(--font-serif); font-size:0.92rem; letter-spacing:0.18em; color:var(--c-ink-2); margin-bottom:2rem;}
.shuffle-stage{display:flex; align-items:center; justify-content:center; gap:clamp(0.8rem,3vw,1.6rem); margin:1.5rem 0 1.4rem;}
.shuffle-btn{flex-shrink:0; width:clamp(54px,8vw,70px); height:clamp(54px,8vw,70px); border-radius:50%; border:1px solid rgba(255,255,255,0.7); background:rgba(255,255,255,0.7); backdrop-filter:blur(20px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; box-shadow:0 6px 20px -8px rgba(150,90,110,0.25);}
.shuffle-btn:hover{transform:scale(1.08);}
.shuffle-skip{color:var(--c-ink-2);}
.shuffle-skip:hover{background:var(--c-ink-3); color:#fff;}
.shuffle-like{color:var(--c-coral);}
.shuffle-like:hover{background:linear-gradient(135deg,#d6707d,#b65a68); color:#fff;}
.shuffle-deck{position:relative; width:clamp(240px,38vw,360px); height:clamp(280px,44vw,420px); user-select:none; flex-shrink:0;}
.shuffle-card{position:absolute; top:0; left:0; right:0; bottom:0; background:#fff; border-radius:22px; box-shadow:0 24px 40px -16px rgba(150,90,110,0.35); overflow:hidden; cursor:grab; display:flex; flex-direction:column; border:8px solid #fff; transition:transform .35s cubic-bezier(.2,.8,.25,1),opacity .35s;}
.shuffle-card.dragging{transition:none; cursor:grabbing;}
.shuffle-card.layer-1{transform:translateY(8px) scale(0.95); opacity:0.7; z-index:1; pointer-events:none;}
.shuffle-card.layer-2{transform:translateY(16px) scale(0.9); opacity:0.4; z-index:0; pointer-events:none;}
.shuffle-card.current{z-index:2;}
.shuffle-card img{flex:1; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.shuffle-card-no{position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.92); color:var(--c-rose); font-family:var(--font-en); font-size:0.85rem; font-weight:600; padding:0.3em 0.8em; border-radius:999px; letter-spacing:0.1em;}
.shuffle-card-tag{position:absolute; top:22px; padding:0.4em 1em; border-radius:12px; font-family:var(--font-serif); font-size:1rem; letter-spacing:0.32em; font-weight:600; border:3px solid currentColor; opacity:0; transition:opacity .15s; pointer-events:none;}
.shuffle-card-tag.tag-skip{right:22px; color:var(--c-ink-2); transform:rotate(15deg);}
.shuffle-card-tag.tag-like{left:22px; color:var(--c-coral); transform:rotate(-15deg);}
.shuffle-card[data-direction="right"] .tag-like{opacity:1;}
.shuffle-card[data-direction="left"] .tag-skip{opacity:1;}
.shuffle-card.fly-right{transform:translateX(120%) rotate(20deg) !important; opacity:0; pointer-events:none;}
.shuffle-card.fly-left{transform:translateX(-120%) rotate(-20deg) !important; opacity:0; pointer-events:none;}
.shuffle-empty{display:flex; align-items:center; justify-content:center; height:100%; font-family:var(--font-serif); letter-spacing:0.22em; color:var(--c-ink-3); text-align:center; padding:2rem; line-height:2;}
.shuffle-meta{display:inline-flex; align-items:center; gap:0.7em; font-family:var(--font-serif); font-size:0.88rem; letter-spacing:0.18em; color:var(--c-ink-2); background:rgba(255,255,255,0.6); padding:0.4em 1.2em; border-radius:999px; border:1px solid var(--c-line); margin-bottom:0.8rem;}
.shuffle-current-no{font-family:var(--font-en); color:var(--c-rose); font-weight:600;}
.shuffle-divider{color:var(--c-ink-3);}
.shuffle-progress{color:var(--c-ink-3); font-family:var(--font-en);}
.shuffle-hint{font-family:var(--font-serif); font-size:0.78rem; letter-spacing:0.18em; color:var(--c-ink-3);}
@media (max-width:480px){.shuffle-btn{width:50px; height:50px;} .shuffle-deck{width:min(78vw,320px);}}

/* Filter */
.g-filter{padding:1rem var(--space); background:rgba(255,255,255,0.55); backdrop-filter:blur(20px); position:sticky; top:64px; z-index:10; border-bottom:1px solid rgba(255,255,255,0.5);}
.g-filter-inner{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.g-filter-tabs{display:flex; gap:0.5rem; flex-wrap:wrap;}
.g-tab{padding:0.5em 1.1em; border-radius:999px; border:1px solid rgba(214,112,125,0.25); background:rgba(255,255,255,0.4); color:var(--c-ink-2); font-family:var(--font-serif); font-size:0.85rem; letter-spacing:0.18em; cursor:pointer; transition:all .2s;}
.g-tab:hover{background:#fff; color:var(--c-coral); border-color:var(--c-coral);}
.g-tab.active{background:linear-gradient(135deg,#fff,#fde6e7); color:var(--c-rose); border-color:var(--c-coral); font-weight:500;}
.g-filter-note{font-family:var(--font-serif); font-size:0.82rem; letter-spacing:0.15em; color:var(--c-ink-3);}

/* Grid */
.g-list{padding:clamp(3rem,6vw,5rem) var(--space); background:rgba(252,222,230,0.55);}
.g-list-inner{max-width:var(--max); margin:0 auto;}
.g-status{text-align:center; margin-bottom:1.5rem; font-family:var(--font-serif); letter-spacing:0.22em; color:var(--c-ink-2); font-size:0.92rem;}
.g-status-count b{color:var(--c-rose); font-weight:600;}
.g-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(1.4rem,2.5vw,2rem);}
.g-item{position:relative;}
.g-item.hidden{display:none;}
.g-card{display:block; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.7); backdrop-filter:blur(20px) saturate(1.2); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.7); transition:transform .35s,box-shadow .35s; position:relative; color:inherit;}
.g-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(150,90,110,0.3);}
.g-img{margin:0; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(135deg,#fff,#fce0e6); border-bottom:1px solid rgba(255,255,255,0.7);}
.g-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s;}
.g-card:hover .g-img img{transform:scale(1.05);}
.g-info{padding:1.1rem 1.2rem 1.3rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.3rem;}
.g-no-big{font-family:var(--font-en); font-size:1.6rem; font-weight:600; letter-spacing:0.1em; color:var(--c-rose); line-height:1;}
.g-card:hover .g-no-big{color:var(--c-coral);}
.g-meta-line{font-family:var(--font-serif); font-size:0.78rem; letter-spacing:0.2em; color:var(--c-ink-3); margin:0;}
.g-empty{text-align:center; font-family:var(--font-serif); letter-spacing:0.22em; color:var(--c-ink-3); padding:3rem 1rem;}
.g-loadmore-wrap{text-align:center; margin:3rem 0 1rem;}
.g-note{text-align:center; margin-top:3rem; font-family:var(--font-serif); letter-spacing:0.18em; color:var(--c-ink-3); font-size:0.9rem;}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(50,35,40,0.85); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:2rem; animation:fadeIn .3s ease;}
.lightbox[hidden]{display:none;}
.lightbox-close{position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.15); color:#fff; font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s;}
.lightbox-close:hover{background:rgba(255,255,255,0.25); transform:scale(1.05);}
.lightbox-inner{max-width:900px; width:100%; display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center;}
.lightbox-inner img{width:100%; border-radius:14px; border:8px solid #fff; box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); background:#fff;}
.lightbox-info{color:#fff;}
.lightbox-no{display:inline-block; font-family:var(--font-en); font-size:2.4rem; font-weight:600; letter-spacing:0.08em; color:#fff; line-height:1; margin-bottom:0.6rem;}
.lightbox-year{font-family:var(--font-serif); letter-spacing:0.22em; color:#fde6e7; font-size:0.95rem; margin:0;}
@media (max-width:720px){.lightbox-inner{grid-template-columns:1fr; gap:1rem;} .lightbox-info{text-align:center;}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}