/* ===========================================================
   폰트 — Pretendard (로컬 전용, 외부 네트워크 사용 안 함)
   assets/fonts/ 에 아래 woff2 4개를 넣으면 적용됩니다.
   PC에 Pretendard가 설치되어 있으면 local()로 먼저 잡힙니다.
   없으면 Apple SD Gothic Neo / 맑은 고딕으로 자동 대체.
   =========================================================== */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;
  src:local("Pretendard Regular"),local("Pretendard"),url("../fonts/Pretendard-Regular.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;
  src:local("Pretendard Bold"),url("../fonts/Pretendard-Bold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:800;font-display:swap;
  src:local("Pretendard ExtraBold"),url("../fonts/Pretendard-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:900;font-display:swap;
  src:local("Pretendard Black"),url("../fonts/Pretendard-Black.woff2") format("woff2")}

/* 공통 테마 — 네온 퍼플/시안 (피그마 시안 기준) */
:root{
  --bg-0:#07061a; --bg-1:#120a35; --bg-2:#1b0f4d;
  --neon-1:#8b5cff;   /* 보라 */
  --neon-2:#2ee6ff;   /* 시안 */
  --neon-3:#ff5fd2;   /* 핑크 */
  --ink:#ffffff; --ink-dim:rgba(255,255,255,.62);
  --line:rgba(139,92,255,.55);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --font:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg-0);overflow:hidden;
     user-select:none;letter-spacing:-.02em}

/* 배경: 네온 복도/야경 느낌 (러프 — 실제는 배경 이미지 교체) */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(46,230,255,.22) 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,95,210,.16) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 55%, #0a0626 100%);
}
.bg::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:
    repeating-linear-gradient(90deg,rgba(139,92,255,.16) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(46,230,255,.10) 0 1px,transparent 1px 72px);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 0%,transparent 100%);
}

.neon{text-shadow:0 0 12px rgba(139,92,255,.9),0 0 32px rgba(46,230,255,.45)}
.glow{box-shadow:0 0 0 1px var(--line),0 0 22px rgba(139,92,255,.45),inset 0 0 22px rgba(139,92,255,.12)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.9em 2.2em;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:1em;color:#fff;
  background:linear-gradient(135deg,var(--neon-1),#4b2bd6);
  box-shadow:0 0 18px rgba(139,92,255,.75),inset 0 0 14px rgba(255,255,255,.18);
  transition:transform .12s ease, filter .12s ease}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line)}
.btn.cyan{background:linear-gradient(135deg,var(--neon-2),#1278d6);
  box-shadow:0 0 18px rgba(46,230,255,.6),inset 0 0 14px rgba(255,255,255,.2)}

/* 라벨칩 — 러프 단계 표식 */
.tag{position:absolute;z-index:50;top:10px;right:12px;font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.5);
  box-shadow:0 0 0 1px var(--line);color:var(--neon-2);letter-spacing:.04em}