/* =========================
   WORLD BASE (불변 영역)
   ─ 세계는 구조만 제공하고
   ─ 색, 분위기, 물질성은 stage가 담당
========================= */

/* -------------------------
    Global reset & DDS Identity
------------------------- */
body {
  margin: 0;
  /* 🔑 요청하신 DDS 폰트 스택 적용 */
  font-family: 
    ui-monospace, 
    SFMono-Regular, 
    Menlo, 
    Monaco, 
    Consolas, 
    "Liberation Mono", 
    "Courier New", 
    monospace;
  font-size: 14px;
  
  /* 🔑 DDS 녹색 적용 및 기본 배경 유지 */
  color: #7CFF9B; 
  background-color: #000;
}

/* =========================
   Top Bar (세계의 외피)
========================= */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  display: flex;
  height: 64px;
  border-bottom: 1px solid #ddd;
  background: #000;;

}

/* 2. 레이아웃 충돌 방지 */
.layout {
  display: flex;
  margin-top: 64px; /* 상단바 높이만큼 강제 이격 */
  min-height: calc(100vh - 64px);
}

/* 좌측: Stage 버튼 영역 */
.stage-buttons {
  display: flex;
  width: 60%;
}

/* 공통 Stage 버튼 (UI 전용) */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000;
  font-weight: 600;
  letter-spacing: 0.15em;

  transition: opacity 0.2s;
}

.stage:hover {
  opacity: 0.85;
}

/* Stage 버튼 색 (UI 상징, 세계관 색 아님) */
.stage-i   { background: #111; color: #fff; }
.stage-ii  { background: #e6e6e6; color: #000; }
.stage-iii { background: #ffe600; color: #000; }
.stage-iv  { background: #e00000; color: #fff; }

/* =========================
   Stage Tooltip (세계 공통)
========================= */
.stage-tooltip {
  position: fixed;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  white-space: nowrap;

  pointer-events: none;
  z-index: 3000;

  opacity: 0;
  transition: opacity 0.15s ease;

  color: rgb(73, 220, 225);
}

/* =========================
   Utility Area (세계 기능부)
========================= */
.utility {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-right: 16px;

  background: #bfbfbf;
}

/* =========================
   Layout Skeleton (색 없음)
========================= */
.layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

.page-content {
  flex: 1;
  padding: 40px;
  /* 기본 배경색은 body의 #000을 따르며 텍스트는 DDS 녹색 */
}

/* =========================
   Sidebar Skeleton
========================= */
.side-bar {
  width: 180px;
  background: #e6e6e6;
  border-left: 1px solid #cfcfcf;

  padding-top: 0;
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
}

/* =========================
   Content Footer (형태만)
========================= */
.content-footer {
  margin-top: 80px;
  padding-top: 24px;

  border-top: 1px solid rgba(0,0,0,0.1);

  font-size: 0.75rem;
  color: #666;
}

.content-footer .credits {
  display: flex;
  gap: 6px;
}

.content-footer a {
  color: #666;
  text-decoration: none;
}

.content-footer a:hover {
  text-decoration: underline;
}

/* =========================
   Sidebar Footer
========================= */
.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #cfcfcf;

  font-size: 0.8rem;
}

.sidebar-footer a {
  color: #333;
  text-decoration: none;
}

.sidebar-footer a:hover {
  text-decoration: underline;
}

/* =========================
   Settings Sidebar
========================= */
#sidebar-settings {
  display: none;
  padding-top: 8px;
  height: 100%;
}

.settings-item {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.settings-header {
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.settings-header:hover {
  opacity: 0.8;
}

.settings-body {
  display: none;
  margin-top: 6px;
  padding-left: 12px;
  font-size: 0.85rem;
}

/* =========================
    Global Notice (DDS 녹색 적용)
========================= */
.global-notice {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  user-select: none;
  color: #7CFF9B;
}

/* 로그인 후 나타나는 [me] 링크 스타일 */
/* [me] 링크 스타일 강제 교정 */
.me-link, .me-link:visited, .me-link:active {
    /* 1. 본문과 동일한 DDS 녹색 강제 적용 */
    color: #7CFF9B !important; 
    
    /* 2. 링크 특유의 밑줄 제거 */
    text-decoration: none !important;

    /* 3. 본문(body)의 폰트 스택 강제 상속 */
    font-family: 
        ui-monospace, 
        SFMono-Regular, 
        Menlo, 
        Monaco, 
        Consolas, 
        "Liberation Mono", 
        "Courier New", 
        monospace !important;
    
    /* 4. 본문과 동일한 질감 설정 */
    font-size: 14px;      
    letter-spacing: 0.1em;
    padding: 0 15px;
    font-weight: 600;
    
    display: flex;
    align-items: center;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.me-link:hover {
    opacity: 0.8;
    /* 호버 시 은은한 광원 효과 */
    text-shadow: 0 0 8px rgba(124, 255, 155, 0.7) !important;
}

/* 추가: 상단바 utility 안의 버튼들과 정렬을 맞추기 위함 */
.utility {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* static/world/shell/base.css 하단에 추가 */

/* Inquiries 텍스트 자체의 스타일 (필요 시) */
.inquiry-link {
    color: #666; /* 평소에는 눈에 띄지 않는 무채색 */
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
}

/* 마우스 호버 시 폰트 색상 변화: 얕고 밝은 파란색 */
.inquiry-link:hover {
    color: rgb(150, 245, 255) !important;
    text-shadow: 0 0 10px rgba(150, 245, 255, 0.5);
}

/* 숨겨진 계시 문구 (Tooltip) 스타일 */
.inquiry-link .revelation-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 150%; /* 텍스트 위로 띄움 */
    right: 0;
    width: 320px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(150, 245, 255, 0.3); /* 아주 얕은 테두리 */
    color: rgb(150, 245, 255); /* 밝고 얕은 파란색 */
    font-size: 0.75rem;
    line-height: 1.6;
    z-index: 2000;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(10px);
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

/* 호버 시 문구 등장 */
.inquiry-link:hover .revelation-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 🚀 [Global Radar]: Stage Tab N Marker (디자인 업그레이드) */
.stage-iv { 
    position: relative; 
}

.stage-new-marker {
    position: absolute;
    top: 6px;     /* 박스가 커졌으니 위치를 살짝 중앙 쪽으로 당김 */
    left: 6px;
    
    /* 🚀 둥근 네모 박스 폼 구축 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;    /* 박스 가로 크기 키움 */
    height: 14px;       /* 박스 세로 크기 키움 */
    background-color: #3cff8f; /* DDS Green 꽉 찬 바탕 */
    border-radius: 5px; /* 약간 둥근 네모 (숫자가 커질수록 더 동그래짐) */
    
    /* 🚀 글씨 세팅 (바탕이 초록이니 글씨는 시크한 블랙으로 반전) */
    color: #1a3b33; 
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.7rem;  /* 폰트 크기도 시원하게 키움 */
    font-weight: 900;   /* 가장 두꺼운 폰트 웨이트 */
    line-height: 1;     /* 텍스트 정중앙 정렬 보정 */
    
    /* 🚀 박스 밖으로 뿜어져 나오는 네온 후광 */
    box-shadow: 
        0 0 5px rgba(60, 255, 143, 1),    /* 1겹: 가장 가깝고 진한 핵심 빛 */
        0 0 15px rgba(60, 255, 143, 0.8),  /* 2겹: 부드럽게 퍼지는 중간 빛 */
        0 0 30px rgba(60, 255, 143, 0.6);  /* 3겹: 가장 멀리까지 퍼지는 은은한 후광 */
    pointer-events: none;
    animation: pulseGlow 2s infinite; /* 은은한 점멸 유지 */
}