/*
 * Filename: header.css
 * Description: Modern Header for Both Desktop & Mobile (Final Corrected Version)
 * Author: Gemini
 * Date: 2025-07-14
 */

/* 1. ROOT & GENERAL STYLES */
:root {
    --bg-dark: #0D1018;
    --bg-header: #1A1D2A;
    --bg-card: #252936;
    --primary-blue: #00BFFF;
    --text-primary: #E0E7FF;
    --text-secondary: #8A9CB3;
    --border-color: #2C3A56;
    --header-height: 70px;
    --danger-red: #EF4444;
	--bg-card-header: #252936;
}
[ng-cloak], .ng-cloak { display: none !important; }

/* 2. DESKTOP HEADER STYLES */
#header-desktop {
    max-width: 2200px;
    margin: 0 auto;
    height: var(--header-height);
    display: flex;
    align-items: center;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 999;
    min-width: 1600px;;
}
#header_wrap { 
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color); }
#header-desktop .logo { }
#header-desktop .logo img { height: 50px; display: block; margin-left:30px; }
.main-nav { flex-grow: 1; justify-items: center; }
.main-nav > ul { list-style: none; display: flex; margin:0; padding:0; }
.main-nav > ul > li.nav-item { position: relative; }
.main-nav .nav-link { display: flex; align-items: center; gap: 5px; padding: 10px 15px; color: var(--text-secondary); font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: all 0.2s ease; cursor: pointer; }
.main-nav .nav-link:hover, .main-nav .nav-link.active { background-color: var(--bg-dark); color: var(--text-primary); }
.main-nav .nav-link.active { color: var(--primary-blue); }
.main-nav .dropdown-arrow { font-size: 12px; transition: transform 0.2s ease; }
.main-nav li:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-item:hover .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + -5px); left: 0; min-width: 140px; background-color: var(--bg-header); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 0; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: all 0.2s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 100; margin:0;}
.dropdown-menu li a { cursor: pointer; display: flex; align-items:center; gap:8px; padding: 10px 20px; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-decoration: none; }
.dropdown-menu li a:hover { background-color: var(--bg-dark); color: var(--text-primary); }
.dropdown-menu li a.active { color: var(--primary-blue); font-weight: 600; }
.dropdown-menu .divider { height: 1px; background-color: var(--border-color); margin: 8px 0; }
.member-info { display: flex; align-items: center; margin-left: auto; }
.balance-wrap { display: flex; align-items: center; gap: 10px; background-color: var(--bg-dark); padding: 8px 15px; border-radius: 8px; }
.balance-item { display: flex; align-items: baseline; gap: 5px; }
.balance-item label { font-size: 14px; font-weight: bold; color: var(--text-secondary); }
.balance-item money { font-size: 15px; font-weight: 600; color: #16bbf7; min-width: 85px; text-align: right; }
.balance-item point { font-size: 15px; font-weight: 600; color: #16bbf7; min-width: 75px; text-align: right; }
.btn-icon.refresh { background: none; border: none; color: var(--text-secondary); cursor: pointer; width: 5px; }
.user-menu { position: relative; }
.user-menu > .user-profile { flex-direction: row; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.user-menu .user-profile i { font-size: 23px; margin-bottom: 2px; color: var(--primary-blue); }
.user-menu:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.user-menu .dropdown-menu { right: 0; left: auto; }
.user-menu .dropdown-menu i { width: 20px; text-align: center; color: var(--text-secondary); }
.dropdown-menu li:hover i, .dropdown-menu li a.active i {color: var(--primary-blue);}

/* 3. MOBILE HEADER & SIDE MENUS */
#header-mobile { display: none; } 
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 1001; }
.overlay.active { opacity: 1; visibility: visible; }
.side-menu { position: fixed; top: 0; width: 280px; height: 100%; background-color: var(--bg-card); transition: transform 0.3s ease-out; z-index: 1002; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
.side-menu.left { left: 0; transform: translateX(-100%); }
.side-menu.right { right: 0; transform: translateX(100%); border-right: none; border-left: 1px solid var(--border-color); }
.side-menu.open { transform: translateX(0); }
.side-menu .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; height: var(--header-height); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.menu-header .logo img { height: 40px; }
.menu-header h3 { font-size: 18px; font-weight: 600; }
.menu-header .btn-icon, .menu-header .close-btn { background: none; border: none; color: var(--text-secondary); font-size: 14px; padding: 10px; cursor: pointer; font-weight: 600;}
.side-menu .menu-nav { padding: 15px 0; overflow-y: auto; flex-grow: 1; }
.menu-nav ul { list-style: none; padding: 0; margin: 0; }
.menu-nav li { color: var(--text-secondary); font-weight: 500; cursor: pointer; }
.menu-nav li:hover { background-color: var(--bg-card-header); color: var(--text-primary); }
.menu-nav li > a { display: flex; align-items: center; gap: 15px; padding: 12px 25px; font-size: 15px; text-decoration: none; color: inherit; transition: all 0.2s; border-left: 3px solid transparent; }
.menu-nav li.active > a, .menu-nav li > a.active { color: var(--primary-blue); font-weight: 600; border-left-color: var(--primary-blue); background-color: var(--bg-dark); }
.menu-nav .menu-category { font-size: 12px; text-transform: uppercase; color: var(--text-secondary); padding: 20px 25px 8px; font-weight: 600; opacity: 0.5; cursor: default; }
.menu-nav i.fas, .menu-nav i.fab { font-size: 16px; width: 20px; text-align: center; color: var(--text-secondary); transition: all 0.2s; }
.menu-nav li:hover > a i, .menu-nav li a.active i, .menu-nav li.active > i { color: var(--primary-blue); }
.menu-nav li[ng-bind] { padding: 12px 25px; border-left: 3px solid transparent; } /* ng-bind가 있는 li에 직접 스타일 적용 */
.menu-nav li[ng-bind].active { color: var(--primary-blue); font-weight: 600; border-left-color: var(--primary-blue); background-color: var(--bg-dark); }
.user-profile { display: flex; flex-direction: column; align-items: center; padding: 25px; border-bottom: 1px solid var(--border-color); }
.user-profile .profile-icon { font-size: 56px; color: var(--primary-blue); margin-bottom: 10px; }
.user-profile .nickname { font-size: 18px; font-weight: 600; }
.balance-info { padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.balance-info .info-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.balance-info .info-item:last-child { margin-bottom: 0; }
.balance-info label { font-size: 14px; color: var(--text-secondary); }
.balance-info .value-wrapper { display: flex; align-items: center; gap: 8px; }
.balance-info .money { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.balance-info .btn-icon.small { font-size: 14px; padding: 5px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.quick-actions .btn { padding: 10px; background-color: var(--bg-dark); color: var(--text-primary); border-radius: 8px; font-size: 13px; }
.menu-footer { padding: 15px; margin-top: auto; flex-shrink: 0; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap:10px; }
.btn-logout { background-color: var(--danger-red); color: #fff; height: 35px; }
.btn-special { background-color: #717171; color: var(--text-primary); height: 35px; }
.btn-special.operator { color: #fff0c8; background: linear-gradient(45deg, #ff8100, #f92552); text-shadow: 0 0 5px rgba(0,0,0,0.5); height: 35px; }

/*
 * 파트너로 가는 단추.
 *
 * 제우스도 같은 자리에 같은 단추가 있고, 다른 것은 **빛의 색**뿐입니다:
 * 저쪽은 주황, 이쪽은 파랑. 스킨이 원래 그 두 색으로 갈립니다.
 *
 * 옆 항목들과 같은 모양에 빛만 늘 켜 둡니다. 알약에 그라디언트를 씌워 봤지만
 * 이 줄에서 혼자 튀었습니다.
 */
/*
 * ── 왜 선택자가 셋인가 ──────────────────────────────────────────
 *
 * `.hera-partner` 하나만 적었을 때 **빛은 켜졌는데 글자색이 안 먹었습니다.**
 * 이 단추가 앉는 자리에 색을 정하는 규칙이 이미 있고 더 세기 때문입니다.
 * 서랍에서는 아직 그렇습니다:
 *
 *   `.quick-actions .btn`   (0,2,0) — 서랍의 단추 격자
 *
 * 그것을 이기려면 (0,3,0) 이 필요합니다. 그래서 자리를 이름으로 적습니다 —
 * 짧게 줄이면 색이 조용히 회색으로 돌아갑니다. `!important` 는 안 씁니다:
 * 다음 사람이 이 색을 덮어야 할 때 그쪽이 또 `!important` 를 써야 합니다.
 *
 * ── 넓은 화면의 자리가 바뀌었습니다 (2026-09-12) ────────────────
 *
 * 첫째 선택자는 `.dropdown-menu li a.hera-partner` 였습니다. 그 자리는 계정
 * 드롭다운 안이었고, 운영자가 「아이디 눌러야 파트너가 보이고 이런 구조로
 * 하면 안 되고」라고 한 그 자리입니다. 이제 단추는 지갑 띠와 계정 메뉴
 * **사이**에 그냥 서 있습니다(`skins/hera/chrome.tsx`). 없어진 자리를 계속
 * 적어 두면 그 줄은 아무것도 안 하면서 「여기에 있다」고 말합니다.
 *
 * 새 자리에서 색을 다투는 규칙은 없지만(그 띠의 `a` 에 색을 주는 규칙이
 * `header.css` 에도 `header-fit.css` 에도 없습니다), 자리를 이름으로 적는
 * 규율은 그대로 둡니다 — 다음에 무엇이 들어와도 이쪽이 이깁니다.
 *
 * 자리가 바뀌면 이것도 같이 바뀌어야 하고, 그때를 잡으라고
 * `check_partner_button.py` 가 **계산된 색**을 봅니다. 이제 정말로 봅니다 —
 * 앞의 판은 시트의 글자를 grep 했고, 그것은 「규칙이 배포됐다」이지 「그
 * 규칙이 이 요소에서 이겼다」가 아니었습니다.
 */
.member-info > a.hera-partner,
.quick-actions .btn.hera-partner,
.hera-partner {
    color: #d0f6ff;
    text-shadow: 0 0 5px #d0f6ff, 0 0 10px #00bfff, 0 0 15px #1e90ff, 0 0 5px #00bfff, 0 0 5px #00bfff, 0 0 10px #1e90ff, 0 0 20px #00bfff, 0px 0 40px #00bfff;
    transition: all 300ms;
    animation: beat .25s infinite alternate;
}

/* 서랍 안의 아이콘도 같이 빛납니다 — 글자만 켜면 아이콘이 꺼져 보입니다. */
.hera-partner svg {
    color: #d0f6ff;
    filter: drop-shadow(0 0 5px #00bfff) drop-shadow(0 0 10px #1e90ff);
}

/* 4. RESPONSIVENESS */
@media (max-width: 1400px) {
    #header-desktop { display: none; }
    #header-mobile { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); padding: 0 15px; background-color: var(--bg-header); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 999; }
    #header-mobile .logo img { height: 40px; }
    #header-mobile .btn-icon { background: none; border: none; color: var(--text-secondary); font-size: 20px; padding: 10px; cursor: pointer; }
    #header-mobile .btn-icon img { height: 35px; }
	.user-profile { color: #cccccc; }
}

.fa-spin { animation: fa-spin 1s infinite linear; }
@keyframes fa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }