/* ============================================================
   채널 임베드 테마 — game_hub 스킨(.gh-*)을 zzan_channel 레이아웃 팔레트에 연동.
   .gh-light(스킨 내장 라이트) 기반 + 아래에서 중립색/포인트색을 채널 토큰으로 매핑.
   skin.scss 뒤에 로드되어야 오버라이드가 적용됨(@load 순서 skin→channel).
   ============================================================ */
.gh-app.gh-embed {
	/* 중립색 → 채널 토큰 (zzan_channel :root 변수 상속, 폴백 병기) */
	--gh-fg-rgb: 21, 23, 28;
	--gh-bg: transparent;
	--gh-ink: var(--text, #15171c);
	--gh-muted: var(--sub, #5d646f);
	--gh-glass: var(--surface, #ffffff);
	--gh-glass2: var(--surface-2, #f8f9fb);
	--gh-pop-bg: var(--surface, #ffffff);
	--gh-bar-bg: var(--surface, #ffffff);
	--gh-grad-hi: var(--text, #15171c);

	/* 포인트색 → 채널 accent (솔리드는 채널값 추종, 반투명 틴트는 기본 accent RGB) */
	--gh-accent: var(--accent, #ee3b34);
	--gh-accent-rgb: 238, 59, 52;
	--gh-accent-grad: var(--gold, #f4a821);
	--gh-accent-dark: #c93a16;
	--gh-card-shadow: none;

	/* 셸 전용 여백 제거 + 채널 배경/폰트 상속 */
	padding-top: 0;
	min-height: 0;
	background: transparent;
	color: var(--text, #15171c);
	font-family: inherit;
	/* 앱셸 전용 overflow-x:hidden 해제 — 카드 그림자가 콘텐츠 칸 경계에서 잘리지 않도록 */
	overflow: visible;
}

/* 앱셸 없이도 뷰 표시 + 채널 콘텐츠 칸(.cmain) 폭을 그대로 사용 */
.gh-app.gh-embed .gh-view { display: block; }
.gh-app.gh-embed .gh-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ============================================================
   채널 스타일 리디자인: 흰 카드 + 얇은 회색 테두리 + 그림자/블러 제거 + 여백 최소화.
   색은 전부 포인트컬러(--accent) 기반(skin.scss 의 블루/핑크는 var(--gh-accent)로 치환됨).
   ============================================================ */

/* 그림자·블러 전면 제거 (채널은 border 기반 플랫 디자인) */
.gh-app.gh-embed * {
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	text-shadow: none !important;
}

/* 카드 = 흰 배경 + 얇은 회색 테두리 + 작은 라운드 + 좁은 패딩 */
.gh-app.gh-embed .gh-card {
	background: var(--surface, #fff);
	border: 1px solid var(--border, #e8eaef);
	border-radius: var(--r-sm, 11px);
	padding: 14px 16px;
	margin-bottom: 12px;
}

/* 표·요약·목록 등 표면 요소도 동일 톤(테두리 채널색) */
.gh-app.gh-embed .gh-rank-table,
.gh-app.gh-embed .gh-guild-summary,
.gh-app.gh-embed .gh-guild-card,
.gh-app.gh-embed .gh-grank,
.gh-app.gh-embed .gh-cp,
.gh-app.gh-embed .gh-symbol,
.gh-app.gh-embed .gh-set,
.gh-app.gh-embed .gh-home-col,
.gh-app.gh-embed .gh-equip,
.gh-app.gh-embed .gh-skill {
	border-color: var(--border, #e8eaef);
	border-radius: var(--r-sm, 11px);
}

/* 여백 최소화 — 히어로/뷰 상하 패딩 축소, 카드 간격 축소 */
.gh-app.gh-embed .gh-view-hero { padding: 4px 8px 16px; }
.gh-app.gh-embed .gh-view { animation: none; }
.gh-app.gh-embed .gh-card + .gh-card { margin-top: 0; }

/* 반투명 회색 라인들을 채널 border 로 통일 */
.gh-app.gh-embed .gh-view {
	--gh-line: var(--border, #e8eaef);
}

/* ===== z-index 정리: 아이템 툴팁을 탭 뱃지·채널 GNB(.chnav z-index:40) 위로 =====
   문제구조: 툴팁이 든 활성패널(.gh-ctab-panel)과 탭 뱃지(.gh-ctabs 내 .gh-ctab-badge)가 형제.
   탭줄이 스태킹 컨텍스트가 아니라 뱃지(z양수)가 위로 샘.
   해결: (1) 탭줄을 컨텍스트로 가두고 (2) 활성 패널을 GNB(40) 위(50)로 올림 (3) 트리거 셀을 패널 내 위로. */
.gh-app.gh-embed .gh-main { z-index: auto; }
.gh-app.gh-embed .gh-eq2:hover,
.gh-app.gh-embed .gh-hastip:hover { z-index: 100; }
.gh-app.gh-embed .gh-eq__tip,
.gh-app.gh-embed .gh-tt,
.gh-app.gh-embed .gh-tip,
.gh-app.gh-embed .gh-vtip { z-index: 120 !important; }

/* ===== 활성(선택) 탭: 포인트색 배경 위 흰 글씨 ===== */
.gh-app.gh-embed .gh-ctab.is-active,
.gh-app.gh-embed .gh-tl-mtab.is-active { color: #fff !important; }

/* ===== 능력치 탭: 좌측 스탯 컬럼 ~20% 축소 → 우측(어빌리티/하이퍼스탯) 확대 ===== */
.gh-app.gh-embed .gh-char-grid { grid-template-columns: minmax(210px, 280px) 1fr; }

/* ===== '사용중' 뱃지: 포인트색 배경 위 검정 → 흰 글씨(가독성) ===== */
.gh-app.gh-embed .gh-cur-badge,
.gh-app.gh-embed .gh-preset-tab__cur { color: #fff !important; }

/* ===== 월드(서버) 아이콘: 채널 레이아웃 .zzan img{display:block} 때문에 줄바꿈됨 → 인라인 복원 (랭킹/라이브/길드/캐릭터 등 전 위치) ===== */
.gh-app.gh-embed .gh-world-icon,
.gh-app.gh-embed .gh-cwc-world { display: inline-block; }