/* ════════════════════════════════════════════════════════════
   APP SHELL — 공유 헤더 + 기어 메뉴 컴포넌트
   index.html(플레이어 시트·메인 로비) · GMSheet.html(GM 로비) 공통.
   각 페이지가 따로 정의하지 않고 이 파일 하나를 <link>로 공유한다.
   CSS 변수(--bg2/--accent/--gold 등)는 각 페이지 :root에서 동일 값으로 제공.
   ════════════════════════════════════════════════════════════ */

/* 메인 헤더 = FVTT 붉은 배너 (플레이어 #header · 로비/GM .app-header 공통) */
#header, .app-header{
  background:#5e0000 url("data/fvtt-assets/sheet/red_bg.webp") repeat;
  border-top:1px solid #7a1d1d;
  border-bottom:2px solid var(--gold);
  color:#f3e2c2;
  padding:8px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#header .btn-ghost, .app-header .btn-ghost{ color:#f3e2c2; }
/* 헤더 브랜드(타이틀) */
.app-brand{ color:#ff8c42;font-size:13px;font-weight:700; }
/* 헤더 우측 액션 영역 */
.hdr-actions{ display:flex;gap:6px;margin-left:auto;flex-shrink:0;align-items:center; }

/* 톱니(⚙) 버튼 */
#hdr-gear, .hdr-gear-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);width:30px;height:28px;border-radius:5px;cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s,transform .2s;}
#hdr-gear:hover, .hdr-gear-btn:hover{border-color:var(--accent);color:var(--accent);}
#hdr-gear.open, .hdr-gear-btn.open{transform:rotate(60deg);border-color:var(--accent);color:var(--accent);}
/* 미열람 업데이트 레드닷 */
#hdr-gear.has-update, .hdr-gear-btn.has-update{position:relative;}
#hdr-gear.has-update::after, .hdr-gear-btn.has-update::after{content:'';position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#e03131;border:1px solid var(--bg2);}
.gear-update-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e03131;margin-left:5px;vertical-align:middle;}

/* 기어 팝업 메뉴 */
#gear-menu{position:fixed;top:46px;right:10px;z-index:100001;background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.45);width:240px;max-width:calc(100vw - 20px);max-height:calc(100vh - 56px);overflow-y:auto;padding:12px;display:none;flex-direction:column;gap:7px;}
#gear-menu.open{display:flex;}
/* 섹터 헤더(범용 / 플레이어 시트) */
.gear-sec-head{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border2);padding-bottom:5px;margin-bottom:1px;}
/* 팝업 안 모든 동작 버튼 = 전체폭 세로 스택 + 통일 규격(각 페이지 .btn 기본값에 의존하지 않도록 전부 명시) */
#gear-menu .btn{width:100%;justify-content:center;margin:0;padding:5px 12px;border-radius:4px;font-size:11px;font-weight:400;line-height:1.2;display:inline-flex;align-items:center;gap:5px;}
#gear-menu #auth-area{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
#gear-menu .auth-user{max-width:none;margin:0 0 2px;text-align:center;font-size:12px;color:var(--text);}

/* 헤더/기어에서 쓰는 버튼 변종 */
.btn-ghost{background:var(--bg3);border-color:var(--border2);color:var(--text2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-google{background:#fff;border-color:#dadce0;color:#3c4043;font-weight:700;}
.btn-google:hover{background:#f1f3f4;}
/* 계정 영역(로그인/사용자) */
#auth-area{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.auth-user{color:var(--text2);font-size:11px;margin-right:2px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}