/* =========================================================
   NEOWAVE index.html — CSS (organized)
   - 섹션 정리 + 중복 제거 (동작/디자인 유지)
========================================================= */

/* ---------- Global reset ---------- */
*{ box-sizing:border-box; }
html, body{
  height:100%;
  margin:0;
  overflow:hidden; /* ✅ 바깥쪽(페이지) 스크롤 제거 */
}
body{ -webkit-font-smoothing:antialiased; }

/* ---------- Design tokens ---------- */
:root{
  --col-right: 815px;   /* 오른쪽 패널 폭 */
  --top-h: 96px;        /* 상단바 높이(참고용) */
  --mini-h: 60px;       /* 하단 미니플레이어 높이 */
  --top-actual: var(--top-h); /* JS로 실제 top 높이 주입 */

  /* Theme defaults (누락 방지) */
  --bg: rgba(6,12,22,.72);
  --panel: rgba(10,16,28,.62);
  --line: rgba(255,255,255,.14);
  --ink: #eaf6ff;
  --muted: rgba(234,246,255,.72);
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --brand: #38bdf8;
  --brand-2: #60a5fa;
}

/* ---------- App frame ---------- */
.shell{
  position:relative;
  min-height:calc(100vh - var(--mini-h));
  padding-bottom:var(--mini-h);
}

/* ---------- Top bar ---------- */
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--bg);
}

.top-inner{
  max-width:2000px;
  margin:0 auto;
  padding:16px 20px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--col-right);
  gap:10px;
  overflow-x:hidden;
}

/* Left top row: logo / search / creator */
.row1{ display:flex; align-items:center; gap:10px; }

.logo{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px; }
.logo-badge{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#002328;
  box-shadow:0 6px 18px rgba(96,165,250,.25);
}
.ghost{ opacity:.65; }

.search{ display:flex; align-items:center; gap:6px; margin-left:12px; width:620px; }
.search input{
  flex:1;
  height:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  padding:0 12px;
}

.creator-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:12px;
  width:620px;
  min-height:36px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--brand);
  font-weight:900;
  font-size:22px;
  letter-spacing:.5px;
}

/* ---------- Buttons ---------- */
.btn{
  display:grid;
  place-items:center;
  height:36px;
  min-width:90px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#002328;
  font-weight:800;
  cursor:pointer;
}
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ✅ active(선택됨) — 업로드/홈 버튼 등 공통 */
.btn.active{
  border-color:rgba(255,255,255,.65) !important;
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:2px;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 0 16px rgba(56,189,248,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.nickbtn, .iconbtn{
  display:grid;
  place-items:center;
  height:28px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.nickbtn:hover, .iconbtn:hover{ background:rgba(255,255,255,.14); }

/* ---------------------------------------------------------
   Wallet icon size clamp (지갑 아이콘 과대/잘림 방지)
   - 버튼 내부에 들어가는 PNG가 원본 크기 그대로 렌더되면
     "엄청 크고 짤린" 현상이 발생함 → 여기서 강제 축소
--------------------------------------------------------- */

/* 관리번호(지갑) 아이콘 버튼은 정사각형으로 고정 */
#walletBox #btnPeek.iconbtn{
  width:30px;
  min-width:30px;
  padding:0;
  overflow:hidden;
}

/* 지갑 아이콘(PNG) 크기 고정 */
#walletBox #btnPeek img.mm-icon{
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  object-fit:contain;
  display:block;
}

/* ---------- Right top (capsule) ---------- */
.row1-right{ display:flex; align-items:flex-start; justify-content:flex-end; gap:10px; }

/* 캡슐(2줄) */
.topcapsule{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  border-radius:12px;
  padding:14px 10px 10px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  max-width:100%;
}
.topcapsule .caprow{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.topcapsule .caprow.row1,
.topcapsule .caprow.row2{ justify-content:flex-end; }
.topcapsule .caprow.row1 .walletbox{ margin-right:auto; } /* 관리번호 왼쪽 */
.topcapsule .caprow.row2 .nickbox{ margin-right:auto; }   /* 닉네임 왼쪽 */

/* 구분선(현재는 숨김 유지) */
.topcapsule .cap-sep{
  width:1px;
  height:28px;
  background:var(--line);
  opacity:.7;
  flex:0 0 auto;
  display:none;
}

/* 캡슐 내부 요소는 '외곽'만 topcapsule이 담당 */
.topcapsule .walletbox,
.topcapsule .nickbox,
.topcapsule .actbar,
.topcapsule .remote,
.topcapsule .login{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
}

/* ---------- Wallet / Nick base ---------- */
.nickbox, .walletbox{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  white-space:nowrap;
}

/* ✅ 로그아웃 상태에서도 자리 유지(숨김 금지) */
.nickbox.is-empty, .walletbox.is-empty{
  opacity:.55;
  pointer-events:none;
}

.nickbox strong{
  min-width:10ch;
  max-width:16ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 관리번호 주소 마스킹 */
.addr-wrap{
  position:relative;
  width:44ch;
  height:1.2em;
  display:inline-block;
  vertical-align:middle;
  min-width:0;
}
.addr-full{
  white-space:nowrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  display:inline-block;
  max-width:44ch;
  overflow:hidden;
  text-overflow:ellipsis;
}
.addr-mask{
  position:absolute;
  top:0; bottom:0;
  left:7ch; right:0;
  border-radius:4px;
  background:rgba(13,18,27,.95);
}
.walletbox.peek .addr-mask{ display:none; }

/* 닉네임 캡슐 폭(왼쪽으로 더 확장되게) */
.topcapsule .nickbox{ min-width:220px; }

/* ---------- Remote buttons ---------- */
.remote .rbtn{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  cursor:pointer;
  position:relative;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.remote .rbtn.active{
  border-color:var(--brand-2);
  box-shadow:0 0 0 2px rgba(96,165,250,.35),
             inset 0 0 0 1px var(--brand-2);
}

/* 반복 배지 */
#rRepeat[data-mode="one"]::after,
#rRepeat[data-mode="all"]::after{
  content:attr(data-badge);
  position:absolute;
  right:-6px;
  top:-6px;
  font-size:11px;
  font-weight:900;
  padding:4px 6px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#002328;
  border:1px solid var(--line);
}

/* ---------- ETH box ---------- */
.ethbox{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;

  height:90px; /* 기존 최종값 유지 */
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  background:rgba(255,255,255,.06);
  white-space:nowrap;

  min-width:280px;
  margin-left:14px;
}
.ethrow{ display:flex; align-items:center; justify-content:flex-start; gap:10px; line-height:1; }
.ethrow.ts{ line-height:1.05; }

.ethbox .ts{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric:tabular-nums;
  font-weight:900;
  font-size:12px;
  opacity:.80;
}
.ethrow .main, .ethrow .sub{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.ethbox .k{
  opacity:.80;
  font-weight:950;
  font-size:13px;
  letter-spacing:.1px;
  display:inline-block;
  min-width:44px;
}
.ethbox .eq{ opacity:.55; font-weight:950; font-size:13px; }
.ethbox .v{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric:tabular-nums;
  font-weight:950;
  font-size:16px;
}
.ethrow.top .v{ font-size:17px; }
.ethrow.top .main{ margin-left:-6px; }

.ethbox .chg{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric:tabular-nums;
  font-weight:900;
  font-size:13px;
  opacity:.9;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
  min-width:78px;
  flex:0 0 auto;
}
.ethbox.loading .v,
.ethbox.loading .chg{ opacity:.55; }

/* 요청사항: 1 USD = ETH 변동폭은 숨김 */
#usdEthChg{ display:none !important; }

/* 화살표 색상 */
.ethbox .chg.up .arr{ color:#ff3b30; }
.ethbox .chg.down .arr{ color:#3b82f6; }
.ethbox .chg.flat .arr{ opacity:.7; }
.ethbox .chg .num{ font-weight:950; }

/* ---------- Main 2-column layout ---------- */
.shell > .main{
  max-width:2200px;
  margin:12px auto 0;
  padding:0 4px;

  display:grid;
  grid-template-columns:1fr var(--col-right);
  gap:14px;

  /* ✅ wheel-only feel: 화면 안에 고정 */
  height:calc(100vh - var(--mini-h) - var(--top-actual) - 12px);
  overflow:hidden;
}

.cards-wrap{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;

  /* ✅ 높이 고정(iframe 스크롤) */
  height:100%;
  min-height:0;
}

.view-tabs{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }

.placeholder{
  margin:auto;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:24px;
}

.right{
  border-radius:18px;
  overflow:hidden;
  background:var(--panel);
  position:relative;

  /* ✅ 높이 고정 */
  height:100%;
  min-height:0;
}

/* 오디오 영역 */
.audio-wrapper{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:18px;
}
.audio-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ---------- Bottom mini player ---------- */
.mini-holder{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--mini-h);
  z-index:2147483647;
  transform:translateZ(0);
  will-change:transform;
}
.mini-holder iframe{ width:100%; height:100%; border:0; }

/* ---------- Left embed iframe stability ---------- */
#leftContainer{ overflow:auto; } /* ✅ left panel scrolls (wheel ok) */

#leftContainer.embed{ padding:0; scrollbar-gutter:stable; }
#leftContainer.embed > #leftFrame{
  flex:1 1 auto;
  width:100%;
  height:100%;
  min-height:60vh;
  border:0;
  display:block;
}

/* ---------- Scrollbar hidden (wheel works) ---------- */
#leftContainer, .right{
  scrollbar-width:none;    /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}
#leftContainer::-webkit-scrollbar,
.right::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ---------- Utils ---------- */
.hide{ display:none !important; }

/* --- Safety: 상단 캡슐/로그인 영역에서 불필요한 스크롤바 방지 --- */
.row1-right, .topcapsule, .topcapsule *{ overflow:visible !important; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .top-inner{ grid-template-columns:1fr; }
  .row1-right{ justify-content:flex-start; }
}

@media (max-width:1100px){
  .topcapsule{ padding-top:10px; }
  .topcapsule .caprow{ flex-wrap:wrap; }
  .topcapsule .caprow.row2 .nickbox{ margin-right:0; }
}


/* =========================================================
   [NEOWAVE FIX] Wallet icon HARD clamp (override everything)
   - 어떤 CSS/skin 이 와도 아이콘이 커지거나 잘리지 않게
   ========================================================= */
#walletBox #btnPeek{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;          /* 28px에서 32로(짤림 여유) */
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  line-height:0 !important;
}
/* 클래스가 mm-icon 이든 아니든 전부 잡는다 */
#walletBox #btnPeek img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:contain !important;
  display:block !important;
}
/* 혹시 SVG로 들어오는 경우 */
#walletBox #btnPeek svg{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:block !important;
}
/* skin.css에서 img에 transform/scale 걸었을 때 대비 */
#walletBox #btnPeek img, #walletBox #btnPeek svg{
  transform:none !important;
}

/* [NW_KILL_CREATOR_BANNER] 홈 상단 '등록자박스' 배너 비활성화 */
#creatorBanner, .creator-banner{ display:none !important; }