/* ════════════════════════════════════════════════════════════════
   헤더 프로필 드롭다운 — 전용 스타일 (index.html <style>에서 분리)
   · 클래스 프리픽스: .pagehead-profile / .profile-* / .ph-* / .pm-*
   · :root 디자인 토큰(--brand, --line, --surface 등)은 index.html에서
     정의됨 — 여기서는 변수 참조만, 재정의 금지.
   · ⚠ .pm-admin-badge는 프로필 메뉴 외에 알림 관리·사용자 관리 모달
     타이틀에서도 사용된다(공용 배지) — 이동 시 주의.
   · 모듈 JS: static/js/profile.js (window.ProfileMenu)
   ════════════════════════════════════════════════════════════════ */

/* 프로필 드롭다운(표시용) */
.pagehead-profile {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 8px 4px 4px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
}
.pagehead-profile:hover { background: var(--surface-2); }
.ph-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--grad-logo);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.ph-avatar::before { content: "B"; }
.ph-email { font-size: 12px; color: var(--text-2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 드롭다운 캐럿 — 깔끔한 SVG chevron(헤더 아이콘 톤과 일관). 또렷하게 크게+대비 ↑ */
.ph-caret {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); margin-left: 1px; transition: transform .18s ease;
}
.ph-caret svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.pagehead-profile:hover .ph-caret { color: var(--text); }
.pagehead-profile[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line-strong); }
/* 열림 상태: 캐럿 뒤집힘(▾→▴), 색 진하게 */
.pagehead-profile[aria-expanded="true"] .ph-caret { transform: rotate(180deg); color: var(--brand); }

/* ── 프로필 드롭다운 메뉴 ── */
.profile-wrap { position: relative; flex: 0 0 auto; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 244px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: top right;
  animation: pmIn .14s ease;
}
.profile-menu[hidden] { display: none; }
@keyframes pmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .profile-menu { animation: none; } .ph-caret { transition: none; } }
.pm-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); text-align: left; text-decoration: none;
  color: var(--text); font: inherit;
}
.pm-item:hover, .pm-item:focus-visible { background: var(--surface-2); outline: none; }
.pm-item:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.pm-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--sage-tint); color: var(--brand);
}
.pm-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pm-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.pm-sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
/* '관리자' 배지 — 어드민 전용 메뉴/모달 라벨(차분한 세이지)
   ⚠ 프로필 메뉴 + 알림 관리·사용자 관리 모달 타이틀에서 공용 사용 */
.pm-admin-badge {
  display: inline-block; vertical-align: 1px; margin-left: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: var(--sage-tint-2);
  padding: 1px 6px; border-radius: var(--radius-pill);
}
.pm-ext { flex: 0 0 auto; color: var(--muted); }
.pm-ext svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.pm-danger .pm-ico { background: var(--neg-bg); color: var(--neg); }
.pm-danger .pm-title { color: var(--neg-strong); }
.pm-danger:hover, .pm-danger:focus-visible { background: var(--neg-bg); }

/* ════════════════════════════════════════════════════════════════
   모바일(폰) 반응형 — index.html @media (max-width: 640px)에서 분리
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 헤더: 폰에선 이메일/캐럿 숨김(아바타만) — index.html의
     .pagehead-search/.updated 숨김과 같은 규칙에서 분리해 옮김 */
  .ph-email, .ph-caret { display: none; }
  /* 프로필(아바타 알약) 터치 타깃 ≥44px — 폰에선 이메일/캐럿 숨겨 아바타만 보이므로 정사각 보장 */
  .pagehead-profile { min-height: 44px; min-width: 44px; padding: 4px; justify-content: center; }

  /* ── 프로필 메뉴 → 풀폭 드롭다운(화면 안) ── */
  .profile-menu {
    position: fixed;
    left: 16px; right: 16px; top: calc(var(--topbar-h) + var(--panel-margin));
    min-width: 0; width: auto;
  }
  .pm-item { min-height: 44px; }
  .pm-title { font-size: 14px; }
}