/* =====================================================================
   hub.css — 2공간(지도/아카이브) 폴더-허브
   · 엣지러너식 형태/효과: 챔퍼 칩 버튼 · HUD 코너 브래킷 · 스캔 · 글리치 · 리드아웃
   · 색은 레드/블랙 (base.css 토큰 상속)
   ===================================================================== */
.hub{ max-width:1320px; margin:22px auto 0; padding:0 48px; }
@media (max-width:700px){ .hub{ padding:0 16px; } }

/* ── 탭(칩 버튼) ── */
.hub-tabs{ display:flex; gap:22px; }
@media (max-width:700px){ .hub-tabs{ gap:12px; } }

.hub-tab{ --cut:14px; flex:1; cursor:pointer; user-select:none; position:relative; transition:.18s;
  opacity:.6; background:rgba(150,40,40,.4); padding:1.5px;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.hub-tab .in{ position:relative; overflow:hidden; padding:15px 20px 16px 26px;
  background:linear-gradient(135deg,rgba(14,4,4,.96),rgba(26,7,7,.7));
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.hub-tab .hatch{ position:absolute; inset:0; opacity:.05; pointer-events:none;
  background:repeating-linear-gradient(135deg,#ff2a2a 0 2px,transparent 2px 8px); }
.hub-tab .accent{ position:absolute; left:0; top:0; bottom:0; width:4px; background:#5a2020; }
.hub-tab .st{ position:absolute; top:12px; right:16px; font-family:'Share Tech Mono',monospace;
  font-size:8px; letter-spacing:2px; color:#6a3a3a; }
.hub-tab .tt{ position:relative; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:26px;
  letter-spacing:4px; line-height:1; color:#9a6a6a; }
.hub-tab .tt .acc{ color:#8a3a3a; }
.hub-tab .ts{ font-family:'SUIT Variable','Pretendard','Malgun Gothic',sans-serif; font-size:12px;
  margin-top:6px; color:#7a5a5a; }

.hub-tab.active{ opacity:1; background:rgba(255,55,55,.95); filter:drop-shadow(0 0 12px rgba(255,45,45,.55)); }
.hub-tab.active .accent{ background:#ff3535; }
.hub-tab.active .st{ color:#ff5b5b; }
.hub-tab.active .tt{ color:#ffe3e3; animation:hubGlitch 6s infinite; }
.hub-tab.active .tt .acc{ color:#ff4a4a; }
.hub-tab.active .ts{ color:#c88a8a; }
@keyframes hubGlitch{ 0%,90%,100%{text-shadow:0 0 8px rgba(255,40,40,.45)}
  92%{text-shadow:2px 0 rgba(255,60,60,.9),-2px 0 rgba(120,180,255,.5)}
  94%{text-shadow:-2px 0 rgba(255,60,60,.9),2px 0 rgba(120,180,255,.5)} }

/* ── 지도 창(16:9) ── */
#hub-map{ --cut:14px; position:relative; width:100%; aspect-ratio:16/9; margin-top:18px;
  background:#050303; box-shadow:0 0 34px rgba(120,10,10,.25);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
#hub-map .edge{ position:absolute; inset:0; z-index:0; padding:1.5px; pointer-events:none;
  background:rgba(220,45,45,.9);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
#hub-map iframe{ position:relative; z-index:1; width:100%; height:100%; border:0; display:block;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
/* 코너 브래킷(정사각 모서리 2곳: 좌상·우하) */
.hub-br{ position:absolute; width:16px; height:16px; z-index:6; pointer-events:none; border:2px solid rgba(255,55,55,.9); }
.hub-br.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.hub-br.br{ bottom:0; right:0; border-left:0; border-top:0; }
/* HUD 리드아웃 */
.hub-hud{ position:absolute; z-index:6; pointer-events:none; font-family:'Share Tech Mono',monospace; letter-spacing:2px; }
.hub-hud.tl{ top:12px; left:34px; font-size:9px; color:#ff6a6a; }
.hub-hud.bl{ bottom:12px; left:34px; font-size:9px; letter-spacing:3px; color:#c85a5a; }
.hub-hud.bl b{ color:#ff6a6a; }
/* 스캔라인 */
.hub-scan{ position:absolute; left:0; right:0; top:0; height:2px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,60,60,.7),transparent); animation:hubScan 5.5s linear infinite; }
@keyframes hubScan{ 0%{transform:translateY(0);opacity:0} 8%{opacity:.7} 92%{opacity:.7} 100%{transform:translateY(100%);opacity:0} }
/* 전체화면 버튼 */
.hub-full{ position:absolute; top:14px; right:20px; z-index:7; padding:7px 12px; cursor:pointer;
  background:rgba(10,4,4,.9); border:1px solid rgba(255,50,50,.6); color:#ff5b5b;
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; box-shadow:0 0 12px rgba(255,40,40,.3); }
.hub-full:hover{ color:#fff; border-color:#ff3030; }

/* ── 아카이브(도감+챗) 정렬: 지도 너비에 맞춤
   (임시 위치 — Phase 2b에서 archive.css로 이동 예정) ── */
.rc-wrap{ max-width:1320px !important; padding:0 48px !important; margin:30px auto 30px !important; }
.ig-back{ max-width:1320px !important; margin:40px auto !important; text-align:center !important; }
@media (max-width:700px){ .rc-wrap{ padding:0 16px !important; } }

/* 전체화면: 창모드용 프레임 크롬 숨김 — 지도 자체 HUD가 브랜딩 담당. 종료는 Esc */
#hub-map:fullscreen .hub-hud,
#hub-map:fullscreen .hub-br,
#hub-map:fullscreen .hub-full,
#hub-map:-webkit-full-screen .hub-hud,
#hub-map:-webkit-full-screen .hub-br,
#hub-map:-webkit-full-screen .hub-full { display:none !important; }

/* 폰: 지도창을 세로로 (16:9 → 화면높이 기준) */
@media (max-width:700px){
  #hub-map{ aspect-ratio:auto; height:72vh; }
}

/* ── GREENS MEMBER — 카메라맨 교신창과 같은 급의 콘텐츠 블록 ──
   상위 탭(NET/ARCHIVE)과 헷갈리지 않도록 탭의 깎인 모서리·큰 Rajdhani 를 쓰지 않고,
   .rc-* (교신창)과 같은 각진 테두리 + Share Tech Mono 로 한 단계 아래처럼 보이게 한다.
   GREENS NET 에서만 보인다(hub.js 가 표시를 제어). */
.gm-wrap{ max-width:1320px; margin:26px auto 0; padding:0 48px; position:relative; z-index:1; }
@media (max-width:700px){ .gm-wrap{ padding:0 16px; } }
.gm-head{ font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:3px;
  color:#7a1515; text-transform:uppercase; margin-bottom:4px; }
.gm-sub{ font-family:'SUIT Variable','Pretendard','Malgun Gothic',sans-serif; font-size:11px;
  letter-spacing:.02em; color:#7a4a4a; margin-bottom:12px;
  word-break:keep-all; overflow-wrap:break-word; }
.gm-box{ display:block; text-decoration:none; border:1px solid rgba(150,28,28,.5);
  background:rgba(8,4,4,.6); box-shadow:0 0 26px rgba(130,15,15,.14);
  transition:border-color .18s, background .18s, box-shadow .18s; }
.gm-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.gm-name{ font-family:'Share Tech Mono',monospace; font-size:15px; letter-spacing:5px;
  color:#8a6a6a; text-transform:uppercase; }
.gm-name b{ font-weight:400; color:#a33; }
.gm-right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.gm-st{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:#6a3a3a; }
.gm-go{ font-size:13px; color:#7a3030; transition:transform .18s, color .18s; }
.gm-box:hover{ border-color:rgba(255,60,60,.85); background:rgba(20,6,6,.75);
  box-shadow:0 0 30px rgba(190,25,25,.28); }
.gm-box:hover .gm-name{ color:#d8c0c0; }
.gm-box:hover .gm-name b{ color:#ff4a4a; }
.gm-box:hover .gm-st{ color:#ff5b5b; }
.gm-box:hover .gm-go{ color:#ff4a4a; transform:translateX(3px); }
/* 로그인 상태 */
.gm-box.in-session{ border-color:rgba(200,45,45,.7); background:rgba(16,5,5,.7); }
.gm-box.in-session .gm-name{ color:#c8b0b0; }
.gm-box.in-session .gm-st{ color:#ff5b5b; }