/* =====================================================================
   detail.css — 캐릭터 상세: 상단바 · 외형 스테이지 · 도감
   스토어(base.css) 결: 검정 바탕 · 붉은 모노 라벨 · 코너마크 · CRT · 초록은 X/식물형만.
   base.css 위에 얹는다. 모든 선택자는 .hxc 접두사.
   ===================================================================== */
.hxc {
  --bg: #0a0a0b;
  --surf: #0b0b0c;
  --deep: #060606;
  --line: #1a1a1a;
  --text: #c8c8c8;
  --hi: #e0e0e0;
  --dim: #505050;
  --mute: #2e2e2e;
  --red: #cc2222;
  --red-dk: #7a1515;
  --red-glow: rgba(200, 30, 30, .4);
  --x: #00ff10;
  --sp: #40c040;
  --mono: 'Share Tech Mono', monospace;
  --disp: 'Rajdhani', sans-serif;
  --kr: 'SUIT Variable', 'SUIT', sans-serif;
  background: var(--bg); color: var(--text);
}
.hxc *:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
.hxc.is-ko .kfont { font-family: var(--kr); }

/* 코너마크 — 스토어 .corner-mark 와 같은 모양 */
.hxc .cm { position: absolute; width: 12px; height: 12px; border: 0 solid #4a1212; z-index: 7; pointer-events: none; }
.hxc .cm.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hxc .cm.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hxc .cm.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hxc .cm.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* '// ● OPENING BID' 띠 — 스토어 .card-bid-badge 결 */
.hxc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 22px; background: #040404;
  border-top: 1px solid rgba(140,15,15,.18); border-bottom: 1px solid rgba(140,15,15,.25);
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
}
.hxc-bar > span { color: #aa2828; text-shadow: 0 0 6px rgba(180,20,20,.4); animation: hxcBlink 2.4s infinite; }
.hxc-bar > span::before { content: '// ● '; opacity: .6; }
.hxc-bar > em { font-style: normal; color: var(--dim); }
@keyframes hxcBlink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- 상단 상태바 ---------- */
.hxc-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;   /* 생성 화면(10000) 위 */
  display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 44px;
  background: rgba(6,6,6,.92); border-bottom: 1px solid #140808;
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--dim);
  backdrop-filter: blur(6px);
}
.hxc-live { display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-size: 13px; letter-spacing: 4px; }
.hxc-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red-glow); animation: hxcBlink 1.4s infinite; }
.hxc-session { color: #3a3a3a; }
.hxc-session b { font-weight: 400; color: #5a5a5a; }
.hxc-top-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hxc-back { color: #6a6a6a; text-decoration: none; transition: color .2s; }
.hxc-back:hover { color: var(--red); }
.hxc-lang {
  background: transparent; border: 1px solid var(--red-dk); color: var(--red);
  font: inherit; letter-spacing: 2px; padding: 4px 10px; cursor: pointer; transition: all .15s;
}
.hxc-lang:hover { border-color: var(--red); box-shadow: 0 0 10px rgba(200,30,30,.2); }

/* 언어 목록 — 11개라 버튼 토글로는 고를 수 없다. 눌러서 펼친다. */
.hxc-langwrap { position: relative; }
.hxc-langlist {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  margin: 0; padding: 4px; list-style: none; min-width: 148px;
  background: #0b0707; border: 1px solid var(--red-dk);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.hxc-langlist[hidden] { display: none; }
.hxc-langlist li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px; cursor: pointer; color: #7a7a7a; transition: color .15s, background .15s;
}
.hxc-langlist li b { font-weight: 400; letter-spacing: 2px; font-size: 11px; color: #4a4a4a; min-width: 22px; }
.hxc-langlist li:hover { background: rgba(200,30,30,.1); color: #d8d8d8; }
.hxc-langlist li[aria-selected="true"] { color: var(--red); }
.hxc-langlist li[aria-selected="true"] b { color: var(--red); }

/* ---------- 이름 글꼴 (Climate Crisis KR 1979 — 대표님 지정) ---------- */
@font-face {
  font-family: 'ClimateCrisis'; font-display: swap;
  src: url('../fonts/ClimateCrisisKR-1979-sub.woff2') format('woff2');   /* tools/subset-font.js 로 생성 */
}

/* savee 결 감속 곡선 */
.hxc { --ease-out: cubic-bezier(.22,.86,0,1); --ease-soft: cubic-bezier(.32,.72,0,1); }

/* ---------- 스테이지 (휠 스크럽 구간) ---------- */
.hxc-stage { position: relative; height: 360vh; }
.hxc-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden; padding-top: 44px;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(90,10,10,.12), transparent 70%), var(--bg);
}
.hxc-sticky > .hxc-bar { position: relative; z-index: 8; }

/* 뒤 배경 빛 — 같은 이미지를 크게 흐림 */
.hxc-ambient {
  position: absolute; left: 50%; top: 52%; width: 60vh; height: 80vh; margin: -40vh 0 0 -30vh; z-index: 1;
  background: center / contain no-repeat; filter: blur(70px) saturate(1.3); opacity: .38; pointer-events: none;
  will-change: transform;
}
/* 스캐너 링 */
.hxc-rings { position: absolute; left: 50%; top: 56%; width: 0; height: 0; z-index: 2; pointer-events: none; will-change: transform; }
.hxc-rings i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(200,30,30,.10); transform: translate(-50%,-50%); }
.hxc-rings i:nth-child(1) { width: 92vh; height: 92vh; }
.hxc-rings i:nth-child(2) { width: 68vh; height: 68vh; border-style: dashed; border-color: rgba(200,30,30,.14); animation: hxcSpin 80s linear infinite; }
.hxc-rings i:nth-child(3) { width: 120vh; height: 120vh; border-color: rgba(200,30,30,.05); }
@keyframes hxcSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* 이름 — 위쪽 가운데 */
.hxc-title {
  position: absolute; left: 50%; top: calc(44px + 34px + 3.2vh); z-index: 7;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: translate3d(-50%,0,0); transform-origin: 50% 0; will-change: transform;
}
.hxc-xcode, .hxc-word { font-family: 'ClimateCrisis', var(--disp); color: #f2efe6; line-height: .9; }
.hxc-xcode { font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .02em; }
.hxc-word { font-size: clamp(52px, 7vw, 124px); letter-spacing: .01em; font-weight: 400; margin-top: .08em; white-space: nowrap; }
.hxc-word .ch { display: inline-block; opacity: 0; transform: translate3d(0,.45em,0); filter: blur(10px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + 120ms); }
.hxc-title .hxc-xcode { opacity: 0; transform: translate3d(0,10px,0); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.hxc-title.is-in .ch, .hxc-title.is-in .hxc-xcode { opacity: 1; transform: none; filter: none; }
/* 한글명 · 분류 라벨 — 밝은 SUIT + 붉은 점 + 붉은 모노 (가독성) */
.hxc-kname {
  margin-top: 12px; display: flex; gap: 10px; align-items: center;
  font-family: var(--kr); font-size: 14px; letter-spacing: .5px; color: #b8b8b8;
  opacity: var(--sub, 1); transition: opacity .3s;
}
.hxc-kname b { font-weight: 600; color: #e6e6e6; }
.hxc-kname i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.hxc-kname em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: #d04040; }

.hxc-meta-l, .hxc-meta-r { position: absolute; z-index: 7; bottom: 5vh; }
.hxc-meta-l { left: 4vw; }
.hxc-meta-r { right: 4vw; text-align: right; }
.hxc-bid { display: flex; flex-direction: column; gap: 2px; }
.hxc-bid small { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: #5a1a1a; }
.hxc-bid b { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: 2px; color: var(--red); text-shadow: 0 0 12px var(--red-glow); }
.hxc-sp { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; padding: 3px 9px; border: 1px solid; background: rgba(0,0,0,.55); }

/* 외형 — 스테이지 전체를 쓰는 캔버스 (카메라가 이 안에서 확대·이동) */
.hxc-figure, .hxc-callouts { position: absolute; left: 0; right: 0; top: calc(44px + 34px); bottom: 0; }
.hxc-figure { z-index: 3; perspective: 1400px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hxc-figure::after {                               /* 비네트 */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.hxc-fig-tilt { position: absolute; inset: 2% 0 0; transform-style: preserve-3d; will-change: transform; }
.hxc-fig-tilt canvas, .hxc-fig-tilt img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 28px 34px rgba(0,0,0,.7)); }

.hxc-hint {
  position: absolute; bottom: 4.5vh; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 4px; color: #6a2020;
}
.hxc.is-ko .hxc-hint { font-family: var(--kr); letter-spacing: 2px; }
.hxc-hint i { width: 1px; height: 38px; background: linear-gradient(transparent, #8a2020); animation: hxcHint 2.2s var(--ease-soft) infinite; }
@keyframes hxcHint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 도감 콜아웃 (시안 B) ---------- */
.hxc-callouts { z-index: 6; pointer-events: none; }
.co-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co-ln { fill: none; stroke: rgba(200,30,30,.55); stroke-width: 1; }
.co-dot { fill: var(--red); filter: drop-shadow(0 0 4px rgba(255,40,40,.9)); }
.co-ring { fill: none; stroke: rgba(200,30,30,.6); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: coPulse 2.4s var(--ease-soft) infinite; }
@keyframes coPulse { from { transform: scale(.4); stroke-opacity: .9; } to { transform: scale(2.2); stroke-opacity: 0; } }

.co { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; opacity: 0; will-change: transform, opacity, filter; }
.co.is-left { text-align: right; align-items: flex-end; }
.co .k { font-family: var(--kr); font-size: 13px; color: #7a7a7a; display: flex; gap: 8px; align-items: baseline; }
.co.is-left .k { flex-direction: row-reverse; }
.co .k em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 3px; color: #4a2020; }
.hxc:not(.is-ko) .co .k em { display: none; }          /* 영어일 땐 라벨이 이미 영어 */
.hxc:not(.is-ko) .co .k { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.co .v { font-family: var(--kr); font-size: 26px; font-weight: 600; color: var(--hi); letter-spacing: -.01em; line-height: 1.15; }
.hxc:not(.is-ko) .co .v { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.co.is-glitch .v { position: relative; font-family: var(--mono) !important; color: var(--red); text-shadow: 0 0 12px var(--red-glow); }
.co.is-glitch .v::before, .co.is-glitch .v::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.co.is-glitch .v::before { color: var(--x); animation: hxcGlitch 2.6s steps(1) infinite; }
.co.is-glitch .v::after { color: #22ccff; animation: hxcGlitch 3.1s steps(1) infinite reverse; }
@keyframes hxcGlitch {
  0%, 86%, 100% { opacity: 0; transform: none; }
  88% { opacity: .7; transform: translate(-2px, 1px); clip-path: inset(0 0 55% 0); }
  92% { opacity: .7; transform: translate(2px, -1px); clip-path: inset(45% 0 0 0); }
}

/* 설명문 — 단어 단위로 밝아짐 */
.hxc-desc {
  position: absolute; left: 50%; bottom: 5vh; z-index: 7; width: min(760px, 70vw); transform: translateX(-50%);
  text-align: center; font-family: var(--kr); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; letter-spacing: -.01em;
  opacity: 0; visibility: hidden;
  padding: 14px 24px; background: radial-gradient(ellipse at center, rgba(10,10,11,.85) 40%, transparent 75%);
}
.hxc-desc .w { color: #3a3a3a; transition: color .6s var(--ease-out); }
.hxc-desc .w.is-lit { color: #dcdcdc; }
.hxc:not(.is-ko) .hxc-desc { font-family: var(--disp); font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; letter-spacing: .01em; }

/* 화면에 들어올 때 떠오름 (fx/reveal.js) */
[data-reveal] { opacity: 0; transform: translate3d(0,28px,0); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 899px) {
  .hxc-session { display: none; }
  .hxc-title { top: calc(44px + 34px + 2vh); }
  .hxc-word { font-size: 13vw; white-space: nowrap; }
  .hxc-kname { font-size: 13px; white-space: nowrap; }
  .hxc-kname em { font-size: 11px; }
  .hxc-meta-l, .hxc-meta-r { bottom: auto; top: calc(44px + 34px + 2vh); }
  .hxc-meta-l { left: 16px; } .hxc-meta-r { right: 16px; }
  .hxc-meta-r b { font-size: 18px; }
  .hxc-meta-r small { display: none; }
  .hxc-callouts {
    top: auto; bottom: 19vh; left: 16px; right: 16px; height: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  }
  .co-lines { display: none; }
  .co { position: relative; text-align: left !important; align-items: flex-start !important; }
  .co.is-left .k { flex-direction: row; }
  .co .v, .hxc:not(.is-ko) .co .v { font-size: 18px; }
  .hxc-desc { width: auto; left: 16px; right: 16px; transform: none; bottom: 3vh; font-size: 13px; }
  .hxc:not(.is-ko) .hxc-desc { font-size: 15px; }
  .hxc-desc br { display: none; }          /* 좁은 화면은 자연 줄바꿈만 */
  .hxc-hint { bottom: 2vh; }
}

/* ---------- 잠김 / 실패 ---------- */
.hxc-locked .hxc-stage, .hxc-failed .hxc-stage { display: none; }
.hxc-locked-msg { padding: 30vh 16px; font-family: var(--mono); color: #5a1a1a; letter-spacing: 4px; text-align: center; }

.hxc-foot {
  padding: 48px 16px 64px; text-align: center; border-top: 1px solid #140808;
  font-family: var(--mono); font-size: 9px; letter-spacing: 4px; color: #2e1010;
}

@media (prefers-reduced-motion: reduce) {
  .hxc-hint i, .hxc-bar > span, .hxc-live i, .hxc-rings i, .co-ring,
  .co.is-glitch .v::before, .co.is-glitch .v::after { animation: none; }
  .hxc-word .ch, .hxc-title .hxc-xcode, [data-reveal] { transition: none; }
}