/* ══════════════════════════════════════════════════════════════════
   ★★ 닷컴스튜디오 상단 띠 — **모든 화면이 이 파일 하나를 쓴다** (2026-09-24)
   큰손닷컴 · 스튜디오(시청자·스트리머) 전부. 고칠 땐 여기만 고친다.
     윗줄  [닷컴 토글: 👑 큰손 · ✦ 시그 · 👕 여캠] 수집 상태 · 검색 · 큰손 탐지기 · 로그인 · 스튜디오로 가기
     아랫줄 Live 전광판
   ⚠️ 이 파일의 규칙은 전부 `.gbar` 아래에만 건다 — 화면마다 있는 같은 이름(.meta·.hsearch)과 싸우지 않게.
   ══════════════════════════════════════════════════════════════════ */
.gbar{--ga:#E8833A;background:#0F0D0B;border-bottom:1px solid #ffffff12;position:relative;z-index:80;
  font:600 12.5px/1 Pretendard,-apple-system,system-ui,"Malgun Gothic",sans-serif;color:#E8E1D8}
.gbar *{box-sizing:border-box}
.gbar .gb{display:flex;align-items:center;gap:2px;height:44px}
.gbar .gsp{flex:1}

/* ── 닷컴 토글 — 아이콘 셋을 한 덩어리로(사용자: 「토글 버튼 느낌으로 합쳐줘」) ── */
.gbar .gprod{display:flex;align-items:center;gap:2px;background:#ffffff10;border-radius:999px;padding:3px;flex:none}
.gbar .gprod a,.gbar .gprod span{width:34px;height:28px;border-radius:999px;display:grid;place-items:center;color:#9A9087;text-decoration:none}
.gbar .gprod svg{width:17px;height:17px;display:block}
.gbar .gprod a:hover{color:#fff}
.gbar .gprod .on{background:var(--ga);color:#fff}
.gbar .gprod .soon{color:#5A524B;cursor:default}

/* ── 수집 상태 ── */
.gbar .meta{font-size:10.5px;line-height:1.35;color:#8C8279;font-weight:500;max-width:230px;padding:0 4px 0 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ── 검색 ── */
.gbar .hsearch{display:flex;gap:6px;align-items:center;width:min(360px,30vw);flex:none}
.gbar .hsearch input{flex:1;min-width:0;appearance:none;border:1px solid #ffffff2e;background:#ffffff14;color:#F2EDE6;
  border-radius:999px;padding:7px 14px;font:500 12.5px/1.2 Pretendard,system-ui,sans-serif}
.gbar .hsearch input::placeholder{color:#8C8279}
.gbar .hsearch input:focus{outline:none;border-color:var(--ga);background:#ffffff1f}
.gbar .hsearch .sclr{appearance:none;border:1px solid #ffffff2e;background:transparent;color:#C9C0B6;border-radius:999px;
  padding:6px 10px;font:600 11.5px/1 Pretendard,system-ui,sans-serif;cursor:pointer;white-space:nowrap}

/* ── 테마 토글(기본 ☀ · 나이트 ☾) ── */
.gbar .gtheme{display:flex;background:#ffffff10;border-radius:999px;padding:2px;flex:none;margin-right:4px}
.gbar .gtheme button{appearance:none;border:0;background:none;cursor:pointer;width:30px;height:26px;border-radius:999px;display:grid;place-items:center;color:#8C8279}
.gbar .gtheme button:hover{color:#fff}
.gbar .gtheme button.on{background:#ffffff26;color:#fff}
.gbar .gtheme svg{width:15px;height:15px;display:block}

/* ── 버튼 둘: 큰손 탐지기(진한 주황) · 스튜디오로 가기(같은 색 계열, 한 톤 옅게) ── */
.gbar .detbtn{appearance:none;border:0;cursor:pointer;border-radius:8px;padding:7px 13px;margin:0 6px 0 4px;flex:none;
  font:700 12px/1 Pretendard,system-ui,sans-serif;background:var(--ga);color:#fff;white-space:nowrap}
.gbar .detbtn:hover{filter:brightness(1.07)}

/* ── 로그인 정보 ── */
.gbar .gme{display:flex;align-items:center;gap:7px;color:#C8BEB2;padding:0 8px;font-weight:600;white-space:nowrap}
.gbar .gme .av{width:22px;height:22px;border-radius:50%;background:var(--ga);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.gbar .gme b{color:#fff}
.gbar .gme .id{color:#7C736A;font-weight:500;font-size:11.5px}
.gbar .gme .out,.gbar .gme a{border:0;background:none;color:#7C736A;cursor:pointer;font:inherit;font-size:11.5px;padding:0;text-decoration:none}
.gbar .gme .out:hover,.gbar .gme a:hover{color:#fff}
.gbar .gme select{font:inherit;font-size:12px;height:28px;padding:0 6px;border:1px solid #ffffff26;border-radius:7px;background:#1E1A17;color:#E8E1D8;max-width:230px}

/* ── 스튜디오 — 평소엔 「스튜디오로 가기」 버튼, 마우스를 올리면 [시청자|스트리머]만 ──
   ⚠️ 버튼과 토글은 폭이 다르다 → 칸 폭을 미리 잡고 왼쪽에 붙인다(올려도 옆이 들썩이지 않는다) */
.gbar .sbox{display:flex;align-items:center;justify-content:flex-start;height:44px;min-width:158px;flex:none}
.gbar .gst{appearance:none;cursor:pointer;border-radius:8px;padding:7px 12px;white-space:nowrap;
  font:700 12px/1 Pretendard,system-ui,sans-serif;background:#E8833A2b;color:#F4B684;border:1px solid #E8833A73}
.gbar .gst:hover{background:#E8833A40;color:#fff}
.gbar .gst .arr{margin-left:5px;font-size:14px;line-height:1;opacity:.75}
.gbar .stog{display:none;background:#ffffff10;border-radius:999px;padding:2px}
.gbar .sbox.cur .gst,.gbar .sbox.open .gst{display:none}
.gbar .sbox.cur .stog,.gbar .sbox.open .stog{display:flex}
@media(hover:hover){.gbar .sbox:hover .gst{display:none}.gbar .sbox:hover .stog{display:flex}}
.gbar .stog a{color:#B5AAA0;text-decoration:none;font-weight:700;font-size:12px;padding:7px 13px;border-radius:999px;white-space:nowrap}
.gbar .stog a:hover{color:#fff}
.gbar .stog a.on{background:var(--ga);color:#fff}

/* ── 아랫줄: Live 전광판 — 화면 끝까지 닿는 옅은 경계 + 살짝 다른 바탕 ── */
.gbar .gtickrow{background:#16130F;border-top:1px solid #ffffff17;box-shadow:inset 0 -1px 0 #ffffff0d}
.gbar .tickbar{display:flex;align-items:center;gap:10px;margin:0;padding:6px 0 7px;background:transparent;border:0}
.gbar .tlive{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11px;font-weight:700;color:#C8BEB2;white-space:nowrap}
.gbar .tlive i{width:6px;height:6px;border-radius:50%;background:#E5332A;flex:none;animation:gbpulse 2s ease-in-out infinite}
@keyframes gbpulse{0%,100%{opacity:1}50%{opacity:.25}}
.gbar .tick{flex:1 1 0;min-width:0;overflow:hidden;position:relative;height:17px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.gbar .tick .row{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform}
.gbar .tick .it{display:inline-block;font-size:11px;line-height:17px;color:#7C736A;font-weight:500;padding-right:26px}
.gbar .tick .it b{color:#D9D0C6;font-weight:700}
.gbar .tick .it u{text-decoration:none;color:var(--ga);font-weight:800;font-variant-numeric:tabular-nums}

@media(max-width:1100px){.gbar .meta{display:none}.gbar .hsearch{width:auto;flex:1 1 160px}}
@media(max-width:720px){.gbar .gb{flex-wrap:wrap;height:auto;padding:5px 0;gap:6px}.gbar .hsearch{order:9;flex:1 1 100%}
  .gbar .gme .id{display:none}}

/* ── 10-07 밤 — 앞면/뒷면 버튼(gbar.js 가 .sbox 를 .sbox2 로 바꿔 끼운다 · 옛 시청자|스트리머 토글은 아이콘이 대신한다) ── */
.gbar .sbox2{display:flex;align-items:center;height:44px;min-width:158px;flex:none}
.gbar .sbox2 .gst{display:inline-flex;align-items:center;text-decoration:none}
.gbar .sbox2 .gst.back{background:#E8833A;color:#fff;border-color:#E8833A}
.gbar .sbox2 .gst.back .arr{margin:0 5px 0 0}
.gbar .sbox2 .gst.back:hover{background:#F0913F}
@media(max-width:720px){.gbar .sbox2{min-width:0}}
/* 뒷면 — 지금 닷컴 아이콘은 테두리만(홈이 아니라 그 닷컴의 내 페이지에 있다는 표시) */
.gbar .gprod .onb{color:#F4B684;box-shadow:inset 0 0 0 1.5px #E8833A}

/* ── 10-08 검색 결과 상자(스트리머·큰손 → 상세 페이지) ── */
.gbar .hsearch{position:relative}
.gbar .gsr{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#1E1A17;border:1px solid #ffffff22;border-radius:12px;padding:6px;z-index:120;box-shadow:0 12px 32px #0008;max-height:70vh;overflow:auto}
.gbar .gsr .h{font-size:11px;font-weight:700;color:#8C8279;padding:6px 8px 2px}
.gbar .gsr .it{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:8px;color:#F2EDE6;text-decoration:none;font-size:13px;min-width:0}
.gbar .gsr .it i{width:7px;height:7px;border-radius:50%;flex:none}
.gbar .gsr .it b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gbar .gsr .it .lv{flex:none;font-size:9px;font-weight:800;color:#fff;background:#E5332A;border-radius:3px;padding:0 4px;line-height:14px}
.gbar .gsr .it .sub{font-size:11.5px;color:#8C8279;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gbar .gsr .it .w{margin-left:auto;flex:none;font-size:11.5px;color:#C8BEB2}
.gbar .gsr .it.on,.gbar .gsr .it:hover{background:#ffffff14}
.gbar .gsr .none{padding:10px;color:#8C8279;font-size:12.5px;text-align:center}
/* 10-09 전체 순위 버튼(시험) — 큰손 탐지기 옆 · 테두리만 */
.gbar .rankbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid #E8833A;color:#E8833A;background:transparent;border-radius:8px;padding:6px 12px;margin:0 6px 0 0;flex:none;font:700 12px/1 Pretendard,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.gbar .rankbtn:hover{background:#E8833A1a}