/* ==========================================================================
   overlays — 프로필 드롭다운
   지갑 모달은 css/wallet.css 가 맡는다 (#walletModal 안으로 스코프됨).
   수치 근거: ../05-컴포넌트/헤더-프로필-푸터.md §2
   ========================================================================== */

/* 진행 막대 — 계정 완성도에 쓴다 */
.bar{ height:8px; border-radius:var(--r-full); background:var(--bg); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:var(--r-full); background:var(--cta); }

/* ---- 프로필 드롭다운 --------------------------------------------------- */
.profile-wrap{ position:relative; }
.pmenu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  width:236px;
  padding:8px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:none;
}
.profile-wrap.is-open .pmenu{ display:block; }

/* 메뉴보다 계정 완성 유도가 먼저 온다 (§2.1) */
.pmenu__kyc{
  padding:12px;
  margin-bottom:8px;
  display:grid; gap:8px;
  background:var(--bg);
  border-radius:var(--r);
}
.pmenu__kyc b{ font-size:var(--fs-sm); font-weight:700; }
.pmenu__kyc a{
  font-size:var(--fs-sm); font-weight:700; color:var(--cta);
  transition:opacity var(--t-color);
}
.pmenu__kyc a:hover{ opacity:.8; }

/* 소제목 없이 구분선으로만 나눈다 (§2.2) */
.pmenu__group{ display:grid; gap:2px; padding:6px 0; }
.pmenu__group + .pmenu__group{ border-top:1px solid var(--line); }
.pmenu__item{
  height:36px; padding:0 10px;
  display:flex; align-items:center; gap:10px;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-3);
  transition:background var(--t-bg), color var(--t-color);
}
.pmenu__item:hover{ background:var(--surface-2); color:var(--text); }
.pmenu__item svg{ width:20px; height:20px; color:var(--text-5); flex:none; }
.pmenu__item .badge-count{ margin-left:auto; }

/* 안 읽은 쪽지 수 (기획 2026-09-18). 줄 끝에 붙어 한눈에 잡힌다 */
.pmenu__badge{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--danger,#e5484d); color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

/* ---- 모바일 ------------------------------------------------------------
   드롭다운이 아래에서 올라오는 시트로 바뀐다.
   ------------------------------------------------------------------------ */
@media (max-width:1024px){

  /* 프로필 메뉴는 아래에서 올라오는 시트가 된다 */
  .pmenu{
    position:fixed; right:0; left:0; top:auto; bottom:var(--tabbar-h);
    width:auto;
    border-radius:var(--r) var(--r) 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .pmenu__item{ height:44px; font-size:var(--fs-base); }
}

/* ════════════════════════════════════════════════════════════════════
   헤더 검색 창 — 리뉴얼 (레드 2026-09-27 · 전달본 whaley-검색/css/search.css) · 접두어 sx-
   [입력 줄] → 빈 칸: [최근 검색어] [인기 게임 2열]  /  입력 중: [게임사] [게임 2열 · 이름 강조] [전체 결과 보기]
   PC: 가운데 위쪽 폭 600 · 휴대폰(767 이하): 화면 가득
   ★ 값은 전달본 그대로. 미리보기 바닥 · .sx-fake · .sx-toast 는 옮기지 않았다.
   ⚠ 전달본의 전역 규칙(ul · button · svg · kbd 기본값)은 <.sx 안으로> 가뒀다 — 사이트 전체로 새면 안 된다.
   ⚠ z-index — 헤더(고정) 위, 가운데 쪽지(.ex-toasts 9000) 아래.
   ════════════════════════════════════════════════════════════════════ */
.sx{ position:fixed; inset:0; z-index:7000; color:var(--text-3); }
.sx h3, .sx p, .sx ul{ margin:0; }
.sx ul{ padding:0; list-style:none; }
.sx a{ color:inherit; text-decoration:none; }
.sx button{ font:inherit; border:0; background:none; color:inherit; cursor:pointer; padding:0; }
.sx svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sx-back{ position:absolute; inset:0; background:rgba(3,6,12,.72); backdrop-filter:blur(6px); animation:sxFade .15s ease-out; }
.sx-panel{
  position:relative; width:min(600px, calc(100% - 32px)); max-height:calc(100dvh - 120px); margin:84px auto 0;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; border:1px solid rgba(143,182,255,.16); background:#0B1224;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85);
  animation:sxDrop .2s cubic-bezier(.16,1,.3,1);
}

/* 입력 줄 */
.sx-form{ flex:none; display:flex; align-items:center; gap:10px; height:64px; padding:0 12px 0 20px; border-bottom:1px solid var(--line); }
.sx-form__ico{ display:grid; color:var(--text-4); }
.sx-form__ico svg{ width:20px; height:20px; }
.sx-form__input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--text); font:inherit; font-size:var(--fs-lg); font-weight:700; }
.sx-form__input::placeholder{ color:var(--text-6); font-weight:500; }
.sx .sx-form__clear{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surface-3); color:var(--text-2); }
.sx-form__clear svg{ width:14px; height:14px; stroke-width:2.5; }
.sx .sx-form__close{ height:28px; padding:0 8px; border-radius:var(--r-sm); border:1px solid var(--line); font-size:var(--fs-badge); font-weight:800; letter-spacing:.06em; color:var(--text-4); transition:color var(--t-color), border-color var(--t-color); }
.sx .sx-form__close:hover{ color:var(--text); border-color:var(--text-5); }
.sx-mo{ display:none; }

/* 몸통 */
.sx-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 12px 6px; }
.sx-body:has(.sx-foot){ padding-bottom:0; }
.sx-sec{ padding:12px 0 6px; }
.sx-sec + .sx-sec{ border-top:1px solid rgba(42,58,87,.55); }
.sx-sec__head{ display:flex; align-items:center; justify-content:space-between; height:24px; padding:0 8px; margin-bottom:8px; }
.sx-sec__head h3{ font-size:var(--fs-xs); font-weight:800; color:var(--text-4); }
.sx-count{ margin-left:4px; color:var(--text); font-variant-numeric:tabular-nums; }
.sx .sx-link{ font-size:var(--fs-sm); color:var(--text-5); }
.sx .sx-link:hover{ color:var(--text-2); }
/* 불러오는 동안 — 칸 높이만 잡아 창이 튀지 않게 */
.sx-wait{ height:120px; }

/* 최근 검색어 · 게임사 칩 */
.sx-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 8px; }
.sx-chip{ display:flex; align-items:center; height:32px; border-radius:var(--r-full); background:var(--surface-2); border:1px solid transparent; transition:border-color var(--t-color); }
.sx-chip:hover{ border-color:var(--line); }
.sx .sx-chip > button:first-child{ display:flex; align-items:center; gap:6px; height:100%; padding:0 4px 0 12px; font-size:var(--fs-xs); font-weight:600; color:var(--text-2); border-radius:var(--r-full); }
.sx .sx-chip > button:first-child.is-active{ background:var(--surface-3); color:var(--text); }
.sx-chip > button:first-child svg{ width:13px; height:13px; color:var(--text-5); }
.sx .sx-chip__x{ display:grid; place-items:center; width:26px; height:100%; margin-right:3px; color:var(--text-6); }
.sx .sx-chip__x:hover{ color:var(--text-2); }
.sx-chip__x svg{ width:12px; height:12px; stroke-width:2.5; }
.sx-ven{ display:flex; align-items:center; gap:6px; height:32px; padding:0 8px 0 12px; border-radius:var(--r-full); background:rgba(30,79,168,.22); border:1px solid rgba(78,147,255,.3); font-size:var(--fs-xs); font-weight:700; color:var(--text); transition:background-color var(--t-color); }
.sx-ven:hover, .sx-ven.is-active{ background:rgba(30,79,168,.4); }
.sx-ven small{ font-size:var(--fs-sm); font-weight:600; color:var(--text-4); font-variant-numeric:tabular-nums; }
.sx-ven svg{ width:14px; height:14px; color:var(--text-4); }

/* 게임 줄 — 2열 */
.sx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.sx-game{ display:flex; align-items:center; gap:12px; min-width:0; height:60px; padding:0 8px; border-radius:var(--r); transition:background-color var(--t-color); }
.sx-game:hover, .sx-game.is-active{ background:var(--surface-2); }
.sx-game__rank{ flex:none; width:16px; text-align:center; font-size:var(--fs-md); font-weight:900; font-style:italic; color:var(--text-5); font-variant-numeric:tabular-nums; }
.sx-game:nth-child(-n+3) .sx-game__rank{ color:#8FB6FF; }
.sx-game__img{ flex:none; width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--surface-2); }
/* 그림이 없는 게임 — 이름 첫 글자 */
.sx-game__img--none{ display:grid; place-items:center; font-size:var(--fs-md); font-weight:900; color:var(--text-4); }
.sx-game__txt{ display:grid; min-width:0; }
.sx-game__txt b{ font-size:var(--fs-base); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-game__txt small{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--text-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-game__txt small mark{ color:var(--text-3); box-shadow:none; }
.sx-game mark{ background:none; color:#8FB6FF; box-shadow:inset 0 -2px 0 rgba(143,182,255,.45); }

/* 전체 결과 보기 */
.sx .sx-all{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:44px; margin:4px 0 12px; border-radius:var(--r); background:var(--surface-2); font-size:var(--fs-xs); font-weight:700; color:var(--text-2); transition:background-color var(--t-color); }
.sx .sx-all:hover, .sx .sx-all.is-active{ background:var(--surface-3); color:var(--text); }
.sx-all b{ color:var(--text); font-variant-numeric:tabular-nums; }
.sx-all svg{ width:14px; height:14px; }

/* 결과 없음 */
.sx-none{ display:grid; gap:4px; justify-items:center; padding:28px 16px 22px; text-align:center; }
.sx-none b{ font-size:var(--fs-md); color:var(--text); }
.sx-none span{ font-size:var(--fs-xs); color:var(--text-5); }

/* 아래 안내 줄 */
.sx-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px -12px 0 !important; padding:12px 20px; border-top:1px solid rgba(42,58,87,.55); font-size:var(--fs-sm); color:var(--text-6); }
.sx-foot em{ font-style:normal; color:var(--text-4); }
.sx-keys{ display:flex; align-items:center; gap:4px; white-space:nowrap; line-height:20px; }
/* ★ 키 글자는 칸 <세로 가운데> (레드 2026-09-27 「수직중앙정렬」) — 상속 줄 높이 때문에 글자가 아래로 처졌다 */
.sx kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:5px; border:1px solid var(--line); font:inherit; font-size:10px; line-height:1; font-weight:700; color:var(--text-4); background:none; vertical-align:middle; }
.sx kbd + kbd{ margin-left:-1px; }
.sx-keys kbd:nth-child(2){ margin-right:4px; }
.sx-keys kbd:nth-child(3){ margin-left:6px; margin-right:2px; }

@keyframes sxFade{ from{ opacity:0; } }
@keyframes sxDrop{ from{ opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce){ .sx-back, .sx-panel{ animation:none; } }

/* 휴대폰 */
@media (max-width:767px){
  .sx-pc{ display:none !important; }
  .sx-mo{ display:inline; }
  .sx-panel{ width:100%; max-height:none; height:100dvh; margin:0; border-radius:0; border:0; }
  .sx-form{ height:60px; padding:0 8px 0 16px; }
  .sx-form__input{ font-size:var(--fs-md); }
  .sx .sx-form__close{ height:36px; padding:0 8px; border:0; font-size:var(--fs-base); font-weight:600; letter-spacing:0; color:var(--text-2); }
  .sx-body{ padding:4px 8px 0; }
  .sx-grid{ grid-template-columns:1fr; }
  .sx-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -8px; padding:0 16px; scrollbar-width:none; }
  .sx-chips > li{ flex:none; }
  .sx-foot{ margin:6px -8px 0 !important; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* ★★ 휴대폰도 <모달>로 띄운다 — 전체 화면을 덮지 않는다 (레드 2026-09-27 「검색버튼이 모바일전체화면으로뜨는데 모달로 띄우자」).
     헤더 바로 아래에 좌우 12px 을 남긴 둥근 창. 높이는 <내용만큼>, 길어지면 하단 메뉴 위에서 멈추고 안에서 구른다.
     뒤 화면은 흐린 덮개 너머로 보인다 — 어디서 열었는지 잃지 않는다. */
@media (max-width:767px){
  .sx-panel{
    width:calc(100% - 24px); height:auto;
    max-height:calc(100dvh - var(--header-h, 56px) - var(--tabbar-h, 56px) - 36px);
    margin:calc(var(--header-h, 56px) + 12px) auto 0;
    border-radius:18px; border:1px solid rgba(143,182,255,.16);
  }
  .sx-foot{ padding-bottom:12px; }
}