*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ================================================================
   TOKENS
   bg #0a0a0b · surf #0b0b0c · deep #060606
   red #7a1515 · red-dk #2a0808
   green #00ff10 @.75 — "X" in HYBREX ONLY
   text #c8c8c8 · muted #484848 · ghost #2e2e2e
================================================================ */
body {
  background: #0a0a0b;
  font-family: 'Share Tech Mono', monospace;
  color: #c8c8c8;
  overflow-x: hidden;
  min-height: 100vh;
}
body::before {
  content:''; position:fixed; inset:0;
  background:radial-gradient(ellipse 70% 45% at 50% 20%, rgba(90,10,10,.22) 0%, transparent 70%);
  pointer-events:none; z-index:0; animation:ambientPulse 10s ease-in-out infinite;
}
/* CRT 스캔라인 — 페이지 전체 */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 3px);
}

/* === KEYFRAMES === */
@keyframes ambientPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes blink        { 0%,40%,100%{opacity:1} 50%{opacity:0} 60%{opacity:1} }
@keyframes flicker      { 0%,85%{opacity:1} 86%{opacity:.15} 87%{opacity:1} 91%{opacity:.5} 92%{opacity:1} 94%{opacity:.08} 95%{opacity:1} 97%{opacity:.4} 98%{opacity:1} }
@keyframes textGlitch   {
  0%,68%,100% { transform:none; text-shadow:none; opacity:1; }
  69%  { transform:translateX(-3px); text-shadow:2px 0 rgba(122,21,21,.9), -2px 0 rgba(20,20,90,.6); opacity:.9; }
  70%  { transform:translateX(3px);  text-shadow:-2px 0 rgba(122,21,21,.9), 2px 0 rgba(20,20,90,.6); }
  71%  { transform:translateX(-1px); text-shadow:1px 0 rgba(122,21,21,.5); }
  72%  { transform:none; text-shadow:none; opacity:1; }
  88%  { transform:none; text-shadow:none; }
  89%  { transform:translateX(2px); text-shadow:-1px 0 rgba(90,10,10,.6); opacity:.85; }
  90%  { transform:none; text-shadow:none; opacity:1; }
}
@keyframes scandown     { 0%{top:-6px} 100%{top:100%} }
@keyframes shake        { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes pulse-red    { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes ticker-s     { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
@keyframes cardIn       { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes lockPulse    { 0%,100%{border-color:#222} 50%{border-color:#2e1212} }
@keyframes iconFloat    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes decryptFade  { 0%{opacity:1} 100%{opacity:0} }
@keyframes revealIn     { 0%{opacity:0;transform:scale(.97)} 100%{opacity:1;transform:none} }
@keyframes priceGlow    {
  0%,60%,100% { text-shadow:0 0 6px rgba(200,30,30,.25); opacity:.85; }
  70%         { text-shadow:0 0 14px rgba(230,40,40,.9), 0 0 28px rgba(200,20,20,.5), 0 0 48px rgba(160,10,10,.25); opacity:1; letter-spacing:3px; }
  78%         { text-shadow:0 0 6px rgba(200,30,30,.3); opacity:.9; letter-spacing:2px; }
  82%         { text-shadow:0 0 20px rgba(230,40,40,.7), 0 0 36px rgba(200,20,20,.35); opacity:1; }
  88%         { text-shadow:0 0 6px rgba(200,30,30,.2); opacity:.85; }
}
@keyframes glitchH      { 0%{clip-path:inset(40% 0 50% 0)} 20%{clip-path:inset(10% 0 80% 0)} 40%{clip-path:inset(70% 0 10% 0)} 60%{clip-path:inset(20% 0 60% 0)} 80%{clip-path:inset(85% 0 5% 0)} 100%{clip-path:inset(40% 0 50% 0)} }
@keyframes xnumGlitch   {
  0%,82%,100% { transform:none; text-shadow:0 0 20px rgba(0,255,16,.2); opacity:.9; }
  83%  { transform:translateX(-2px) skewX(-4deg); text-shadow:3px 0 rgba(255,0,60,.7), -3px 0 rgba(0,200,255,.5); opacity:.95; }
  84%  { transform:translateX(2px)  skewX(2deg);  text-shadow:-2px 0 rgba(255,0,60,.6), 2px 0 rgba(0,200,255,.4); }
  85%  { transform:none; text-shadow:0 0 20px rgba(0,255,16,.2); opacity:.9; }
  93%  { transform:none; }
  94%  { transform:translateX(1px); text-shadow:2px 0 rgba(255,0,60,.4); opacity:.8; }
  95%  { transform:none; opacity:.9; }
}
@keyframes cardEdgePulse { 0%,100%{box-shadow:0 0 0 0 transparent, inset 0 0 0 0 transparent} 50%{box-shadow:0 0 18px rgba(100,10,10,.25), inset 0 0 12px rgba(80,5,5,.15)} }
@keyframes soldBorderGlow {
  0%,100% { border-color:rgba(100,10,10,.25); box-shadow:none; }
  50%     { border-color:rgba(160,20,20,.55); box-shadow:0 -2px 7px rgba(160,15,15,.2), 0 2px 7px rgba(160,15,15,.2); }
}

/* === TOP BAR === */
.top-bar { background:#060606; border-bottom:1px solid #111; padding:6px 0; position:sticky; top:0; z-index:10; }
.top-bar-inner { max-width:1320px; margin:0 auto; padding:0 48px; display:flex; justify-content:space-between; align-items:center; font-size:14px; color:#444; letter-spacing:2.5px; text-transform:uppercase; }
.live { color:#dd2222; font-size:16px; letter-spacing:3px; animation:blink .9s infinite; text-shadow:0 0 8px rgba(220,34,34,.5); }
.warn { color:#7a3030; }

/* === HEADER === */
.header { border-bottom:1px solid #111; position:relative; }
.header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#2a0808 30%,#2a0808 70%,transparent); opacity:.3; }
.header-inner { max-width:1320px; margin:0 auto; padding:144px 48px 28px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.site-id  { font-size:14px; color:#4a4a4a; letter-spacing:4px; margin-bottom:8px; text-transform:uppercase; animation:textGlitch 6s ease-in-out infinite; }
.site-title { font-family:'Rajdhani',sans-serif; font-size:62px; font-weight:700; letter-spacing:7px; text-transform:uppercase; color:#e0e0e0; line-height:1; animation:flicker 3.5s infinite; cursor:default; user-select:none; }
.site-title .x { color:#00ff10; opacity:.75; }
.site-sub  { font-size:16px; color:#505050; letter-spacing:4px; text-transform:uppercase; margin-top:6px; animation:textGlitch 9s ease-in-out infinite 2.5s; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.header-stats  { display:flex; gap:28px; text-align:right; }
.stat-item     { font-size:13px; color:#888888; letter-spacing:1.5px; text-transform:uppercase; }
.stat-num      { display:block; font-size:42px; color:#cc2222; font-family:'Rajdhani',sans-serif; font-weight:700; line-height:1; margin-bottom:2px; text-shadow:0 0 12px rgba(200,30,30,.4); }
.access-level  { font-size:10px; color:#3e1616; letter-spacing:3px; border:1px solid #2e0e0e; padding:4px 10px; text-transform:uppercase; }

/* === TICKER === */
.ticker-wrap { background:#060606; border-bottom:1px solid #0e0e0e; overflow:hidden; padding:5px 0; position:relative; z-index:1; }
.ticker { display:inline-block; white-space:nowrap; font-size:13px; color:#2e2e2e; letter-spacing:2px; text-transform:uppercase; animation:ticker-s 50s linear infinite, tickerFlash 10s ease-in-out infinite; will-change:transform; backface-visibility:hidden; }
@keyframes tickerFlash { 0%,93%,100%{color:#2e2e2e} 94%{color:#5a1010} 96%{color:#2e2e2e} }
/* 단원 인사 (js/greeting.js) — 전광판 맨 앞에 끼워 넣는다.
   흐르는 안내문과 섞이지 않도록 인사·인용·해설의 결을 달리한다. */
/* 코드네임은 본인이 정한 그대로 보여야 하므로 대문자 변환을 끈다 */
.tk-greet .tk-hi { color:#8fd8a0; font-weight:700; text-transform:none; }
.tk-greet .tk-q  { color:#7a7a7a; font-style:normal; text-transform:none; }  /* 인용문 */
.tk-greet .tk-g  { color:#4a4a4a; text-transform:none; }    /* 그린즈의 한 줄 */

/* === FILTER === */
.filter-bar { border-bottom:1px solid #111; background:#070707; position:relative; z-index:1; }
.filter-bar-inner { max-width:1320px; margin:0 auto; padding:12px 48px; display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.filter-label { font-size:13px; color:#3a3a3a; letter-spacing:2px; margin-right:6px; text-transform:uppercase; flex-shrink:0; }
.filter-btn { background:transparent; border:1px solid #242424; color:#404040; font-family:'Share Tech Mono',monospace; font-size:13px; padding:5px 12px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.filter-btn:hover  { border-color:#4a0e0e; color:#6a1212; background:rgba(122,21,21,.05); }
.filter-btn.active { border-color:#5a1111; color:#7a1515; background:rgba(122,21,21,.08); }
.filter-div { width:1px; height:14px; background:#1e1e1e; margin:0 4px; flex-shrink:0; }

/* === GRID === */
.grid-container { padding:0; position:relative; z-index:1; }
.grid-inner { max-width:1320px; margin:0 auto; padding:22px 48px 84px; }
.section-label { font-size:13px; color:#3a3a3a; letter-spacing:3px; text-transform:uppercase; margin-bottom:20px; padding-bottom:8px; border-bottom:1px solid #1e1e1e; display:flex; justify-content:space-between; animation:textGlitch 7s ease-in-out infinite 1s; }
.section-label-r { color:#2e1414; }
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }

/* === CARD BASE === */
.bio-card {
  background:transparent; border:none;
  position:relative; overflow:hidden;
  transition:transform .25s ease;
  opacity:0; animation:cardIn .5s ease forwards;
}
/* 호버 테두리 — 4면 그라디언트 보더 (상단 페이드아웃으로 종족 배지 비침) */
.bio-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:9;
  opacity:0; transition:opacity .3s ease;
  /* 4면 inset 라인: 하단 강함 → 측면 중간 → 상단 약함 */
  box-shadow:
    inset 0 -2px 0 rgba(200,20,20,.85),
    inset 2px 0 0 rgba(160,10,10,.5),
    inset -2px 0 0 rgba(160,10,10,.5),
    inset 0 2px 0 rgba(120,10,10,.2);
  /* 전체 내부 글로우 — 상단 투명, 하단만 채색 */
  background:linear-gradient(to top,
    rgba(140,10,10,.22) 0%,
    rgba(140,10,10,.08) 40%,
    transparent 70%
  );
}
.bio-card:hover::after { opacity:1; }
.bio-card:hover           { transform:translateY(-4px); }
.bio-card.locked-card     { animation:cardIn .5s ease forwards; }
.bio-card.locked-card:hover { transform:translateY(-4px); }

.bid-price  {
  font-family:'Rajdhani',sans-serif; font-size:26px; font-weight:700;
  color:#cc2222; letter-spacing:2px;
  animation:priceGlow 5s ease-in-out infinite;
}
.bid-price.locked { color:#3a0e0e; text-shadow:none; animation:none; }

.bio-card:nth-child(1) { animation-delay:.04s } .bio-card:nth-child(2) { animation-delay:.10s } .bio-card:nth-child(3) { animation-delay:.16s }
.bio-card:nth-child(4) { animation-delay:.22s } .bio-card:nth-child(5) { animation-delay:.28s } .bio-card:nth-child(6) { animation-delay:.34s }

.card-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent 0%, rgba(0,255,16,.08) 20%, rgba(0,255,16,.22) 50%, rgba(0,255,16,.08) 80%, transparent 100%); animation:scandown 7s linear infinite; pointer-events:none; z-index:5; }

/* === CARD MEDIA WRAP (video fills entire card) === */
.card-media-wrap {
  width:100%; aspect-ratio:4/5; position:relative; overflow:hidden;
  background:#060606;
}
.card-media-wrap video,
.card-media-wrap iframe { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; border:none; }
/* scanline overlay */
.card-media-wrap::after  { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px); pointer-events:none; z-index:2; }
/* vignette */
.card-media-wrap::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.6) 100%); pointer-events:none; z-index:3; }

/* === LOCKED PLACEHOLDER === */
.locked-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; position:relative; z-index:2; background:#050202; }
.locked-img-placeholder::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(80,5,5,.04) 8px, rgba(80,5,5,.04) 9px);
}
.locked-img-placeholder i { font-size:32px; color:#222; animation:iconFloat 4s ease-in-out infinite; position:relative; z-index:2; }
.locked-img-placeholder .x-num { font-size:11px; color:#202020; letter-spacing:4px; position:relative; z-index:2; }
.locked-img-placeholder .x-classified { font-size:9px; color:#220a0a; letter-spacing:2px; text-transform:uppercase; border:1px solid #180606; padding:2px 8px; margin-top:2px; position:relative; z-index:2; }
.scramble-line { font-size:13px; color:#2e1010; letter-spacing:3px; margin-top:4px; height:18px; font-family:'Share Tech Mono',monospace; position:relative; z-index:2; }

/* === CARD OVERLAY (번호+이름 슬라이드업 + 하단 가격 배경 항상 표시) === */
.card-price-fixed {
  position:absolute; bottom:16px; right:20px; z-index:12; pointer-events:none;
}
/* 기본: 하단 50px 스트립만 보임(가격 뒷배경) → 호버: 전체 올라옴 */
.card-overlay {
  position:absolute; bottom:0; left:0; right:0; z-index:11;
  background:linear-gradient(transparent, rgba(3,1,1,.75) 22%, rgba(3,1,1,.98) 55%);
  padding:52px 20px 50px 22px;
  transform:translateY(calc(100% - 50px));
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.bio-card:hover .card-overlay { transform:translateY(0); }
.bio-card.locked-card .card-overlay { transform:translateY(0); }

/* 모바일(터치): 항상 전체 표시 */
@media (pointer: coarse) {
  .card-overlay { transform:translateY(0); }
}

.card-xnum-big {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:34px; color:#00ff10; opacity:.9;
  letter-spacing:2px; line-height:1; display:block;
  animation:xnumGlitch 9s ease-in-out infinite;
}
.card-name {
  font-family:'Share Tech Mono',monospace; font-weight:400;
  font-size:12px; color:#808080; opacity:.9;
  letter-spacing:4px; line-height:1.35; text-transform:uppercase;
  margin-top:6px;
  /* 영문·한글(SUIT) 기준선 정렬 — 폰트가 달라 높낮이 어긋나는 것 방지 */
  display:flex; align-items:baseline; flex-wrap:wrap; column-gap:5px;
}

/* species badge — 우측 20px 고정 (가격과 정렬) */
.card-species-badge {
  position:absolute; top:10px; right:20px; z-index:6;
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px;
  padding:3px 9px; text-transform:uppercase; border:1px solid;
  background:rgba(0,0,0,.55);
}
.sp-mammalia   { color:#e07820; border-color:rgba(200,90,0,.55); }
.sp-aves       { color:#70b8e8; border-color:rgba(40,130,210,.5); }
.sp-reptilia   { color:#dd2020; border-color:rgba(180,20,20,.6); }
.sp-amphibia   { color:#30c8a8; border-color:rgba(0,160,110,.5); }
.sp-fish       { color:#3888e0; border-color:rgba(30,100,200,.5); }
.sp-arthropoda { color:#c8b010; border-color:rgba(160,120,0,.6); }
.sp-mollusca   { color:#e060b8; border-color:rgba(190,40,130,.5); }
.sp-cnidaria   { color:#e81888; border-color:rgba(200,0,90,.6); }
.sp-plantae    { color:#40c040; border-color:rgba(20,160,20,.5); }
.sp-fungi      { color:#9840d8; border-color:rgba(110,0,180,.6); }

/* bid badge — sits ABOVE the video as a separate bar */
.card-bid-badge {
  display:flex; align-items:center; justify-content:flex-start;
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; padding:5px 22px;
  background:#040404; border-bottom:1px solid rgba(140,15,15,.25);
  color:#aa2828; text-shadow:0 0 6px rgba(180,20,20,.4);
  animation:blink 2.4s infinite;
}
.card-bid-badge::before { content:'//'; margin-right:8px; opacity:.5; }
.card-bid-badge.locked-badge {
  color:#2e0e0e; border-color:rgba(40,8,8,.2); text-shadow:none; animation:none;
}

/* === PASSKEY INPUT (inside locked overlay) === */
.name-err   { font-size:11px; color:#cc3333; letter-spacing:2px; text-transform:uppercase; min-height:12px; margin-bottom:4px; opacity:0; transition:opacity .1s; }
.name-err.show { opacity:1; }
.name-lock-row  { display:flex; align-items:stretch; margin-top:6px; }
.name-input {
  flex:1; background:rgba(8,4,4,.9); border:1px solid #7a1515; border-right:none;
  color:#cc2222; font-family:'Share Tech Mono',monospace;
  font-size:13px; padding:7px 9px; letter-spacing:3px; outline:none;
  text-transform:uppercase; min-width:0; transition:border-color .2s, box-shadow .2s;
}
.name-input::placeholder { color:#883030; font-size:11px; letter-spacing:2px; }
.name-input:focus { border-color:#cc2222; box-shadow:0 0 12px rgba(200,30,30,.3); }
.name-input.shake { animation:shake .3s ease; }
.name-input.unlocking { border-color:#1a4a1a !important; color:#22aa22 !important; transition:none; }
.name-submit { background:#1a0404; border:1px solid #7a1515; color:#cc2222; font-family:'Share Tech Mono',monospace; font-size:11px; padding:7px 14px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; transition:all .15s; flex-shrink:0; }
.name-submit:hover { border-color:#cc2222; color:#ee4444; background:#280606; box-shadow:0 0 10px rgba(200,30,30,.2); }

/* === CORNER MARKS === */
.corner-mark {
  position:absolute; width:10px; height:10px;
  border-color:#2a0a0a; border-style:solid; z-index:7;
}

/* === SOLD OVERLAY === */
.card-sold-overlay {
  position:absolute; left:0; right:0; z-index:10;
  top:47%; transform:translateY(-50%);
  pointer-events:none;
}
.card-sold-stamp {
  width:100%;
  font-family:'Share Tech Mono',monospace; font-weight:400;
  font-size:11px; color:#cc2222; letter-spacing:10px;
  text-transform:uppercase; text-align:center;
  padding:14px 0;
  background:rgba(4,1,1,.88);
  border-top:1px solid rgba(100,10,10,.25);
  border-bottom:1px solid rgba(100,10,10,.25);
  text-shadow:0 0 8px rgba(180,15,15,.35);
  animation:soldBorderGlow 3s ease-in-out infinite;
}

/* 한글 고딕(SUIT) — 상태 라벨 한글부에 사용 */
.kfont { font-family:'SUIT Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-weight:600; letter-spacing:1px; }

/* 상태 라벨(영문 · 한글) 공통 — 영문 왼쪽, 한글 오른쪽. 간격은 card-name의 column-gap이 담당 */
.card-name .kfont { line-height:1.35; }

/* ============================================================
   ① ONLY GREENS — 욕망/생동. 로고 크고 밝게, 살아 숨쉬듯 맥동
   ============================================================ */
/* 로고: 실제 로고 이미지 + 뒤에 부드러운 붉은 후광. 은은하게 맥동. */
.greens-wrap {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
}
.greens-wrap::before {   /* 로고 뒤 부드러운 후광 */
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:215px; height:215px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(195,55,55,.26) 0%, rgba(150,40,40,.11) 46%, transparent 72%);
  filter:blur(7px);
  animation:greensHalo 3.8s ease-in-out infinite;
}
@keyframes greensHalo {
  0%,100% { opacity:.45; transform:translate(-50%,-50%) scale(.9); }
  50%     { opacity:.8;  transform:translate(-50%,-50%) scale(1.12); }
}
.greens-lock {
  width:123px; height:auto; position:relative; z-index:2;
  opacity:.6; filter:drop-shadow(0 0 8px rgba(175,24,24,.45));
  animation:greensLockPulse 3.6s ease-in-out infinite;
}
@keyframes greensLockPulse {
  0%,100% { opacity:.45; transform:scale(.97) rotate(-1deg); filter:drop-shadow(0 0 6px rgba(155,20,20,.34)); }
  50%     { opacity:.78; transform:scale(1.06) rotate(1deg);  filter:drop-shadow(0 0 16px rgba(210,34,34,.6)); }
}
.greens-tag-inline {
  display:inline-block; font-size:10px; font-weight:600; color:#f47878; letter-spacing:2px; text-transform:uppercase;
  border:1px solid rgba(225,70,70,.6); background:rgba(38,8,8,.7);
  padding:5px 12px; margin:7px 0 4px; position:relative; z-index:12;
  text-shadow:0 0 6px rgba(240,90,90,.5); animation:greensTagBlink 3.4s ease-in-out infinite;
}
@keyframes greensTagBlink { 0%,100%{opacity:.85} 50%{opacity:1} }

/* ============================================================
   ② 데이터 말소됨 — 음모/훼손. 검은 리댁션 바 + 글리치
   ============================================================ */
.erased-field {
  width:100%; height:100%; position:relative; z-index:2; background:#040404;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; overflow:hidden;
}
.redact-bar {
  height:13px; background:#000; position:relative;
  box-shadow:0 0 0 1px rgba(30,30,30,.6);
  animation:redactGlitch 3.4s steps(1) infinite;
}
.redact-bar::after {   /* 바 위를 스치는 글리치 잔상 */
  content:''; position:absolute; inset:0; background:rgba(120,18,18,.0);
  animation:redactFlick 3.4s steps(1) infinite;
}
.redact-bar.rb1 { width:82%; } .redact-bar.rb2 { width:64%; } .redact-bar.rb3 { width:74%; }
@keyframes redactGlitch {
  0%,44%,100%{ transform:translateX(0); opacity:1 }
  46%{ transform:translateX(-3px) skewX(-6deg); opacity:.85 }
  48%{ transform:translateX(3px); opacity:1 }
  70%{ transform:translateX(0) }
  72%{ transform:translateX(-2px); opacity:.9 }
}
@keyframes redactFlick { 0%,45%,100%{background:rgba(120,18,18,0)} 47%{background:rgba(150,22,22,.45)} 49%{background:rgba(120,18,18,0)} }
.erased-tag {
  font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:3px; text-transform:uppercase;
  color:#4a4a4a; border:1px solid #202020; padding:2px 8px; margin-top:3px; position:relative; z-index:2;
}

/* ============================================================
   ③ 회수 실패 — 위협/불안. 해저드 경고(적/황) 스트라이프
   ============================================================ */
.hazard-field {
  width:100%; height:100%; position:relative; z-index:2; background:#0a0603;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.hazard-field::after {   /* 하단 노란/검정 해저드 스트라이프 (상단 띠는 제거) */
  content:''; position:absolute; left:0; right:0; bottom:0; height:12px; z-index:1;
  background:repeating-linear-gradient(45deg,#d8a015 0 10px,#0a0603 10px 20px);
  opacity:.5; animation:hazardSlide 1.1s linear infinite reverse;
}
@keyframes hazardSlide { 0%{background-position:0 0} 100%{background-position:28px 0} }
.hazard-field i { font-size:30px; color:#e6a422; position:relative; z-index:2; animation:hazardBlink 1.3s steps(1) infinite; }
@keyframes hazardBlink { 0%,60%,100%{opacity:1} 30%{opacity:.5} }
.hazard-tag {
  font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase;
  color:#e0a020; border:1px solid #5a3a08; padding:2px 8px; position:relative; z-index:2;
  text-shadow:0 0 8px rgba(220,150,20,.4);
}

/* ============================================================
   ④ 미확인 — 스케일/정적. 거의 빈 카드, 아주 조용하게
   ============================================================ */
.unknown-field {
  width:100%; height:100%; position:relative; z-index:2; background:#060606;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.unknown-field .uq {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:44px; color:#161616;
  line-height:1; animation:unknownBreathe 6s ease-in-out infinite;
}
@keyframes unknownBreathe { 0%,100%{opacity:.5} 50%{opacity:.85} }
.unknown-tag { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:4px; text-transform:uppercase; color:#242424; }

/* === 상태 스탬프(가운데 띠) — 말소/실패에서 사용 === */
.card-status-stamp {
  width:100%; font-family:'Share Tech Mono',monospace; font-weight:400;
  font-size:11px; letter-spacing:6px; text-transform:uppercase; text-align:center;
  padding:13px 0; background:rgba(4,1,1,.9);
}
.stamp-erased { color:#8a8a8a; background:rgba(0,0,0,.92); letter-spacing:8px; text-shadow:0 0 8px rgba(120,120,120,.25); animation:erasedGlitch 2.8s steps(1) infinite; border-top:1px solid rgba(40,40,40,.5); border-bottom:1px solid rgba(40,40,40,.5); }
.stamp-failed { color:#e83818; background:rgba(10,4,2,.92); text-shadow:0 0 12px rgba(230,56,24,.5); animation:soldBorderGlow 2s ease-in-out infinite; border-top:1px solid rgba(200,120,20,.35); border-bottom:1px solid rgba(200,120,20,.35); }
@keyframes erasedGlitch {
  0%,47%,100%{ opacity:.85; transform:translateX(0) }
  50%{ opacity:.3;  transform:translateX(-3px) }
  52%{ opacity:.95; transform:translateX(3px) }
  54%{ opacity:.55; transform:translateX(0) }
}

/* === DECRYPT OVERLAY === */
.decrypt-overlay {
  position:absolute; inset:0; background:#060606; z-index:20;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  animation:decryptFade .4s ease 1.4s forwards;
}
.decrypt-overlay .dl { font-size:9px; color:#2a0808; letter-spacing:3px; text-transform:uppercase; }
.decrypt-overlay .dc { font-size:11px; color:#3a1010; letter-spacing:4px; font-family:'Share Tech Mono',monospace; }

/* === FOOTER === */
.footer-strip { border-top:1px solid #111; background:#050505; position:relative; z-index:1; }
.footer-inner { max-width:1320px; margin:0 auto; padding:12px 48px; font-size:13px; color:#1e1e1e; letter-spacing:2.5px; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center; }
.footer-mid { color:#200e0e; animation:pulse-red 3s infinite; }

/* ================================================================
   ADMIN OVERLAY — embedded in same file for localStorage access
================================================================ */
#admin-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:#050505; overflow-y:auto;
}
#admin-overlay.open { display:block; }

/* admin top bar */
.adm-bar { background:#060606; border-bottom:1px solid #1a1a1a; padding:0 40px; display:flex; justify-content:space-between; align-items:center; height:58px; position:sticky; top:0; z-index:10; }
.adm-title { font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; letter-spacing:4px; color:#b0b0b0; text-transform:uppercase; }
.adm-title .x { color:#00ff10; opacity:.75; }
.adm-badge { font-size:11px; color:#aa3030; border:1px solid #5a1010; padding:3px 11px; letter-spacing:2px; margin-left:12px; }
.adm-bar-right { display:flex; gap:10px; align-items:center; }

/* admin login */
.adm-login { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 58px); }
.adm-login-box { border:1px solid #1e1e1e; padding:52px 56px; background:#0b0b0c; width:420px; }
.adm-login-title { font-family:'Rajdhani',sans-serif; font-size:28px; font-weight:700; letter-spacing:4px; color:#c8c8c8; margin-bottom:6px; text-transform:uppercase; }
.adm-login-sub   { font-size:12px; color:#484848; letter-spacing:3px; margin-bottom:32px; text-transform:uppercase; }
.adm-login-label { font-size:12px; color:#484848; letter-spacing:2px; text-transform:uppercase; margin-bottom:9px; display:block; }
.adm-login-input { width:100%; background:#040404; border:1px solid #1e1e1e; color:#7a1515; font-family:'Share Tech Mono',monospace; font-size:17px; padding:13px 14px; letter-spacing:4px; outline:none; text-transform:uppercase; margin-bottom:16px; }
.adm-login-input:focus { border-color:#3a0e0e; }
.adm-login-err { font-size:12px; color:#5e1212; letter-spacing:2px; text-transform:uppercase; margin-top:10px; min-height:16px; }

/* admin main */
.adm-main { max-width:1200px; margin:0 auto; padding:36px 40px 72px; }
.adm-tabs { display:flex; gap:6px; max-width:1200px; margin:22px auto 0; padding:0 40px; }
.adm-tab { background:transparent; border:1px solid #2a2a2a; border-bottom:none; color:#6a6a6a; font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:11px 24px; cursor:pointer; transition:all .15s; }
.adm-tab:hover { color:#9a9a9a; }
/* 단원 관리는 성격이 다른 메뉴라 오른쪽 끝으로 떼어 둔다 */
.adm-tab-right { margin-left:auto; }
.adm-tab.active { color:#39ff14; border-color:#2a2a2a; background:rgba(57,255,20,.06); text-shadow:0 0 8px rgba(57,255,20,.4); }
.adm-section { margin-bottom:44px; }
.adm-section-head { font-size:12px; color:#848484; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid #2a2a2a; display:flex; justify-content:space-between; align-items:center; }

/* admin global grid */
.adm-global-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.adm-setting-block { background:#0d0d0e; border:1px solid #1e1e1e; padding:18px; }
.adm-setting-label { font-size:11px; color:#808080; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; display:block; }
.adm-input { width:100%; background:#080808; border:1px solid #1a1a1a; color:#c8c8c8; font-family:'Share Tech Mono',monospace; font-size:14px; padding:9px 11px; letter-spacing:1px; outline:none; }
.adm-input:focus { border-color:#3a0e0e; }
.adm-select { width:100%; background:#080808; border:1px solid #1a1a1a; color:#c8c8c8; font-family:'Share Tech Mono',monospace; font-size:13px; padding:9px 11px; letter-spacing:1px; outline:none; cursor:pointer; }
.adm-select option { background:#0d0d0e; }

/* admin table */
.adm-table-wrap { overflow-x:auto; }
.adm-table { width:100%; border-collapse:collapse; }
.adm-table th { font-size:11px; color:#707070; letter-spacing:2px; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid #2a2a2a; text-align:left; font-weight:normal; white-space:nowrap; }
.adm-table td { border-bottom:1px solid #181818; vertical-align:middle; padding:0; }

/* ── ANALYTICS 표 전용: 숫자 가운데 정렬 + 한글 고딕(SUIT/Pretendard) ── */
.an-tbl th, .an-tbl td { text-align:center; padding:9px 10px; white-space:nowrap; }
.an-tbl thead th { font-family:'SUIT Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-weight:600; letter-spacing:1px; text-transform:none; vertical-align:middle; }
.an-tbl .an-grp { font-size:11px; padding-bottom:5px; }                        /* 그룹 헤더(채팅/게임) */
.an-tbl .an-sub { font-size:9px; padding-top:5px; }                            /* 하위 헤더(인원/시도…) */
.an-tbl .an-date { text-align:left; font-family:'Share Tech Mono',monospace; font-weight:normal; letter-spacing:2px; }  /* DATE 헤더만 모노·왼쪽 */
.an-tbl tbody td { font-family:'Rajdhani',sans-serif; font-weight:700; }
.an-tbl tbody td:first-child { text-align:left; font-family:'Share Tech Mono',monospace; font-weight:normal; }  /* 날짜 셀 왼쪽·모노 */

.adm-row { background:#0b0b0c; }
.adm-row:hover { background:#101012; }
.adm-td-id { padding:0 14px; font-size:13px; color:#8a3030; letter-spacing:2px; white-space:nowrap; width:70px; font-weight:bold; }
.adm-td    { padding:10px 12px; }

/* table inputs */
.adm-ti { width:100%; background:transparent; border:none; border-bottom:1px solid #2a2a2a; color:#d8d8d8; font-family:'Share Tech Mono',monospace; font-size:13px; padding:5px 3px; letter-spacing:1px; outline:none; min-width:100px; }
.adm-ti:focus { border-color:#5a1010; }
.adm-ti.price-col { color:#cc2020; }
.adm-ts { background:transparent; border:none; border-bottom:1px solid #2a2a2a; color:#aaaaaa; font-family:'Share Tech Mono',monospace; font-size:13px; padding:5px 3px; letter-spacing:1px; outline:none; cursor:pointer; width:100%; min-width:120px; }
.adm-ts option { background:#0d0d0e; color:#d8d8d8; }

/* status toggle */
.adm-toggle { display:flex; gap:4px; }
.adm-tog { font-family:'Share Tech Mono',monospace; font-size:11px; padding:5px 11px; letter-spacing:1.5px; text-transform:uppercase; border:1px solid #1e1e1e; background:transparent; color:#2e2e2e; cursor:pointer; transition:all .15s; }
.adm-tog.tog-open   { border-color:#0c2e0c; color:#2a4030; background:rgba(0,40,10,.3); }
.adm-tog.tog-locked { border-color:#2e0808; color:#4a1818; background:rgba(40,5,5,.3); }
.adm-tog.tog-vis    { border-color:#1a1a3a; color:#1a1a4a; background:rgba(5,5,30,.3); }

/* buttons */
.adm-btn { font-family:'Share Tech Mono',monospace; font-size:13px; padding:9px 22px; letter-spacing:2px; text-transform:uppercase; border:1px solid; cursor:pointer; transition:all .15s; }
.btn-save    { background:#cc2222; border-color:#cc2222; color:#000; font-weight:700; }
.btn-save:hover  { background:#ff3333; border-color:#ff3333; color:#000; box-shadow:0 0 14px rgba(220,30,30,.5); }
.btn-sec     { background:transparent; border-color:#1e1e1e; color:#484848; }
.btn-sec:hover  { border-color:#3a0e0e; color:#808080; }
.btn-sm      { font-size:11px; padding:6px 14px; }

/* view site link */
.adm-link { background:#39ff14; border:1px solid #39ff14; color:#000; font-family:'Share Tech Mono',monospace; font-size:12px; padding:7px 16px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s; font-weight:700; }
.adm-link:hover { background:#6fff45; border-color:#6fff45; color:#000; box-shadow:0 0 14px rgba(57,255,20,.5); }

/* krw helper */
.adm-krw { padding:18px 20px; border:1px solid #141414; background:#080808; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.adm-krw-result { font-family:'Rajdhani',sans-serif; font-size:26px; color:#7a1515; letter-spacing:2px; }

/* toast */
.adm-toast { position:fixed; bottom:28px; right:28px; background:#0e0404; border:1px solid #2a0808; color:#7a1515; font-size:13px; letter-spacing:2px; text-transform:uppercase; padding:13px 26px; opacity:0; transform:translateY(6px); transition:all .2s; pointer-events:none; z-index:600; }
.adm-toast.show { opacity:1; transform:none; }

/* hint bar under header */
.adm-hint { text-align:center; padding:9px; font-size:11px; color:#585858; letter-spacing:2px; text-transform:uppercase; border-bottom:1px solid #1e1e1e; }

/* ================================================================
   BACKGROUND ORBS — slow-moving dark gradient atmosphere
================================================================ */
.bg-layer { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
/* 정적 블러 레이어 — 움직임 제거로 매 프레임 블러 재합성 부하 없앰(발열 최적화) */
.bg-orb   { position:absolute; border-radius:50%; filter:blur(90px); }
.bg-orb-1 {
  width:80vw; height:80vw;
  background:radial-gradient(circle, rgba(110,5,5,.32) 0%, transparent 65%);
  top:-25%; left:-25%;
}
.bg-orb-2 {
  width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(80,0,0,.24) 0%, transparent 65%);
  bottom:-20%; right:-20%;
}
.bg-orb-3 {
  width:50vw; height:50vw;
  background:radial-gradient(circle, rgba(55,0,0,.18) 0%, transparent 65%);
  top:38%; left:30%;
}

/* Greens 조직 엠블럼 — 배경에 크게 박혀, 움직이는 그라데이션에 은은히 비침 */
.greens-emblem {
  position:absolute; top:47%; left:50%; transform:translate(-50%,-50%);
  width:88vmin; height:88vmin;
  -webkit-mask:url(../greens_logo_mask.png) center/contain no-repeat;
          mask:url(../greens_logo_mask.png) center/contain no-repeat;
  background:
    radial-gradient(circle at 28% 22%, rgba(165,22,22,.95) 0%, transparent 42%),
    radial-gradient(circle at 76% 68%, rgba(95,8,8,.85) 0%, transparent 48%),
    radial-gradient(circle at 55% 50%, rgba(60,4,4,.7) 0%, transparent 72%);
  background-size:190% 190%;
  background-position:50% 50%;
  opacity:.14;
}
@media (max-width:700px){ .greens-emblem { width:130vw; height:130vw; } }

/* ================================================================
   MOBILE
================================================================ */
@media (max-width:700px) {
  .top-bar-inner { padding:0 16px; font-size:8px; padding-right:78px; }
  .top-bar-inner .warn { display:none; }
  .header-inner { padding:20px 16px 16px; flex-direction:column; gap:14px; }
  .site-title { font-size:30px; letter-spacing:4px; }
  .header-right { align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:10px; }
  .header-stats { gap:18px; }
  .stat-num { font-size:20px; }
  .access-level { display:none; }
  .filter-bar-inner { padding:10px 16px; overflow-x:auto; flex-wrap:nowrap; }
  .filter-bar-inner::-webkit-scrollbar { display:none; }
  .grid-inner { padding:14px 0 32px; }
  .section-label { padding:0 16px 8px; margin-bottom:14px; font-size:7px; }
  .card-grid { grid-template-columns:1fr; gap:14px; }
  .card-xnum-big { font-size:26px; }
  .card-name { font-size:26px; }
  .bid-price { font-size:16px; }
  .footer-inner { padding:10px 16px; font-size:7px; flex-wrap:wrap; gap:6px; }
  .footer-mid { width:100%; text-align:center; order:-1; }
  .adm-main { padding:16px 16px 40px; }
  .adm-bar { padding:0 16px; }
}

/* ───────── */

.rc-wrap { max-width:760px; margin:46px auto 30px; padding:0 16px; position:relative; z-index:1; }
.rc-head { font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:3px; color:#7a1515; text-transform:uppercase; margin-bottom:4px; }
.rc-sub  { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:#7a4a4a; margin-bottom:12px; }
.rc-box  { border:1px solid rgba(150,28,28,.5); background:rgba(8,4,4,.6); box-shadow:0 0 26px rgba(130,15,15,.14); }
.rc-log  { height:300px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.rc-row  { display:flex; }
.rc-row.u { justify-content:flex-end; }
.rc-col  { display:flex; flex-direction:column; max-width:80%; }
.rc-row.u .rc-col { align-items:flex-end; }
.rc-avatar { width:30px; height:30px; border-radius:50%; margin-right:9px; margin-top:16px; flex-shrink:0; border:1px solid rgba(120,20,20,.45); object-fit:cover; box-shadow:0 0 8px rgba(120,20,20,.25); }
.rc-bub  { font-family:'Share Tech Mono',monospace; font-size:13px; line-height:1.6; letter-spacing:.5px; padding:9px 13px; white-space:pre-wrap; }
.rc-row.b .rc-bub { color:#c9c9c9; background:rgba(30,8,8,.5); border-left:2px solid #7a1515; }
.rc-row.u .rc-bub { color:#0a0a0a; background:#9a1818; }
.rc-time { font-family:'Share Tech Mono',monospace; font-size:7px; letter-spacing:1.5px; color:#3a1a1a; margin-top:4px; }
.rc-sig  { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1.5px; color:#5a2a2a; text-align:center; padding:2px 0; opacity:.75; }
.rc-name { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; color:#5a1010; text-transform:uppercase; margin-bottom:4px; }
.rc-row.sys { justify-content:center; }
.rc-sys-msg { font-family:'Share Tech Mono',monospace; font-size:9px; line-height:1.7; letter-spacing:1.5px; color:#6a2a2a; text-align:center; text-transform:uppercase; padding:2px 8px; white-space:pre-wrap; animation:rcSysFlicker 4s ease-in-out infinite; }
@keyframes rcSysFlicker { 0%,100%{opacity:.85} 48%{opacity:.85} 50%{opacity:.4} 52%{opacity:.85} }
.rc-in   { display:flex; border-top:1px solid rgba(150,28,28,.45); background:rgba(32,7,7,.55); animation:rcInputGlow 3.2s ease-in-out infinite; }
.rc-in input { flex:1; background:transparent; border:none; outline:none; color:#eee4e4; caret-color:#ff2a2a; font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:.5px; padding:14px 15px; }
.rc-in input::placeholder { color:#a06a6a; }
.rc-in button { background:#a01a1a; border:none; color:#0a0a0a; font-weight:700; font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:2px; padding:0 24px; cursor:pointer; text-transform:uppercase; transition:all .15s; animation:rcSendPulse 2.6s ease-in-out infinite; }
.rc-in button:hover { background:#dd2626; box-shadow:0 0 18px rgba(220,40,40,.6); }
@keyframes rcInputGlow { 0%,100%{ box-shadow:inset 0 0 14px rgba(140,20,20,.10) } 50%{ box-shadow:inset 0 0 22px rgba(185,30,30,.26) } }
@keyframes rcSendPulse { 0%,100%{ box-shadow:0 0 8px rgba(180,25,25,.30) } 50%{ box-shadow:0 0 17px rgba(225,45,45,.6) } }
.rc-typing { color:#5a1010; font-style:italic; }

/* 인스타 채널 복귀 버튼 (맨 아래) */
.ig-back { max-width:760px; margin:6px auto 46px; padding:0 16px; text-align:center; position:relative; z-index:1; }
.ig-back a {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(150,28,28,.5); background:rgba(30,6,6,.5);
  color:#c9a0a0; font-family:'Share Tech Mono',monospace; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; text-decoration:none;
  padding:12px 26px; transition:all .18s;
}
.ig-back a:hover { background:#a01a1a; color:#0a0a0a; border-color:#dd2626; box-shadow:0 0 18px rgba(220,40,40,.45); }
.ig-back i { font-size:17px; }
@media (max-width:700px){ .ig-back a { font-size:10px; letter-spacing:1px; padding:11px 18px; } }

/* ───────── */

.bio-card[data-id="034"][data-available="true"] { cursor: pointer; }
  #game-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(5, 3, 4, 0.92);
  }
  #game-modal.open { display: flex; }
  #game-modal-frame-wrap {
    position: relative;
    height: min(92vh, 100vw * 16 / 9);
    aspect-ratio: 9 / 16;
    max-width: 96vw;
    background: #0a0708;
    border: 1px solid rgba(216, 210, 200, 0.25);
  }
  #game-modal-frame-wrap iframe {
    width: 100%; height: 100%;
    border: none; display: block;
  }
  #game-modal-close {
    position: absolute; top: -14px; right: -14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(216, 210, 200, 0.4);
    background: #1a1214;
    color: #d8d2c8;
    font-size: 16px; line-height: 1;
    cursor: pointer; z-index: 2;
  }
  #game-modal-close:hover { background: #3a1d17; }
  @media (max-width: 520px) {
    #game-modal-frame-wrap {
      width: 100vw; height: 100%;
      max-width: none; aspect-ratio: auto;
      border: none;
    }
    #game-modal-close { top: 8px; right: 8px; }
  }

/* ───────── */

/* 언어 스위처 (상단 우측 고정) */
  #lang-switch{
    position:fixed; top:8px; right:10px; z-index:9998;
    display:flex; align-items:center; gap:5px;
    font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px;
    color:#dd2222; background:rgba(20,6,6,.7); border:1px solid rgba(200,34,34,.55);
    padding:5px 10px; cursor:pointer; text-transform:uppercase; user-select:none;
    text-shadow:0 0 8px rgba(220,34,34,.4);
  }
  #lang-switch i{ font-size:14px; color:#dd2222; }
  #lang-switch:hover{ color:#ff4a4a; border-color:#ff3030; box-shadow:0 0 14px rgba(220,40,40,.45); }
  #lang-switch:hover i{ color:#ff4a4a; }
  /* 모바일: 스위처를 상단바 우측에 정렬하고, 상단바는 그만큼 우측 거터를 비워 겹침 방지 */
  @media (max-width:700px){
    #lang-switch{ top:5px; right:8px; padding:3px 8px; font-size:10px; }
    #lang-switch i{ font-size:12px; }
  }
  /* '인간 +' 신인류 표시 — 상자 없이 플레인 타이포 */
  .filter-hplus{
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:1px;
    color:#7a1515;   /* 종족 선택(active) 시 나타나는 레드와 동일 */
    padding:0 4px 0 2px; white-space:nowrap; flex-shrink:0; align-self:center;
  }
  @media (max-width:700px){ .filter-hplus{ font-size:11px; } }

  /* ── 세계관 전문 팝업 ──
     화면이 켜지는 연출: 가로 한 줄 → 세로로 펼쳐짐 → 밝기가 잦아든다.
     뒤의 스토어는 가리지 않고 비쳐 보이게 둔다(어둡게만 깔아준다). */
  #intro-gate{
    position:fixed; inset:0; z-index:9998; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(4,2,2,.62);
  }
  #intro-gate.on{ display:flex; animation:ig-fade .25s ease-out both; }
  @keyframes ig-fade{ from{ background:rgba(4,2,2,0) } to{ background:rgba(4,2,2,.62) } }

  .ig-box{
    position:relative; width:min(620px,94vw); max-height:88vh; overflow:hidden;
    border:1px solid rgba(150,28,28,.55);
    background:linear-gradient(180deg,#0c0708,#080506);
    box-shadow:0 0 60px rgba(120,15,15,.45);
    transform-origin:center;
    animation:ig-power .52s cubic-bezier(.2,.8,.3,1) both;
  }
  /* 켜짐: 가로선에서 세로로 열리며 과한 밝기가 가라앉는다 */
  @keyframes ig-power{
    0%   { transform:scaleY(.004) scaleX(.7); filter:brightness(7) saturate(0); opacity:0; }
    18%  { transform:scaleY(.004) scaleX(1);  filter:brightness(7) saturate(0); opacity:1; }
    42%  { transform:scaleY(.05)  scaleX(1);  filter:brightness(4.5) saturate(.3); }
    70%  { transform:scaleY(1)    scaleX(1);  filter:brightness(2.2) saturate(.7); }
    82%  { filter:brightness(.7); }
    90%  { filter:brightness(1.6); }
    100% { transform:scaleY(1) scaleX(1); filter:brightness(1) saturate(1); }
  }
  /* 주사선 + 미세한 흔들림 */
  .ig-scan{ position:absolute; inset:0; pointer-events:none; z-index:3;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.13) 2px,rgba(0,0,0,.13) 3px);
    animation:ig-flick 3.4s steps(1) infinite; }
  @keyframes ig-flick{ 0%,96%,100%{opacity:1} 97%{opacity:.72} 98.5%{opacity:1} }

  .ig-in{ position:relative; z-index:2; padding:24px 26px 20px; max-height:82vh; overflow-y:auto; }
  .ig-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
         border-bottom:1px solid rgba(150,28,28,.28); padding-bottom:9px; margin-bottom:16px; }
  .ig-tag{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px; color:#dd2222; }
  .ig-sig{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:#6a3a3a; }

  .ig-body p{
    margin:0 0 13px; font-size:14px; line-height:1.85; color:#c9bcbc;
    /* 긴 문장이라 모노스페이스로 두면 자간이 벌어져 읽기 나쁘다 — 본문만 가독 서체로 */
    font-family:"SUIT Variable","Pretendard","Malgun Gothic",-apple-system,sans-serif;
    word-break:keep-all; overflow-wrap:break-word; line-break:strict;
    /* 마지막 줄에 단어 하나만 떨어지는 것을 브라우저가 알아서 피한다 */
    text-wrap:pretty;
    /* 줄나눔은 폭에 맞는 문장을 스크립트가 골라 넣는다(js/intro.js) → 그대로 살린다 */
    white-space:pre-line;
    opacity:0; transform:translateY(4px);
  }
  /* 켜짐 연출이 끝난 뒤 한 줄씩 들어온다 */
  #intro-gate.lit .ig-body p{ animation:ig-line .5s ease-out both; animation-delay:calc(var(--i) * .16s); }
  @keyframes ig-line{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
  /* 행성명·종족명이 괄호 앞뒤로 갈라지지 않게 한 덩어리로 묶는다 */
  .ig-body p b{ color:#ff5b5b; font-weight:600; white-space:nowrap; }
  .ig-body p:last-child{ margin-bottom:0; }

  .ig-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
            border-top:1px solid rgba(150,28,28,.28); margin-top:18px; padding-top:14px; }
  .ig-sign{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px; color:#8a6a6a;
            word-break:keep-all; text-wrap:pretty; }
  .ig-close{ background:transparent; border:1px solid rgba(150,28,28,.55); color:#c04236;
             font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:2px;
             padding:9px 16px; cursor:pointer; transition:.15s;
             clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .ig-close:hover{ border-color:#dd2626; color:#ff6a6a; background:rgba(60,14,14,.5); }
  /* 두 버튼은 오른쪽에 나란히 — 차단은 부차적이므로 테두리 없이 낮은 위계로 둔다 */
  .ig-foot .ig-btns{ display:flex; align-items:center; gap:10px; margin-left:auto; }
  .ig-mute{ background:none; border:0; color:#6a4a4a; cursor:pointer;
            font-family:'Share Tech Mono',monospace; font-size:10.5px; letter-spacing:1.5px;
            padding:6px 2px; border-bottom:1px solid transparent; transition:.15s; }
  .ig-mute:hover{ color:#a8615a; border-bottom-color:rgba(200,34,34,.4); }
  #intro-gate.lit .ig-foot{ animation:ig-line .5s ease-out both; animation-delay:1.15s; }

  @media (max-width:560px){
    .ig-in{ padding:20px 18px 16px; }
    .ig-body p{ font-size:13px; line-height:1.85; }
  }
  /* 움직임을 줄여 달라는 설정이면 연출을 걷어낸다 */
  @media (prefers-reduced-motion:reduce){
    .ig-box{ animation:none; }
    #intro-gate.lit .ig-body p, #intro-gate.lit .ig-foot{ animation:none; opacity:1; transform:none; }
    .ig-scan{ animation:none; }
  }

  /* 언어 선택 오버레이 */
  #lang-gate{
    position:fixed; inset:0; z-index:9999; display:none;
    background:rgba(4,2,2,.92); backdrop-filter:blur(3px);
    align-items:center; justify-content:center;
  }
  #lang-gate.on{ display:flex; }
  .lg-box{
    width:min(440px,92vw); border:1px solid rgba(150,28,28,.55); background:linear-gradient(180deg,#0c0708,#080506);
    box-shadow:0 0 50px rgba(120,15,15,.4); padding:26px 24px 22px; position:relative;
  }
  .lg-box::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.10) 2px,rgba(0,0,0,.10) 3px); }
  .lg-h{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px; color:#dd2222; text-transform:uppercase; margin-bottom:4px; }
  .lg-t{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:22px; letter-spacing:2px; color:#e6e0e0; margin-bottom:2px; }
  .lg-s{ font-size:10px; letter-spacing:1px; color:#8a6a6a; margin-bottom:18px; }
  .lg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; z-index:2; }
  .lg-btn{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid rgba(150,28,28,.4); background:rgba(30,10,10,.4); color:#d8c8c8;
    font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:1px; padding:11px 13px; cursor:pointer; transition:.15s;
  }
  .lg-btn:hover{ border-color:#dd2626; background:rgba(60,14,14,.5); color:#fff; box-shadow:0 0 14px rgba(200,30,30,.3); }
  .lg-btn .en{ font-size:9px; color:#8a6a6a; letter-spacing:1px; }
  .lg-btn.soon{ opacity:.4; cursor:not-allowed; }
  .lg-btn.soon:hover{ border-color:rgba(150,28,28,.4); background:rgba(30,10,10,.4); color:#d8c8c8; box-shadow:none; }