/* style.css 기존 상단 내용 전체 유지... */

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

:root{
  --bg:#070707;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --text:#f4f4f4;
  --sub:rgba(255,255,255,.45);
  --yellow:#d7c84a;
  --red:#ff4a4a;
}

body{
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#000;
  font-family:'Rajdhani', sans-serif;
  color:var(--text);
}

/* =========================================
   SCALE WRAPPER
========================================= */
#ui-scale-wrapper{
  position:absolute;
  width:1920px;
  height:1080px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(1);
  overflow:hidden;
  background:#050505;
}

/* =========================================
   BACKGROUND
========================================= */
.background-map{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.03), transparent 60%),
    url("https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2400&auto=format&fit=crop");
  background-size:cover;
  background-position:center;
  filter: grayscale(1) contrast(1.2) brightness(.22);
  transform:scale(1.05);
}

.background-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:120px 120px;
  mix-blend-mode:screen;
}

.map-noise{
  position:absolute;
  inset:0;
  background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
  opacity:.2;
}

.vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,.7) 100%);
}

/* =========================================
   HUD
========================================= */
.hud{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:80px 80px;
}

.scan-lines{
  position:absolute;
  inset:0;
  opacity:.08;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0px, rgba(255,255,255,.25) 1px, transparent 1px, transparent 4px);
}

.noise-overlay{
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:4px 4px;
  opacity:.03;
}

.crosshair{
  position:absolute;
  background:rgba(255,255,255,.07);
}

.horizontal{ width:100%; height:1px; top:50%; }
.vertical{ width:1px; height:100%; left:50%; }

.radar{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform: translate(-50%, -50%);
}

.radar-1{
  width:900px;
  height:900px;
  border: 1px solid rgba(255,255,255,.06);
}

.radar-1::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:1px;
  background: linear-gradient(90deg, var(--yellow), transparent);
  transform-origin:left center;
}

.radar-2{
  width:620px;
  height:620px;
  border: 1px dashed rgba(255,255,255,.08);
}

.radar-3{
  width:300px;
  height:300px;
  border: 1px solid rgba(255,255,255,.05);
}

.hud-corner{
  position:absolute;
  width:120px;
  height:120px;
  border: 1px solid rgba(255,255,255,.12);
}

.tl{ top:30px; left:30px; }
.tr{ top:30px; right:30px; }
.bl{ bottom:30px; left:30px; }
.br{ bottom:30px; right:30px; }

/* =========================================
   TOP BAR
========================================= */
.top-bar{
  position:absolute;
  left:60px;
  right:60px;
  top:35px;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.system-left{ display:flex; flex-direction:column; gap:18px; }
.system-id{ display:flex; align-items:flex-start; gap:18px; }
.id-big{ font-family:'Orbitron', sans-serif; font-size:5rem; line-height:1; font-weight:800; letter-spacing:6px; }
.id-text{ display:flex; flex-direction:column; margin-top:12px; }
.id-text span:first-child{ font-size:.95rem; letter-spacing:4px; }
.id-text span:last-child{ font-size:.72rem; letter-spacing:3px; opacity:.45; }

.top-tags{ display:flex; gap:14px; }
.tag{ border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); padding: 8px 16px; display:flex; gap:12px; }
.tag-label{ opacity:.4; letter-spacing:2px; }
.tag-value{ letter-spacing:2px; }
.active{ color:var(--yellow); }

.system-right{ display:flex; gap:16px; }
.mini-stat{ min-width:150px; padding: 14px 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:4px; }
.mini-label{ font-size:.7rem; letter-spacing:2px; opacity:.45; }
.mini-value{ font-size:1rem; font-weight:700; }
.red{ color:var(--red); }

/* =========================================
   MAIN LAYOUT
========================================= */
.main-layout{
  width:100%;
  height:100%;
  padding: 150px 60px 90px;
  display:grid;
  grid-template-columns: 360px 1fr 360px;
  gap:40px;
}

/* =========================================
   LEFT PANEL
========================================= */
.left-panel{ position:relative; }
.panel-header{ font-size:.8rem; letter-spacing:4px; opacity:.55; margin-bottom:20px; }
.event-card{ background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px); }
.event-top{ height:70px; background: var(--yellow); color:#000; padding: 18px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:2rem; font-family:'Orbitron', sans-serif; }
.small-icon{ width:34px; height:34px; border: 3px solid #000; transform:rotate(45deg); }
.event-image{ position:relative; height:340px; overflow:hidden; }
.event-image img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.2); }
.event-overlay{ position:absolute; inset:0}
.event-scribble{ position:absolute; border: 2px solid rgba(255,255,255,.9); }
.scribble-1{ width:90px; height:50px; left:20px; bottom:40px; transform:rotate(-12deg); }
.scribble-2{ width:60px; height:60px; right:40px; top:40px; }
.scribble-3{ width:120px; height:2px; background:#fff; left:40px; top:120px; transform:rotate(-22deg); }
.event-bottom{ padding:22px; }
.event-title{ font-size:2rem; font-weight:700; margin-bottom:18px; }
.event-box{ display:inline-flex; border: 1px solid rgba(255,255,255,.15); padding: 8px 16px; margin-bottom:20px; }
.action-button{ width:100%; height:54px; border:none; background: rgba(255,255,255,.08); color:#fff; letter-spacing:3px; cursor:pointer; transition:.25s; }
.action-button:hover{ background: var(--yellow); color:#000; }
.side-info{ margin-top:30px; display:flex; flex-direction:column; gap:10px; opacity:.45; letter-spacing:2px; font-size:.72rem; }

/* =========================================
   CENTER
========================================= */
.center-stage{ position:relative; }
.target-system{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
.target-ring{ position:absolute; left:50%; top:50%; border-radius:50%; transform: translate(-50%, -50%); }
.ring-a{ width:420px; height:420px; border: 1px solid rgba(255,255,255,.15); }
.ring-b{ width:280px; height:280px; border: 1px dashed rgba(255,255,255,.18); }
.ring-c{ width:140px; height:140px; border: 1px solid rgba(255,255,255,.12); }
.target-center{ position:absolute; left:50%; top:50%; width:12px; height:12px; background:var(--yellow); border-radius:50%; transform: translate(-50%, -50%); }
.target-arrow{ position:absolute; width:40px; height:40px; border: 2px solid #fff; }
.target-arrow.top{ top:-250px; left:50%; transform: translateX(-50%) rotate(45deg); border-right:none; border-bottom:none; }
.target-arrow.bottom{ bottom:-250px; left:50%; transform: translateX(-50%) rotate(45deg); border-left:none; border-top:none; }
.target-arrow.left{ left:-250px; top:50%; transform: translateY(-50%) rotate(45deg); border-top:none; border-right:none; }
.target-arrow.right{ right:-250px; top:50%; transform: translateY(-50%) rotate(45deg); border-bottom:none; border-left:none; }

/* =========================================
   MAP MARKERS
========================================= */
.map-marker{ position:absolute; width:20px; height:20px; border-radius:50%; background:#ff4444; box-shadow: 0 0 20px rgba(255,70,70,.8); }
.marker-1{ left:38%; top:46%; }
.marker-2{ left:58%; top:35%; }
.marker-3{ left:52%; top:62%; }
.yellow{ background:var(--yellow); box-shadow: 0 0 20px rgba(215,200,74,.9); }
.pulse{ position:absolute; inset:-15px; border-radius:50%; border: 2px solid currentColor; }

/* =========================================
   FLOATING BOX
========================================= */
.floating-box{ position:absolute; width:200px; padding: 14px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:4px; }
.floating-box .num{ font-size:2rem; font-weight:700; }
.floating-box .txt{ opacity:.45; letter-spacing:2px; }
.data-a{ left:20%; top:30%; }
.data-b{ right:18%; top:26%; }
.data-c{ left:28%; bottom:22%; }

/* =========================================
   CAMERA FEED
========================================= */
.camera-feed{ position:absolute; right:0; bottom:0; width:340px; height:220px; background:#000; border: 1px solid rgba(255,255,255,.12); overflow:hidden; }
.feed-label{ position:absolute; left:14px; top:10px; z-index:2; font-size:.72rem; letter-spacing:2px; }
.camera-feed img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.1); }

/* =========================================
   RIGHT PANEL
========================================= */
.right-panel{ display:flex; flex-direction:column; justify-content:center; }
.panel-title{ font-family:'Orbitron', sans-serif; font-size:4rem; font-weight:700; letter-spacing:4px; }
.panel-sub{ margin-top:10px; opacity:.45; letter-spacing:3px; }
.command-grid{ margin-top:40px; display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.command-card{ min-height:120px; padding:24px; text-decoration:none; color:#fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; transition:.25s; }
.command-card::before{ content:""; position:absolute; left:0; top:0; width:5px; height:100%; background: rgba(255,255,255,.25); }
.command-card:hover{ transform: translateX(8px); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.command-main{ font-size:1.5rem; font-weight:700; letter-spacing:2px; }
.command-sub{ margin-top:4px; font-size:.75rem; letter-spacing:2px; opacity:.45; }
.large{ grid-column:span 2}
.active-card{ background: rgba(215,200,74,.08); border: 1px solid rgba(215,200,74,.3); }
.active-card::before{ background:var(--yellow); }
.server-status{ margin-top:40px; display:flex; align-items:center; gap:12px; opacity:.65; letter-spacing:2px; }
.status-dot{ width:12px; height:12px; border-radius:50%; background:#8cff8c; box-shadow: 0 0 15px rgba(140,255,140,.8); }

/* =========================================
   BOTTOM BAR
========================================= */
.bottom-bar{ position:absolute; left:60px; right:60px; bottom:28px; display:flex; justify-content:space-between; font-size:.75rem; letter-spacing:3px; opacity:.45; }

/* =========================================
   SCREEN TRANSITION (추가됨)
========================================= */
.screen-transition {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  pointer-events: none;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}
.screen-transition.reveal {
  transform: scaleY(0);
  transform-origin: bottom;
}
.screen-transition.active {
  transform: scaleY(1);
  transform-origin: top;
}

/* ========================================================
   CUSTOM HUD CURSOR (스크립트 전용 고도화 스타일 변경)
======================================================== */
#target-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999999;
}

/* 중앙 조준점 고정 */
.target-cursor-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--yellow);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 내부 회전용 상자 래퍼 */
.cursor-rotator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

/* 각각 분리되어 개별 애니메이션 트래킹이 들어갈 기역자(ㄱ) 브래킷 설계 */
.target-cursor-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
}

/* 초기 비-호버링 상태 위치 프리셋 (JS 리셋 배열과 일치) */
.target-cursor-corner.tl {
  left: 0; top: 0;
  border-right: none; border-bottom: none;
  transform: translate(-18px, -18px);
}
.target-cursor-corner.tr {
  left: 0; top: 0;
  border-left: none; border-bottom: none;
  transform: translate(6px, -18px);
}
.target-cursor-corner.br {
  left: 0; top: 0;
  border-left: none; border-top: none;
  transform: translate(6px, 6px);
}
.target-cursor-corner.bl {
  left: 0; top: 0;
  border-right: none; border-top: none;
  transform: translate(-18px, 6px);
}

/* =========================================
   DIFFICULTY SELECTION OVERLAY
========================================= */
.difficulty-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(15px);
  z-index: 99990; /* 다른 UI 요소들보다 위에 배치 (커서 제외) */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.diff-container { text-align: center; }
.diff-title { font-family: 'Orbitron', sans-serif; font-size: 4rem; color: var(--yellow); letter-spacing: 4px; }
.diff-sub { opacity: 0.5; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 50px; }

.diff-cards { display: flex; gap: 40px; justify-content: center; }

.diff-card {
  background: var(--panel);
  border: 1px solid var(--line);
  width: 280px;
  padding: 50px 20px;
  cursor: pointer;
  transition: 0.3s;
  clip-path: var(--clip);
  position: relative;
}

.diff-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-10px);
}

.diff-card h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 15px; color: #fff; letter-spacing: 2px;}
.diff-card p { opacity: 0.7; font-size: 1.1rem; letter-spacing: 2px; }

.diff-bar { position: absolute; bottom: 0; left: 0; height: 6px; width: 100%; transition: 0.3s; }
.easy-bar { background: #8cff8c; }
.normal-bar { background: #4da6ff; }
.hard-bar { background: var(--red); }

.diff-card:hover .easy-bar { box-shadow: 0 0 20px #8cff8c; }
.diff-card:hover .normal-bar { box-shadow: 0 0 20px #4da6ff; }
.diff-card:hover .hard-bar { box-shadow: 0 0 20px var(--red); }

/* =========================================
   INFORM POPUP UI
========================================= */
#inform-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 4, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99995; /* HUD와 다른 오버레이들보다 위에 오도록 설정 */
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0; /* GSAP 애니메이션 제어용 */
}

.inform-box {
  width: 1200px;
  background: rgba(12, 12, 12, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 40px;
  clip-path: var(--clip);
  position: relative;
  transform: translateY(30px); /* GSAP 애니메이션 제어용 */
}

/* 박스 상단 장식선 */
.inform-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 2px;
  background: var(--yellow);
}

.inform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.inform-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 3px;
  margin: 0;
}

.inform-close {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  opacity: 0.4;
  font-size: 0.9rem;
  letter-spacing: 2px;
  transition: 0.25s ease;
}

.inform-close:hover {
  opacity: 1;
  color: var(--red);
}

.inform-desc {
  white-space: pre-wrap;
  opacity: 0.7;
  letter-spacing: 1.5px;
  line-height: 1.6;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.inform-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-line {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.stat-line span:first-child {
  opacity: 0.6;
}

.stat-line .yellow {
  color: var(--yellow);
  font-weight: 700;
}

.stat-line .green {
  color: #8cff8c;
  font-weight: 700;
}

/* =========================================
    DATA RESET BUTTON (MINI-STAT)
========================================= */
.reset-btn-container {
  cursor: pointer;
  transition: all 0.2s ease;
}
.reset-btn-container:hover {
  background: rgba(255, 74, 74, 0.15);
  border-color: var(--red);
}
.reset-btn-container:hover .reset-text {
  color: var(--red);
}
.reset-text {
  font-size: 1.15rem; 
  transition: color 0.2s ease;
}

#tutorial-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 7, 7, 0.96); z-index: 10005; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease; }
#tutorial-modal.hidden { opacity: 0; pointer-events: none; }
.tutorial-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.tutorial-img-wrapper { position: relative; width: 100%; height: 100%; }
#tutorial-img { width: 100%; height: 100%; object-fit: fill; border: none; box-shadow: none; display: block; }
#close-tutorial { position: absolute; bottom: 45px; right: 45px; background: rgba(7, 7, 7, 0.85); color: #f4f4f4; border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 35px; font-family: 'Orbitron', 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; z-index: 10; backdrop-filter: blur(4px); border-radius: 4px; }
#close-tutorial:hover { background: #f4f4f4; color: #070707; box-shadow: 0 0 20px #f4f4f4; border-color: #f4f4f4; }