/* ================================================================
   home-v2.css — Hunters 홈 보조 스타일 (레이아웃 원본 유지)
   style.css 뒤에 로드. 탭 전환 안전 유지.
================================================================ */

/* ── 탭 안전: .active일 때만 표시 ── */
#page-home.active { display:block; overflow-y:auto; overflow-x:hidden; }

/* ════════════════════════════════════════════════════════════
   히어로 위협 게이지 스트립 (좌상단 추가 요소)
════════════════════════════════════════════════════════════ */
.hhv4-threat-strip {
    position:absolute; top:14px; left:18px; z-index:8;
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:.53rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--text-sub); pointer-events:none;
}
.hhv4-ts-label { opacity:.75; white-space:nowrap; }
.hhv4-ts-bar {
    width:84px; height:6px; background:rgba(230,238,255,.05);
    border:1px solid rgba(230,238,255,.12); position:relative; overflow:hidden;
}
.hhv4-ts-fill {
    display:block; position:absolute; left:0; top:0; bottom:0; width:0%;
    background:var(--accent); transition:width .8s ease, background .8s ease;
    /* 세그먼트(바코드) 마스크로 fill을 분절 */
    -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);
    mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);
    -webkit-mask-size:6px 100%; mask-size:6px 100%;
}
.hhv4-ts-pct { color:var(--accent-bright); min-width:2.8em; }
.hhv4-ts-stage {
    padding:1px 7px; border:1px solid rgba(230,238,255,.18); border-radius:2px;
    font-size:.51rem; color:var(--accent); transition:color .6s, border-color .6s;
}
.hhv4-ts-stage::before { content:'['; opacity:.6; margin-right:1px; }
.hhv4-ts-stage::after  { content:']'; opacity:.6; margin-left:1px; }
html[data-erosion-stage="3"] .hhv4-ts-fill  { background:#ff8c42; }
html[data-erosion-stage="3"] .hhv4-ts-stage { color:#ff8c42; border-color:#ff8c42; animation:hhv4-blink 2s step-end infinite; }
html[data-erosion-stage="4"] .hhv4-ts-fill  { background:#ff3355; }
html[data-erosion-stage="4"] .hhv4-ts-stage { color:#ff3355; border-color:#ff3355; animation:hhv4-blink .9s step-end infinite; }
@keyframes hhv4-blink { 50%{opacity:.2} }

/* 우상단 KST 시계 */
.hhv4-sys-id {
    position:absolute; top:14px; right:18px; z-index:8; text-align:right;
    font-family:var(--font-mono); font-size:.52rem; letter-spacing:.14em; line-height:1.7;
    color:var(--text-dim); pointer-events:none; text-transform:uppercase;
}
.hhv4-sys-id b { color:var(--text-sub); font-weight:500; }

/* 히어로 침식 단계별 반응 */
html[data-erosion-stage="3"] .home-hero-eyebrow { color:rgba(255,140,66,.8) !important; }
html[data-erosion-stage="4"] .home-hero-eyebrow { color:#ff3355 !important; animation:hhv4-blink 1.2s step-end infinite; }

/* ════════════════════════════════════════════════════════════
   전역 비상 시스템 (어느 탭에서든 작동)
════════════════════════════════════════════════════════════ */
html { --erosion:0; }

/* 경고 프레임 */
.hhv4-alert-frame {
    position:fixed; inset:0; pointer-events:none; z-index:950;
    opacity:0; transition:opacity 1.4s ease;
}
.hhv4-alert-frame::before {
    content:''; position:absolute; inset:0;
    box-shadow:inset 0 0 0 1px rgba(255,51,85,.40),
               inset 0 0 36px rgba(255,51,85,.08),
               inset 0 0 100px rgba(255,51,85,.04);
}
.hhv4-alert-frame::after {
    content:''; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,transparent,#ff3355 30%,#ff8896 50%,#ff3355 70%,transparent);
    background-size:200% 100%;
    box-shadow:0 0 12px rgba(255,51,85,.6);
    animation:hhv4-beacon 3.2s linear infinite;
}
.hhv4-alert-frame .hhv4-alert-bot {
    position:absolute; left:0; right:0; bottom:0; height:2px;
    background:linear-gradient(90deg,transparent,#ff3355 30%,#ff8896 50%,#ff3355 70%,transparent);
    background-size:200% 100%;
    box-shadow:0 0 12px rgba(255,51,85,.6);
    animation:hhv4-beacon 3.2s linear infinite reverse;
}
@keyframes hhv4-beacon { from{background-position:200% 0} to{background-position:-200% 0} }

html[data-erosion-stage="3"] .hhv4-alert-frame { opacity:.46; }
html[data-erosion-stage="4"] .hhv4-alert-frame { opacity:1; animation:hhv4-fp 1.9s ease-in-out infinite; }
@keyframes hhv4-fp { 0%,100%{opacity:.62} 50%{opacity:1} }

/* 비상 알림 칩 */
.hhv4-alert-chip {
    position:fixed; left:50%; transform:translateX(-50%) translateY(-180%);
    top:calc(var(--topbar-h,52px) + 10px); z-index:951;
    display:flex; align-items:center; gap:8px;
    padding:6px 14px 6px 11px; border-radius:28px;
    border:1px solid rgba(255,51,85,.48);
    background:rgba(14,2,5,.8);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 4px 22px rgba(255,51,85,.20);
    font-family:var(--font-mono); font-size:.60rem; letter-spacing:.18em; text-transform:uppercase;
    color:#ffb3bd; pointer-events:none;
    transition:transform .7s cubic-bezier(.2,.9,.25,1.2);
}
.hhv4-alert-chip .dot {
    width:7px; height:7px; border-radius:50%; background:#ff3355;
    box-shadow:0 0 9px #ff3355; animation:hhv4-blink 1s step-end infinite;
}
.hhv4-alert-chip b { color:#fff; font-weight:500; }
html[data-erosion-stage="3"] .hhv4-alert-chip,
html[data-erosion-stage="4"] .hhv4-alert-chip { transform:translateX(-50%) translateY(0); }

/* 글리치 버스트 */
html.hhv4-glitchburst body { animation:hhv4-gb .26s steps(2) 1; }
@keyframes hhv4-gb {
    0%  { transform:translate(2px,-1px); filter:hue-rotate(-22deg) saturate(1.3); }
    50% { transform:translate(-3px,1px) skewX(.5deg); filter:hue-rotate(13deg) contrast(1.12); }
    100%{ transform:none; filter:none; }
}

/* ════════════════════════════════════════════════════════════
   라이트 테마
════════════════════════════════════════════════════════════ */
/* 라이트 테마 — strip/clock은 이미 테마 토큰을 사용하므로 추가 보정 불필요 */

/* ════════════════════════════════════════════════════════════
   반응형
════════════════════════════════════════════════════════════ */
@media (max-width:760px) {
    .hhv4-ts-bar { width:44px; }
    .hhv4-alert-chip { font-size:.53rem; padding:5px 10px 5px 9px; }
}

/* ════════════════════════════════════════════════════════════
   모션 최소화
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    .hhv4-alert-frame::after, .hhv4-alert-frame .hhv4-alert-bot { animation:none; }
    html[data-erosion-stage="4"] .hhv4-alert-frame { animation:none; }
    html.hhv4-glitchburst body { animation:none; }
    .hhv4-ts-stage, .hhv4-alert-chip .dot, html[data-erosion-stage="4"] .home-hero-eyebrow { animation:none; }
}