/* usermenu-v4 — 오른쪽 위 끝의 동그란 계정 단추 (2026-09-27 · 8차에 자리 · 크기 · 사진)
 *
 * ★ 8차 대표님(캡처 225355) — 「이쪽 끝으로 옮겨주고 20%정도 작게 … EN | KO 는 왼쪽으로 좀 더 밀고 …
 *   원형 심볼안에 R은 완전히 정중앙에 … 카카오 로그인이면 카카오 프로필사진 구글로그인이면 구글 네이티브 프로필이」.
 *   그래서 단추가 오른쪽 끝(본문 격자 여백 자리)에 서고, EN | KO 가 그 왼쪽으로 비킵니다. 36 → 29px(누르는 자리 44 그대로).
 *   사진은 세션이 주는 avatar_url(서버가 https 로 올려 저장)을 씁니다 — 격리본 CSP img-src 에 카카오 · 구글 · 네이버 사진 주소를 열었습니다.
 *
 * 대표님 — 「로그인 하면 우측 상단에 EN 왼쪽에 로그인 아이콘 하나 원형으로 만들어주고
 *           그거 통해서 관리랑 내계정 메뉴 볼 수 있게 해줘」
 *
 * ★ 혼자 설 수 있게 짰습니다 — 랜딩(vpn4.css) · 약관 화면(doc-v4.css) · 로그인 뒤 화면(app-v4.css)
 *   어디에 얹어도 이 파일의 `.um*` 이름만 씁니다. 남의 클래스는 아래 두 줄만 건드립니다.
 *     · 단추가 뜨면(`html.um-on`) 옛 세션 글자 칸(#nav-session)을 접습니다 — 같은 메뉴가 두 번 보이지 않게.
 *     · 좁은 랜딩에서 알약을 펼치면(`.is-menu`) 언어 칸처럼 잠시 숨습니다.
 * ★ 글자색은 옆 EN | KO 의 색을 스크립트가 그대로 옮겨 받습니다(--um-ink). 랜딩 히어로 위에서는 흰색,
 *   밝은 판 위에서는 검정 — 언어 칸이 바뀌면 같이 바뀝니다.
 * ★ 자리는 두 가지입니다.
 *     흐름 배치 — 부모가 flex 줄이면 그 안에 [단추][EN | KO] 로 섭니다(app-v4 · 좁은 약관 화면).
 *     띄움 배치 — 언어 칸이 absolute · fixed 면 스크립트가 그 왼쪽 10px 에 같은 방식으로 띄웁니다(랜딩 · 넓은 약관 화면).
 */

.um {
  --um-ink: #000000;
  --um-paper: #FFFFFF;
  position: relative; z-index: 30;
  display: flex; align-items: center; flex: none;
  width: 29px; height: 29px;
  color: var(--um-ink);
  font-weight: 500; line-height: 1; letter-spacing: 0;
}
/* 스크립트가 세션을 묻는 동안은 자리만 잡고 비워 둡니다(로그아웃 모양이 잠깐 비쳤다 바뀌지 않게) */
.um:not(.is-ready) .um__btn { visibility: hidden; }

.um__btn {
  position: relative; display: grid; place-items: center;
  width: 29px; height: 29px; margin: 0; padding: 0; overflow: visible;
  border: 1.5px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit;
  font: inherit; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s cubic-bezier(0.44, 0, 0.56, 1), opacity 0.25s cubic-bezier(0.44, 0, 0.56, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.um__btn::after { content: ''; position: absolute; inset: -7.5px; border-radius: 50%; } /* 누르는 자리 44px */
.um__btn:hover { background: rgba(127, 127, 127, 0.16); }
.um__btn:active { transform: scale(0.94); }
.um__btn:focus-visible { outline: 2px solid var(--um-ink); outline-offset: 3px; }
.um__btn svg { display: block; width: 15px; height: 15px; }
/* 로그인 뒤 — 채운 원 + 이름 첫 글자 */
.um__btn--in { border-color: transparent; background: var(--um-ink); color: var(--um-paper); }
.um__btn--in:hover { background: var(--um-ink); opacity: 0.82; }
.um__btn--in[aria-expanded="true"] { opacity: 1; box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.28); }
/* 첫 글자를 원 한가운데에 — 글자 상자 대신 대문자 높이로 위아래를 재어 맞춥니다(text-box). 못 쓰는 브라우저는 줄 높이 1 그대로 */
.um__initial { display: block; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: uppercase; text-box: trim-both cap alphabetic; }
/* 프로필 사진 — 원을 꽉 채웁니다. 못 불러오면 스크립트가 첫 글자로 바꿉니다 */
.um__photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.um__btn--photo { border: 1.5px solid var(--um-ink); background: transparent; color: var(--um-ink); } /* 테는 옆 EN | KO 글자색(영상 위 흰색 · 밝은 바탕 검정) */
.um__btn--photo:hover { background: transparent; opacity: 0.86; }
html[lang="ko"] .um__initial { font-weight: 700; }
/* 좁은 화면에서 알약과 부딪힐 때 스크립트가 붙입니다 — 26px 로 줄이되 누르는 자리는 44px 그대로 */
.um--compact { width: 26px; height: 26px; }
.um--compact .um__btn { width: 26px; height: 26px; }
.um--compact .um__btn::after { inset: -9px; }
.um--compact .um__btn svg { width: 14px; height: 14px; }
.um--compact .um__initial { font-size: 11.5px; }
/* 스크립트가 알약을 옆으로 비켜 세운 경우에도, 펼친 알약은 랜딩 원래 자리(가운데)로 */
html.um-fixed .pill.is-open { margin-left: 0 !important; }
/* 영상 위 흰 단추 — 언어 글자처럼 옅은 그림자로 떼어 냅니다 */
.um--light .um__btn { filter: drop-shadow(0 1px 8px rgba(6, 18, 40, 0.35)); }

/* ------------------------------------------------------------ 펼친 메뉴 — 흰 카드 · 모서리 12 · 그림자 */
.um__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: max-content; min-width: 208px; max-width: min(280px, calc(100vw - 32px));
  padding: 6px; margin: 0;
  background: #FFFFFF; color: #000000;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; text-align: left; text-shadow: none;
  transform-origin: top right;
  animation: um-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.um__menu[hidden] { display: none; }
@keyframes um-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.um__who { padding: 10px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.um__who b { display: block; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ko"] .um__who b { font-weight: 700; }
.um__who span { display: block; margin-top: 4px; color: #666666; font-size: 12px; font-weight: 500; }
.um__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 42px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: inherit;
  font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.um__item:hover { background: #F2F2F2; }
.um__item:focus { outline: none; }
.um__item:focus-visible { background: #F2F2F2; box-shadow: inset 0 0 0 2px #000000; }
.um__item[aria-current="page"] { font-weight: 600; }
html[lang="ko"] .um__item[aria-current="page"] { font-weight: 700; }
.um__item svg { display: block; width: 18px; height: 18px; flex: none; color: #555555; }
.um__item:disabled { opacity: 0.5; cursor: progress; }
.um__sep { height: 1px; margin: 4px 6px; background: rgba(0, 0, 0, 0.08); }
.um__err { margin: 6px 8px 4px; color: #B42318; font-size: 13px; line-height: 1.45; white-space: normal; }
.um__err:empty { margin: 0; }

/* ------------------------------------------------------------ 옛 세션 글자 칸은 단추가 뜨면 접습니다 */
html.um-on #nav-session { display: none !important; }

/* 띄움 배치(랜딩 fixed) — 랜딩의 첫 장면이 걷힐 때까지는 언어 칸처럼 숨어 있다가 함께 나타납니다 */
.um--fixed { transition: opacity 0.4s cubic-bezier(0.44, 0, 0.56, 1); }
.js:not(.is-ready) .um--fixed { opacity: 0; pointer-events: none; }

/* 좁은 화면에서 알약을 펼치면 언어 칸처럼 잠시 숨습니다 */
@media (max-width: 767px) {
  .is-menu .um { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .um__menu { animation: none; }
  .um__btn, .um--fixed { transition: none; }
}