/* ═══════════════════════════════════════════════════════════
 * 챗봇 임베드 전용 스타일
 * ─ 사용처: /main/qna 등, 페이지 내부 카드형 임베드
 * ─ 기본 의존: chatbot.css, consultation.css 먼저 로드
 * ─ 원칙: 기존 chat-panel의 fixed/overlay 스타일을 모두 reset
 * ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
 * QNA 페이지 중앙 정렬 래퍼
 * ────────────────────────────────────────── */
.qna-chatbot-embed {
	padding: 120px 20px 40px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* ──────────────────────────────────────────
 * 임베드 컨테이너 (1200×750 카드)
 * ────────────────────────────────────────── */
.cbe-wrapper {
	width: 1200px;
	height: 750px;
	max-width: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(27, 20, 100, .12);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
	color: #1F2937;
}

/* ──────────────────────────────────────────
 * 통합 상단 헤더 (사이드바+메인 위를 가로지름)
 * ────────────────────────────────────────── */
@keyframes cbeTopGradient {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.cbe-top-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 20px;
	background: linear-gradient(-45deg, #1B1464, #3B2FA0, #5B4FCF, #8B5CF6, #3B2FA0, #1B1464);
	background-size: 300% 300%;
	animation: cbeTopGradient 8s ease infinite;
	position: relative;
	overflow: hidden;
	border-radius: 18px 18px 0 0;
}

.cbe-top-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
	pointer-events: none;
}

.cbe-top-left {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.cbe-top-logo-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	backdrop-filter: blur(4px);
	flex-shrink: 0;
}

.cbe-top-title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.3px;
}

.cbe-top-badge {
	font-size: 9px;
	font-weight: 600;
	color: rgba(255,255,255,.55);
	background: rgba(255,255,255,.12);
	padding: 3px 8px;
	border-radius: 8px;
	letter-spacing: .5px;
}

/* ──────────────────────────────────────────
 * 본문 (사이드바 + 메인 컨텐츠 가로 배치)
 * ────────────────────────────────────────── */
.cbe-body {
	flex: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

/* ──────────────────────────────────────────
 * 사이드바
 * ────────────────────────────────────────── */
.cbe-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: #ECEAF2;
	border-right: 1px solid #DEDCE6;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* cbe-sidebar-header는 통합 헤더로 이동됨 — 호환용 스타일 유지 (미사용) */
.cbe-sidebar-header {
	display: none;
}

.cbe-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cbe-sidebar-logo-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, #3B2FA0 0%, #8B5CF6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 4px 10px rgba(59, 47, 160, .24);
}

.cbe-sidebar-logo-text {
	font-size: 13px;
	font-weight: 700;
	color: #1F2937;
	line-height: 1.3;
	display: flex;
	flex-direction: column;
}

.cbe-sidebar-logo-sub {
	font-size: 10px;
	font-weight: 500;
	color: #9CA3AF;
	margin-top: 2px;
}

.cbe-sidebar-nav {
	flex: 1;
	overflow-y: auto;
	padding: 14px 10px 14px;
}

.cbe-sidebar-nav::-webkit-scrollbar {
	width: 3px;
}

.cbe-sidebar-nav::-webkit-scrollbar-thumb {
	background: #D1CEDD;
	border-radius: 3px;
}

.cbe-sidebar-nav::-webkit-scrollbar-track {
	background: transparent;
}

.cbe-sb-section {
	margin-bottom: 14px;
}

.cbe-sb-section-title {
	font-size: 10px;
	font-weight: 700;
	color: #8B85A3;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 6px 12px 6px;
	margin-bottom: 2px;
}

.cbe-sb-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: transparent;
	color: #4A4566;
	font-size: 12.5px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	transition: background .15s, color .15s;
	font-family: inherit;
	line-height: 1.3;
}

.cbe-sb-item:hover {
	background: #E2DFED;
	color: #3B2FA0;
}

.cbe-sb-item.active {
	background: #DDD8EC;
	color: #3B2FA0;
	font-weight: 700;
}

.cbe-sb-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: #3B2FA0;
	border-radius: 0 3px 3px 0;
}

.cbe-sb-icon {
	width: 18px;
	text-align: center;
	font-size: 14px;
	flex-shrink: 0;
}

.cbe-sb-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cbe-sb-hint {
	font-size: 10px;
	font-weight: 600;
	color: #9CA3AF;
	background: #E9E6F4;
	padding: 2px 6px;
	border-radius: 10px;
	flex-shrink: 0;
}

.cbe-sb-item.active .cbe-sb-hint {
	background: #D4CDF0;
	color: #3B2FA0;
}

.cbe-sidebar-footer {
	padding: 12px 18px;
	border-top: 1px solid #DEDCE6;
	font-size: 10px;
	color: #A8A2BB;
	text-align: center;
	flex-shrink: 0;
}

/* ──────────────────────────────────────────
 * 메인 컨텐츠 영역
 * ────────────────────────────────────────── */
.cbe-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	position: relative;
	overflow: hidden;
}

/* ──────────────────────────────────────────
 * 임베드 모드 — chat-panel 완전 리셋
 * 기존 chatbot.css의 fixed/overlay 스타일을 모두 무력화
 * ────────────────────────────────────────── */
.chat-panel.embed-mode {
	position: relative !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	max-width: none !important;
	min-width: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	overflow: hidden !important;
	z-index: auto !important;
}

/* ──────────────────────────────────────────
 * 임베드 헤더 (그라데이션 바)
 * ────────────────────────────────────────── */
@keyframes cbeGradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* 기존 chat-panel 내부 cp-header는 사용하지 않음 — 통합 cbe-top-header로 이동 */
.chat-panel.embed-mode .cp-header {
	display: none !important;
}

.cbe-header-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.2px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cbe-header-badge {
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .28);
	padding: 3px 8px;
	border-radius: 10px;
	letter-spacing: .5px;
}

/* ──────────────────────────────────────────
 * 임베드 모드 내부 공통 리셋
 * ────────────────────────────────────────── */
.chat-panel.embed-mode .chat-body,
.chat-panel.embed-mode #csReserveWrap,
.chat-panel.embed-mode #csManageWrap,
.chat-panel.embed-mode .calc-page {
	flex: 1;
	overflow: hidden;
	min-height: 0;
	border-radius: 0 !important;
}

.chat-panel.embed-mode .chat-bottom,
.chat-panel.embed-mode .calc-fixed-bottom,
.chat-panel.embed-mode .cs-footer {
	border-radius: 0 !important;
}

.chat-panel.embed-mode .calc-page {
	display: flex;
	flex-direction: column;
}

.chat-panel.embed-mode .calc-page.hidden {
	display: none;
}

/* 온보딩/동의/취소 오버레이가 embed 내부로 제한되도록 position 제한 */
.chat-panel.embed-mode .onboard-overlay,
.chat-panel.embed-mode .cs-consent-overlay,
.chat-panel.embed-mode .cs-cancel-overlay {
	position: absolute !important;
	border-radius: 0 !important;
}

/* ──────────────────────────────────────────
 * 2048 게임
 * ────────────────────────────────────────── */
.g48-body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	overflow-y: auto;
}

.g48-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.g48-scores {
	display: flex;
	gap: 8px;
}

.g48-score-box {
	background: #BBADA0;
	color: #fff;
	padding: 6px 14px;
	border-radius: 6px;
	text-align: center;
	min-width: 72px;
}

.g48-score-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	opacity: .9;
	text-transform: uppercase;
}

.g48-score-value {
	font-size: 18px;
	font-weight: 800;
	margin-top: 2px;
	line-height: 1;
}

.g48-rank-btn {
	border: 1.5px solid #F97316;
	background: #fff;
	color: #F97316;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, color .15s;
}

.g48-rank-btn:hover {
	background: #FFF3E6;
}

.g48-grid-wrap {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1;
	margin: 0 auto;
	background: #BBADA0;
	border-radius: 10px;
	padding: 8px;
	box-sizing: border-box;
}

.g48-grid-bg {
	position: absolute;
	inset: 8px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 8px;
}

.g48-cell {
	background: rgba(238, 228, 218, .35);
	border-radius: 6px;
}

.g48-tiles {
	position: absolute;
	inset: 8px;
	pointer-events: none;
}

.g48-tile {
	position: absolute;
	width: calc(25% - 6px);
	height: calc(25% - 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	border-radius: 6px;
	font-size: 28px;
	color: #776E65;
	transition: left .12s ease-in-out, top .12s ease-in-out;
	font-family: 'Montserrat', Pretendard, sans-serif;
}

.g48-t2    { background: #EEE4DA; }
.g48-t4    { background: #EDE0C8; }
.g48-t8    { background: #F2B179; color: #fff; }
.g48-t16   { background: #F59563; color: #fff; }
.g48-t32   { background: #F67C5F; color: #fff; }
.g48-t64   { background: #F65E3B; color: #fff; }
.g48-t128  { background: #EDCF72; color: #fff; font-size: 24px; }
.g48-t256  { background: #EDCC61; color: #fff; font-size: 24px; }
.g48-t512  { background: #EDC850; color: #fff; font-size: 24px; }
.g48-t1024 { background: #EDC53F; color: #fff; font-size: 20px; }
.g48-t2048 { background: #EDC22E; color: #fff; font-size: 20px; }
.g48-tsuper{ background: #3C3A32; color: #fff; font-size: 18px; }

@keyframes g48Appear {
	0%   { transform: scale(0); }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes g48Pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

.g48-tile.g48-new {
	animation: g48Appear .18s ease-out;
}

.g48-tile.g48-merged {
	animation: g48Pop .18s ease-out;
	z-index: 2;
}

.g48-msg {
	position: absolute;
	inset: 8px;
	background: rgba(238, 228, 218, .88);
	border-radius: 6px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 3;
}

.g48-msg.show {
	display: flex;
}

.g48-msg-text {
	font-size: 30px;
	font-weight: 800;
	color: #776E65;
	margin-bottom: 4px;
}

.g48-msg-sub {
	font-size: 12px;
	color: #776E65;
	opacity: .8;
}

.g48-btns {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.g48-btn {
	border: 0;
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: filter .15s, transform .05s;
}

.g48-btn:active {
	transform: scale(.97);
}

.g48-btn-undo {
	background: #BBADA0;
	color: #fff;
}

.g48-btn-undo:hover {
	filter: brightness(1.08);
}

.g48-btn-restart {
	background: #F97316;
	color: #fff;
}

.g48-btn-restart:hover {
	filter: brightness(1.08);
}

.g48-tip {
	text-align: center;
	font-size: 11px;
	color: #9CA3AF;
}

/* 2048 순위 */
.g48-rank-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0;
}

.g48-rank-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #FAFAFB;
	border: 1px solid #EDECF2;
	border-radius: 10px;
}

.g48-rank-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}

.g48-rank-num.r1 { background: linear-gradient(135deg, #FFD700, #FFA500); }
.g48-rank-num.r2 { background: linear-gradient(135deg, #C0C0C0, #9A9A9A); }
.g48-rank-num.r3 { background: linear-gradient(135deg, #CD7F32, #A0522D); }
.g48-rank-num.rn { background: #D1CEDD; color: #6B6480; }

.g48-rank-score {
	font-size: 15px;
	font-weight: 800;
	color: #1F2937;
	flex: 1;
}

.g48-rank-max {
	font-size: 11px;
	font-weight: 700;
	color: #F97316;
	background: #FFF3E6;
	padding: 3px 8px;
	border-radius: 10px;
}

.g48-rank-date {
	font-size: 11px;
	color: #9CA3AF;
}

.g48-rank-empty {
	text-align: center;
	padding: 40px 20px;
	color: #9CA3AF;
	font-size: 13px;
	line-height: 1.8;
}

/* ──────────────────────────────────────────
 * 반응형 — 좁은 화면 대응
 * ────────────────────────────────────────── */
@media (max-width: 1240px) {
	.cbe-wrapper {
		width: 100%;
		max-width: 1200px;
	}
}

@media (max-width: 768px) {
	.qna-chatbot-embed {
		padding: 16px 8px;
	}
	.cbe-wrapper {
		width: 100%;
		height: 680px;
		border-radius: 12px;
	}
	.cbe-sidebar {
		width: 220px;
	}
	.cbe-sb-label {
		font-size: 12px;
	}
}

/* ── 2048 게임오버 닉네임 입력 폼 ── */
.g48-rank-form{
	display:flex; flex-direction:column; gap:10px;
	width:min(280px, 90%); margin-top:14px;
}
.g48-rank-input{
	padding:10px 14px;
	border:1.5px solid #D1CEDD;
	border-radius:8px;
	font-size:14px;
	font-family:inherit;
	outline:none;
	background:#fff;
	text-align:center;
}
.g48-rank-input:focus{ border-color:#3B2FA0; }
.g48-rank-form-btns{ display:flex; gap:8px; }
.g48-rank-form-btns button{
	flex:1; padding:10px;
	border-radius:8px;
	border:none;
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	transition:background .15s;
}
.g48-rank-skip{
	background:#fff; color:#776E65;
	border:1.5px solid #D4C8BE !important;
}
.g48-rank-skip:hover{ background:#f0ebe4; }
.g48-rank-submit{
	background:#3B2FA0; color:#fff;
}
.g48-rank-submit:hover{ background:#4F41C2; }
.g48-rank-submit:disabled{ background:#8B85A3; cursor:wait; }
.g48-rank-form-msg{
	font-size:12px; text-align:center; min-height:16px;
	font-weight:500;
}
.g48-rank-loading{
	text-align:center; color:#8B85A3; padding:40px 0;
	font-size:13px;
}
.g48-rank-nickname{
	display:inline;
	font-weight:600;
}
.g48-rank-meta{
	font-size:11px; color:#8B85A3; margin-top:2px;
}