/* THE QUIETT — official fan card. Vertical ID-style 3D cards, header login, fan drawer,
   live benefit gates, shop + schedule hooks. Self-contained mock. Black / neon-yellow system. */

/* ---------- header control ---------- */
.chon-ctl{font-family:Archivo,sans-serif;font-stretch:112%;cursor:pointer;line-height:1}
.chon-login{font-weight:800;font-size:11px;letter-spacing:.06em;color:#000;background:var(--neon);border:0;border-radius:999px;padding:8px 13px}
.chon-login:hover{filter:brightness(1.08)}
.chon-badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;letter-spacing:.06em;color:var(--neon);background:rgba(242,255,58,.1);border:1px solid rgba(242,255,58,.55);border-radius:999px;padding:6px 12px}
.chon-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 3px rgba(242,255,58,.18)}
.chon-badge:hover{background:rgba(242,255,58,.18)}
/* compact on tight mobile headers (shop header is dense) */
@media(max-width:640px){.chon-login,.chon-badge{padding:6px 10px;font-size:10px;letter-spacing:.04em}.chon-badge{gap:5px}}

/* ======================================================================
   VERTICAL FAN CARD  (.fc-card)  — ID-card style, 3D tilt + holographic
   ====================================================================== */
.fc-slot{perspective:1300px}
.fc-card{position:relative;aspect-ratio:.64/1;border-radius:20px;overflow:hidden;color:#fff;isolation:isolate;cursor:pointer;
  display:flex;flex-direction:column;padding:16px 15px 14px;
  transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s;
  box-shadow:0 20px 48px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);will-change:transform}
.fc-card:hover{box-shadow:0 34px 76px -20px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.16)}
/* The Quiett palette — premium black with neon accent */
.fc-q{--acc:#F2FF3A;background:linear-gradient(168deg,#262212 0%,#13110a 42%,#060504 100%)}
/* holographic sheen sweep */
.fc-holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.5;border-radius:inherit;
  background:linear-gradient(130deg,transparent 30%,rgba(242,255,58,.3) 44%,rgba(124,196,255,.36) 50%,rgba(229,140,255,.32) 56%,transparent 72%);
  background-size:220% 260%;animation:fc-sheen 7.5s linear infinite}
@keyframes fc-sheen{0%{background-position:0 180%}100%{background-position:0 -180%}}
/* cursor glare */
.fc-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 42%)}
.fc-card:hover .fc-glare,.fc-card:focus-visible .fc-glare{opacity:1}
/* vertical brand watermark down the right edge */
.fc-wm{position:absolute;right:2px;top:50%;font:900 clamp(40px,15vw,66px)/.8 Archivo,sans-serif;font-stretch:112%;
  color:var(--acc);opacity:.08;letter-spacing:-.04em;white-space:nowrap;pointer-events:none;
  transform:translateY(-50%) rotate(90deg);transform-origin:center}
.fc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 8px)}
.fc-head{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;transform:translateZ(18px)}
.fc-kicker{font:800 8.5px Archivo;letter-spacing:.16em;color:var(--acc);text-transform:uppercase}
.fc-star{font:800 9px Archivo;letter-spacing:.05em;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:3px 9px}
.fc-name{font:800 clamp(18px,5.5vw,23px) Archivo;font-stretch:112%;text-transform:uppercase;line-height:.95;margin:7px 0 10px;
  position:relative;z-index:2;transform:translateZ(30px);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.fc-photo{position:relative;z-index:2;border-radius:13px;overflow:hidden;aspect-ratio:1/.92;border:1px solid rgba(255,255,255,.16);
  transform:translateZ(16px);box-shadow:0 12px 26px -12px #000}
.fc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:contrast(1.06) brightness(1.02);display:block}
.fc-verify{align-self:center;margin:11px 0 0;font:800 9.5px Archivo;letter-spacing:.04em;color:#0a0a00;background:var(--acc);
  border-radius:999px;padding:5px 13px;position:relative;z-index:2;transform:translateZ(24px);display:inline-flex;align-items:center;gap:5px}
.fc-qr{width:34%;aspect-ratio:1;margin:11px auto 0;position:relative;z-index:2;transform:translateZ(12px)}
.fc-qr svg{width:100%;height:auto;display:block;border-radius:7px}
.fc-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2;transform:translateZ(16px)}
.fc-tier{font:800 15px Archivo;letter-spacing:.04em;color:var(--acc);line-height:1}
.fc-fam{display:block;font:700 8px Archivo;letter-spacing:.1em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:3px}
.fc-logo{display:inline-flex;align-items:center;gap:4px;font:800 10px Archivo;letter-spacing:.03em;color:#fff;opacity:.9}
.fc-logo i{width:11px;height:11px;border-radius:3px;background:var(--acc);display:inline-block}
/* idle float (JS pauses on hover) */
.fc-float .fc-card{animation:fc-float 8s ease-in-out infinite}
@keyframes fc-float{0%,100%{transform:rotateX(2deg) rotateY(-9deg)}50%{transform:rotateX(-2deg) rotateY(9deg)}}

/* ---------- FANDOM stage: card + what-you-get ---------- */
.fc-stage{display:grid;grid-template-columns:272px 1fr;gap:40px;align-items:center;margin:8px 0 6px}
.fc-stage .fc-slot{width:272px;max-width:100%}
@media(max-width:640px){.fc-stage{grid-template-columns:1fr;justify-items:center;gap:28px}.fc-benefits{max-width:420px}}
.fc-benefits .bk{font:800 11px Archivo;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.fc-benefits ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fc-benefits li{position:relative;padding-left:26px;font-size:15px;line-height:1.4;color:#1a1a1a}
.fc-benefits li b{font-weight:700}
.fc-benefits li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;background:var(--dark);
  box-shadow:inset 0 0 0 2px var(--neon)}
.fc-benefits li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--neon)}
.fc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---------- buttons ---------- */
.j-btn{display:inline-block;background:var(--neon);color:#000;font:800 12px Archivo;letter-spacing:.06em;border:0;border-radius:999px;padding:12px 22px;cursor:pointer}
.j-btn:hover{filter:brightness(1.07)}
.j-btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--fg)}
.j-btn.ghost.on-dark{color:#fff;border-color:#555}
.j-btn.ghost:hover{filter:none}

/* ---------- top-of-page fan strip (prominence, not app-pushy) ---------- */
.fc-strip{background:var(--dark);color:#fff;border-top:1px solid #1d1d1d;border-bottom:1px solid #1d1d1d;
  padding:15px var(--gutter);display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap}
.fc-strip .k{font:800 11px Archivo;font-stretch:112%;letter-spacing:.14em;color:var(--neon);text-transform:uppercase;flex:none}
.fc-strip p{font-size:14px;color:#d4d4d4;margin:0;flex:1;min-width:220px;line-height:1.5}
.fc-strip .j-btn{flex:none}

/* ---------- inline note (schedule / shop teaser on index) ---------- */
.fc-note{background:var(--dark);color:#fff;border-radius:11px;padding:14px 18px;margin-top:20px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:13.5px}
.fc-note .k{font:800 10px Archivo;letter-spacing:.12em;color:var(--neon);text-transform:uppercase;flex:none}
.fc-note span.tx{color:#d4d4d4;flex:1;min-width:200px;line-height:1.5}
.fc-note a{color:var(--neon);white-space:nowrap}

/* ---------- shop ribbon (persists above the SPA) ---------- */
.fc-ribbon{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px var(--gutter);font-size:13px;border-bottom:1px solid #1d1d1d;background:#000;color:#fff}
.fc-ribbon .k{font:800 10px Archivo;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);flex:none}
.fc-ribbon .tx{flex:1;min-width:200px;line-height:1.45;color:#d9d9d9}
.fc-ribbon.ok{background:rgba(242,255,58,.1);color:#111;border-bottom-color:rgba(197,212,0,.4)}
.fc-ribbon.ok .k{color:#7a8500}.fc-ribbon.ok .tx{color:#222}
.fc-ribbon .j-btn{padding:9px 16px;font-size:11px}

/* ---------- login overlay + modal ---------- */
.chon-ov{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.76);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px}
.chon-ov.open{display:flex;animation:chon-fade .18s ease}
@keyframes chon-fade{from{opacity:0}to{opacity:1}}
.chon-modal{background:#0c0b09;border:1px solid #332f27;border-radius:18px;max-width:356px;width:100%;color:#f4f3ec;font-family:"Noto Sans KR",system-ui,sans-serif;overflow:hidden;box-shadow:0 34px 90px -34px #000}
.chon-hd{padding:15px 18px;border-bottom:1px solid #24211b;display:flex;align-items:center;justify-content:space-between}
.chon-hd b{font-family:Archivo;font-weight:800;font-size:14px;letter-spacing:.04em}
.chon-hd b .q{color:var(--neon)}
.chon-x{background:none;border:0;color:#8b897e;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.chon-x:hover{color:#fff}
.chon-bd{padding:20px 18px;text-align:center}
.chon-scope{font-family:Archivo;font-weight:600;font-size:11px;letter-spacing:.04em;color:#f2ff3a;margin-bottom:14px}
.cx-qrbox{width:148px;margin:0 auto 14px}
.cx-qrbox svg{display:block;width:100%;height:auto;border-radius:12px}
.chon-steps{font-size:12px;color:#c7c4b8;text-align:left;max-width:232px;margin:0 auto 16px;line-height:1.75}
.chon-steps b{color:#f4f3ec}
.chon-approve{display:block;width:100%;background:var(--neon);color:#000;border:0;border-radius:11px;padding:12px;font-family:Archivo;font-weight:800;font-size:13px;letter-spacing:.04em;cursor:pointer}
.chon-approve:hover{filter:brightness(1.07)}
.chon-approve span{display:block;font-family:"Noto Sans KR";font-weight:500;font-size:10px;color:#2a2a00;margin-top:2px;letter-spacing:0}
.chon-fine{font-size:10.5px;color:#6f6d64;margin-top:12px;line-height:1.5}

/* ---------- fan drawer ---------- */
.chon-drawer{position:fixed;top:0;right:0;bottom:0;z-index:1000;width:min(360px,94vw);background:#0c0b09;border-left:1px solid #24211b;
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;
  color:#f4f3ec;font-family:"Noto Sans KR",system-ui,sans-serif;box-shadow:-34px 0 90px -44px #000}
.chon-drawer.open{transform:none}
.chon-dbd{padding:16px 18px 8px;overflow-y:auto;display:grid;gap:14px;align-content:start;flex:1}
.chon-dbd .fc-slot{width:210px;margin:0 auto;perspective:1000px}
.chon-who{display:flex;align-items:center;gap:10px;padding:0 0 2px}
.chon-av{width:34px;height:34px;border-radius:50%;background:var(--neon);color:#000;font:800 15px/34px Archivo;text-align:center;flex:none}
.chon-who .nm{font-weight:700;font-size:14px}
.chon-who .vf{font-size:11px;color:#8b897e}
.chon-perks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.chon-perks li{font-size:12px;color:#c7c4b8;padding-left:18px;position:relative;line-height:1.4}
.chon-perks li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:2px;background:var(--neon)}
.chon-foot{padding:12px 16px;border-top:1px solid #24211b;display:flex;gap:10px;align-items:center}
.chon-foot .mini{font-size:10.5px;color:#6f6d64;flex:1;line-height:1.45}
.chon-logout{background:none;border:1px solid #3a362d;color:#b7b4a9;border-radius:9px;padding:9px 14px;font:600 12px "Noto Sans KR";cursor:pointer;white-space:nowrap}
.chon-logout:hover{border-color:#5a564b;color:#fff}

/* ---------- live gates ---------- */
.chon-gate{border-radius:10px;padding:16px 18px;font-size:14px;line-height:1.55}
.chon-gate .g-k{font-family:Archivo;font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;display:block}
.chon-gate.lock{background:#000;color:#fff}
.chon-gate.lock .g-k{color:#8b897e}
.chon-gate.lock b{color:var(--neon)}
.chon-gate.ok{background:rgba(242,255,58,.14);border:1px solid rgba(197,212,0,.5);color:#111}
.chon-gate.ok .g-k{color:#7a8500}
.chon-gate.ok b{color:#111;border-bottom:2px solid var(--neon)}
.chon-gate .g-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chon-chip{font:800 10px Archivo;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.chon-gate.ok .chon-chip{background:#000;color:var(--neon)}
.chon-gate .g-btn{margin-top:12px;display:inline-block;background:var(--neon);color:#000;font:800 11px Archivo;letter-spacing:.06em;border:0;border-radius:999px;padding:10px 18px;cursor:pointer}
.chon-gates{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:stretch}
.chon-gates>div{display:flex}
.chon-gates>div>.chon-gate{flex:1}
@media(max-width:560px){.chon-gates{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .chon-drawer{transition:none}.chon-ov.open{animation:none}
  .fc-holo{animation:none}.fc-float .fc-card{animation:none;transform:rotateY(-7deg)}
}