/* ============================================================
   폰트 — Pretendard 동봉 (SIL Open Font License 1.1)
   키오스크는 오프라인 운용이라 웹폰트 CDN 을 쓸 수 없어 파일을 app/fonts/ 에 포함한다.
   폴백이던 맑은 고딕은 Bold(700)까지만 있어 font-weight:900 을 줘도 더 두꺼워지지 않았다.
   ============================================================ */
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:400;
  src:url('../fonts/Pretendard-Regular.woff2') format('woff2'); font-display:block; }
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:600;
  src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2'); font-display:block; }
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:700;
  src:url('../fonts/Pretendard-Bold.woff2') format('woff2'); font-display:block; }
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:900;
  src:url('../fonts/Pretendard-Black.woff2') format('woff2'); font-display:block; }

/* ============================================================
   AI 위조 흔적을 찾아라 — 키오스크 데모
   1920x1080 스테이지를 브라우저 창에 비례 스케일
   ============================================================ */

:root{
  /* 어두운 네이비 기반 (Fortinet 시안) */
  --bg-0:#070b16;
  --bg-1:#0a0f1e;
  --bg-2:#0d1526;
  --panel:rgba(16,26,48,.62);
  --panel-2:rgba(22,34,62,.74);
  --stroke:rgba(120,160,220,.16);
  --stroke-2:rgba(120,160,220,.28);
  --text:#e8eefc;
  --text-dim:#9fb0d4;
  --text-mute:#68789e;
  /* 게임 피드백 색(정답=시안 / 오답·놓침=빨강) — 절대 변경 금지 */
  --cyan:#37e2ff;
  --cyan-2:#0bb6e6;
  --red:#ff4d6a;
  --red-2:#ff2d55;
  /* Fortinet 브랜드 레드 — UI 크롬 전용 (게임 피드백 빨강과 톤 구분) */
  --brand-red:#da291c;
  --brand-red-2:#e31837;
  --brand-red-3:#ff4433;
  --brand-red-deep:#8f1410;
  --brand-red-glow:rgba(218,41,28,.45);
  --gold:#ffd166;
  --silver:#cdd6e6;
  --bronze:#e08a5b;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Consolas', 'D2Coding', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ width:100%; height:100%; overflow:hidden; background:#000; }
body{ font-family:var(--font); color:var(--text); user-select:none; -webkit-user-select:none; touch-action:manipulation; }
button{ font-family:inherit; cursor:pointer; }
.ico{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; }

/* ---------- 스테이지 스케일러 ---------- */
#viewport{ position:fixed; inset:0; background:
  radial-gradient(120% 90% at 50% -10%, #0d1526 0%, #0a0f1e 55%, #05070f 100%); }
#stage{
  position:absolute; left:50%; top:50%;
  width:1920px; height:1080px;
  transform-origin:center center;
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 15% 8%, rgba(30,70,130,.30), transparent 60%),
    radial-gradient(60% 55% at 88% 92%, rgba(160,30,25,.16), transparent 60%),
    linear-gradient(160deg, #0d1526 0%, #0a0f1e 55%, #070b16 100%);
}
/* 회로기판 트레이스 + 노드 (은은하게) */
#stage::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%235a8fd6' stroke-width='1.2' stroke-opacity='0.16'%3E%3Cpath d='M0 60 H120 L150 90 H320'/%3E%3Cpath d='M0 200 H70 L100 170 H210 L240 200 H320'/%3E%3Cpath d='M60 0 V90 M60 90 L90 120 V320'/%3E%3Cpath d='M240 0 V60 L210 90 M240 200 V320'/%3E%3Cpath d='M150 90 V150 L180 180 H320'/%3E%3C/g%3E%3Cg fill='%235a8fd6' fill-opacity='0.22'%3E%3Ccircle cx='60' cy='90' r='3.2'/%3E%3Ccircle cx='150' cy='90' r='3.2'/%3E%3Ccircle cx='240' cy='60' r='3.2'/%3E%3Ccircle cx='90' cy='120' r='2.6'/%3E%3Ccircle cx='180' cy='180' r='2.6'/%3E%3Ccircle cx='100' cy='170' r='2.6'/%3E%3Ccircle cx='240' cy='200' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:520px 520px;
  mask-image:radial-gradient(95% 95% at 50% 45%, #000 30%, transparent 100%); }

/* ---------- 배경 앰비언트 ---------- */
.bg-grid{ position:absolute; inset:-2px; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(90,150,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,150,220,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 80% at 50% 40%, #000 40%, transparent 100%);
  animation:gridDrift 24s linear infinite; }
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px; } }
.bg-scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(120,180,255,.03) 0 2px, transparent 2px 5px); }
.bg-scanlines::after{ content:""; position:absolute; left:0; right:0; height:180px;
  background:linear-gradient(180deg, transparent, rgba(55,226,255,.05), transparent);
  animation:scanSweep 7s linear infinite; }
@keyframes scanSweep{ 0%{ top:-200px; } 100%{ top:1080px; } }
/* 회로 라인을 따라 흐르는 빛 스윕 (transform/opacity만) */
.bg-glow{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  background:radial-gradient(50% 40% at 50% 46%, rgba(55,226,255,.045), transparent 70%); }
.bg-glow::after{ content:""; position:absolute; top:-30%; left:-40%; width:60%; height:160%;
  background:linear-gradient(90deg, transparent, rgba(120,180,255,.10) 45%, rgba(218,41,28,.10) 55%, transparent);
  transform:skewX(-18deg) translateX(-40%); filter:blur(28px);
  animation:lightSweep 11s ease-in-out infinite; }
@keyframes lightSweep{ 0%{ transform:skewX(-18deg) translateX(-60%); opacity:0; }
  20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:skewX(-18deg) translateX(240%); opacity:0; } }

/* ---------- 화면 전환 ---------- */
.screen{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transform:translateY(18px) scale(.995);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s;
  display:flex; flex-direction:column; }
/* 전역 헤더(.site-header 70px) 아래에서 콘텐츠가 시작하도록.
   시작화면은 헤더가 원래부터 겹쳐 있던 구성이라 제외한다. */
#screen-category, #screen-game, #screen-result, #screen-ranking{ padding-top:70px; }
.screen.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); z-index:2; }

/* ---------- 오답 비네트 ---------- */
#vignette{ position:absolute; inset:0; pointer-events:none; z-index:40; opacity:0;
  box-shadow:inset 0 0 220px 60px rgba(255,45,85,.75), inset 0 0 60px 10px rgba(255,45,85,.5);
  background:radial-gradient(60% 60% at 50% 50%, transparent 55%, rgba(255,45,85,.28)); }
#vignette.flash{ animation:vig .34s ease; }
@keyframes vig{ 0%{opacity:0;} 22%{opacity:1;} 100%{opacity:0;} }

/* ============================================================
   대기 화면
   ============================================================ */
#screen-attract{ align-items:center; justify-content:flex-start; text-align:center; }

/* ---------- 회로 라인 빛 흐름 오버레이 (시작 화면 전용) ----------
   가장자리 회로 트레이스 위를 빛 조각(comet)이 흘러가는 앰비언트 연출.
   stroke-dashoffset/opacity 애니메이션만 사용 → 레이아웃 미유발.
   콘텐츠(z-index 3+, 헤더 6) 뒤, 정적 회로 패턴(#stage::before z0) 위(z1). */
.circuit-flow{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; overflow:visible; }
.circuit-flow use{ fill:none; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; }
/* 색상 팔레트 (시안 무드: 대부분 블루/시안, 일부 브랜드 레드) */
.circuit-flow .cf-blue{ stroke:#5a8fd6; }
.circuit-flow .cf-cyan{ stroke:#37e2ff; }
.circuit-flow .cf-red{ stroke:#ff5a48; }
/* 은은한 상시 트레이스 라인 */
.cf-base use{ stroke-width:1.4; opacity:.16; }
/* 라인을 따라 흐르는 빛 조각 — 짧은 대시 + 긴 갭 */
.cf-flow use{ stroke-width:2.4;
  stroke-dasharray:13 87;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 11px currentColor);
  /* backwards: animation-delay 동안 0% 키프레임(opacity:0)을 적용한다.
     없으면 딜레이 구간에 기본 상태(dashoffset:0, 불투명)가 그대로 보여
     새로고침 직후 대시가 정지한 것처럼 깔린다. */
  animation:cfFlow linear infinite backwards; }
.cf-flow .cf-blue{ color:#7db4ff; }
.cf-flow .cf-cyan{ color:#37e2ff; }
.cf-flow .cf-red{ color:#ff5a48; }
/* 빛 조각이 경로 시작→끝으로 흘러가며, 진입/이탈 시 은은하게 밝아짐 */
@keyframes cfFlow{
  0%{ stroke-dashoffset:100; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
/* --- 전류 경로별 속도/딜레이 + 아이콘 점등 타이밍 (gen_flow.py 생성) --- */
.cf-flow .s-L1{ animation-duration:5.4s; animation-delay:0.0s; }
.cf-flow .s-L2{ animation-duration:6.6s; animation-delay:1.3s; }
.cf-flow .s-L3{ animation-duration:7.2s; animation-delay:2.4s; }
.cf-flow .s-R1{ animation-duration:5.8s; animation-delay:0.7s; }
.cf-flow .s-R2{ animation-duration:6.9s; animation-delay:1.9s; }
.cf-flow .s-R3{ animation-duration:6.2s; animation-delay:3.1s; }

/* 솔루션 아이콘 — 전부 전류 경로 위에 놓여 빛이 지날 때 점등된다. */
.sol-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.sol-ico{ position:absolute; width:74px; height:74px; transform:translate(-50%,-50%);
  display:block; opacity:.32; filter:drop-shadow(0 0 6px rgba(120,180,235,.35));
  animation:solPass 6s linear infinite backwards; }
.sol-ico svg{ width:100%; height:100%; display:block; }
@keyframes solPass{
  0%,88%{ opacity:.30; filter:drop-shadow(0 0 6px rgba(120,180,235,.3)); transform:translate(-50%,-50%) scale(1); }
  93%{ opacity:1; filter:drop-shadow(0 0 18px rgba(150,215,255,.95)); transform:translate(-50%,-50%) scale(1.14); }
  100%{ opacity:.30; filter:drop-shadow(0 0 6px rgba(120,180,235,.3)); transform:translate(-50%,-50%) scale(1); }
}
.sol-ico.i1{ animation-duration:5.4s; animation-delay:2.86s; }
.sol-ico.i2{ animation-duration:6.6s; animation-delay:0.05s; }
.sol-ico.i3{ animation-duration:7.2s; animation-delay:6.42s; }
.sol-ico.i4{ animation-duration:5.8s; animation-delay:3.75s; }
.sol-ico.i5{ animation-duration:6.9s; animation-delay:5.66s; }
.sol-ico.i6{ animation-duration:6.2s; animation-delay:4.63s; }
.sol-ico.i7{ animation-duration:6.6s; animation-delay:3.64s; }
.sol-ico.i8{ animation-duration:6.2s; animation-delay:0.99s; }
.sol-ico.i9{ animation-duration:6.2s; animation-delay:2.88s; }

/* 솔루션 아이콘 — 시안 슬라이드2 좌표. 전류가 지날 때 점등된다. */
.sol-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.sol-ico{ position:absolute; width:74px; height:74px; transform:translate(-50%,-50%);
  display:block; opacity:.34; filter:drop-shadow(0 0 6px rgba(120,180,235,.35));
  animation:solPass 6s linear infinite; }
.sol-ico svg{ width:100%; height:100%; display:block; }
@keyframes solPass{
  0%,88%{ opacity:.30; filter:drop-shadow(0 0 6px rgba(120,180,235,.3)); transform:translate(-50%,-50%) scale(1); }
  93%{ opacity:1; filter:drop-shadow(0 0 18px rgba(150,215,255,.95)); transform:translate(-50%,-50%) scale(1.14); }
  100%{ opacity:.30; filter:drop-shadow(0 0 6px rgba(120,180,235,.3)); transform:translate(-50%,-50%) scale(1); }
}
.sol-ico.i-L1{ animation-duration:5.4s; animation-delay:-2.54s; }
.sol-ico.i-L2{ animation-duration:6.6s; animation-delay:0.05s; }
.sol-ico.i-L3{ animation-duration:7.2s; animation-delay:-0.78s; }
.sol-ico.i-R1{ animation-duration:5.8s; animation-delay:-2.05s; }
.sol-ico.i-R2{ animation-duration:6.9s; animation-delay:-1.24s; }
.sol-ico.i-R3{ animation-duration:6.2s; animation-delay:-1.57s; }
/* 끝점 노드 — 은은한 발광 펄스 */
.cf-nodes circle{ fill:#5a8fd6; opacity:.42;
  filter:drop-shadow(0 0 4px rgba(90,143,214,.8));
  animation:cfNode 3.6s ease-in-out infinite; }
.cf-nodes circle:nth-child(2){ animation-delay:.7s; }
.cf-nodes circle:nth-child(3){ animation-delay:1.3s; fill:#37e2ff; }
.cf-nodes circle:nth-child(4){ animation-delay:2.0s; fill:#37e2ff; }
.cf-nodes circle:nth-child(5){ animation-delay:.4s; fill:#ff5a48; }
.cf-nodes circle:nth-child(6){ animation-delay:1.6s; fill:#ff5a48; }
.cf-nodes circle:nth-child(7){ animation-delay:2.4s; }
@keyframes cfNode{ 0%,100%{ opacity:.25; } 50%{ opacity:.7; } }

/* ---------- 상단 헤더 바 (로고 슬롯 포함) ---------- */
.site-header{ position:absolute; top:0; left:0; right:0; height:70px; z-index:6;
  display:flex; align-items:center; justify-content:center; gap:26px; padding:0 44px;
  background:linear-gradient(180deg, rgba(10,15,30,.94), rgba(10,15,30,.55));
  border-bottom:1px solid rgba(218,41,28,.28);
  box-shadow:0 1px 0 rgba(255,120,90,.12), 0 10px 30px rgba(0,0,0,.35); }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--brand-red) 0%, rgba(218,41,28,0) 42%); }
/* 로고 슬롯 — 나중에 <img src="images/logo/fortinet.svg"> 로 교체 (텍스트 폴백) */
.brand-logo{ font-size:30px; font-weight:900; letter-spacing:.02em; line-height:1;
  color:#fff; text-transform:uppercase;
  background:linear-gradient(180deg,#ff5a48,var(--brand-red) 55%,var(--brand-red-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px var(--brand-red-glow); }
.brand-logo img{ height:32px; width:auto; display:block; -webkit-text-fill-color:initial; }
.site-header-txt{ display:inline-flex; align-items:center; gap:14px; padding-left:26px;
  border-left:1px solid var(--stroke-2); color:var(--text-dim);
  font-size:19px; font-weight:600; letter-spacing:.22em; }
.site-header-txt b{ color:#fff; font-weight:800; }
.site-header-txt .sh-div{ color:var(--brand-red-3); font-style:normal; font-weight:700; }

.attract-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; z-index:3;
  padding-top:198px; }
.attract-title{ font-size:96px; font-weight:900; line-height:1.02; letter-spacing:-.02em;
  color:#fff; text-shadow:0 0 60px rgba(120,170,255,.16);
  animation:titleIn 1s cubic-bezier(.2,.8,.2,1) both; }
/* "AI 위조" 레드 그라데이션 강조 (game.js 가 이 span 을 삽입) */
.attract-title .ac-red{
  background:linear-gradient(180deg,#ff6a55 0%, var(--brand-red-2) 48%, var(--brand-red) 78%, var(--brand-red-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px var(--brand-red-glow); }
@keyframes titleIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }
.attract-sub{ font-size:40px; color:var(--text-dim); font-weight:500; letter-spacing:-.01em; margin-top:-4px; }

/* ---------- 원본 vs AI 딥페이크 비교 ---------- */
.compare-strip{ display:flex; align-items:center; gap:44px; margin-top:23px;
  animation:cardIn .8s .2s cubic-bezier(.2,.8,.2,1) both; }
.compare-card{ position:relative; }
.compare-frame{ width:320px; height:246px; border-radius:18px; overflow:hidden;
  border:1px solid var(--stroke-2); background:#0a1120;
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); }
.compare-frame{ position:relative; }
.compare-frame img{ width:100%; height:100%; object-fit:cover; object-position:52% 30%; display:block; }

/* 조작 흔적 지시 화살표 오버레이 (image3 시안의 청록 화살표).
   SVG 는 프레임에 100% 로 붙으므로 스테이지 transform:scale 에도 함께 스케일된다. */
.compare-frame .cmp-arrows{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
  filter:drop-shadow(0 0 5px rgba(55,226,255,.75)) drop-shadow(0 0 12px rgba(55,226,255,.35)); }
.compare-frame .cmp-arrows line{ stroke:#37e2ff; stroke-width:1.7; stroke-linecap:round; fill:none; }
.compare-frame .cmp-arrows marker path{ fill:#37e2ff; }

/* 라벨 — 시안대로 알약 배경 없는 플레인 흰 텍스트.
   위치 클래스만 갈아끼우면 네 모서리 어디에나 배치 가능(상·하 동시 표기도 가능). */
.compare-card .cc-tag{ position:absolute; padding:0; border:0; background:none; border-radius:0;
  font-size:21px; font-weight:800; letter-spacing:.01em; color:#fff; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.55); }
.compare-card .cc-tag.pos-tl{ top:16px; left:16px; }
.compare-card .cc-tag.pos-tr{ top:16px; right:16px; }
.compare-card .cc-tag.pos-bl{ bottom:16px; left:16px; }
.compare-card .cc-tag.pos-br{ bottom:16px; right:16px; }
.compare-vs{ font-size:26px; font-weight:900; letter-spacing:.1em; color:var(--brand-red-3);
  text-shadow:0 0 20px var(--brand-red-glow); }

.attract-cta{ position:relative; margin-top:14px; display:flex; align-items:center; justify-content:center; width:640px; height:150px; }
.pulse-ring{ position:absolute; width:210px; height:210px; border-radius:999px;
  border:2px solid rgba(218,41,28,.55); animation:pulseRing 2.8s ease-out infinite; }
.pulse-ring.d2{ animation-delay:.93s; }
.pulse-ring.d3{ animation-delay:1.86s; }
@keyframes pulseRing{ 0%{ transform:scale(.55); opacity:.85; } 100%{ transform:scale(2.4); opacity:0; } }
.touch-chip{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:16px;
  padding:26px 52px; border-radius:999px; font-size:31px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ff5a48, var(--brand-red) 60%, var(--brand-red-deep));
  border:1px solid rgba(255,150,130,.55);
  box-shadow:0 20px 55px var(--brand-red-glow), inset 0 1px 0 rgba(255,255,255,.35);
  animation:chipPulse 2.6s ease-in-out infinite; }
.touch-chip .ico{ font-size:36px; }
.touch-chip .cta-label{ position:relative; z-index:2; }
/* 기본(안 미지정) 상태에서는 B안 전용 격자 마크를 숨긴다 */
.touch-chip .grid-plate{ display:none; }

/* ------------------------------------------------------------
   CTA 디자인 A안 — 격자 "모티프" 텍스처 (강도 3단계)
   index.html 의 .touch-chip 에 cta-a1 / cta-a2 / cta-a3 중 하나를 주면 적용.
     · cta-a1 = 약   (은은하지만 실제 크기에서 인지 가능)
     · cta-a2 = 중   ← 기본 채택
     · cta-a3 = 강   (격자가 뚜렷)
   ※ 실제 포티넷 로고 파일을 쓰지 않는다. 3×3 라운드 사각(가운데 비움)
     패턴을 인라인 SVG 로 직접 그려 배경 텍스처로만 사용 → 상표 사용 아님.
     따라서 "격자 주위 여백" 규정 대상이 아니며, 텍스트와 겹쳐도 무방.
   타일 96px: 버튼 높이(약 95px) 안에 3×3 한 세트가 통째로 들어가 로고 격자처럼 읽힌다.
   중앙 감쇄 마스크는 제거. 대신 글자 뒤 어두운 스크림(::after) + text-shadow 로 가독성 확보.
   ------------------------------------------------------------ */
.touch-chip.cta-a1,
.touch-chip.cta-a2,
.touch-chip.cta-a3{ overflow:hidden; }

/* 격자 텍스처 레이어 */
.touch-chip.cta-a1::before,
.touch-chip.cta-a2::before,
.touch-chip.cta-a3::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff'%3E%3Crect x='8' y='8' width='15' height='15' rx='3'/%3E%3Crect x='24.5' y='8' width='15' height='15' rx='3'/%3E%3Crect x='41' y='8' width='15' height='15' rx='3'/%3E%3Crect x='8' y='24.5' width='15' height='15' rx='3'/%3E%3Crect x='41' y='24.5' width='15' height='15' rx='3'/%3E%3Crect x='8' y='41' width='15' height='15' rx='3'/%3E%3Crect x='24.5' y='41' width='15' height='15' rx='3'/%3E%3Crect x='41' y='41' width='15' height='15' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat; background-size:96px 96px; background-position:center;
}
/* 글자 뒤 스크림 — 텍스처를 지우지 않고 글자 영역만 살짝 눌러 대비 확보 */
.touch-chip.cta-a1::after,
.touch-chip.cta-a2::after,
.touch-chip.cta-a3::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(64% 92% at 50% 52%,
    rgba(116,14,9,.42) 0%, rgba(116,14,9,.26) 46%, rgba(116,14,9,0) 76%);
}

.touch-chip.cta-a1::before{ opacity:.18; }
.touch-chip.cta-a2::before{ opacity:.29; }
.touch-chip.cta-a3::before{ opacity:.46; }

/* 강도가 셀수록 스크림도 함께 강화 → 어느 강도에서든 글자는 또렷 */
.touch-chip.cta-a2::after{
  background:radial-gradient(66% 94% at 50% 52%,
    rgba(112,13,8,.50) 0%, rgba(112,13,8,.31) 46%, rgba(112,13,8,0) 78%);
}
.touch-chip.cta-a3::after{
  background:radial-gradient(70% 98% at 50% 52%,
    rgba(106,12,7,.62) 0%, rgba(106,12,7,.40) 48%, rgba(106,12,7,0) 80%);
}

/* 텍스처 위 글자 가독성 보강 */
.touch-chip.cta-a1 .ico, .touch-chip.cta-a1 .cta-label,
.touch-chip.cta-a2 .ico, .touch-chip.cta-a2 .cta-label,
.touch-chip.cta-a3 .ico, .touch-chip.cta-a3 .cta-label{
  position:relative; z-index:2;
  text-shadow:0 1px 2px rgba(78,8,5,.55), 0 0 10px rgba(78,8,5,.42); }
.touch-chip.cta-a3 .ico, .touch-chip.cta-a3 .cta-label{
  text-shadow:0 1px 2px rgba(70,7,4,.7), 0 0 12px rgba(70,7,4,.55); }

/* ------------------------------------------------------------
   CTA 디자인 B안 — 실제 격자 마크를 아이콘으로
   index.html 의 .touch-chip 에 cta-b 클래스를 주면 적용.
   브랜드 가이드 준수:
    · 격자 마크는 항상 브랜드 레드 → 레드 버튼 위에서는 대비가 없다.
      따라서 마크를 "흰 바탕" 위에 올린다. 이 흰 판(plate)이 곧
      규정상의 여백(clear space) 역할을 겸한다.
    · 격자 높이 22px → 필요 여백 11px 이상. plate 패딩을 사방 11px 로
      주어 상·하·좌·우 모두 50% 여백을 충족.
    · 격자 위에 어떤 그래픽·텍스트도 얹지 않음.
    · 변형·회전·드롭섀도·아웃라인 없음(filter:none / box-shadow:none).
    · 버튼 배경은 기존 레드 유지, 텍스처 없음.
   ------------------------------------------------------------ */
.touch-chip.cta-b{ padding:24px 52px 24px 30px; gap:24px; }
.touch-chip.cta-b .ico{ display:none; }      /* 손 아이콘 자리 → 격자 마크 */
.touch-chip.cta-b .grid-plate{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; padding:11px;              /* = 격자 높이의 50% 여백 */
  background:#fff; border-radius:10px;
  box-shadow:none; border:0;
}
.touch-chip.cta-b .grid-ico{
  display:block; height:22px; width:auto;
  filter:none; box-shadow:none; border:0; transform:none; opacity:1;
}
@keyframes chipPulse{ 0%,100%{ transform:scale(1); box-shadow:0 20px 55px var(--brand-red-glow), inset 0 1px 0 rgba(255,255,255,.35); }
  50%{ transform:scale(1.045); box-shadow:0 24px 70px rgba(218,41,28,.6), inset 0 1px 0 rgba(255,255,255,.35); } }

/* ------------------------------------------------------------
   CTA 디자인 — 버튼 자체가 "격자 형상"
   index.html 의 .touch-chip 에 cta-grid-w(흰 밴드) / cta-grid-d(어두운 밴드) 중 하나.
   ※ 실제 로고 파일을 쓰지 않는다. 3열 × (블록/밴드/블록) 을 CSS 그리드로 직접 그린 모티프.
     윗줄 3블록 + 아랫줄 3블록 = 격자, 그 사이 가로 밴드가 격자의 빈 줄이자 문구 자리.
     블록 사이 세로 간격 2곳이 격자의 빈 칸을 만든다.
     바깥 네 모서리만 크게 라운드 → 전체 실루엣이 둥근 사각형으로 읽힌다.
   ------------------------------------------------------------ */
.touch-chip.cta-grid-w,
.touch-chip.cta-grid-d{
  --cg-gap:44px;            /* 격자 블록 사이 틈 — 이 값만 바꾸면 조절됨 */
  /* 바깥 네 모서리 라운딩 — 로고 실측 비율(가로 42% / 세로 86%)을 블록 크기에 적용한 타원 */
  --cg-rx:88px;             /* 가로 반경 */
  --cg-ry:52px;             /* 세로 반경 */
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0 var(--cg-gap);
  width:700px; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
  animation:chipGridPulse 2.6s ease-in-out infinite;
  filter:drop-shadow(0 18px 42px rgba(218,41,28,.45));
}
/* 격자 블록 (윗줄 b1~b3 / 아랫줄 b4~b6) */
.touch-chip.cta-grid-w .cg-blk,
.touch-chip.cta-grid-d .cg-blk{
  display:block; height:62px; border-radius:4px;
  background:linear-gradient(180deg,#ff5a48 0%, var(--brand-red) 58%, var(--brand-red-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
/* 바깥 네 모서리만 크게 */
.touch-chip.cta-grid-w .b1, .touch-chip.cta-grid-d .b1{ border-top-left-radius:var(--cg-rx) var(--cg-ry); }
.touch-chip.cta-grid-w .b3, .touch-chip.cta-grid-d .b3{ border-top-right-radius:var(--cg-rx) var(--cg-ry); }
.touch-chip.cta-grid-w .b4, .touch-chip.cta-grid-d .b4{ border-bottom-left-radius:var(--cg-rx) var(--cg-ry); }
.touch-chip.cta-grid-w .b6, .touch-chip.cta-grid-d .b6{ border-bottom-right-radius:var(--cg-rx) var(--cg-ry); }
/* 아랫줄 블록은 위쪽 하이라이트 대신 아래쪽 그라데이션 반전 (격자 균형) */
.touch-chip.cta-grid-w .b4, .touch-chip.cta-grid-w .b5, .touch-chip.cta-grid-w .b6,
.touch-chip.cta-grid-d .b4, .touch-chip.cta-grid-d .b5, .touch-chip.cta-grid-d .b6{
  background:linear-gradient(180deg,#f0402f 0%, var(--brand-red) 42%, var(--brand-red-deep) 100%);
}
/* 가운데 밴드 = 문구 자리 (3열 전체를 가로지른다) */
.touch-chip.cta-grid-w .cta-label,
.touch-chip.cta-grid-d .cta-label{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center;
  height:70px; font-size:32px; font-weight:900; letter-spacing:-.01em;
  white-space:nowrap;
}
/* 변형 W — 흰 밴드 + 진한 브랜드 레드 문구 (기본) */
.touch-chip.cta-grid-w .cta-label{
  background:linear-gradient(180deg,#ffffff 0%, #fdf6f5 100%);
  color:var(--brand-red-deep);
  text-shadow:none;
}
/* 변형 D — 어두운 밴드 + 흰 문구 */
.touch-chip.cta-grid-d .cta-label{
  background:transparent;      /* 밴드를 비워 로고의 빈 칸처럼 배경이 그대로 보임 */
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 22px rgba(255,80,60,.45);
}
@keyframes chipGridPulse{
  0%,100%{ transform:scale(1);     filter:drop-shadow(0 18px 42px rgba(218,41,28,.45)); }
  50%    { transform:scale(1.035); filter:drop-shadow(0 22px 56px rgba(218,41,28,.62)); } }
/* 격자 버튼은 기존 CTA 보다 크다 → 컨테이너 여유 확보 */
.attract-cta:has(.cta-grid-w), .attract-cta:has(.cta-grid-d){ width:800px; height:236px; }

/* ---------- CTA: 포티넷 격자 로고 원본 + 중앙 '클릭' (Vr2) ----------
   로고를 변형하지 않는다. 191x136(종횡비 1.404) 원본을 그대로 띄우고,
   원래 비어 있는 중앙 칸(가로 41.9% / 세로 46.3%)에 문구만 올린다.
   폭 400px -> 높이 285px, 중앙 칸 168x132px. */
/* 비교 사진 하단(558) ~ 화면 하단(1080) 사이 522px 구간의 중앙에 오도록 27px 내린다.
   margin 이 아니라 relative/top 을 쓰는 이유: .attract-inner 가 세로 중앙정렬이라
   margin 을 주면 컨테이너가 커지며 위쪽 요소까지 함께 밀려 올라간다. */
.attract-cta:has(.cta-logo){ width:620px; height:300px; margin-top:37px; top:0; }
/* 원형 펄스 링은 알약형 CTA 용이라 사각 로고와 겹쳐 테두리처럼 보인다. 숨긴다.
   대신 로고 자체의 chipPulse(스케일+글로우)가 "파동" 연출을 유지한다. */
/* 로고 CTA 전용 파동.
   기본 .pulse-ring 은 지름 210px 을 scale(.55)=115px 에서 시작해 로고 안쪽에서 퍼져 나온다.
   로고 격자의 빈 칸이 투명이라 그 원이 로고를 관통해 '테두리'처럼 보였다.
   -> 로고와 같은 사각형으로 만들고, 로고 크기(420x299)에서 시작해 바깥으로만 퍼지게 한다. */
.attract-cta:has(.cta-logo) .pulse-ring{
  display:block; width:420px; height:299px; border-radius:52px;
  border:2px solid rgba(232,58,38,.5);
  animation:pulseRingRect 2.8s ease-out infinite; }
@keyframes pulseRingRect{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.48); opacity:0; } }
.touch-chip.cta-logo{ box-shadow:none !important;
  display:block; width:420px; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none;
  filter:drop-shadow(0 20px 52px rgba(218,41,28,.5));
  animation:chipPulse 2.6s ease-in-out infinite; }
.cta-logo-img{ width:100%; height:auto; display:block; user-select:none; }
.touch-chip.cta-logo .cta-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:64px; font-weight:900; letter-spacing:.02em; line-height:1;
  color:#fff; text-shadow:0 3px 16px rgba(0,0,0,.9), 0 0 30px rgba(255,80,60,.5);
  pointer-events:none; }
.attract-foot{ position:absolute; bottom:40px; left:0; right:0; text-align:center;
  color:var(--text-mute); font-size:19px; letter-spacing:.24em; z-index:3; }

/* ============================================================
   공통 페이지 헤더
   ============================================================ */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 64px 10px; z-index:3; }
.page-head-mid{ text-align:center; flex:1; }
.page-head-mid h2{ font-size:46px; font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(180deg,#eaf3ff 0%, #86baf0 52%, #3f83da 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 46px rgba(70,140,230,.28); }
.page-head-mid h2 .ico{ font-size:40px; vertical-align:-.12em; color:var(--gold);
  -webkit-text-fill-color:var(--gold); }
.page-head-mid p{ font-size:22px; color:var(--text-dim); margin-top:8px; }
.ph-kicker{ display:block; font-style:normal; font-size:17px; font-weight:800; letter-spacing:.32em;
  color:var(--brand-red-3); text-shadow:0 0 14px var(--brand-red-glow); margin-bottom:8px; }
.ghost-btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:14px;
  background:var(--panel); border:1px solid var(--stroke-2); color:var(--text);
  font-size:22px; font-weight:700; backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.3);
  transition:transform .15s, background .2s, border-color .2s, box-shadow .2s; }
.ghost-btn .ico{ font-size:24px; color:var(--brand-red-3); }
.ghost-btn:active{ transform:scale(.96); background:var(--panel-2);
  border-color:rgba(218,41,28,.55); box-shadow:0 0 24px var(--brand-red-glow); }

/* ============================================================
   선택화면 — 배경 다각형 / 상단 로고 / 하단 문구
   ============================================================ */
/* 선택화면 배경 — 클라이언트 제공 이미지 (1672x941, 스테이지와 동일 16:9) */
/* 전역 헤더(70px) 아래에서 시작. inset:0 이면 헤더 뒤로 깔려 로고와 회로선이 겹친다. */
/* 배경 이미지 숨김 — 전류 흐름이 이미지의 회로 패턴과 맞지 않아,
   시작화면과 동일한 스테이지 기본 배경(.bg-grid/.bg-scanlines/.bg-glow)을 쓴다.
   되돌리려면 display:none 한 줄만 지우면 된다. */
.cat-bg{ display:none;
  position:absolute; inset:70px 0 0 0; width:100%; height:calc(100% - 70px);
  object-fit:cover; z-index:1; pointer-events:none; user-select:none; }




/* ---------- 선택화면 전류 ----------
   배경 이미지의 회로 트레이스와 같은 문법으로 맞춘다.
     · 시작점: 배경 트레이스 실측 y (좌 479/557/717, 우 252/515/929)
     · 형태  : 수평 직선 + 45도 모따기만 사용
     · 두께  : 배경 트레이스 실측 3px
   상시 라인은 배경에 이미 그려져 있으므로 거의 감추고, 흐르는 빛만 보이게 한다. */
#screen-category .circuit-flow{ z-index:2; }

.cf-flow .c-C1{ animation-duration:6.8s; animation-delay:0.0s; }
.cf-flow .c-C2{ animation-duration:8.0s; animation-delay:1.6s; }
.cf-flow .c-C3{ animation-duration:7.4s; animation-delay:3.2s; }
.cf-flow .c-C4{ animation-duration:8.6s; animation-delay:0.8s; }
.cf-flow .c-C5{ animation-duration:6.2s; animation-delay:2.4s; }
.cf-flow .c-C6{ animation-duration:7.9s; animation-delay:4.0s; }

/* 선택화면 솔루션 아이콘 — .sol-layer/.sol-ico 스타일은 시작화면과 공용,
   여기서는 경로별 점등 타이밍만 지정한다. */
#screen-category .sol-layer{ z-index:2; }
.sol-ico.k1{ animation-duration:6.8s; animation-delay:3.24s; }
.sol-ico.k2{ animation-duration:8.0s; animation-delay:4.12s; }
.sol-ico.k3{ animation-duration:7.4s; animation-delay:0.74s; }
.sol-ico.k4{ animation-duration:8.6s; animation-delay:4.50s; }
.sol-ico.k5{ animation-duration:6.2s; animation-delay:4.44s; }
.sol-ico.k6{ animation-duration:7.9s; animation-delay:5.40s; }

/* ============================================================
   카테고리 카드
   ============================================================ */
.cat-grid{ flex:1; display:grid; grid-template-columns:repeat(3, minmax(0, 430px)); gap:30px;
  padding:28px 56px 74px; z-index:3; align-content:center; justify-content:center; }
.cat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* 타입 이미지 — 휘도 기반으로 알파를 복원한 PNG.
   배경제거 툴은 글로우를 배경으로 판정해 알파를 0으로 깎는다.
   글로우는 "검정 위 가산광"이라 휘도가 곧 알파이므로,
   툴이 잡은 피사체 알파와 휘도 알파를 합쳐 복원했다(tools 생성).
   mix-blend-mode:screen 은 카드가 반투명(backdrop-filter)이라
   카드 내부 배경과 블렌딩돼 사각형이 비쳐 쓰지 않는다. */
.cat-art{ flex:none; width:252px; height:200px; margin-right:-18px; }
.cat-art img{ width:100%; height:100%; object-fit:contain; display:block;
  user-select:none; }
.cat-card{ position:relative; border-radius:22px; padding:30px 28px 28px; overflow:hidden;
  background:linear-gradient(180deg, rgba(18,28,52,.72), rgba(12,18,34,.72));
  border:1px solid var(--stroke-2); backdrop-filter:blur(12px);
  display:flex; flex-direction:column; gap:13px; text-align:left;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s;
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both; }
.cat-card:nth-child(2){ animation-delay:.08s; }
.cat-card:nth-child(3){ animation-delay:.16s; }
.cat-card:nth-child(4){ animation-delay:.24s; }
@keyframes cardIn{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;} }
.cat-card::before{ content:""; position:absolute; inset:0; opacity:.7; pointer-events:none;
  background:radial-gradient(130% 80% at 22% -10%, rgba(218,41,28,.16), transparent 58%); }
/* 상단 네온 라인 */
.cat-card::after{ content:""; position:absolute; top:0; left:24px; right:24px; height:2px;
  background:linear-gradient(90deg, transparent, var(--brand-red), transparent); opacity:.7; }
.cat-card:active{ transform:translateY(-6px) scale(.99); border-color:var(--brand-red);
  box-shadow:0 40px 90px rgba(218,41,28,.28), 0 0 0 1px rgba(218,41,28,.42); }
/* 아이콘 — 제공 에셋에 라운드 박스가 포함되어 있어 별도 배경/테두리 없음 */
.cat-icon{ width:90px; height:90px; flex:none; display:block;
  background:none; border:0; box-shadow:none; }
.cat-icon img{ width:100%; height:100%; object-fit:contain; display:block;
  user-select:none; }
.cat-num{ position:absolute; top:24px; right:26px; font-family:var(--mono); font-size:22px; font-weight:700;
  color:#ff5a44; letter-spacing:.12em; text-shadow:0 0 14px rgba(218,41,28,.5); }
.cat-card h3{ font-size:32px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.cat-tag{ font-size:18px; color:#ff4d38; font-weight:700; margin-top:-8px; }
.cat-desc{ font-size:19px; color:var(--text-dim); line-height:1.5; flex:1;
  white-space:nowrap; }
.cat-play{ position:relative; display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:13px 30px; border-radius:8px; font-size:20px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#f0301c 0%, #d82114 60%, #b81a10 100%);
  border:1px solid rgba(255,120,98,.42);
  box-shadow:0 10px 30px rgba(218,41,28,.52), inset 0 1px 0 rgba(255,255,255,.24); }
.cat-play .ico{ font-size:20px; }

/* ============================================================
   게임 화면 HUD
   ============================================================ */
/* 전역 헤더(70px) 아래에서 HUD 가 시작하도록.
   주의: 이 규칙이 위의 그룹 선택자보다 뒤에 있어 같은 우선순위로 덮어쓴다. */
#screen-game{ padding:70px 0 0; }
/* 상단 배경 — 클라이언트 제공 띠 이미지(2172x134).
   min-height 118px 는 폭 1920 기준 원본 비율(16.21)과 맞춘 값이라 늘어남/잘림이 없다.
   이미지 하단에 이미 마감선이 있어 border-bottom 은 쓰지 않는다. */
/* 상단 배경: 클라이언트 제공 띠 이미지(2172x134).
   HUD 가 이미지보다 높으므로 cover 로 세로를 꽉 채운다(하단 마감선 보존, 좌우만 크롭). */
#hud{ display:flex; align-items:center; gap:28px; padding:26px 48px; z-index:5;
  background-image:url("../images/game-hud-bg.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* 나가기: 솔리드 레드 버튼 */
.hud-quit{ padding:14px 24px; font-size:20px; color:#fff;
  background:linear-gradient(180deg,#ff5a48, var(--brand-red) 62%, var(--brand-red-deep));
  border-color:rgba(255,150,130,.5);
  box-shadow:0 10px 26px var(--brand-red-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.hud-quit .ico{ color:#fff; }
.hud-quit:active{ transform:scale(.96); border-color:rgba(255,150,130,.5);
  background:linear-gradient(180deg,#ff6a58, var(--brand-red) 70%, var(--brand-red-deep));
  box-shadow:0 0 24px var(--brand-red-glow); }
/* 원형 링 타이머 */
.hud-timer{ position:relative; width:104px; height:104px; flex:none; }
.hud-timer .ring{ width:104px; height:104px; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(218,41,28,.18); stroke-width:9; }
.ring-fg{ fill:none; stroke:var(--brand-red-3); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:0; filter:drop-shadow(0 0 9px var(--brand-red-glow));
  transition:stroke-dashoffset .2s linear, stroke .3s; }
.ring-num{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1; }
.ring-num span{ font-family:var(--mono); font-size:38px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--brand-red-3); text-shadow:0 0 12px var(--brand-red-glow); letter-spacing:-.02em; }
.ring-num small{ font-size:15px; color:var(--text-dim); }
.hud-timer.danger .ring-fg{ stroke:var(--red); filter:drop-shadow(0 0 10px rgba(255,77,106,.8)); }
.hud-timer.danger{ animation:dangerPulse .9s ease-in-out infinite; }
.hud-timer.danger .ring-num span{ color:var(--red); }
@keyframes dangerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
.hud-title{ flex:1; }
.hud-kicker{ font-size:16px; letter-spacing:.28em; color:var(--cyan); font-weight:600; }
.hud-title h3{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.hud-stats{ display:flex; gap:18px; }
.stat{ min-width:150px; padding:14px 22px; border-radius:16px; background:var(--panel); border:1px solid var(--stroke);
  display:flex; flex-direction:column; gap:5px; backdrop-filter:blur(8px); text-align:center; }
.stat-label{ font-size:16px; color:var(--text-mute); letter-spacing:.06em; }
.stat-val{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.stat-val b{ color:var(--cyan); }
.stat-val.accent{ color:var(--cyan); }
.score-bump{ animation:scoreBump .4s ease; }
@keyframes scoreBump{ 0%{transform:scale(1);} 40%{transform:scale(1.22);} 100%{transform:scale(1);} }

/* ---------- 스테이지 콘텐츠 영역 ---------- */
#stage-content-wrap{ position:relative; flex:1; margin:0 48px 40px; border-radius:22px; overflow:hidden;
  border:1px solid var(--stroke-2); background:rgba(6,10,22,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02); }
#stage-content{ position:absolute; inset:0; }
#stage-content.shake{ animation:shake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 10%,90%{transform:translateX(-3px);} 20%,80%{transform:translateX(6px);}
  30%,50%,70%{transform:translateX(-11px);} 40%,60%{transform:translateX(11px);} }
#marker-layer{ position:absolute; inset:0; pointer-events:none; z-index:20; }

/* HTML 게임 씬 화면맞춤(contain) 래퍼: 자연 크기 문서를 스테이지에 맞춰 축소·중앙정렬.
   내부 스크롤을 없애 마커 정합성과 흔적 발견 가능성을 보장한다. */
.html-fit{ position:absolute; inset:0; overflow:hidden; }
.html-fit .email-app,
.html-fit .invoice-scene{ overflow:visible; }

/* 이미지 시나리오 */
.img-scene{ position:absolute; inset:0; }
.img-scene img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.img-hint{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:15;
  padding:12px 26px; border-radius:999px; background:rgba(6,10,22,.5); border:1px solid var(--stroke-2);
  color:var(--text-dim); font-size:20px; backdrop-filter:blur(6px);
  pointer-events:none; opacity:1; animation:hintFade .6s ease 3.5s forwards; }
@keyframes hintFade{ to{ opacity:0; visibility:hidden; } }

/* 마커 */
.marker{ position:absolute; z-index:22; transform:translate(-50%,-50%); pointer-events:none; }
.marker.correct{ width:96px; height:96px; }
.marker.correct .ring{ position:absolute; inset:0; border-radius:50%; border:4px solid var(--cyan);
  box-shadow:0 0 26px rgba(55,226,255,.7); animation:mkPop .45s cubic-bezier(.2,.9,.2,1) both; }
.marker.correct .ring::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(55,226,255,.5); animation:mkWave .7s ease-out both; }
.marker.correct svg{ position:absolute; inset:0; margin:auto; width:52px; height:52px; color:var(--cyan);
  animation:mkPop .5s .06s cubic-bezier(.2,.9,.2,1) both; }
@keyframes mkPop{ 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } }
@keyframes mkWave{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.8); opacity:0; } }
.marker.wrong{ width:70px; height:70px; }
.marker.wrong svg{ width:70px; height:70px; color:var(--red); filter:drop-shadow(0 0 12px rgba(255,45,85,.7));
  animation:wrongPop .4s cubic-bezier(.2,.9,.2,1) both; }
@keyframes wrongPop{ 0%{ transform:scale(0) rotate(-30deg); opacity:0; } 60%{ transform:scale(1.2) rotate(6deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.marker.fade{ animation:mkFade .5s ease forwards; }
@keyframes mkFade{ to{ opacity:0; transform:translate(-50%,-50%) scale(.7); } }

/* ---------- 토스트 (교육 문구) ---------- */
#toast-layer{ position:absolute; left:0; right:0; bottom:36px; z-index:30; display:flex; flex-direction:column;
  align-items:center; gap:10px; pointer-events:none; padding:0 40px; }
.toast{ max-width:600px; display:flex; align-items:flex-start; gap:12px; padding:12px 18px; border-radius:13px;
  background:linear-gradient(180deg, rgba(14,26,50,.9), rgba(10,18,38,.9));
  border:1px solid var(--cyan); box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 20px rgba(55,226,255,.15);
  backdrop-filter:blur(10px); animation:toastIn .4s cubic-bezier(.2,.9,.2,1) both; }
.toast.out{ animation:toastOut .45s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(30px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(20px) scale(.97); } }
.toast .t-ico{ flex:none; width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(55,226,255,.24), rgba(55,226,255,.06)); border:1px solid var(--stroke-2);
  color:var(--cyan); }
.toast .t-ico .ico{ font-size:21px; }
.toast .t-body b{ display:block; font-size:18px; font-weight:800; color:#fff; margin-bottom:2px; }
.toast .t-body span{ display:block; font-size:14px; color:var(--text-dim); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.toast.bonus{ border-color:var(--gold); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(255,209,102,.24); }
.toast.bonus .t-ico{ color:var(--gold); background:linear-gradient(160deg, rgba(255,209,102,.24), rgba(255,209,102,.06)); }

/* ============================================================
   피싱 이메일 레이아웃
   ============================================================ */
.email-app{ position:absolute; inset:0; display:flex; background:#f4f6fb; color:#1a2233; font-size:19px; }
.email-side{ width:230px; flex:none; background:#0f1626; color:#c7d3ea; padding:22px 16px; }
.email-compose{ display:flex; align-items:center; justify-content:center; gap:10px; padding:15px; border-radius:12px;
  background:linear-gradient(180deg,#2ea6ff,#1f7fe0); color:#fff; font-weight:700; font-size:20px; margin-bottom:20px; }
.email-folders{ display:flex; flex-direction:column; gap:4px; }
.email-folder{ padding:13px 16px; border-radius:10px; font-size:19px; color:#aab8d4; }
.email-folder.on{ background:rgba(46,166,255,.16); color:#fff; font-weight:700; }
.email-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.email-topbar{ display:flex; align-items:center; gap:16px; padding:18px 30px; background:#fff; border-bottom:1px solid #e3e8f2; }
.email-topbar .mail-title{ font-size:22px; font-weight:800; color:#101828; }
.email-search{ flex:1; max-width:520px; height:44px; border-radius:10px; background:#eef1f7; display:flex; align-items:center; padding:0 16px; color:#8a93a8; font-size:18px; gap:10px; }
.email-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg,#3aa0ff,#1f6fd0); color:#fff; display:grid; place-items:center; font-weight:800; font-size:20px; }
.email-scroll{ flex:1; overflow:auto; padding:34px 60px; }
.email-doc{ max-width:900px; margin:0 auto; background:#fff; border:1px solid #e6ebf4; border-radius:16px; box-shadow:0 20px 50px rgba(20,40,80,.1); overflow:hidden; }
.email-brandbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 34px; background:linear-gradient(120deg,#0f2350,#173a7a); color:#fff; }
.email-logo{ font-size:30px; font-weight:900; letter-spacing:.04em; }
.email-brandbar .sub{ font-size:16px; color:#bcd2ff; letter-spacing:.2em; }
.email-subject{ padding:26px 34px 6px; }
.email-subject h1{ font-size:27px; font-weight:800; color:#141c2e; line-height:1.35; }
.email-meta{ padding:16px 34px 22px; border-bottom:1px solid #eef1f7; display:flex; gap:16px; align-items:center; }
.email-meta .m-av{ width:52px; height:52px; border-radius:50%; background:#e8effb; color:#1f5fbf; display:grid; place-items:center; font-weight:800; font-size:22px; flex:none; }
.email-meta .m-from b{ font-size:20px; color:#1a2233; }
.email-meta .m-addr{ font-size:18px; color:#586179; }
.email-meta .m-to{ font-size:16px; color:#8a93a8; margin-top:3px; }
.email-meta .m-date{ margin-left:auto; font-size:17px; color:#8a93a8; white-space:nowrap; }
.email-content{ padding:30px 34px 10px; font-size:20px; line-height:1.7; color:#28324a; }
.email-content p{ margin-bottom:16px; }
.email-cta-wrap{ padding:12px 34px 30px; }
.email-cta{ display:inline-flex; align-items:center; gap:12px; padding:18px 40px; border-radius:12px;
  background:linear-gradient(180deg,#2ea6ff,#1668d6); color:#fff; font-size:22px; font-weight:800;
  box-shadow:0 14px 30px rgba(31,111,214,.35); }
.email-url{ display:block; margin-top:14px; font-size:17px; color:#5a86c8; font-family:var(--mono); word-break:break-all; }
.email-deadline{ margin:6px 34px 24px; padding:16px 22px; border-radius:12px; background:#fff2f4; border:1px solid #ffd0d8;
  color:#c81e3a; font-size:19px; font-weight:600; display:flex; gap:12px; align-items:center; }
.email-attach{ margin:0 34px 26px; padding:16px 20px; border:1px solid #e0e6f0; border-radius:12px; display:flex; align-items:center; gap:14px; background:#f8fafd; }
.email-attach .a-ico{ width:44px; height:44px; border-radius:10px; background:#eaf1fb; color:#3060b0; display:grid; place-items:center; flex:none; }
.email-attach .a-name{ font-size:19px; color:#28324a; font-weight:600; }
.email-attach .a-meta{ font-size:15px; color:#98a2b8; }
.email-foot{ padding:22px 34px; background:#f7f9fc; border-top:1px solid #eef1f7; font-size:15px; color:#98a2b8; text-align:center; }

/* ============================================================
   위조 인보이스 레이아웃
   ============================================================ */
.invoice-scene{ position:absolute; inset:0; overflow:auto; background:#dfe4ee; padding:34px 60px; display:flex; justify-content:center; }
.invoice-doc{ width:940px; background:#fff; color:#1a2233; box-shadow:0 24px 60px rgba(20,40,80,.18);
  border-top:6px solid #10306a; padding:44px 48px 40px; align-self:flex-start; font-size:18px; }
.inv-head{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:3px solid #10306a; padding-bottom:20px; margin-bottom:4px; }
.inv-title{ font-size:40px; font-weight:900; letter-spacing:.28em; color:#10306a; }
.inv-meta{ text-align:right; font-size:17px; color:#586179; line-height:1.7; }
.inv-meta b{ color:#1a2233; }
.inv-parties{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:22px 0 10px; border:1px solid #cfd7e6; }
.inv-party{ padding:18px 22px; }
.inv-party+.inv-party{ border-left:1px solid #cfd7e6; }
.inv-party .p-label{ font-size:15px; color:#7a86a0; letter-spacing:.1em; margin-bottom:10px; }
.inv-logo{ font-size:26px; font-weight:900; color:#10306a; margin-bottom:8px; display:inline-block; }
.inv-party .p-row{ font-size:17px; color:#33405a; line-height:1.85; }
.inv-party .p-row .k{ display:inline-block; width:96px; color:#7a86a0; }
.inv-table{ width:100%; border-collapse:collapse; margin:16px 0 0; font-size:18px; }
.inv-table th{ background:#10306a; color:#fff; font-weight:700; padding:14px 12px; font-size:17px; }
.inv-table td{ padding:14px 12px; border-bottom:1px solid #e3e8f2; text-align:right; }
.inv-table td.l{ text-align:left; }
.inv-table td.c{ text-align:center; }
.inv-table tr:nth-child(even) td{ background:#f7f9fc; }
.inv-sum{ display:flex; justify-content:flex-end; margin-top:18px; }
.inv-sum-box{ width:420px; }
.inv-sum-row{ display:flex; justify-content:space-between; padding:11px 16px; font-size:19px; color:#33405a; border-bottom:1px solid #edf1f7; }
.inv-sum-row .k{ color:#7a86a0; }
.inv-total{ display:flex; justify-content:space-between; align-items:center; padding:18px 16px; margin-top:4px;
  background:#10306a; color:#fff; border-radius:8px; }
.inv-total .k{ font-size:19px; }
.inv-total .v{ font-size:32px; font-weight:900; letter-spacing:.01em; }
.inv-bank{ margin-top:26px; border:1px solid #cfd7e6; border-radius:10px; overflow:hidden; }
.inv-bank .b-notice{ padding:15px 20px; background:#fff2f4; color:#c81e3a; font-weight:700; font-size:18px; }
.inv-bank .b-line{ padding:15px 20px; font-size:19px; color:#1a2233; font-family:var(--mono); }
.inv-stamp{ position:relative; float:right; margin:26px 20px 0 0; width:112px; height:112px; }
.inv-stamp .seal{ width:112px; height:112px; border-radius:50%; border:4px solid #c0392b; color:#c0392b;
  display:grid; place-items:center; text-align:center; font-weight:900; font-size:22px; line-height:1.15;
  opacity:.85; transform:rotate(-9deg) skewX(-7deg); letter-spacing:.02em;
  font-family:var(--font); }
.inv-foot{ clear:both; margin-top:40px; padding-top:18px; border-top:1px dashed #cfd7e6; font-size:15px; color:#98a2b8; text-align:center; }

/* html 시나리오 흔적 hit 영역 */
/* 정답 노출 방지: 게임 스테이지 안에서는 정답/오답 요소의 커서·텍스트 선택 반응을
   완전히 동일하게 통일한다. (앵커·버튼 기본 pointer 커서까지 crosshair로 덮음) */
#stage-content{ user-select:none; -webkit-user-select:none; }
#stage-content, #stage-content *{ cursor:crosshair !important; }
.flaw-found{ position:relative; outline:3px solid var(--cyan) !important; outline-offset:2px;
  border-radius:6px; box-shadow:0 0 0 4px rgba(55,226,255,.18) !important; }
.flaw-reveal-found{ position:relative; outline:3px solid #16b8d8 !important; outline-offset:2px; border-radius:6px; }
.flaw-reveal-missed{ position:relative; outline:3px dashed var(--red) !important; outline-offset:3px; border-radius:6px;
  animation:missPulse 1.2s ease-in-out infinite; }
.flaw-reveal-found::after, .flaw-reveal-missed::after{ content:"Threat Detected"; position:absolute;
  left:0; top:0; transform:translateY(-100%); z-index:4; white-space:nowrap;
  padding:3px 10px; border-radius:6px 6px 6px 0; font-size:15px; font-weight:800; letter-spacing:.03em;
  color:#fff; box-shadow:0 5px 14px rgba(0,0,0,.4); }
.flaw-reveal-found::after{ background:#0f8fb0; }
.flaw-reveal-missed::after{ background:var(--red-2); }
@keyframes missPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,45,85,.4); } 50%{ box-shadow:0 0 0 8px rgba(255,45,85,0); } }

/* ============================================================
   결과 화면
   ============================================================ */
/* 상단 26px + 전역 헤더 70px. 본문(.result-main flex:1)이 줄어 하단 버튼은 유지된다. */
#screen-result{ padding:96px 40px 30px; overflow:hidden; gap:20px; }

/* ---------- 상단 슬림 요약 바 ---------- */
.res-topbar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex:none;
  padding:16px 30px; border-radius:20px; background:var(--panel); border:1px solid var(--stroke-2);
  backdrop-filter:blur(12px); position:relative; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.32); }
.res-topbar::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 140% at 0% 50%, rgba(55,226,255,.16), transparent 62%); }
.res-tb-title{ position:relative; display:flex; align-items:center; gap:20px; min-width:0; }
.res-tb-badge{ padding:9px 22px; border-radius:999px; font-size:20px; font-weight:800; letter-spacing:.05em; white-space:nowrap;
  border:1px solid rgba(232,86,66,.45); color:#ff5a44; background:rgba(218,41,28,.10); }
.res-tb-badge.perfect{ color:var(--gold); border-color:rgba(255,209,102,.5); background:rgba(255,209,102,.1); }
.res-tb-name{ display:flex; flex-direction:column; min-width:0; }
.res-kicker{ font-style:normal; font-size:14px; font-weight:800; letter-spacing:.22em; color:var(--brand-red-3);
  text-shadow:0 0 14px var(--brand-red-glow); margin-bottom:3px; }
.res-tb-name b{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.12; }
.res-tb-name span{ font-size:19px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:640px; }
.res-tb-stats{ position:relative; display:flex; align-items:stretch; gap:14px; flex:none; }
.res-tb-stat{ min-width:118px; padding:10px 22px; border-radius:14px; background:rgba(10,18,38,.6); border:1px solid var(--stroke);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.res-tb-stat b{ font-size:34px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.res-tb-stat span{ font-size:15px; color:var(--text-mute); letter-spacing:.08em; margin-top:6px; }
.res-tb-stat.score b{ font-size:42px; background:linear-gradient(180deg,#fff,#ff6a55);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.res-tb-stat.found b{ color:var(--cyan); }
.res-tb-stat.bonus b{ color:var(--gold); }

/* ---------- 본문: 큰 비교 리뷰 + 좁은 흔적 요약 패널 ---------- */
.result-main{ flex:1; display:grid; grid-template-columns:1fr 460px; gap:24px; min-height:0; }
.res-summary{ border-radius:24px; padding:26px 30px; background:var(--panel); border:1px solid var(--stroke-2);
  backdrop-filter:blur(12px); display:flex; flex-direction:column; min-height:0; }
.res-summary h4{ font-size:24px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.res-summary h4 .ico{ color:var(--cyan); font-size:28px; }
.res-flaw-list{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:12px; padding-right:6px; }
.res-flaw{ display:flex; gap:16px; padding:16px 20px; border-radius:14px; background:rgba(10,18,38,.55); border:1px solid var(--stroke); }
.res-flaw .f-state{ width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center; }
.res-flaw.hit .f-state{ background:rgba(55,226,255,.14); color:var(--cyan); border:1px solid rgba(55,226,255,.4); }
.res-flaw.miss .f-state{ background:rgba(255,45,85,.12); color:var(--red); border:1px solid rgba(255,45,85,.4); }
.res-flaw .f-state .ico{ font-size:24px; }
.res-flaw .f-body b{ font-size:21px; font-weight:700; }
.res-flaw .f-body span{ display:block; font-size:18px; color:var(--text-dim); line-height:1.45; margin-top:4px; }
.res-flaw.miss .f-body b{ color:var(--red); }
.res-actions{ display:flex; gap:18px; flex:none; align-items:stretch; }
.res-actions .btn-primary{ flex:0 0 auto; margin-right:auto; padding:20px 52px; }
.btn-primary{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:22px; border-radius:16px;
  font-size:26px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#f0301c 0%, #d82114 60%, #b81a10 100%);
  border:1px solid rgba(255,120,98,.42);
  box-shadow:0 16px 40px rgba(218,41,28,.45), inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .15s; }
.btn-primary:active{ transform:scale(.97); }
.btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:22px 34px; border-radius:16px;
  font-size:24px; font-weight:700; color:var(--text); background:var(--panel-2); border:1px solid var(--stroke-2); }
.btn-secondary:active{ transform:scale(.97); }

/* 결과 리뷰 이미지 오버레이 */
.review-img{ position:relative; flex:1; min-height:0; border-radius:20px; overflow:hidden;
  border:1px solid var(--stroke-2); background:#06101c; display:grid; place-items:center; }
.review-frame{ position:relative; width:100%; aspect-ratio:16/9; max-width:100%; max-height:100%; margin:auto; overflow:hidden; }
.review-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .5s; }
.review-frame img.ref{ opacity:0; }
.review-img.show-ref .review-frame img.ref{ opacity:1; }
/* image9: 모서리 브래킷 + "Threat Detected" 소형 라벨 (찾음=시안 / 놓침=빨강) */
.review-mk{ position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; z-index:5;
  border-radius:6px; }
.review-mk.hit{ color:var(--cyan); box-shadow:inset 0 0 26px rgba(55,226,255,.16), 0 0 22px rgba(55,226,255,.28); }
.review-mk.miss{ color:var(--red); box-shadow:inset 0 0 26px rgba(255,45,85,.14), 0 0 22px rgba(255,45,85,.28);
  animation:missPulse 1.3s infinite; }
.rmk-c{ position:absolute; width:26%; height:26%; border:3px solid currentColor; }
.rmk-c.tl{ top:0; left:0; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.rmk-c.tr{ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 6px 0 0; }
.rmk-c.bl{ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 6px; }
.rmk-c.br{ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.rmk-label{ position:absolute; left:50%; top:0; transform:translate(-50%,-118%); white-space:nowrap;
  padding:4px 12px; border-radius:7px; font-size:15px; font-weight:800; letter-spacing:.04em; color:#fff;
  background:rgba(6,12,24,.9); border:1px solid currentColor;
  box-shadow:0 6px 16px rgba(0,0,0,.45); }
.review-mk.hit .rmk-label{ text-shadow:0 0 10px rgba(55,226,255,.7); }
.review-mk.miss .rmk-label{ text-shadow:0 0 10px rgba(255,45,85,.7); }
.review-html-box{ background:#dfe4ee; }
.review-html-inner{ position:absolute; top:0; left:0; transform-origin:top left; will-change:transform; }
.review-html-inner .email-app,
.review-html-inner .invoice-scene{ overflow:visible; }
.review-toggle{ position:absolute; right:16px; bottom:16px; z-index:8; padding:12px 22px; border-radius:12px;
  background:rgba(6,10,22,.82); border:1px solid var(--stroke-2); color:var(--text); font-size:19px; font-weight:600; }
.review-cap{ position:absolute; left:16px; top:16px; z-index:8; padding:9px 18px; border-radius:10px;
  background:rgba(6,10,22,.82); border:1px solid var(--stroke-2); color:var(--text-dim); font-size:18px; }

/* ---------- 이름 입력 모달 ---------- */
.modal-mask{ position:absolute; inset:0; z-index:60; background:rgba(4,7,15,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s; }
.modal-mask.on{ opacity:1; visibility:visible; transition:opacity .35s; }
.name-modal{ width:900px; border-radius:26px; padding:44px; background:linear-gradient(180deg, rgba(18,30,56,.98), rgba(10,18,38,.98));
  border:1px solid var(--stroke-2); box-shadow:0 40px 100px rgba(0,0,0,.6); transform:translateY(20px) scale(.97); transition:transform .35s cubic-bezier(.2,.9,.2,1); }
.modal-mask.on .name-modal{ transform:none; }
.name-modal h3{ font-size:36px; font-weight:800; text-align:center; }
.name-modal p{ font-size:20px; color:var(--text-dim); text-align:center; margin-top:8px; }
.name-display{ margin:26px auto 22px; width:100%; height:88px; border-radius:16px; background:rgba(6,10,22,.7);
  border:1px solid var(--stroke-2); display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:44px; font-weight:800; letter-spacing:.14em; font-family:var(--mono); color:#fff; }
.name-display .caret{ width:3px; height:46px; background:var(--cyan); animation:caret 1s step-end infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.name-display .ph{ color:var(--text-mute); letter-spacing:.06em; font-family:var(--font); font-weight:600; }
.keypad{ display:flex; flex-direction:column; gap:12px; }
.keypad-row{ display:flex; gap:12px; justify-content:center; }
.key{ flex:1; height:74px; border-radius:13px; background:var(--panel-2); border:1px solid var(--stroke-2);
  color:var(--text); font-size:28px; font-weight:700; display:grid; place-items:center; transition:transform .1s, background .15s; }
.key:active{ transform:scale(.94); background:rgba(55,226,255,.16); border-color:var(--cyan); }
.key.wide{ flex:2.4; font-size:22px; gap:8px; }
.key.act{ color:var(--cyan); }
.key.go{ color:#fff; background:linear-gradient(180deg,#f0301c 0%, #d82114 60%, #b81a10 100%);
  font-weight:800; }
.key.go:active{ background:linear-gradient(180deg,#9ff4ff,#3ad3f5); }

/* ============================================================
   랭킹 화면
   ============================================================ */
/* 상단 44px + 전역 헤더 70px */
#screen-ranking{ padding:114px 64px 44px; }
/* 랭킹 제목만 레드 계열. .page-head-mid h2 는 선택화면과 공용이라 여기서만 덮어쓴다. */
#screen-ranking .page-head-mid h2{
  background:linear-gradient(180deg,#ffd8d2 0%, #ff6a55 46%, #d82114 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 44px rgba(218,41,28,.30); }
.rank-list{ flex:1; display:flex; flex-direction:column; gap:12px; margin-top:26px; overflow:auto; z-index:3; }
.rank-row{ position:relative; display:grid; grid-template-columns:110px 1fr 200px 200px; align-items:center; gap:20px;
  padding:20px 30px; flex:none; border-radius:16px; background:var(--panel); border:1px solid var(--stroke);
  backdrop-filter:blur(8px); animation:rowIn .5s cubic-bezier(.2,.8,.2,1) both; }
/* image10: TOP3 영문 장식 라벨 (금/은/동) */
.rank-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
  font-size:19px; font-weight:800; letter-spacing:.16em; color:var(--text-mute); white-space:nowrap; }
.rank-row.top1 .rank-label{ color:var(--gold); text-shadow:0 0 16px rgba(255,209,102,.4); }
.rank-row.top2 .rank-label{ color:var(--silver); }
.rank-row.top3 .rank-label{ color:var(--bronze); }
@keyframes rowIn{ from{opacity:0; transform:translateX(-16px);} to{opacity:1; transform:none;} }
.rank-pos{ font-size:36px; font-weight:900; font-variant-numeric:tabular-nums; text-align:center; color:var(--text-dim); }
.rank-name{ font-size:32px; font-weight:800; letter-spacing:.02em; }
.rank-sc{ font-size:32px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; color:#ff5a44; }
.rank-time{ font-size:24px; text-align:right; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.rank-row.me{ border-color:#ff5a44; box-shadow:0 0 30px rgba(218,41,28,.28); background:rgba(218,41,28,.08); }
.rank-row.top1{ background:linear-gradient(100deg, rgba(255,209,102,.18), var(--panel)); border-color:rgba(255,209,102,.5); }
.rank-row.top1 .rank-pos{ color:var(--gold); }
.rank-row.top2{ background:linear-gradient(100deg, rgba(205,214,230,.14), var(--panel)); border-color:rgba(205,214,230,.4); }
.rank-row.top2 .rank-pos{ color:var(--silver); }
.rank-row.top3{ background:linear-gradient(100deg, rgba(224,138,91,.14), var(--panel)); border-color:rgba(224,138,91,.4); }
.rank-row.top3 .rank-pos{ color:var(--bronze); }
.rank-medal{ font-size:30px; }
.rank-empty{ flex:1; display:grid; place-items:center; color:var(--text-mute); font-size:26px; }

/* 유틸 */
.hidden{ display:none !important; }

/* 운영자 볼륨 조절 힌트 (키보드 화살표) */
#vol-hint{ position:absolute; top:88px; right:44px; z-index:60; pointer-events:none;
  padding:12px 22px; border-radius:12px; font-size:22px; font-weight:800; color:#fff;
  background:rgba(12,18,34,.92); border:1px solid rgba(120,160,210,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-8px); transition:opacity .2s, transform .2s; }
#vol-hint.show{ opacity:1; transform:none; }

/* 운영자용 안내(랭킹 초기화 확인 등). 참가자에게는 평소 보이지 않는다.
   볼륨 표시와 달리 실수하면 안 되는 조작이라 화면 가운데에 크게 띄운다. */
#op-hint{ position:absolute; left:50%; top:50%; z-index:80; pointer-events:none;
  padding:30px 44px; border-radius:16px; text-align:center;
  font-size:30px; font-weight:800; line-height:1.5; color:#fff;
  background:rgba(10,13,20,.94); border:2px solid #DA291C;
  box-shadow:0 20px 64px rgba(0,0,0,.6);
  opacity:0; transform:translate(-50%,-50%) scale(.96);
  transition:opacity .18s, transform .18s; }
#op-hint.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#op-hint b{ color:#ff6a55; }
#op-hint .op-sub{ display:inline-block; margin-top:12px;
  font-size:21px; font-weight:600; color:#b9c4d4; }

/* 이미지 미리받기 진행 표시 — 운영자 확인용. 참가자에게 방해되지 않게 작고 흐리게. */
#preload-hint{ position:absolute; right:16px; bottom:12px; z-index:70;
  font-size:15px; color:rgba(190,205,225,.55); letter-spacing:.02em;
  pointer-events:none; }

/* 이름 미입력 경고 — 빈 이름으로 등록되어 주인을 못 찾는 일을 막는다. */
.name-warn{ margin:-10px 0 16px; text-align:center; font-size:22px; font-weight:700;
  color:#ff7a66; opacity:0; transform:translateY(-4px);
  transition:opacity .18s, transform .18s; }
.name-warn.show{ opacity:1; transform:none; }
/* 이름이 비었을 때 '등록 완료' 를 흐리게 — 누르면 안 된다는 신호 */
.name-modal .key.go.is-off{ opacity:.4; }