/* cityzen-ui — Neon Arcade design system.  SOURCE OF TRUTH: WebApps/cityzen-ui.css
   다른 레포(cityzen-web, onmantle 등)는 이 파일의 동기 사본을 둔다. 변경 시 함께 갱신. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;600;700;900&family=Geist+Mono:wght@400;700&display=swap');

/* 회전 네온 보더 각도 — @property 등록 없이는 custom prop이 보간되지 않아 카드 호버 애니가 침묵 실패한다. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --cz-bg:#06060b; --cz-bg-card:rgba(255,255,255,.03);
  --cz-tx:#eef0ff; --cz-tx-dim:#9a9ac0; --cz-tx-mute:#64647e;
  --cz-cyan:#5ef2ff; --cz-mag:#ff4fc8; --cz-grn:#39ff96; --cz-amb:#ffd250; --cz-vio:#a98bff;
  --cz-line:rgba(255,255,255,.08); --cz-r:16px; --cz-rs:12px;
  --cz-font:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cz-mono:'Geist Mono',ui-monospace,monospace;
}
.cz-root{font-family:var(--cz-font);background:var(--cz-bg);color:var(--cz-tx)}

/* background layers (injected by czFx) */
.cz-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cz-fx .cz-orbs{position:absolute;inset:0;filter:blur(130px);opacity:.24}
.cz-fx .cz-orb{position:absolute;width:54vw;height:54vw;border-radius:50%;mix-blend-mode:screen;animation:cz-drift 28s ease-in-out infinite}
.cz-fx .cz-orb.o1{background:radial-gradient(circle,var(--cz-cyan),transparent 78%);top:-12vw;left:-8vw}
.cz-fx .cz-orb.o2{background:radial-gradient(circle,var(--cz-mag),transparent 78%);top:-6vw;right:-10vw;animation-delay:-9s}
.cz-fx .cz-orb.o3{background:radial-gradient(circle,var(--cz-vio),transparent 78%);top:32vw;left:32vw;animation-delay:-18s}
.cz-fx .cz-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(94,242,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(94,242,255,.022) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 82%);mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 82%);animation:cz-grid 20s linear infinite}
.cz-fx .cz-scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.06) 2px 3px);mix-blend-mode:overlay;opacity:.22}
@keyframes cz-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,4vw) scale(1.12)}66%{transform:translate(-5vw,3vw) scale(.92)}}
@keyframes cz-grid{to{background-position:0 46px,46px 0}}
@keyframes cz-blink{50%{opacity:.3}}
@keyframes cz-spin{to{transform:rotate(360deg)}}

/* nav */
.cz-nav{display:flex;align-items:center;gap:14px;padding:15px clamp(14px,3vw,28px);max-width:1080px;margin:0 auto;border-bottom:1px solid var(--cz-line);position:relative;z-index:3}
.cz-logo{font-family:var(--cz-mono);font-weight:700;font-size:1.1rem;color:#fff;text-shadow:0 0 18px rgba(94,242,255,.6);text-decoration:none}
.cz-logo b{background:linear-gradient(90deg,var(--cz-cyan),var(--cz-vio));-webkit-background-clip:text;background-clip:text;color:transparent}
.cz-navlinks{margin-left:auto;display:flex;gap:6px;font-size:.84rem;align-items:center}
.cz-navlinks a{color:var(--cz-tx-dim);text-decoration:none;padding:8px 13px;border-radius:9px;transition:.15s}
.cz-navlinks a:hover{color:#fff;background:rgba(255,255,255,.06)}
.cz-navlinks a.cz-cta{color:#06060a;background:linear-gradient(90deg,var(--cz-cyan),#7ef0ff);font-weight:700;box-shadow:0 0 20px rgba(94,242,255,.5)}

/* hero */
.cz-hero{padding:54px 0 34px;text-align:center;position:relative;z-index:2}
.cz-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--cz-mono);font-size:.7rem;letter-spacing:.2em;color:var(--cz-cyan);text-transform:uppercase;margin-bottom:20px;padding:6px 14px;border:1px solid var(--cz-line);border-radius:999px;background:rgba(94,242,255,.05)}
.cz-kicker .cz-dot{width:6px;height:6px;border-radius:50%;background:var(--cz-grn);box-shadow:0 0 8px var(--cz-grn);animation:cz-blink 1.6s infinite}
.cz-hero h1{font-size:clamp(2.4rem,6.5vw,4.2rem);font-weight:900;letter-spacing:-.035em;line-height:.98;margin:0}
.cz-glow{background:linear-gradient(90deg,#5ef2ff,#a98bff,#ff4fc8,#5ef2ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cz-hue 6s linear infinite;filter:drop-shadow(0 0 24px rgba(169,139,255,.34))}
@keyframes cz-hue{to{background-position:300% 0}}
.cz-hero p{color:var(--cz-tx-dim);margin:20px auto 0;max-width:520px;font-size:1.02rem;line-height:1.6}

/* buttons */
.cz-btn{display:inline-block;font-weight:600;font-size:.92rem;padding:13px 24px;border-radius:12px;text-decoration:none;transition:.18s;border:1px solid transparent;cursor:pointer}
.cz-btn.primary{background:linear-gradient(90deg,var(--cz-cyan),var(--cz-vio));color:#06060a;font-weight:700;box-shadow:0 0 26px rgba(94,242,255,.5)}
.cz-btn.primary:hover{box-shadow:0 0 40px rgba(169,139,255,.8);transform:translateY(-2px)}
.cz-btn.ghost{border-color:rgba(94,242,255,.25);color:var(--cz-tx);background:rgba(255,255,255,.02)}
.cz-btn.ghost:hover{border-color:var(--cz-cyan);color:#fff;box-shadow:0 0 20px rgba(94,242,255,.25)}

/* section label */
.cz-label{font-family:var(--cz-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cz-tx-mute);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.cz-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cz-cyan);box-shadow:0 0 10px var(--cz-cyan);animation:cz-blink 2s infinite}
.cz-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--cz-line),transparent)}

/* service card (gradient neon border + shine) */
.cz-grid-svc{display:grid;grid-template-columns:1fr;gap:13px;position:relative;z-index:2}
@media(min-width:680px){.cz-grid-svc{grid-template-columns:1fr 1fr}}
.cz-card{position:relative;padding:1px;border-radius:var(--cz-r);text-decoration:none;color:inherit;background:linear-gradient(var(--cz-bg-card),var(--cz-bg-card)) padding-box,conic-gradient(from var(--a,0deg),transparent 60%,var(--cz-cyan),var(--cz-mag),transparent) border-box;border:1px solid transparent;transition:transform .18s,box-shadow .18s,--a .6s ease;overflow:hidden}
.cz-card .cz-inner{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:calc(var(--cz-r) - 1px);background:#0c0c14;position:relative;overflow:hidden}
.cz-card .cz-inner::after{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);transition:.5s}
.cz-card:hover{transform:translateY(-4px);--a:360deg}
.cz-card:hover .cz-inner::after{left:130%}
.cz-card .cz-ic{font-size:2rem;filter:drop-shadow(0 0 12px rgba(94,242,255,.5))}
.cz-card .cz-ttl{font-weight:600;font-size:1.02rem}
.cz-card .cz-dsc{font-size:.78rem;color:var(--cz-tx-dim);margin-top:3px}

/* status badge */
.cz-badge{margin-left:auto;font-family:var(--cz-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cz-badge .cz-bdot{width:6px;height:6px;border-radius:50%}
.cz-badge.live{color:var(--cz-grn);background:rgba(57,255,150,.1);border:1px solid rgba(57,255,150,.35)}
.cz-badge.live .cz-bdot{background:var(--cz-grn);box-shadow:0 0 8px var(--cz-grn);animation:cz-blink 1.4s infinite}
.cz-badge.soon{color:var(--cz-amb);background:rgba(255,210,80,.09);border:1px solid rgba(255,210,80,.3)}
.cz-badge.soon .cz-bdot{background:var(--cz-amb)}

/* game tiles */
.cz-grid-games{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;position:relative;z-index:2}
@media(min-width:560px){.cz-grid-games{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.cz-grid-games{grid-template-columns:repeat(5,1fr)}}
.cz-tile{position:relative;aspect-ratio:1;border-radius:var(--cz-r);background:radial-gradient(120% 120% at 50% 0%,rgba(255,79,200,.06),var(--cz-bg-card));border:1px solid var(--cz-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:inherit;transition:.18s;overflow:hidden}
.cz-tile::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 70%,rgba(255,79,200,.5),transparent);opacity:0;transition:.3s;animation:cz-spin 4s linear infinite}
.cz-tile:hover::before{opacity:.5}
.cz-tile .cz-e{font-size:2.4rem;z-index:1;transition:.25s}
.cz-tile .cz-n{font-family:var(--cz-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;color:var(--cz-tx);opacity:.92;z-index:1}
.cz-tile:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(255,79,200,.5);box-shadow:0 0 34px rgba(255,79,200,.28)}
.cz-tile:hover .cz-e{transform:scale(1.18) translateY(-2px);filter:drop-shadow(0 0 16px rgba(255,79,200,.7))}
.cz-tile:hover .cz-n{color:#fff;text-shadow:0 0 10px rgba(255,79,200,.6)}

/* in-game header (injected by czHeader) */
.cz-gamehead{display:flex;align-items:center;gap:12px;padding:11px clamp(12px,3vw,18px);border-bottom:1px solid var(--cz-line);background:linear-gradient(90deg,rgba(94,242,255,.05),transparent);position:relative;z-index:5;font-family:var(--cz-font)}
.cz-gamehead .cz-back{font-family:var(--cz-mono);font-size:.74rem;color:var(--cz-cyan);text-decoration:none;text-shadow:0 0 10px rgba(94,242,255,.5)}
.cz-gamehead .cz-gt{font-weight:600;font-size:.92rem;color:var(--cz-tx)}
.cz-gamehead .cz-hud{margin-left:auto;display:flex;gap:16px;font-family:var(--cz-mono);font-size:.74rem;color:var(--cz-tx-dim)}
.cz-gamehead .cz-hud b{color:var(--cz-cyan);text-shadow:0 0 8px rgba(94,242,255,.5)}

.cz-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(14px,3vw,28px);position:relative;z-index:2}

/* keyboard focus ring — 전 정적앱 일괄 적용(WCAG 2.4.7). 마우스 클릭엔 안 뜸(:focus-visible). */
.cz-tile:focus-visible,.cz-card:focus-visible,.cz-btn:focus-visible,.cz-cta:focus-visible,
.cz-navlinks a:focus-visible,.cz-back:focus-visible,.cz-logo:focus-visible,
.cz-input:focus-visible,.cz-input:focus{outline:2px solid var(--cz-cyan);outline-offset:3px;border-radius:8px}

/* 공용 폼 컴포넌트 — cityzen-web·onmantle·shopscout 등 입력/CTA 브랜드 일관화 */
.cz-input{width:100%;font-family:var(--cz-font);font-size:.96rem;color:var(--cz-tx);background:rgba(255,255,255,.03);border:1px solid var(--cz-line);border-radius:var(--cz-rs);padding:12px 14px;transition:border-color .15s,box-shadow .15s;outline:none}
.cz-input::placeholder{color:var(--cz-tx-mute)}
.cz-input:focus{border-color:var(--cz-cyan);box-shadow:0 0 0 3px rgba(94,242,255,.18)}
.cz-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--cz-font);font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:var(--cz-rs);border:1px solid transparent;cursor:pointer;text-decoration:none;background:linear-gradient(90deg,var(--cz-cyan),var(--cz-vio));color:#06060a;box-shadow:0 0 24px rgba(94,242,255,.4);transition:transform .18s,box-shadow .18s}
.cz-cta:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(169,139,255,.7)}
.cz-cta.ghost{background:rgba(255,255,255,.02);border-color:rgba(94,242,255,.25);color:var(--cz-tx);box-shadow:none}
.cz-cta.ghost:hover{border-color:var(--cz-cyan);color:#fff;box-shadow:0 0 18px rgba(94,242,255,.22);transform:none}
.cz-cta:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

@media(prefers-reduced-motion:reduce){
  .cz-orb,.cz-grid,.cz-glow,.cz-tile::before,.cz-badge .cz-bdot,.cz-kicker .cz-dot,.cz-label::before{animation:none!important}
  .cz-card,.cz-card:hover{transition:none!important}
  .cz-card:hover .cz-inner::after{transition:none!important;left:-60%!important}
  .cz-tile:hover,.cz-card:hover{transform:none!important}
}