/*
 * 바이브 코딩 전용 셸 — 이전 사이트 VibeTopBar · VibeProjectPanel · VibeChat · VibeStage · VibeSideResizer · VibeDeployDialog 의 스타일을 옮겼다.
 * resources/views/layouts/vibe.blade.php · vibe/workspace.blade.php 가 읽는다. 선택자는 .vibe-app 안으로 좁힌다.
 * 색·간격·둥글기는 Web Awesome 토큰을 쓴다(테마를 그대로 따른다). 방향이 있는 속성은 논리 속성만(ar·ur).
 */

/* ── 셸 ─────────────────────────────────────── */
body.vibe-shell {
	margin: 0;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font-family: var(--wa-font-family-body);
	overflow: hidden;
}

.vibe-app {
	--side-width: 300px;
	display: grid;
	grid-template-columns: var(--side-width) minmax(0, 1fr);
	block-size: 100dvh;
}

.vibe-app [x-cloak] {
	display: none !important;
}

/* 사이드바 끝을 끄는 동안 미리보기 iframe 이 포인터를 가져가지 않게 */
.vibe-app[data-resizing='true'] iframe {
	pointer-events: none;
}

.vibe-app[data-resizing='true'] {
	cursor: col-resize;
	user-select: none;
}

/* ── 왼쪽 사이드바 ─────────────────────────────── */
.vibe-side {
	position: relative;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	background: var(--wa-color-surface-raised);
	border-inline-end: 1px solid var(--wa-color-surface-border);
}

.vibe-scrim {
	display: none;
}

/* 프로젝트 관리 — 사이드바 맨 위 */
.vibe-proj {
	position: relative;
	padding: 0.5rem;
	border-block-end: 1px solid var(--wa-color-surface-border);
}

.vibe-proj-head {
	display: flex;
	gap: 0.35rem;
}

.vibe-proj-current {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-inline-size: 0;
	padding: 0.5em 0.7em;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: inherit;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	cursor: pointer;
	text-align: start;
}

.vibe-proj-current span {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vibe-proj-current > i:last-child {
	font-size: 0.75em;
	opacity: 0.6;
}

.vibe-proj-new {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.vibe-proj-current:hover,
.vibe-proj-new:hover:not(:disabled) {
	border-color: var(--wa-color-brand-border-loud);
}

.vibe-proj-rename {
	box-sizing: border-box;
	inline-size: 100%;
	margin-block-start: 0.4rem;
	padding: 0.45em 0.7em;
	border: 1px solid var(--wa-color-brand-border-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: inherit;
	font: inherit;
	font-size: 0.86rem;
}

.vibe-proj-menu {
	position: absolute;
	inset-inline: 0.5rem;
	inset-block-start: calc(100% - 0.25rem);
	z-index: 40;
	max-block-size: 60vh;
	overflow-y: auto;
	padding: 0.4rem;
	background: var(--wa-color-surface-raised);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	box-shadow: var(--wa-shadow-l);
}

.vibe-proj-actions {
	display: grid;
	gap: 0.1rem;
	padding-block-end: 0.35rem;
	margin-block-end: 0.35rem;
	border-block-end: 1px solid var(--wa-color-surface-border);
}

.vibe-proj-menu button,
.vibe-proj-menu a {
	display: flex;
	align-items: center;
	gap: 0.55em;
	inline-size: 100%;
	padding: 0.45em 0.6em;
	border: 0;
	border-radius: var(--wa-border-radius-s);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.84rem;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.vibe-proj-menu button:hover,
.vibe-proj-menu a:hover,
.vibe-proj-menu a[aria-current='page'] {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.vibe-proj-menu .vibe-danger {
	color: var(--wa-color-danger-on-quiet);
}

.vibe-proj-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vibe-proj-menu a span {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vibe-proj-menu small {
	font-size: 0.72rem;
	opacity: 0.55;
}

.vibe-proj-label,
.vibe-proj-empty {
	margin: 0.35rem 0.6rem;
	font-size: 0.74rem;
	color: var(--wa-color-text-quiet);
}

.vibe-proj-label {
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 라리아 대화 — 여기 적은 것이 곧 코딩이다 */
.vibe-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
}

.vibe-chat-log {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-block-size: 0;
	overflow-y: auto;
	padding: 0.75rem;
}

.vibe-chat-more {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.9em;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-quiet);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}

.vibe-chat-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	margin: auto;
	padding: 1rem;
	text-align: center;
	color: var(--wa-color-text-quiet);
}

.vibe-chat-empty > i {
	font-size: 1.6rem;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-chat-empty strong {
	color: var(--wa-color-text-normal);
}

.vibe-chat-empty p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
}

.vibe-msg {
	display: flex;
}

.vibe-msg[data-role='user'] {
	justify-content: flex-end;
}

.vibe-bubble {
	max-inline-size: 92%;
	margin: 0;
	padding: 0.55rem 0.75rem;
	border-radius: var(--wa-border-radius-l);
	font-size: 0.9rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.vibe-msg[data-role='user'] .vibe-bubble {
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	border-end-end-radius: 0.25rem;
	white-space: pre-wrap;
}

.vibe-msg[data-role='assistant'] .vibe-bubble {
	background: var(--wa-color-surface-raised);
	border: 1px solid var(--wa-color-surface-border);
	border-end-start-radius: 0.25rem;
}

.vibe-msg[data-failed='true'] .vibe-bubble {
	border-color: var(--wa-color-danger-border-normal, #f3b0b0);
}

.vibe-prose p,
.vibe-prose ul {
	margin: 0 0 0.4em;
}

.vibe-prose > :last-child {
	margin-block-end: 0;
}

.vibe-prose ul {
	padding-inline-start: 1.2em;
}

.vibe-prose code {
	padding: 0.05em 0.3em;
	border-radius: 0.3em;
	background: var(--wa-color-surface-lowered);
	font-family: var(--wa-font-family-code);
	font-size: 0.88em;
}

.vibe-status,
.vibe-applied,
.vibe-notice {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.82rem;
}

.vibe-status {
	color: var(--wa-color-text-quiet);
}

.vibe-prose + .vibe-status,
.vibe-prose + .vibe-status + .vibe-applied,
.vibe-applied {
	margin-block-start: 0.4rem;
}

.vibe-applied {
	color: var(--wa-color-success-on-quiet, #2f7d4f);
}

.vibe-notice {
	color: var(--wa-color-danger-on-quiet);
}

.vibe-chat-input {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	padding: 0.6rem;
	border-block-start: 1px solid var(--wa-color-surface-border);
	background: var(--wa-color-surface-raised);
}

.vibe-chat-input textarea {
	flex: 1;
	box-sizing: border-box;
	min-block-size: 2.25rem;
	max-block-size: 160px;
	padding: 0.5rem 0.65rem;
	resize: none;
	font-size: 0.9rem;
	line-height: 1.5;
}

.vibe-send {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	cursor: pointer;
}

.vibe-send:hover {
	filter: brightness(1.08);
}

/* 멈춤 버튼 */
.vibe-chat-input button.vibe-send[type='button'] {
	background: var(--wa-color-neutral-fill-loud, #6b7280);
}

/* 폭 조절 손잡이 — 사이드바 끝 */
.vibe-resizer {
	position: absolute;
	inset-block: 0;
	inset-inline-end: -4px;
	z-index: 20;
	inline-size: 8px;
	cursor: col-resize;
	touch-action: none;
}

.vibe-resizer::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 3px;
	inline-size: 2px;
	background: transparent;
	transition: background-color 120ms ease;
}

.vibe-resizer:hover::after,
.vibe-resizer:focus-visible::after,
.vibe-app[data-resizing='true'] .vibe-resizer::after {
	background: var(--wa-color-brand-fill-loud);
}

.vibe-resizer:focus-visible {
	outline: none;
}

/* ── 오른쪽 ─────────────────────────────────── */
.vibe-main {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 0;
}

/* 최상단 배너 — PES 로 나가는 문은 늘 같은 자리에 */
.vibe-banner {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	block-size: 40px;
	padding-inline: var(--wa-space-m);
	background: var(--wa-color-neutral-fill-loud, #1f2430);
	color: var(--wa-color-neutral-on-loud, #fff);
	font-size: 0.82rem;
}

.vibe-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.6em;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vibe-back:hover,
.vibe-back:focus-visible {
	background: color-mix(in srgb, currentColor 26%, transparent);
}

/* 오른쪽→왼쪽 언어에서 "뒤로"는 오른쪽이다 — 화살표를 뒤집지 않으면 앞으로 가라는 뜻이 된다 */
[dir='rtl'] .vibe-back i,
[dir='rtl'] .vibe-hint-pill i {
	transform: scaleX(-1);
}

.vibe-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.vibe-spacer,
.vibe-tb-spacer {
	flex: 1;
	min-inline-size: 0.5rem;
}

.vibe-title {
	max-inline-size: 34vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.85;
}

.vibe-save-state {
	font-size: 0.75rem;
	opacity: 0.7;
	white-space: nowrap;
}

.vibe-save-state[data-dirty='true'] {
	opacity: 1;
	color: var(--wa-color-warning-fill-loud, #f0b429);
}

.vibe-chat-toggle {
	display: none;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.7em;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 18%, transparent);
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* 전용 도구 막대 */
.vibe-topbar {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem var(--wa-space-m);
	background: var(--wa-color-surface-raised);
	border-block-end: 1px solid var(--wa-color-surface-border);
	overflow-x: auto;
	scrollbar-width: thin;
}

.vibe-tb {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.7em;
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	color: var(--wa-color-text-normal);
	font: inherit;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.vibe-tb:hover:not(:disabled),
.vibe-tb:focus-visible,
.vibe-tb[aria-expanded='true'] {
	background: var(--wa-color-neutral-fill-quiet, #f1f3f7);
}

.vibe-tb:disabled {
	opacity: 0.45;
	cursor: default;
}

.vibe-tb[data-suggest='true'] {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.vibe-tb.vibe-icon {
	padding-inline: 0.5em;
}

.vibe-seg {
	display: inline-flex;
	padding: 2px;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-neutral-fill-quiet, #f1f3f7);
}

.vibe-seg .vibe-tb[aria-pressed='true'] {
	background: var(--wa-color-surface-default);
	box-shadow: var(--wa-shadow-s);
	font-weight: 600;
}

.vibe-sep {
	inline-size: 1px;
	block-size: 1.4em;
	margin-inline: 0.2rem;
	background: var(--wa-color-surface-border);
}

.vibe-share {
	display: inline-flex;
	align-items: center;
}

.vibe-pub-url {
	max-inline-size: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wa-font-family-code);
	font-size: 0.78rem;
}

/* 막대가 좁을 때(vibeApp.fitTopbar) — 1: 공개 주소 글자 숨김, 2: 라벨도 숨겨 아이콘만. 글자는 화면 읽기 프로그램에 남긴다 */
.vibe-topbar[data-compact='1'] .vibe-pub-url,
.vibe-topbar[data-compact='2'] .vibe-pub-url,
.vibe-topbar[data-compact='2'] .vibe-tb > span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.vibe-topbar[data-compact='2'] .vibe-tb {
	padding-inline: 0.5em;
}

.vibe-topbar[data-compact='2'] .vibe-sep {
	margin-inline: 0;
}

/* 기록 */
.vibe-history {
	position: relative;
}

.vibe-history-menu {
	/* 도구 막대는 가로로 넘치면 스크롤한다(overflow) — 그 안에 가두지 않도록 고정 위치로 띄운다(자리는 버튼 바로 아래) */
	position: fixed;
	z-index: 30;
	inline-size: min(26rem, 80vw);
	max-block-size: 60vh;
	margin-block-start: 0.25rem;
	overflow-y: auto;
	padding: 0.5rem;
	background: var(--wa-color-surface-raised);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	box-shadow: var(--wa-shadow-l);
}

.vibe-history-menu > p {
	margin: 0.2rem 0.4rem 0.5rem;
	font-size: 0.78rem;
	color: var(--wa-color-text-quiet);
}

.vibe-history-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vibe-history-menu button {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	gap: 0.5em;
	inline-size: 100%;
	padding: 0.45em 0.5em;
	border: 0;
	border-radius: var(--wa-border-radius-s);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	text-align: start;
	cursor: pointer;
}

.vibe-history-menu button:hover:not(:disabled) {
	background: var(--wa-color-neutral-fill-quiet, #f1f3f7);
}

.vibe-when {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vibe-source {
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.72rem;
	white-space: nowrap;
}

.vibe-note {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wa-color-text-quiet);
}

/* ── 본문(캔버스) ───────────────────────────── */
.vibe-stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
}

/* ① 시작 화면 */
.vibe-intro {
	flex: 1;
	min-block-size: 0;
	overflow-y: auto;
	padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) 3rem;
}

.vibe-hero {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-inline-size: 46rem;
}

.vibe-kicker {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-hero h1 {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
}

.vibe-lead {
	margin: 0;
	max-inline-size: 40rem;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	line-height: 1.65;
	color: var(--wa-color-text-quiet);
}

/* 이 화살표는 사이드바 챗봇을 가리킨다. RTL 에서는 사이드바가 오른쪽이라 뒤집는다(위의 [dir='rtl']) */
.vibe-hint-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5em;
	margin: 0.5rem 0 0;
	padding: 0.45em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}

.vibe-block {
	margin-block-start: 2.4rem;
}

.vibe-block h2 {
	margin: 0 0 0.3rem;
	font-size: 1.25rem;
}

.vibe-hint {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
	color: var(--wa-color-text-quiet);
}

.vibe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.6rem;
}

.vibe-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-block-size: 88px;
	padding: 1rem 0.7rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.12s ease,
		border-color 0.12s ease;
}

.vibe-card:hover:not(:disabled) {
	border-color: var(--wa-color-brand-border-loud);
	transform: translateY(-1px);
}

.vibe-card:disabled {
	opacity: 0.5;
	cursor: default;
}

.vibe-card > i {
	font-size: 1.3rem;
	line-height: 1;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-card.vibe-mine {
	align-items: stretch;
	text-align: start;
}

.vibe-card.vibe-mine > i {
	align-self: flex-start;
}

/* flex 열 안의 한 줄 글자는 폭을 주지 않으면 긴 제목이 통째로 사라진다 */
.vibe-mine-title {
	inline-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.vibe-card small {
	font-size: 0.72rem;
	opacity: 0.55;
}

.vibe-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-block-start: 2.4rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--wa-color-surface-border);
}

.vibe-why-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.4rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
}

.vibe-why-card > i {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-why-card h3 {
	margin: 0;
	font-size: 1.05rem;
}

.vibe-why-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wa-color-text-quiet);
}

.vibe-learn {
	margin-block-start: 2.4rem;
	font-size: 0.88rem;
	color: var(--wa-color-text-quiet);
}

/* ② 빈 프로젝트 */
.vibe-empty {
	display: grid;
	place-items: center;
}

.vibe-empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	max-inline-size: 40rem;
	text-align: center;
}

.vibe-empty-box > i {
	font-size: 2.2rem;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-empty-box h2 {
	margin: 0;
	font-size: 1.5rem;
}

.vibe-empty-box p {
	margin: 0 0 0.6rem;
	color: var(--wa-color-text-quiet);
}

.vibe-empty-box > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: 100%;
}

.vibe-empty-box .vibe-hint-pill {
	align-self: center;
	margin-block-end: 1rem;
}

.vibe-empty-box .vibe-grid {
	inline-size: 100%;
}

.vibe-waiting {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wa-color-brand-on-quiet);
	font-weight: 600;
}

.vibe-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 999px;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.vibe-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ③④ 결과 */
.vibe-preview {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
}

.vibe-frame {
	flex: 1;
	display: flex;
	min-block-size: 0;
}

.vibe-preview-frame {
	flex: 1;
	display: block;
	inline-size: 100%;
	min-block-size: 0;
	border: 0;
	background: #fff;
}

.vibe-gen-bar {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	padding: 0.5em 0.9em;
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.86rem;
	font-weight: 600;
}

.vibe-error-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 0.9em;
	background: var(--wa-color-danger-fill-quiet);
	color: var(--wa-color-danger-on-quiet);
	font-size: 0.86rem;
	font-weight: 600;
}

.vibe-error-banner > span {
	flex: 1;
	min-inline-size: 10rem;
}

.vibe-error-banner button {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.35em 0.9em;
	border: 0;
	border-radius: 999px;
	background: var(--wa-color-danger-fill-loud, #d93025);
	color: #fff;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.vibe-error-banner small {
	font-size: 0.82rem;
	font-weight: 500;
}

/* ④ 코드 */
.vibe-code {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
}

.vibe-code-tabs {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0.6rem;
	border-block-end: 1px solid var(--wa-color-surface-border);
}

.vibe-code-tabs button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.8em;
	border: 0;
	border-radius: var(--wa-border-radius-s);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.vibe-code-tabs button[aria-selected='true'] {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.vibe-code-tabs button:disabled {
	opacity: 0.5;
	cursor: default;
}

.vibe-code-body {
	flex: 1;
	min-block-size: 0;
	overflow: auto;
}

.vibe-code-body .code-editor {
	block-size: 100%;
}

/* 콘솔 — 오류가 나면 접혀 있어도 스스로 눈에 띈다 */
.vibe-console {
	flex: none;
	border-block-start: 1px solid var(--wa-color-surface-border);
	background: var(--wa-color-surface-raised);
}

.vibe-console-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5em;
	inline-size: 100%;
	padding: 0.4em 0.8em;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.82rem;
	text-align: start;
	cursor: pointer;
}

.vibe-console[data-error='true'] .vibe-console-head {
	color: var(--wa-color-danger-on-quiet);
	font-weight: 600;
}

.vibe-badge {
	min-inline-size: 1.4em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--wa-color-danger-fill-loud, #d93025);
	color: #fff;
	font-size: 0.72rem;
	text-align: center;
}

.vibe-console-body {
	max-block-size: 30vh;
	overflow-y: auto;
	padding: 0.4rem 0.8rem 0.7rem;
	font-family: var(--wa-font-family-code);
	font-size: 0.78rem;
}

.vibe-console-body p {
	margin: 0 0 0.2em;
	white-space: pre-wrap;
	word-break: break-word;
}

.vibe-console-body > p:first-child:not(.vibe-console-line) {
	opacity: 0.55;
}

.vibe-console-line[data-level='error'] {
	color: var(--wa-color-danger-on-quiet);
}

.vibe-console-line[data-level='warn'] {
	color: var(--wa-color-warning-on-quiet);
}

.vibe-save-error {
	margin: 0;
	padding: 0.5em 0.8em;
	background: var(--wa-color-danger-fill-quiet);
	color: var(--wa-color-danger-on-quiet);
	font-size: 0.83rem;
}

/* ── 게임 배포 안내 ─────────────────────────────── */
.vibe-deploy {
	inline-size: min(100% - 2rem, 560px);
	max-block-size: min(88vh, 760px);
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	color: inherit;
	box-shadow: var(--wa-shadow-l);
}

.vibe-deploy::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.vibe-deploy[open] {
	display: flex;
	flex-direction: column;
}

.vibe-deploy header,
.vibe-deploy footer {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.1rem;
}

.vibe-deploy header {
	border-block-end: 1px solid var(--wa-color-surface-border);
}

.vibe-deploy header > i {
	color: var(--wa-color-brand-fill-loud);
	font-size: 1.2rem;
}

.vibe-deploy h2 {
	flex: 1;
	margin: 0;
	font-size: 1.05rem;
}

.vibe-deploy header button,
.vibe-deploy footer button {
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.vibe-deploy header button {
	padding: 0.3em 0.5em;
}

.vibe-deploy footer {
	justify-content: flex-end;
	border-block-start: 1px solid var(--wa-color-surface-border);
}

.vibe-deploy footer button {
	padding: 0.55em 1.1em;
	background: var(--wa-color-neutral-fill-quiet, #f1f3f7);
}

.vibe-deploy-body {
	overflow-y: auto;
	padding: 0.4rem 1.1rem 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
}

.vibe-deploy-body h3 {
	margin: 1rem 0 0.4rem;
	font-size: 0.95rem;
}

.vibe-deploy-body ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vibe-deploy-body li {
	display: flex;
	gap: 0.6em;
}

.vibe-deploy-body li > i {
	margin-block-start: 0.25em;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-deploy-note {
	padding: 0.6em 0.8em;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
}

.vibe-deploy-body code {
	overflow-wrap: anywhere;
	font-family: var(--wa-font-family-code);
	font-size: 0.82rem;
}

/* ── 좁은 화면 — 사이드바는 배너의 라리아 버튼으로 연다 ── */
@media (max-width: 1099px) {
	.vibe-app {
		grid-template-columns: minmax(0, 1fr);
	}

	.vibe-side {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 50;
		inline-size: min(22rem, 88vw);
		transform: translateX(-100%);
		transition: transform 200ms ease;
	}

	[dir='rtl'] .vibe-side {
		transform: translateX(100%);
	}

	.vibe-app[data-side-open='true'] .vibe-side {
		transform: none;
		box-shadow: var(--wa-shadow-l);
	}

	.vibe-app[data-side-open='true'] .vibe-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 45;
		background: rgb(0 0 0 / 0.35);
	}

	.vibe-resizer {
		display: none;
	}

	.vibe-chat-toggle {
		display: inline-flex;
	}

	.vibe-title {
		display: none;
	}
}

@media (max-width: 599px) {
	.vibe-banner {
		gap: var(--wa-space-xs);
		padding-inline: var(--wa-space-s);
	}

	.vibe-back span,
	.vibe-save-state {
		display: none;
	}

	.vibe-topbar {
		padding-inline: var(--wa-space-s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vibe-side,
	.vibe-card {
		transition: none;
	}
}

/* ── 바이브 작업공간 — 시작 안내 · 패널 · 입력 ───────────── */
.vibe-app .vibe-chat-input textarea { font-size: 1rem; line-height: 1.65; }
.vibe-app .vibe-hero { box-sizing: border-box; max-inline-size: 64rem; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.vibe-app .vibe-intro h1 { line-height: 1.35; text-wrap: balance; }
.vibe-app .vibe-grid > button, .vibe-app .vibe-why-card { box-shadow: var(--wa-shadow-s); }
.vibe-app .vibe-topbar { position: relative; min-inline-size: 0; background: var(--wa-color-surface-raised); }
@media (prefers-reduced-motion: reduce) { .vibe-app *, .vibe-app *::before, .vibe-app *::after { animation: none !important; transition: none !important; } }