/* ===========================
   shizuki - 幻想の吟遊詩人
   Fantasy Artist Website
   =========================== */

:root {
  --bg-deep: #0a0a12;
  --bg-dark: #0f0e1a;
  --bg-card: #161425;
  --bg-alt: #0d0c18;
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-dim: #8a7233;
  --purple: #6e4b9e;
  --purple-light: #9b7cc9;
  --purple-dim: #3d2a5c;
  --text: #d4cfe6;
  --text-dim: #8882a0;
  --text-bright: #f0ecff;
  --font-display: 'Cinzel', serif;
  --font-body: 'Zen Old Mincho', serif;
  --font-elegant: 'Cormorant Garamond', serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:70px; scrollbar-width:thin; scrollbar-color:var(--gold-dim) var(--bg-deep); }
body { background:var(--bg-deep); color:var(--text); font-family:var(--font-body); line-height:1.8; overflow-x:hidden; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23c9a84c' opacity='.6'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23c9a84c' opacity='.2'/%3E%3C/svg%3E") 10 10, auto; }
body.loading { overflow:hidden; }
a { color: var(--gold); }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ===== SPARKLE TRAIL ===== */
.sparkle { position:fixed; pointer-events:none; z-index:9998; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(201,168,76,.6); animation:sparkleFade .6s ease-out forwards; }
@keyframes sparkleFade { 0%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(0) translateY(-20px)} }

/* ===== MAGIC RUNE BORDER ===== */
.rune-border { position:relative; }
.rune-border::before { content:''; position:absolute; inset:-2px; border-radius:8px; background:conic-gradient(from 0deg,transparent,rgba(201,168,76,.15),transparent,rgba(110,75,158,.1),transparent); animation:runeSpin 8s linear infinite; z-index:-1; }
@keyframes runeSpin { to{background:conic-gradient(from 360deg,transparent,rgba(201,168,76,.15),transparent,rgba(110,75,158,.1),transparent)} }

/* ===== ENCHANTED TEXT ===== */
.enchanted-text { position:relative; display:inline-block; }
.enchanted-text::before,.enchanted-text::after { content:'*'; position:absolute; font-size:.6em; color:var(--gold); opacity:0; animation:enchantStar 3s ease-in-out infinite; }
.enchanted-text::before { top:-.3em; left:-.5em; animation-delay:0s; }
.enchanted-text::after { bottom:-.3em; right:-.5em; animation-delay:1.5s; }
@keyframes enchantStar { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:.8;transform:scale(1.2)} }

/* ===== FLAME DIVIDER ===== */
.flame-divider { text-align:center; padding:1.5rem 0; position:relative; z-index:1; }
.flame-divider::before { content:''; display:inline-block; width:40px; height:40px; background:radial-gradient(ellipse at 50% 70%,rgba(201,168,76,.3) 0%,rgba(201,130,50,.1) 40%,transparent 70%); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; animation:flameFlicker 1.5s ease-in-out infinite alternate; }
@keyframes flameFlicker { 0%{transform:scaleY(1) scaleX(1);opacity:.7} 50%{transform:scaleY(1.2) scaleX(.9);opacity:1} 100%{transform:scaleY(.9) scaleX(1.1);opacity:.6} }

/* ===== PARCHMENT CARDS ===== */
.parchment { background:linear-gradient(135deg,rgba(22,20,37,.95),rgba(30,26,48,.9)) !important; border-image:linear-gradient(135deg,rgba(201,168,76,.2),rgba(110,75,158,.15),rgba(201,168,76,.2)) 1 !important; box-shadow:inset 0 0 40px rgba(0,0,0,.3); }

/* ===== NAV RUNE UNDERLINE ===== */
.nav-links a::before { content:''; position:absolute; bottom:-4px; left:50%; width:4px; height:4px; background:var(--gold); border-radius:50%; transform:translateX(-50%) scale(0); transition:transform .3s; opacity:.5; }
.nav-links a:hover::before { transform:translateX(-50%) scale(1); }

/* ===== ENCHANTED BUTTONS ===== */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(transparent,rgba(255,255,255,.1),transparent,rgba(255,255,255,.05),transparent); animation:btnShine 4s linear infinite; opacity:0; transition:opacity .3s; }
.btn-primary:hover::before { opacity:1; }
@keyframes btnShine { to{transform:rotate(360deg)} }

/* ===== SECTION TORCH ===== */
.section-torch { position:absolute; top:-20px; width:4px; height:40px; background:linear-gradient(to top,rgba(201,168,76,.3),rgba(201,130,50,.1),transparent); border-radius:50%; animation:torchFlame 2s ease-in-out infinite alternate; }
.section-torch.left { left:20%; }
.section-torch.right { right:20%; }
@keyframes torchFlame { 0%{height:35px;opacity:.5} 50%{height:45px;opacity:.8} 100%{height:38px;opacity:.6} }

/* ===== ENCHANTED CARDS ===== */
.news-card,.project-card,.shop-card,.video-card,.single-card,.voice-card,.event-card,.lore-card,.epk-card,.team-member,.sns-card,.follow-card,.detail-card { position:relative; }
.news-card::before,.shop-card::before,.lore-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),transparent); }

/* ===== FLOATING RUNES BG ===== */
.rune-float { position:fixed; pointer-events:none; z-index:0; font-family:serif; color:rgba(201,168,76,.03); font-size:2rem; animation:runeFloatUp 15s linear infinite; }
@keyframes runeFloatUp { 0%{transform:translateY(100vh) rotate(0deg);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-100px) rotate(360deg);opacity:0} }

/* ===== GLOWING DIAMOND DIVIDER ===== */
.section-rune { position:relative; overflow:visible; }
.section-rune::after { content:''; position:absolute; top:50%; left:50%; width:60px; height:60px; transform:translate(-50%,-50%); border:1px solid rgba(201,168,76,.06); border-radius:50%; animation:magicRotate 10s linear infinite; }

/* ===== CARD HOVER MAGIC ===== */
.news-card:hover,.shop-card:hover,.lore-card:hover,.video-card:hover,.single-card:hover { box-shadow:0 8px 40px rgba(110,75,158,.12),0 0 1px rgba(201,168,76,.3); }

/* ===== LOADER ===== */
#loader { position:fixed; inset:0; z-index:9999; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; transition:opacity .8s,visibility .8s; }
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; position:relative; }
.loader-ring { width:120px; height:120px; margin:0 auto 2rem; position:relative; border-radius:50%; border:1px solid rgba(201,168,76,.15); animation:loaderSpin 3s linear infinite; box-shadow:0 0 40px rgba(110,75,158,.1),inset 0 0 40px rgba(201,168,76,.05); }
.loader-ring::before { content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:var(--gold); animation:loaderSpin 1.5s ease-in-out infinite; }
.loader-ring::after { content:''; position:absolute; inset:8px; border-radius:50%; border:1px solid transparent; border-bottom-color:var(--purple-light); animation:loaderSpin 2s ease-in-out infinite reverse; }
.loader-ring-glow { position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%); animation:loaderPulse 2s ease-in-out infinite; }
.loader-diamond { position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-66px 0 0 -6px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 15px rgba(201,168,76,.6); animation:loaderDiamond 2s ease-in-out infinite; }
.loader-text { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--gold); letter-spacing:.2em; margin-bottom:.5rem; animation:loaderTextGlow 2s ease-in-out infinite; }
.loader-sub { font-family:var(--font-elegant); font-size:.9rem; font-style:italic; color:var(--text-dim); letter-spacing:.15em; animation:loaderFade 1.5s ease-in-out infinite; }
@keyframes loaderSpin { to{transform:rotate(360deg)} }
@keyframes loaderPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
@keyframes loaderDiamond { 0%,100%{opacity:.6;transform:rotate(45deg) scale(.8)} 50%{opacity:1;transform:rotate(45deg) scale(1.2)} }
@keyframes loaderTextGlow { 0%,100%{text-shadow:0 0 10px rgba(201,168,76,.2)} 50%{text-shadow:0 0 30px rgba(201,168,76,.5)} }
@keyframes loaderFade { 0%,100%{opacity:.4} 50%{opacity:.8} }

/* ===== PARTICLES ===== */
#particles { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* ===== NAV ===== */
nav { position:fixed; top:0; left:0; width:100%; z-index:100; padding:0 2rem; transition:background .4s,box-shadow .4s; }
nav.scrolled { background:rgba(10,10,18,.95); box-shadow:0 2px 20px rgba(0,0,0,.5); backdrop-filter:blur(10px); }
.nav-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:70px; }
.nav-logo { font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--gold); text-decoration:none; letter-spacing:.15em; transition:text-shadow .3s; }
.nav-logo:hover { text-shadow:0 0 20px rgba(201,168,76,.5); }
.nav-links { display:flex; list-style:none; gap:1.8rem; }
.nav-links a { font-family:var(--font-display); font-size:.75rem; color:var(--text-dim); text-decoration:none; letter-spacing:.12em; text-transform:uppercase; transition:color .3s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:0; height:1px; background:var(--gold); transition:width .3s; }
.nav-links a:hover,.nav-links a.active { color:var(--gold); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; z-index:110; }
.hamburger span { display:block; width:24px; height:1.5px; background:var(--gold); transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-4px); }

/* ===== PAGE HEADER (sub pages) ===== */
.page-header { padding:120px 2rem 3rem; text-align:center; background:linear-gradient(to bottom,rgba(110,75,158,.08),transparent); position:relative; z-index:1; }
.page-header h1 { font-family:var(--font-display); font-size:2rem; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.5rem; }
.page-header p { font-size:.9rem; color:var(--text-dim); }

/* ===== HERO ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:url("../assets/images/hero-bg.png") center/cover no-repeat, var(--bg-deep); overflow:hidden; }
#heroCanvas { display:none; }
.hero-video { position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transition:opacity .8s ease-in; }
.hero-video.playing { opacity:1; }
.hero-video iframe { position:absolute; top:50%; left:50%; width:calc(100vw + 200px); height:calc(100vh + 200px); min-width:calc(177.78vh + 200px); min-height:calc(56.25vw + 200px); transform:translate(-50%,-50%); pointer-events:none; }
.hero-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(10,10,18,.15) 0%,rgba(10,10,18,.4) 70%,var(--bg-deep) 100%),linear-gradient(to top,var(--bg-deep) 0%,transparent 15%); pointer-events:none; z-index:1; }
.hero-content { position:relative; z-index:2; padding:2rem; transition:opacity 1.2s ease-out,transform 1.2s ease-out; }
.hero-content.hero-text-hide { opacity:0 !important; transform:translateY(-30px) scale(.95) !important; pointer-events:none; }
.hero-pre { font-family:var(--font-elegant); font-size:1.1rem; font-style:italic; color:var(--gold-dim); letter-spacing:.3em; margin-bottom:1rem; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,7rem);
  font-weight:700;
  letter-spacing:.15em;
  line-height:1;
  margin-bottom:1.5rem;
  background:linear-gradient(90deg,#c9a84c 0%,#f5d785 35%,#fff4c9 50%,#f5d785 65%,#c9a84c 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(201,168,76,.55)) drop-shadow(0 0 45px rgba(201,168,76,.25)) drop-shadow(0 2px 12px rgba(0,0,0,.8));
  animation:metallicShimmer 6s linear infinite;
}
@keyframes metallicShimmer {
  0% { background-position:200% 0%; }
  100% { background-position:-200% 0%; }
}
.hero-ornament { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2rem; }
.ornament-line { display:block; width:80px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }
.ornament-diamond { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 10px rgba(201,168,76,.5); animation:diamondPulse 3s ease-in-out infinite; }
@keyframes diamondPulse { 0%,100%{box-shadow:0 0 10px rgba(201,168,76,.3)} 50%{box-shadow:0 0 20px rgba(201,168,76,.8),0 0 40px rgba(201,168,76,.3)} }
.hero-quote { font-family:var(--font-body); font-size:.95rem; color:var(--text); line-height:2; max-width:500px; margin:0 auto; text-shadow:0 1px 15px rgba(0,0,0,.8); }
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2; }
.scroll-diamond { width:6px; height:6px; border:1px solid var(--gold-dim); transform:rotate(45deg); animation:scrollPulse 2s ease-in-out infinite; }
.scroll-indicator span { font-family:var(--font-display); font-size:.6rem; letter-spacing:.3em; color:var(--gold-dim); }
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:rotate(45deg) translateY(0)} 50%{opacity:1;transform:rotate(45deg) translateY(5px)} }

/* ===== NEXT LIVE ===== */
#next-live { position:relative; z-index:1; padding:3rem 2rem; text-align:center; background:linear-gradient(to bottom,var(--bg-deep),rgba(110,75,158,.06),var(--bg-deep)); overflow:hidden; }
#next-live::before,#next-live::after { content:''; position:absolute; width:200px; height:200px; border:1px solid rgba(201,168,76,.04); border-radius:50%; animation:magicRotate 20s linear infinite; pointer-events:none; }
#next-live::before { top:-50px; left:-50px; }
#next-live::after { bottom:-50px; right:-50px; animation-direction:reverse; }
.next-live-inner { max-width:600px; margin:0 auto; }
.next-live-label { font-family:var(--font-display); font-size:.7rem; letter-spacing:.3em; color:var(--gold-dim); margin-bottom:.5rem; }
.next-live-title { font-size:1.3rem; color:var(--gold-light); margin-bottom:.3rem; }
.next-live-date { font-family:var(--font-display); font-size:.9rem; color:var(--text); letter-spacing:.1em; }
.next-live-venue { font-size:.85rem; color:var(--text-dim); margin-bottom:1.5rem; }
.countdown-wrap { display:flex; justify-content:center; align-items:center; gap:.5rem; margin-bottom:2rem; }
.countdown-unit { text-align:center; min-width:60px; }
.countdown-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--gold); display:block; transition:transform .3s,text-shadow .3s; text-shadow:0 0 8px rgba(201,168,76,.2); }
.countdown-num.tick { transform:scale(1.2); text-shadow:0 0 20px rgba(201,168,76,.6),0 0 40px rgba(201,168,76,.2); }
.countdown-label { font-family:var(--font-display); font-size:.55rem; letter-spacing:.2em; color:var(--text-dim); }
.countdown-sep { font-family:var(--font-display); font-size:1.5rem; color:var(--gold-dim); }

/* ===== SECTIONS ===== */
.section { position:relative; z-index:1; padding:5rem 2rem; }
.section-alt { background:var(--bg-alt); }
.container { max-width:1000px; margin:0 auto; }
.section-header { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:3rem; }
.section-header h2 { font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; background:linear-gradient(90deg,var(--gold-dim),var(--gold-light),var(--gold),var(--gold-light),var(--gold-dim)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:textShimmer 6s ease-in-out infinite; }
@keyframes textShimmer { 0%{background-position:100% 50%} 50%{background-position:0% 50%} 100%{background-position:100% 50%} }
.section-ornament-left,.section-ornament-right { display:block; width:60px; height:1px; }
.section-ornament-left { background:linear-gradient(90deg,transparent,var(--gold-dim)); }
.section-ornament-right { background:linear-gradient(90deg,var(--gold-dim),transparent); }
.section-more { text-align:center; margin-top:2rem; }

/* ===== BUTTONS ===== */
.btn-primary { display:inline-block; font-family:var(--font-display); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bg-deep); background:linear-gradient(135deg,var(--gold),var(--gold-light)); padding:.8rem 2rem; border:none; border-radius:4px; text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s; position:relative; overflow:hidden; }
.btn-primary::after { content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(255,255,255,.2); border-radius:50%; transform:translate(-50%,-50%); transition:width .5s,height .5s; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 6px 25px rgba(201,168,76,.35); }
.btn-primary:hover::after { width:300px; height:300px; }
.btn-secondary { display:inline-block; font-family:var(--font-display); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); padding:.7rem 1.8rem; border-radius:4px; text-decoration:none; cursor:pointer; transition:background .3s,color .3s; background:transparent; }
.btn-secondary:hover { background:rgba(201,168,76,.1); }
.btn-text { background:none; border:none; color:var(--gold); font-family:var(--font-display); font-size:.75rem; letter-spacing:.1em; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.btn-sm { font-size:.7rem; padding:.5rem 1.2rem; }
.btn-block { display:block; width:100%; text-align:center; }

/* ===== NEWS ===== */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.news-card { background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:1.5rem; transition:transform .3s,border-color .3s,box-shadow .3s; }
.news-card:hover { transform:translateY(-4px); border-color:rgba(201,168,76,.3); box-shadow:0 8px 30px rgba(110,75,158,.1); }
.news-date { font-family:var(--font-display); font-size:.7rem; color:var(--text-dim); letter-spacing:.1em; }
.news-badge { display:inline-block; font-family:var(--font-display); font-size:.6rem; letter-spacing:.15em; padding:.2rem .6rem; border-radius:2px; margin-left:.5rem; text-transform:uppercase; }
.badge-live { background:rgba(110,75,158,.3); color:var(--purple-light); }
.badge-release { background:rgba(201,168,76,.2); color:var(--gold-light); }
.badge-stream { background:rgba(76,158,201,.2); color:#7cc9d4; }
.badge-ended { background:rgba(100,100,100,.2); color:#999; }
.badge-organizer { background:rgba(201,168,76,.15); color:var(--gold); }
.news-title { font-size:1rem; color:var(--text-bright); margin:.8rem 0 .5rem; }
.news-detail { font-size:.8rem; color:var(--text-dim); }
.news-ticket { font-size:.85rem; color:var(--gold); margin:.3rem 0; }
.news-link { font-family:var(--font-display); font-size:.7rem; color:var(--gold); letter-spacing:.1em; text-decoration:none; }
.news-link:hover { text-decoration:underline; }
.news-actions { display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }

/* ===== VOICE ===== */
.voice-track-wrap { overflow:hidden; position:relative; }
.voice-track-wrap::before,.voice-track-wrap::after { content:''; position:absolute; top:0; width:60px; height:100%; z-index:2; pointer-events:none; }
.voice-track-wrap::before { left:0; background:linear-gradient(to right,var(--bg-alt),transparent); }
.voice-track-wrap::after { right:0; background:linear-gradient(to left,var(--bg-alt),transparent); }
.voice-track { display:flex; gap:1.5rem; animation:voiceScroll 30s linear infinite; width:max-content; }
@keyframes voiceScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.voice-card { flex-shrink:0; width:280px; background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:1.5rem; position:relative; overflow:hidden; }
.voice-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.3),transparent); }
.voice-card::after { content:'"'; position:absolute; top:8px; right:12px; font-size:3rem; font-family:serif; color:rgba(201,168,76,.06); line-height:1; }
.voice-stars { color:var(--gold); font-size:1rem; margin-bottom:.8rem; }
.voice-text { font-size:.85rem; color:var(--text); line-height:1.7; margin-bottom:.8rem; }
.voice-meta { font-size:.75rem; color:var(--text-dim); }

/* ===== ALBUM FEATURE ===== */
.album-feature { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:center; }
.album-feature-art { aspect-ratio:1; border-radius:6px; overflow:hidden; }
.album-placeholder-art { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 30% 30%,rgba(110,75,158,.3) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(201,168,76,.15) 0%,transparent 50%),var(--bg-dark); border-radius:6px; }
.album-placeholder-art.large { min-height:300px; }
.album-placeholder-art.small { min-height:120px; aspect-ratio:1; }
.album-icon { font-size:3rem; opacity:.4; }
.album-tag { font-family:var(--font-display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--purple-light); margin-bottom:.5rem; }
.album-title { font-family:var(--font-display); font-size:1.3rem; color:var(--gold-light); margin-bottom:1rem; }
.album-desc { font-size:.9rem; color:var(--text); margin-bottom:1.5rem; line-height:1.8; }
.album-links { display:flex; gap:1rem; flex-wrap:wrap; }

/* ===== GUIDE ===== */
.guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.guide-item { text-align:center; padding:2rem 1.5rem; border:1px solid rgba(201,168,76,.06); border-radius:6px; background:rgba(201,168,76,.01); transition:border-color .3s,box-shadow .3s,transform .3s; }
.guide-item:hover { border-color:rgba(201,168,76,.2); box-shadow:0 0 30px rgba(110,75,158,.08); transform:translateY(-4px); }
.guide-icon { font-size:2rem; color:var(--gold); margin-bottom:1rem; animation:float 3s ease-in-out infinite; display:inline-block; }
.guide-item:nth-child(2) .guide-icon { animation-delay:.5s; }
.guide-item:nth-child(3) .guide-icon { animation-delay:1s; }
.guide-item h3 { font-family:var(--font-display); font-size:1rem; color:var(--gold-light); letter-spacing:.1em; margin-bottom:.8rem; }
.guide-item p { font-size:.85rem; color:var(--text-dim); line-height:1.7; }

/* ===== FOLLOW ===== */
.follow-grid { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; }
.follow-card { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2rem 3rem; border:1px solid rgba(201,168,76,.1); border-radius:6px; background:var(--bg-card); text-decoration:none; color:var(--gold); transition:transform .3s,border-color .3s,box-shadow .3s; min-width:160px; }
.follow-card:hover { transform:translateY(-4px); border-color:rgba(201,168,76,.4); box-shadow:0 8px 30px rgba(201,168,76,.08); }
.follow-card span { font-family:var(--font-display); font-size:.8rem; letter-spacing:.1em; color:var(--text-bright); }

/* ===== EVENTS (live.html) ===== */
.filter-tabs { display:flex; justify-content:center; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.filter-tab { font-family:var(--font-display); font-size:.75rem; letter-spacing:.15em; padding:.5rem 1.5rem; border:1px solid rgba(201,168,76,.2); border-radius:3px; background:transparent; color:var(--text-dim); cursor:pointer; transition:all .3s; }
.filter-tab.active,.filter-tab:hover { background:rgba(201,168,76,.1); border-color:var(--gold-dim); color:var(--gold); }
.event-list { display:flex; flex-direction:column; gap:1rem; }
.event-card { display:flex; align-items:center; gap:1.5rem; background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:1.5rem; transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .4s; }
.event-card:hover { transform:translateX(8px); border-color:rgba(201,168,76,.3); box-shadow:-4px 0 20px rgba(201,168,76,.08); }
.event-card.ended { opacity:.5; }
.event-card.hidden { display:none; }
.event-divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0 .25rem; }
.event-divider-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }
.event-divider-text { font-family:'Zen Old Mincho',serif; font-size:1.15rem; font-weight:700; letter-spacing:.1em; color:var(--gold-light); white-space:nowrap; }
.event-divider.hidden { display:none; }
.event-thumb { width:124px; height:175px; flex-shrink:0; border-radius:6px; overflow:hidden; border:1px solid rgba(201,168,76,.2); background:rgba(201,168,76,.04); }
.event-thumb img { width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in; transition:transform .3s ease; }
.event-thumb img:hover { transform:scale(1.04); }
.event-thumb.placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.02)); }
.event-thumb.placeholder span { font-family:var(--font-display); color:var(--gold); font-size:.9rem; letter-spacing:.15em; text-align:center; line-height:1.4; }
.event-date-block { text-align:center; min-width:95px; flex-shrink:0; }
.event-year { font-family:var(--font-display); font-size:.6rem; color:var(--text-dim); letter-spacing:.1em; display:block; }
.event-monthday { display:flex; align-items:baseline; justify-content:center; gap:.15em; line-height:1.1; }
.event-month { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--gold); line-height:1.1; }
.event-sep { font-family:var(--font-display); font-size:1.3rem; color:var(--text-dim); line-height:1.1; }
.event-day { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--gold); line-height:1.1; }
.event-dow { font-family:var(--font-display); font-size:.65rem; color:var(--text-dim); letter-spacing:.1em; display:block; margin-top:.2em; }
.event-info { flex:1; }
.event-info h3 { font-size:1rem; color:var(--text-bright); margin-bottom:.3rem; }
.event-badges { margin-bottom:.4rem; }
.event-venue,.event-time { font-size:.8rem; color:var(--text-dim); }
.event-price { font-size:.85rem; color:var(--gold); margin-top:.3rem; }
.event-action { flex-shrink:0; display:flex; gap:.5rem; align-items:center; }
.event-ended-text { font-size:.8rem; color:var(--text-dim); }
.badge-new { background:rgba(220,60,60,.25); color:#e87070; animation:newPulse 2s ease-in-out infinite; }
@keyframes newPulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ===== MODAL ===== */
.modal-overlay { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.open { display:flex; animation:modalFadeIn .3s ease-out; }
#ticketModal { align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2rem 1rem; }
#ticketModal .modal-content { margin:auto; }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
.modal-content { position:relative; background:var(--bg-card); border:1px solid rgba(201,168,76,.2); border-radius:8px; padding:2.5rem; max-width:480px; width:100%; animation:modalSlideUp .3s ease-out; box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 1px rgba(201,168,76,.3),inset 0 1px 0 rgba(201,168,76,.1); }
@keyframes modalSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--text-dim); font-size:1.5rem; cursor:pointer; transition:color .3s; line-height:1; }
.modal-close:hover { color:var(--gold); }
.modal-badge { display:inline-block; font-family:var(--font-display); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; padding:.2rem .8rem; border-radius:2px; margin-bottom:1rem; }
.modal-image { width:100%; aspect-ratio:16/10; border-radius:6px; overflow:hidden; border:1px solid rgba(201,168,76,.2); background:rgba(201,168,76,.04); margin-bottom:1.5rem; }
.modal-image img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-image.placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.02)); }
.modal-image.placeholder span { font-family:var(--font-display); color:var(--gold); font-size:1.4rem; letter-spacing:.15em; text-align:center; line-height:1.4; white-space:pre-line; }
.modal-image img { cursor:zoom-in; transition:opacity .2s; }
.modal-image img:hover { opacity:.85; }

.image-viewer { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.image-viewer.open { display:flex; animation:modalFadeIn .3s ease-out; }
.image-viewer img { max-width:100%; max-height:90vh; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.8); animation:modalSlideUp .3s ease-out; }
.modal-content h3 { font-family:var(--font-display); font-size:1.2rem; color:var(--gold-light); letter-spacing:.05em; margin-bottom:1.5rem; }
.modal-details { margin-bottom:1.5rem; }
.modal-row { display:flex; padding:.6rem 0; border-bottom:1px solid rgba(201,168,76,.06); font-size:.9rem; }
.modal-label { flex-shrink:0; width:100px; color:var(--text-dim); font-family:var(--font-display); font-size:.7rem; letter-spacing:.1em; padding-top:2px; }
.modal-row span:last-child { color:var(--text-bright); }
.modal-note { font-size:.8rem; color:var(--text-dim); margin-bottom:1.5rem; line-height:1.7; }
.modal-actions { text-align:center; }

/* ===== LYRIC MODAL ===== */
.lyric-modal-content { position:relative; background:var(--bg-card); border:1px solid rgba(201,168,76,.2); border-radius:8px; padding:3rem 2.5rem; max-width:550px; width:90vw; max-height:80vh; overflow-y:auto; animation:modalSlideUp .3s ease-out; scrollbar-width:thin; scrollbar-color:var(--gold-dim) var(--bg-card); }
.lyric-modal-content::-webkit-scrollbar { width:4px; }
.lyric-modal-content::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:2px; }
.lyric-modal-content .modal-close { position:absolute; top:1rem; right:1rem; }
.lyric-modal-album { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--purple-light); margin-bottom:.3rem; }
.lyric-modal-title { font-family:var(--font-display); font-size:1.3rem; color:var(--gold-light); letter-spacing:.08em; margin-bottom:1.2rem; }
.lyric-modal-ornament { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:1.5rem; }
.lyric-modal-ornament .ornament-line { width:50px; }
.lyric-modal-ornament .ornament-diamond { width:6px; height:6px; }
.lyric-modal-body { font-size:.9rem; color:var(--text); line-height:2.2; text-align:center; }

/* ===== VIDEO MODAL ===== */
.video-modal-content { position:relative; width:90vw; max-width:900px; }
.video-modal-content .modal-close { position:absolute; top:-2.5rem; right:0; font-size:2rem; color:var(--text); background:none; border:none; cursor:pointer; z-index:10; transition:color .3s; }
.video-modal-content .modal-close:hover { color:var(--gold); }
.video-modal-title { font-family:var(--font-display); font-size:.9rem; color:var(--gold-light); letter-spacing:.1em; margin-bottom:.8rem; }
.video-modal-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.video-modal-player iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ===== FORMS ===== */
.reservation-info { text-align:center; margin-bottom:2rem; font-size:.9rem; color:var(--text-dim); }
.reservation-form { max-width:600px; margin:0 auto; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; font-family:var(--font-display); font-size:.75rem; letter-spacing:.1em; color:var(--text-dim); margin-bottom:.5rem; }
.required { color:var(--gold); }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:.8rem 1rem; background:var(--bg-card); border:1px solid rgba(201,168,76,.15); border-radius:4px; color:var(--text); font-family:var(--font-body); font-size:.9rem; transition:border-color .3s; outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--gold-dim); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7233' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.reservation-success { text-align:center; padding:3rem 2rem; max-width:500px; margin:0 auto; }
.success-icon { font-size:3rem; color:var(--gold); margin-bottom:1rem; }
.reservation-success h3 { font-family:var(--font-display); font-size:1.2rem; color:var(--gold-light); margin-bottom:1rem; }
.reservation-success p { font-size:.9rem; color:var(--text-dim); }

/* Star Rating */
.star-rating { display:flex; gap:.3rem; }
.star { font-size:1.8rem; color:rgba(201,168,76,.2); cursor:pointer; transition:color .2s,transform .2s; }
.star.active,.star:hover { color:var(--gold); transform:scale(1.15); }

/* ===== MUSIC DETAIL ===== */
.music-detail-card { display:grid; grid-template-columns:1fr 1.5fr; gap:2.5rem; align-items:start; }
.music-detail-art { border-radius:6px; overflow:hidden; }
.music-detail-body .music-detail-tag { font-family:var(--font-display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--purple-light); }
.music-detail-body h3 { font-family:var(--font-display); font-size:1.3rem; color:var(--gold-light); margin:.5rem 0 1rem; }
.music-detail-desc { font-size:.9rem; color:var(--text); margin-bottom:1.5rem; }
.tracklist { margin-bottom:1.5rem; }
.tracklist-label { font-family:var(--font-display); font-size:.7rem; letter-spacing:.2em; color:var(--text-dim); margin-bottom:.8rem; }
.track-item { border-bottom:1px solid rgba(201,168,76,.06); transition:background .3s; }
.track-item:hover { background:rgba(201,168,76,.03); }
.track-item:last-child { border-bottom:none; }
.track-num { font-family:var(--font-display); font-size:.7rem; color:var(--gold-dim); min-width:28px; display:inline-block; }
.track-name { font-size:.9rem; color:var(--text-bright); flex:1; }
.track-item { display:flex; align-items:center; gap:.6rem; padding:.6rem .4rem; flex-wrap:wrap; }
.track-btns { margin-left:auto; display:flex; gap:.4rem; flex-shrink:0; }
.track-btn { width:30px; height:30px; border-radius:50%; border:1px solid rgba(201,168,76,.2); background:transparent; color:var(--gold); font-size:.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.track-btn:hover { background:rgba(201,168,76,.15); border-color:var(--gold); transform:scale(1.15); }
.track-btn:active { transform:scale(.95); }
.track-lyric { display:none; width:100%; padding:1rem 1.2rem 1rem 2.2rem; font-size:.82rem; color:var(--text-dim); line-height:2; border-left:2px solid rgba(201,168,76,.15); margin:.4rem 0 .4rem 28px; background:rgba(110,75,158,.03); border-radius:0 4px 4px 0; animation:lyricReveal .4s ease-out; }
.track-lyric.open { display:block; }
@keyframes lyricReveal { from{opacity:0;max-height:0;padding-top:0;padding-bottom:0} to{opacity:1;max-height:500px} }
.music-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Singles */
.singles-grid { display:flex; flex-direction:column; gap:1rem; }
.single-card { display:flex; align-items:center; gap:1.5rem; background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:1rem 1.5rem; transition:border-color .3s; flex-wrap:wrap; }
.single-card:hover { border-color:rgba(201,168,76,.3); }
.single-art { flex-shrink:0; width:168px; height:95px; border-radius:4px; overflow:hidden; }
.single-info { flex:1; min-width:200px; }
.single-year { font-family:var(--font-display); font-size:.65rem; color:var(--text-dim); letter-spacing:.15em; }
.single-info h3 { font-size:1rem; color:var(--gold-light); margin:.2rem 0; }
.single-info p { font-size:.8rem; color:var(--text-dim); }
.single-actions { display:flex; gap:1rem; margin-top:.5rem; }
.lyric-panel { width:100%; padding:1rem 1.5rem; border-top:1px solid rgba(201,168,76,.08); }
.lyric-placeholder { font-size:.85rem; color:var(--text-dim); font-style:italic; }

/* Streaming */
.streaming-grid { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.streaming-card { display:inline-block; font-family:var(--font-display); font-size:.8rem; letter-spacing:.1em; color:var(--text-bright); border:1px solid rgba(201,168,76,.15); padding:.8rem 2rem; border-radius:4px; text-decoration:none; transition:all .3s; }
.streaming-card:hover { background:rgba(201,168,76,.1); border-color:var(--gold-dim); color:var(--gold); }

/* ===== VIDEO ===== */
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.video-card { background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; overflow:hidden; transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .4s; cursor:pointer; }
.video-card:hover { transform:translateY(-6px) scale(1.02); border-color:rgba(201,168,76,.35); box-shadow:0 12px 40px rgba(110,75,158,.15); }
.video-embed { aspect-ratio:16/9; position:relative; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; }
.video-thumb { width:100%; height:100%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.video-thumb::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.3); transition:background .3s; }
.video-card:hover .video-thumb::after { background:rgba(0,0,0,.15); }
.video-play-btn { position:relative; z-index:1; font-size:2.5rem; color:#fff; width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(201,168,76,.8); transition:transform .3s,box-shadow .3s; padding-left:4px; }
.video-card:hover .video-play-btn { transform:scale(1.15); box-shadow:0 0 30px rgba(201,168,76,.5); }
.video-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:var(--bg-dark); color:var(--text-dim); }
.video-play-icon { font-size:2.5rem; color:var(--gold-dim); }
.video-card h3 { padding:1rem 1.5rem 0; font-size:1rem; color:var(--gold-light); }
.video-card p { padding:0 1.5rem 1.5rem; font-size:.8rem; color:var(--text-dim); }

/* Radio */
.radio-card { text-align:center; max-width:500px; margin:0 auto; padding:2.5rem; border:1px solid rgba(201,168,76,.15); border-radius:6px; background:var(--bg-card); }
.radio-badge { display:inline-block; font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; color:var(--gold); border:1px solid var(--gold-dim); padding:.2rem .8rem; border-radius:2px; margin-bottom:1rem; }
.radio-card h3 { font-size:1.3rem; color:var(--gold-light); margin-bottom:1rem; }
.radio-card p { font-size:.9rem; color:var(--text); margin-bottom:1.5rem; line-height:1.8; }

/* ===== PROFILE ===== */
.profile-card { display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; align-items:center; }
.profile-photo { aspect-ratio:3/4; border-radius:6px; overflow:hidden; }
.profile-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%,rgba(110,75,158,.2) 0%,transparent 60%),var(--bg-dark); border-radius:6px; }
.profile-icon { font-size:4rem; opacity:.3; }
.profile-name { font-family:var(--font-display); font-size:2rem; color:var(--gold); letter-spacing:.15em; margin-bottom:.3rem; }
.profile-title { font-family:var(--font-elegant); font-size:1rem; font-style:italic; color:var(--gold-dim); margin-bottom:1rem; }
.profile-sns { display:flex; gap:1rem; margin-bottom:1.5rem; }
.profile-sns a { color:var(--gold); transition:color .3s; }
.profile-sns a:hover { color:var(--gold-light); }
.profile-bio p { font-size:.9rem; color:var(--text); margin-bottom:.8rem; }

/* Projects */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.project-card { text-align:center; padding:2.5rem 1.5rem; border:1px solid rgba(201,168,76,.1); border-radius:6px; background:var(--bg-card); transition:transform .3s,border-color .3s; }
.project-card:hover { transform:translateY(-3px); border-color:rgba(201,168,76,.3); }
.project-card.faded { opacity:.5; }
.project-emblem { width:56px; height:56px; margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--gold); border:1.5px solid var(--gold-dim); border-radius:50%; letter-spacing:.05em; animation:float 4s ease-in-out infinite; box-shadow:0 0 15px rgba(201,168,76,.08); }
.project-card:nth-child(2) .project-emblem { animation-delay:.7s; }
.project-card:nth-child(3) .project-emblem { animation-delay:1.4s; }
.project-card h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--text-bright); letter-spacing:.05em; margin-bottom:.5rem; }
.project-card p { font-size:.85rem; color:var(--text-dim); }

/* Event Feature */
.event-feature { text-align:center; max-width:500px; margin:0 auto; padding:3rem; border:1px solid rgba(201,168,76,.15); border-radius:6px; background:radial-gradient(ellipse at 50% 0%,rgba(110,75,158,.1) 0%,transparent 60%),var(--bg-card); }
.event-feature-badge { display:inline-block; font-family:var(--font-display); font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); padding:.3rem 1rem; border-radius:2px; margin-bottom:1.5rem; }
.event-feature h3 { font-size:1.6rem; color:var(--gold-light); margin-bottom:1rem; letter-spacing:.1em; }
.event-feature p { font-size:.9rem; color:var(--text); margin-bottom:1.5rem; line-height:1.8; }

/* ===== SHOP ===== */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.shop-card { display:block; background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; overflow:hidden; text-decoration:none; transition:transform .3s,border-color .3s,box-shadow .3s; }
.shop-card:hover { transform:translateY(-6px); border-color:rgba(201,168,76,.3); box-shadow:0 8px 30px rgba(110,75,158,.12); }
.shop-img { aspect-ratio:1; overflow:hidden; }
.shop-body { padding:1.2rem; }
.shop-badge { display:inline-block; font-family:var(--font-display); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; padding:.2rem .6rem; border-radius:2px; background:rgba(201,168,76,.15); color:var(--gold); margin-bottom:.5rem; }
.shop-body h3 { font-size:.95rem; color:var(--text-bright); margin-bottom:.3rem; }
.shop-price { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--gold); }
.shop-desc { font-size:.75rem; color:var(--text-dim); margin-top:.3rem; }

/* ===== CHATBOT ===== */
.chatbot { position:fixed; bottom:1.5rem; right:1.5rem; z-index:200; }
.chatbot-toggle { display:flex; align-items:center; gap:.5rem; padding:.7rem 1.2rem; background:linear-gradient(135deg,var(--purple-dim),var(--bg-card)); border:1px solid rgba(201,168,76,.2); border-radius:30px; cursor:pointer; transition:box-shadow .3s; }
.chatbot-toggle:hover { box-shadow:0 0 20px rgba(110,75,158,.3); transform:scale(1.05); }
.chatbot-toggle { transition:box-shadow .3s,transform .3s; }
.chatbot-icon { animation:float 3s ease-in-out infinite; display:inline-block; }
.chatbot-icon { font-size:1.2rem; color:var(--gold); }
.chatbot-label { font-family:var(--font-display); font-size:.7rem; letter-spacing:.1em; color:var(--text-bright); }
.chatbot-panel { display:none; position:absolute; bottom:50px; right:0; width:300px; background:var(--bg-card); border:1px solid rgba(201,168,76,.2); border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 1px rgba(201,168,76,.2); }
.chatbot-panel.open { animation:modalSlideUp .3s ease-out; }
.chatbot-panel.open { display:block; }
.chatbot-header { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1rem; background:rgba(110,75,158,.1); border-bottom:1px solid rgba(201,168,76,.1); }
.chatbot-header span { font-family:var(--font-display); font-size:.75rem; color:var(--gold); letter-spacing:.1em; }
.chatbot-header button { background:none; border:none; color:var(--text-dim); font-size:1.2rem; cursor:pointer; }
.chatbot-body { padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.chatbot-q { background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.1); border-radius:4px; padding:.6rem .8rem; font-size:.8rem; color:var(--text); cursor:pointer; text-align:left; font-family:var(--font-body); transition:background .3s; }
.chatbot-q:hover { background:rgba(201,168,76,.12); }
.chatbot-answer { padding:1rem; font-size:.85rem; color:var(--text); line-height:1.7; border-top:1px solid rgba(201,168,76,.08); display:none; }
.chatbot-answer.show { display:block; }

/* ===== SNS LAYOUT ===== */
.sns-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:start; }
.sns-layout-cards { display:block; max-width:960px; margin:0 auto; }
.timeline-wrap { border:1px solid rgba(201,168,76,.1); border-radius:8px; overflow:hidden; max-height:480px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-dim) var(--bg-card); }
.timeline-wrap::-webkit-scrollbar { width:4px; }
.timeline-wrap::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:2px; }
.sns-links { display:flex; flex-direction:column; gap:1.2rem; }
.sns-links-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:768px) { .sns-links-grid { grid-template-columns:1fr; } }
.sns-card { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.8rem 1.5rem; border:1px solid rgba(201,168,76,.1); border-radius:6px; background:var(--bg-card); text-decoration:none; transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .4s; }
.sns-card:hover { transform:translateY(-4px); border-color:rgba(201,168,76,.35); box-shadow:0 8px 30px rgba(110,75,158,.12); }
.sns-card svg { color:var(--gold); }
.sns-card-name { font-family:var(--font-display); font-size:1rem; color:var(--text-bright); letter-spacing:.1em; }
.sns-card-handle { font-size:.8rem; color:var(--text-dim); }
.sns-card-desc { font-size:.8rem; color:var(--text-dim); text-align:center; margin:.3rem 0 .8rem; line-height:1.5; }

/* ===== FOOTER ===== */
footer { position:relative; z-index:1; text-align:center; padding:3rem 2rem; background:var(--bg-deep); border-top:1px solid rgba(201,168,76,.05); }
.footer-ornament { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1.5rem; }
.footer-links { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.footer-links a { font-family:var(--font-display); font-size:.65rem; letter-spacing:.1em; color:var(--text-dim); text-decoration:none; transition:color .3s; }
.footer-links a:hover { color:var(--gold); }
.footer-text { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; color:var(--text-dim); }

/* ===== ANIMATIONS ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.fade-in.visible { opacity:1; transform:translateY(0); }
.slide-left { opacity:0; transform:translateX(-60px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.slide-left.visible { opacity:1; transform:translateX(0); }
.slide-right { opacity:0; transform:translateX(60px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.slide-right.visible { opacity:1; transform:translateX(0); }
.scale-in { opacity:0; transform:scale(.8); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.scale-in.visible { opacity:1; transform:scale(1); }
.stagger-1 { transition-delay:.12s; }
.stagger-2 { transition-delay:.24s; }
.stagger-3 { transition-delay:.36s; }
.stagger-4 { transition-delay:.48s; }

/* Floating */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatSlow { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-5px) rotate(1deg)} }

/* Breathing border */
@keyframes borderBreathe { 0%,100%{border-color:rgba(201,168,76,.08);box-shadow:0 0 0 rgba(201,168,76,0)} 50%{border-color:rgba(201,168,76,.25);box-shadow:0 0 25px rgba(201,168,76,.06)} }

/* Section bg shimmer */
.section-alt::before { content:''; position:absolute; top:0; left:-50%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(201,168,76,.015),transparent); animation:sectionShimmer 8s ease-in-out infinite; pointer-events:none; }
@keyframes sectionShimmer { 0%{left:-50%} 50%{left:100%} 100%{left:-50%} }

/* Glow follow cursor */
.glow-follow { position:relative; overflow:hidden; }
.glow-follow::after { content:''; position:absolute; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%); pointer-events:none; opacity:0; transition:opacity .4s; transform:translate(-50%,-50%); top:var(--mouse-y,50%); left:var(--mouse-x,50%); }
.glow-follow:hover::after { opacity:1; }

/* Tilt hover (JS applies transform) */
.tilt-hover { transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s; }

/* Parallax depth layers */
[data-parallax] { transition:transform .1s linear; }

/* ===== HISTORY TIMELINE ===== */
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:14px; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,transparent,var(--gold-dim) 5%,var(--gold-dim) 95%,transparent); }
.timeline-item { position:relative; margin-bottom:2.5rem; }
.timeline-item::before { content:''; position:absolute; left:-33px; top:6px; width:10px; height:10px; border:1.5px solid var(--gold-dim); border-radius:50%; background:var(--bg-deep); transition:border-color .3s,box-shadow .3s,background .3s; z-index:1; }
.timeline-item:hover::before { border-color:var(--gold); box-shadow:0 0 12px rgba(201,168,76,.4); background:var(--gold-dim); }
.timeline-highlight::before { width:12px; height:12px; left:-34px; top:5px; border-color:var(--gold); background:var(--gold); box-shadow:0 0 15px rgba(201,168,76,.5); }
.timeline-year { font-family:var(--font-display); font-size:.75rem; letter-spacing:.15em; color:var(--gold); margin-bottom:.4rem; }
.timeline-content h3 { font-family:var(--font-display); font-size:.9rem; color:var(--gold-light); letter-spacing:.05em; margin-bottom:.4rem; }
.timeline-content p { font-size:.82rem; color:var(--text-dim); line-height:1.7; }
.timeline-highlight .timeline-content { padding:1.2rem 1.5rem; border:1px solid rgba(201,168,76,.15); border-radius:6px; background:rgba(201,168,76,.03); }
.timeline-highlight .timeline-year { font-size:.85rem; }
.timeline-highlight .timeline-content h3 { font-size:1rem; color:var(--gold); }

/* ===== SCROLL PROGRESS ===== */
#scrollProgress { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--purple),var(--gold),var(--purple-light)); z-index:9999; width:0; transition:width .1s; box-shadow:0 0 8px rgba(201,168,76,.4); }

/* ===== BACK TO TOP ===== */
#backToTop { position:fixed; bottom:5rem; right:1.5rem; z-index:150; width:40px; height:40px; border-radius:50%; border:1px solid rgba(201,168,76,.2); background:rgba(22,20,37,.9); color:var(--gold); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(20px); transition:opacity .4s,transform .4s,border-color .3s,box-shadow .3s; pointer-events:none; backdrop-filter:blur(8px); }
#backToTop.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
#backToTop:hover { border-color:var(--gold); box-shadow:0 0 20px rgba(201,168,76,.2); }

/* ===== HERO VIDEO OVERLAY (after text hides) ===== */
.hero-logo-overlay { position:absolute; z-index:3; bottom:15%; left:50%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity 1.5s ease-in; pointer-events:none; }
.hero-logo-overlay.show { opacity:1; }
.hero-logo-overlay .logo-text { font-family:var(--font-display); font-size:clamp(1.5rem,5vw,3rem); color:var(--gold); letter-spacing:.2em; text-shadow:0 0 30px rgba(201,168,76,.3),0 2px 15px rgba(0,0,0,.8); }
.hero-logo-overlay .logo-sub { font-family:var(--font-elegant); font-size:.85rem; font-style:italic; color:rgba(201,168,76,.5); letter-spacing:.2em; margin-top:.3rem; }

/* ===== FANTASY CARD CORNERS ===== */
.fantasy-corners { position:relative; }
.fantasy-corners::before,.fantasy-corners::after { content:''; position:absolute; width:20px; height:20px; border-color:rgba(201,168,76,.2); border-style:solid; pointer-events:none; transition:border-color .3s; }
.fantasy-corners::before { top:8px; left:8px; border-width:1px 0 0 1px; }
.fantasy-corners::after { bottom:8px; right:8px; border-width:0 1px 1px 0; }
.fantasy-corners:hover::before,.fantasy-corners:hover::after { border-color:rgba(201,168,76,.5); }

/* ===== SECTION DIVIDER RUNE ===== */
.section-rune { text-align:center; padding:1rem 0; position:relative; z-index:1; }
.section-rune::before { content:''; display:inline-block; width:30px; height:30px; border:1px solid rgba(201,168,76,.15); transform:rotate(45deg); position:relative; }
.section-rune::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; background:var(--gold-dim); border-radius:50%; box-shadow:0 0 10px rgba(201,168,76,.3); }

/* ===== PAGE HEADER ENHANCED ===== */
.page-header { position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse at 50% 80%,rgba(110,75,158,.1) 0%,transparent 60%); pointer-events:none; }
.page-header::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }
.page-header h1 { text-shadow:0 0 30px rgba(201,168,76,.2); }

/* ===== MAGIC CIRCLE BG ===== */
.magic-bg { position:relative; overflow:hidden; }
.magic-bg::before { content:''; position:absolute; width:400px; height:400px; border:1px solid rgba(201,168,76,.03); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); animation:magicRotate 30s linear infinite; pointer-events:none; }
.magic-bg::after { content:''; position:absolute; width:300px; height:300px; border:1px dashed rgba(110,75,158,.04); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); animation:magicRotate 20s linear infinite reverse; pointer-events:none; }
@keyframes magicRotate { to{transform:translate(-50%,-50%) rotate(360deg)} }

/* ===== FORM FOCUS GLOW ===== */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 15px rgba(201,168,76,.1); }

/* ===== ENHANCED FOOTER ===== */
footer::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse at 50% 0%,rgba(110,75,158,.05) 0%,transparent 50%); pointer-events:none; }

/* ===== NAV GLASS ===== */
nav.scrolled { background:rgba(10,10,18,.85); backdrop-filter:blur(16px) saturate(1.2); }
nav.scrolled::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.15) 20%,rgba(110,75,158,.1) 50%,rgba(201,168,76,.15) 80%,transparent); }

/* ===== SELECTION COLOR ===== */
::selection { background:rgba(201,168,76,.3); color:var(--text-bright); }

/* ===== MOBILE ===== */
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-links { position:fixed; top:0; right:-100%; width:280px; height:100vh; flex-direction:column; background:rgba(10,10,18,.98); backdrop-filter:blur(20px); padding:100px 3rem 3rem; gap:1.5rem; transition:right .4s ease; border-left:1px solid rgba(201,168,76,.1); }
  .nav-links.open { right:0; }
  .nav-links a { font-size:.9rem; }
  .section { padding:3.5rem 1.5rem; }
  .hero-title { font-size:clamp(2.5rem,12vw,4.5rem); }
  .album-feature,.music-detail-card,.profile-card { grid-template-columns:1fr; }
  .album-feature-art { max-width:300px; margin:0 auto; }
  .music-detail-art { max-width:250px; margin:0 auto; }
  .profile-photo { max-width:250px; margin:0 auto; }
  .news-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .video-grid { grid-template-columns:1fr; }
  .shop-grid { grid-template-columns:1fr 1fr; }
  .event-card { flex-wrap:wrap; }
  .event-thumb { width:100%; height:auto; }
  .event-thumb img { height:auto; }
  .event-action { width:100%; margin-top:.5rem; }
  .form-row { grid-template-columns:1fr; }
  .ornament-line { width:40px; }
  .follow-card { min-width:140px; padding:1.5rem 2rem; }
  .sns-layout { grid-template-columns:1fr; }
  .world-map-container { height:300px; }
  .quiz-result-card { flex-direction:column; text-align:center; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .lang-toggle { display:none; }
}
@media (max-width:480px) {
  .hero-quote br { display:none; }
  .shop-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
}

/* ===== 1. NEWSLETTER POPUP ===== */

/* ===== 2. SHARE BUTTONS ===== */
.share-bar { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.share-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(201,168,76,.15); background:transparent; color:var(--gold); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; font-size:.8rem; text-decoration:none; }
.share-btn:hover { background:rgba(201,168,76,.15); border-color:var(--gold); transform:scale(1.1); }

/* ===== 3. LORE / WORLD PAGE ===== */
.lore-card { background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:2rem; margin-bottom:1.5rem; transition:border-color .3s; }
.lore-card:hover { border-color:rgba(201,168,76,.3); }
.lore-card h3 { font-family:var(--font-display); font-size:1rem; color:var(--gold-light); margin-bottom:.8rem; }
.lore-card p { font-size:.85rem; color:var(--text-dim); line-height:1.8; }
.lore-card .lore-listen { margin-top:1rem; }

/* ===== 4. GALLERY ===== */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.gallery-item { aspect-ratio:4/3; border-radius:6px; overflow:hidden; cursor:pointer; position:relative; background:var(--bg-dark); }
.gallery-item img { width:100%; height:100%; object-fit:contain; transition:transform .5s; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,18,.5) 0%,transparent 50%); pointer-events:none; }

/* ===== 6. QUIZ ===== */
.quiz-section { max-width:600px; margin:0 auto; }
.quiz-question { text-align:center; margin-bottom:2rem; }
.quiz-question h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--gold-light); margin-bottom:1.5rem; }
.quiz-options { display:flex; flex-direction:column; gap:.6rem; }
.quiz-opt { padding:1rem 1.5rem; border:1px solid rgba(201,168,76,.12); border-radius:6px; background:var(--bg-card); color:var(--text); cursor:pointer; font-family:var(--font-body); font-size:.9rem; text-align:left; transition:all .3s; }
.quiz-opt:hover { border-color:var(--gold-dim); background:rgba(201,168,76,.06); transform:translateX(4px); }
.quiz-progress { display:flex; justify-content:center; gap:.4rem; margin-bottom:2rem; }
.quiz-dot { width:8px; height:8px; border-radius:50%; background:rgba(201,168,76,.15); transition:background .3s; }
.quiz-dot.active { background:var(--gold); }
.quiz-result-card { display:flex; gap:2rem; align-items:center; padding:2rem; border:1px solid rgba(201,168,76,.2); border-radius:8px; background:rgba(201,168,76,.03); }
.quiz-result-icon { font-size:3rem; flex-shrink:0; }
.quiz-result-card h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--gold); margin-bottom:.5rem; }
.quiz-result-card p { font-size:.85rem; color:var(--text-dim); line-height:1.7; }

/* ===== 10. WORLD MAP ===== */
.world-map-container { position:relative; width:100%; height:450px; border:1px solid rgba(201,168,76,.1); border-radius:8px; overflow:hidden; background:var(--bg-dark); }
.world-map-container canvas { width:100%; height:100%; }
.map-pin { position:absolute; cursor:pointer; transition:transform .3s; }
.map-pin:hover { transform:scale(1.3); }
.map-pin .pin-dot { width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(201,168,76,.5); animation:pinPulse 2s ease-in-out infinite; }
.map-pin .pin-label { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-display); font-size:.65rem; color:var(--gold-light); letter-spacing:.1em; padding:.2rem .5rem; background:rgba(10,10,18,.8); border-radius:3px; opacity:0; transition:opacity .3s; pointer-events:none; margin-bottom:4px; }
.map-pin:hover .pin-label { opacity:1; }
@keyframes pinPulse { 0%,100%{box-shadow:0 0 10px rgba(201,168,76,.3)} 50%{box-shadow:0 0 20px rgba(201,168,76,.7)} }
.map-tooltip { position:absolute; background:var(--bg-card); border:1px solid rgba(201,168,76,.2); border-radius:6px; padding:1.2rem; max-width:250px; z-index:10; display:none; animation:modalSlideUp .3s ease-out; }
.map-tooltip.show { display:block; }
.map-tooltip h4 { font-family:var(--font-display); font-size:.85rem; color:var(--gold); margin-bottom:.4rem; }
.map-tooltip p { font-size:.8rem; color:var(--text-dim); line-height:1.6; }

/* ===== EPK ===== */
.epk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2.5rem; }
.epk-card { background:var(--bg-card); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:1.2rem; text-align:center; }
.epk-card h3 { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.3rem; }
.epk-value { font-size:.95rem; color:var(--gold-light); }
.epk-bio { margin-bottom:2.5rem; padding:2rem; border:1px solid rgba(201,168,76,.08); border-radius:6px; background:rgba(201,168,76,.02); }
.epk-bio h3 { font-family:var(--font-display); font-size:.8rem; letter-spacing:.15em; color:var(--gold); margin-bottom:1rem; }
.epk-bio p { font-size:.85rem; color:var(--text); line-height:1.9; }
.epk-section { margin-bottom:2.5rem; }
.epk-section h3 { font-family:var(--font-display); font-size:.8rem; letter-spacing:.15em; color:var(--gold); margin-bottom:1rem; }
.epk-disc-item { display:flex; gap:1rem; align-items:center; }
.epk-disc-title { font-size:.95rem; color:var(--text-bright); }
.epk-disc-detail { font-size:.8rem; color:var(--text-dim); }
.epk-list { padding-left:1.2rem; }
.epk-list li { font-size:.85rem; color:var(--text-dim); margin-bottom:.4rem; }
.epk-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.epk-links a { font-family:var(--font-display); font-size:.8rem; letter-spacing:.1em; color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,168,76,.2); padding-bottom:2px; transition:border-color .3s; }
.epk-links a:hover { border-color:var(--gold); }

/* ===== TEAM ===== */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.team-member { padding:1rem; border:1px solid rgba(201,168,76,.08); border-radius:6px; background:var(--bg-card); }
.team-name { font-family:var(--font-display); font-size:.9rem; color:var(--gold-light); margin-bottom:.3rem; }
.team-role { font-size:.75rem; color:var(--text-dim); }

/* ===== 8. LANG TOGGLE ===== */
.lang-toggle { position:fixed; top:80px; right:1.5rem; z-index:99; display:flex; border:1px solid rgba(201,168,76,.15); border-radius:3px; overflow:hidden; backdrop-filter:blur(8px); }
.lang-btn { padding:.3rem .6rem; font-family:var(--font-display); font-size:.6rem; letter-spacing:.1em; background:transparent; border:none; color:var(--text-dim); cursor:pointer; transition:all .3s; }
.lang-btn.active { background:rgba(201,168,76,.15); color:var(--gold); }