/* ============================================================
   게스트 / 커뮤니티 링크 / 모바일 차단 오버레이  (v83 · 게스트 헤더 상태항목 숨김)
   — 전체 다크 네이비 + 블루 액센트 테마와 통일
   ============================================================ */

/* ── ★ v79: 게스트는 상단 헤더의 시스템/거래 상태 항목 숨김 ──── */
/*  장 상태·WS 연결(NXT 애프터마켓/미연결/종목수), API·토큰·CF Worker 상태 등 */
body.hasri-guest [data-guest-hide] {
    display: none !important;
}

/* ── 사이드바 로고명 ──────────────────────────────────────── */
.sidebar-logo-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
}
.sidebar.collapsed .sidebar-logo-name { opacity: 0; width: 0; }

/* ============================================================
   ★ Req8: 좌측 하단 푸터 — 전체 디자인과 통일감 있는 레이아웃
   [👤아바타🟢]  danho · 관리자        [🚪로그아웃]
                 main v3.7 · CF v3.31 · NAS v1.26
   ============================================================ */

/* 아바타 — 톤 다운(블루 과하지 않게), 사이즈 조화 */
.user-avatar-wrap {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
}
.user-avatar-icon {
    font-size: 24px;
    color: var(--text-secondary);   /* 블루→차분한 회색 톤 */
}
.user-conn-dot {
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--bg-card, #141b2d);
}

/* user-info: 아바타 + 디테일 + 로그아웃 한 줄 정렬 */
.user-info {
    gap: 8px;
}
.user-details {
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

/* 아이디 + 역할 한 줄 (텍스트 전용) */
.user-id-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    line-height: 1.25;
}
.user-id-row .user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ★ 역할 표기 — 배지/이모지/배경 전부 제거, 텍스트 전용 + "·" 구분자 */
.user-id-row .role-badge,
.user-id-row #roleBadge {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    line-height: 1.25;
    white-space: nowrap;
    flex: 0 0 auto;
}
.user-id-row .role-badge::before,
.user-id-row #roleBadge::before {
    content: "· ";
    color: var(--text-muted);
    opacity: .7;
}
.user-id-row .role-badge:empty,
.user-id-row #roleBadge:empty { display: none !important; }

/* 버전 정보 — 아이디 아래 8px, 라벨 흐리게 + 버전숫자 포인트 */
.user-details .sidebar-logo-version {
    display: block;
    margin-top: 1px;
}
.sidebar-logo-version {
    font-size: 8px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: .7;
    white-space: nowrap;
    letter-spacing: .15px;
    line-height: 1.3;
}
.sidebar-logo-version b {
    font-weight: 600;
    color: var(--accent);            /* 버전 숫자 = 블루 포인트 */
    opacity: 1;
}
/* 사이드바 접힘 시 버전 텍스트 숨김 */
.sidebar.collapsed .sidebar-logo-version { opacity: 0; width: 0; overflow: hidden; }

/* 로그아웃 버튼 — 단정하게, 좌측 미세 구분선 */
.user-info .btn-logout {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 7px 8px;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    transition: var(--transition, all .25s ease);
}
.user-info .btn-logout:hover {
    color: var(--red, #ef4444);
    background: var(--red-light, rgba(239,68,68,0.1));
}

/* ============================================================
   사이드바 커뮤니티 / 문의 링크 버튼 — 카드형 외부링크 디자인
   메뉴 카테고리와 명확히 구분되도록 테두리 + 브랜드 컬러 강조
   ============================================================ */
.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 8px;
    margin-top: 4px;
}
.sb-link-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm, 8px);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
}
/* 좌측 세로 액센트 바 (브랜드 컬러) */
.sb-link-btn::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    transition: height .25s cubic-bezier(0.4,0,0.2,1);
}

/* 아이콘 배지 — 브랜드 컬러 원형 칩 */
.sb-link-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    font-size: 13px;
    transition: var(--transition);
}
.sb-link-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s;
}
/* 외부링크 표시 아이콘 — 평소 흐리게, hover 시 또렷이 */
.sb-link-ext {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--text-muted);
    opacity: .6;
    transition: var(--transition);
}

/* ── 카페(네이버) — 그린 ───────────────────────────────── */
.sb-link-cafe .sb-link-icon {
    background: rgba(52,211,153,.14);
    color: #34d399;
}
.sb-link-cafe::before { background: #34d399; }
.sb-link-cafe:hover {
    color: var(--text-primary);
    border-color: rgba(52,211,153,.55);
    background: rgba(52,211,153,.08);
    box-shadow: 0 4px 14px rgba(52,211,153,.16);
    transform: translateY(-1px);
}
.sb-link-cafe:hover::before { height: 60%; }
.sb-link-cafe:hover .sb-link-icon {
    background: #34d399;
    color: #06281d;
}
.sb-link-cafe:hover .sb-link-ext { color: #34d399; opacity: 1; }

/* ── 문의(카카오) — 옐로우 ─────────────────────────────── */
.sb-link-kakao .sb-link-icon {
    background: rgba(251,191,36,.14);
    color: #fbbf24;
}
.sb-link-kakao::before { background: #fbbf24; }
.sb-link-kakao:hover {
    color: var(--text-primary);
    border-color: rgba(251,191,36,.55);
    background: rgba(251,191,36,.08);
    box-shadow: 0 4px 14px rgba(251,191,36,.16);
    transform: translateY(-1px);
}
.sb-link-kakao:hover::before { height: 60%; }
.sb-link-kakao:hover .sb-link-icon {
    background: #fbbf24;
    color: #3a2c05;
}
.sb-link-kakao:hover .sb-link-ext { color: #fbbf24; opacity: 1; }

/* ── 뉴로메트릭 상담신청 — 퍼플 ────────────────────────── */
.sb-link-neuro .sb-link-icon {
    background: rgba(167,139,250,.14);
    color: #a78bfa;
}
.sb-link-neuro::before { background: #a78bfa; }
.sb-link-neuro:hover {
    color: var(--text-primary);
    border-color: rgba(167,139,250,.55);
    background: rgba(167,139,250,.08);
    box-shadow: 0 4px 14px rgba(167,139,250,.16);
    transform: translateY(-1px);
}
.sb-link-neuro:hover::before { height: 60%; }
.sb-link-neuro:hover .sb-link-icon {
    background: #a78bfa;
    color: #1e1240;
}
.sb-link-neuro:hover .sb-link-ext { color: #a78bfa; opacity: 1; }

/* 사이드바 접힘 시 — 텍스트/외부아이콘 숨기고 아이콘 칩만 중앙 정렬 */
.sidebar.collapsed .sb-link-btn { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.collapsed .sb-link-text,
.sidebar.collapsed .sb-link-ext { opacity: 0; width: 0; overflow: hidden; }

/* ── 게스트 전용 '로그인' 버튼 (사이드바 푸터) ────────────── */
/* 메인 액센트 블루로 통일 */
.btn-guest-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: 0 3px 12px var(--accent-glow);
    transition: var(--transition);
}
.btn-guest-login:hover {
    filter: brightness(1.08);
    box-shadow: 0 5px 16px var(--accent-glow);
    transform: translateY(-1px);
}
.btn-guest-login:active { transform: translateY(0); }

/* ============================================================
   📱 모바일 접근 차단 오버레이 — 동일 테마
   ============================================================ */
.mobile-block-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;            /* JS가 flex로 전환 */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 28%, #16213a 0%, var(--bg-primary) 72%);
}
.mb-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 32px 28px 28px;
    box-shadow: var(--shadow-lg);
}

/* ── 헤더 (가운데 정렬) : 원형칩 엠블럼 + 브랜드명 ─────────── */
.mb-logo {
    display: flex;
    align-items: center;
    justify-content: center;   /* 가운데 정렬 */
    gap: 11px;
    margin-bottom: 20px;
}
.mb-logo-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 21px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139,92,246,.18), var(--accent-glow));
    border: 1px solid var(--border-light);
}
.mb-logo-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .3px;
    background: linear-gradient(90deg, var(--purple), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── 헤더 구분선 (divider) ──────────────────────────────── */
.mb-divider {
    height: 1px;
    border: 0;
    margin: 0 0 26px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

/* ── 안내 영역 (중앙) : 주인공 아이콘 + 제목 ─────────────── */
.mb-icon {
    font-size: 64px;
    line-height: 1;
    text-align: center;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 18px rgba(96,165,250,.35));
}
.mb-title {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    margin: 0 0 18px;
}

/* ── 본문 (왼쪽 정렬) ───────────────────────────────────── */
.mb-desc {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;          /* 읽는 본문은 왼쪽 정렬 */
    color: var(--text-secondary);
    margin: 0 0 22px;
}
.mb-desc strong { color: #93c5fd; font-weight: 700; }

/* ── 접속 IP : 풀너비 박스 (라벨 좌 / 값 우) ─────────────── */
.mb-ip {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 8px;
    padding: 11px 16px;
    margin-bottom: 22px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--accent-glow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.mb-ip i { color: var(--accent); font-size: 13px; flex: 0 0 auto; }
.mb-ip .mb-ip-label { flex: 0 0 auto; }
.mb-ip strong {
    margin-left: auto;         /* 값을 오른쪽으로 밀착 */
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: .2px;
}

/* ── 액션 버튼 : 풀너비 세로 스택 ───────────────────────── */
.mb-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 52px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-card-hover);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}
.mb-btn i { font-size: 15px; }
.mb-btn:hover {
    background: var(--bg-secondary);
    transform: translateY(-1px);
}
.mb-btn:active { transform: translateY(0); }
.mb-btn-cafe  i { color: #34d399; }
.mb-btn-kakao i { color: #fbbf24; }