/*
 * 바이브 코딩 전용 셸 — 이전 사이트 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: calc(0.86rem * var(--wa-font-size-scale, 1));
	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: calc(1rem * var(--wa-font-size-scale, 1));
	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: calc(0.86rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.84rem * var(--wa-font-size-scale, 1));
	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: calc(0.72rem * var(--wa-font-size-scale, 1));
	opacity: 0.55;
}

.vibe-proj-label,
.vibe-proj-empty {
	margin: 0.35rem 0.6rem;
	font-size: calc(0.74rem * var(--wa-font-size-scale, 1));
	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: calc(0.78rem * var(--wa-font-size-scale, 1));
	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: calc(1.6rem * var(--wa-font-size-scale, 1));
	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: calc(0.85rem * var(--wa-font-size-scale, 1));
	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: calc(0.9rem * var(--wa-font-size-scale, 1));
	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: calc(0.82rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.9rem * var(--wa-font-size-scale, 1));
	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;
}

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

.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: calc(0.75rem * var(--wa-font-size-scale, 1));
	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;
}

/* ── 배너의 SONUB 메뉴(vibe/partials/site-menu) — 대분류는 배너 글자 모양 그대로, 펼침은 배너 바로 아래 메가 박스(SSOT 23절 "바이브 코딩" 메뉴) ── */
.vibe-banner {
	position: relative;
	z-index: 42; /* 펼친 메가 박스가 도구 막대·기록 메뉴(40)·미리보기 위에 온다. 좁은 화면의 사이드바(50)·가림막(45)보다는 아래 */
}

/* 메뉴 칸은 배너 높이를 다 덮는다 — 탭에서 아래 메가 박스로 마우스를 옮기는 동안 펼침이 끊기지 않는다 */
.vibe-menu {
	display: flex;
	flex: 0 1 auto;
	align-self: stretch;
	min-inline-size: 0;
}

.vibe-menu-tabs {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.vibe-menu-tabs > li {
	margin: 0;
	padding: 0;
}

.vibe-menu-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.6em;
	border-radius: 0;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.88;
}

.vibe-menu-tab i {
	--fa-primary-color: currentColor;
	--fa-secondary-color: currentColor;
	--fa-secondary-opacity: 0.45;
}

.vibe-menu-tab:hover,
.vibe-menu-tab:focus-visible {
	opacity: 1;
}

.vibe-menu-cat[data-active] > .vibe-menu-tab {
	background: color-mix(in srgb, currentColor 14%, transparent);
	opacity: 1;
}

/* 탭과 하위 목록은 같은 li 안에 있어 순서와 너비가 갈라지지 않는다. */
.vibe-mega-col {
	display: none;
	container: vibe-menu-column / inline-size;
	box-sizing: border-box;
	min-inline-size: 0;
	max-block-size: calc(100dvh - var(--vibe-banner-height) - var(--wa-space-s));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: var(--wa-space-s) var(--wa-space-xs);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	border-block-end: 1px solid var(--wa-color-surface-border);
	font-size: var(--wa-font-size-s);
}

.vibe-menu-cat + .vibe-menu-cat > .vibe-mega-col {
	border-inline-start: 1px solid var(--wa-color-surface-border);
}

.vibe-menu-cat:first-child > .vibe-mega-col {
	border-end-start-radius: var(--wa-border-radius-l);
}

.vibe-menu-cat:last-child > .vibe-mega-col {
	border-end-end-radius: var(--wa-border-radius-l);
}

.vibe-mega-head {
	display: grid;
	grid-template-columns: 1.25em minmax(0, 1fr);
	align-items: center;
	gap: var(--wa-space-xs);
	margin-block-end: var(--wa-space-2xs);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	color: var(--wa-color-text-normal);
	font-weight: var(--wa-font-weight-bold);
	text-decoration: none;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.vibe-mega-head i {
	--fa-primary-color: var(--wa-color-brand-on-quiet);
	--fa-secondary-color: var(--wa-color-brand-on-quiet);
	--fa-secondary-opacity: 0.45;
}

.vibe-menu-cat[data-active] .vibe-mega-head {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.vibe-mega-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vibe-mega-col li:not(.menu-group) {
	margin: 0;
	padding: 0;
}

.vibe-mega-col li a {
	display: grid;
	grid-template-columns: 1.25em minmax(0, 1fr);
	align-items: center;
	gap: var(--wa-space-xs);
	padding: 0.4rem var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	color: var(--wa-color-text-normal);
	line-height: 1.4;
	text-decoration: none;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.vibe-mega-col li a i {
	color: var(--wa-color-text-quiet);
	text-align: center;
}

.vibe-mega-col :is(.vibe-mega-head, li a):hover {
	color: var(--wa-color-brand-on-quiet);
}

.vibe-mega-col li a[aria-current] {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-weight: var(--wa-font-weight-semibold);
}

/* 사이드바·도구 때문에 좁아진 열은 아이콘 대신 글자 공간을 확보한다. */
@container vibe-menu-column (max-width: 8rem) {
	.vibe-mega-head,
	.vibe-mega-col li a {
		display: block;
		padding-inline: var(--wa-space-3xs);
	}
	.vibe-mega-head > i,
	.vibe-mega-col li a > i { display: none; }
	.vibe-mega-head > span,
	.vibe-mega-col li a > span { display: block; }
	.vibe-mega-col .menu-group { padding-inline: var(--wa-space-3xs); }
}

@media (min-width: 600px) {
	/* 바이브 코딩 표시는 첫 메뉴 탭이 맡고, 휴대폰에서만 별도 브랜드를 보인다. */
	.vibe-banner > .vibe-brand { display: none; }
}

@media (min-width: 1440px) {
	.vibe-menu { align-items: flex-start; }
	.vibe-menu-tabs {
		position: relative;
		isolation: isolate;
		display: grid;
		flex: 0 1 auto;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 11rem);
		grid-template-rows: var(--vibe-banner-height) auto;
		align-items: stretch;
		gap: 0;
		overflow: visible;
	}
	.vibe-menu-cat {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		min-inline-size: 0;
	}
	.vibe-menu-tab {
		justify-content: center;
		min-inline-size: 0;
		padding: var(--wa-space-3xs) var(--wa-space-2xs);
		line-height: 1.2;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.vibe-menu-tab > i { flex: none; }
	.vibe-menu-tab > span {
		display: -webkit-box;
		min-inline-size: 0;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	/* 한 장의 그림자 — 배너 양끝이 아닌 메뉴 탭들의 경계에 맞춘다. */
	.vibe-menu-tabs::before {
		content: '';
		display: none;
		position: absolute;
		inset-block: var(--vibe-banner-height) 0;
		inset-inline: 0;
		z-index: -1;
		pointer-events: none;
		border-end-start-radius: var(--wa-border-radius-l);
		border-end-end-radius: var(--wa-border-radius-l);
		box-shadow: var(--wa-shadow-l);
	}
	.vibe-menu-tabs:is(:hover, :focus-within)::before,
	.vibe-menu-tabs:is(:hover, :focus-within) .vibe-mega-col { display: block; }
	/* 페이지 이동 직후는 마우스가 해당 탭을 떠날 때까지 멈춘다. 키보드 초점은 연다. */
	html[data-menu-hold] .vibe-menu-tabs:not(:focus-within)::before,
	html[data-menu-hold] .vibe-menu-tabs:not(:focus-within) .vibe-mega-col { display: none; }
}

/* 배너 오른쪽 위 퀵메뉴(partials/topbar-tools) — 메인 탑바의 42px 네모 단추(app.css · topbar.css)를 배너의 28px 둥근 단추로 */
.vibe-banner .topbar-tools {
	gap: 0.3rem;
	margin-inline-start: 0;
	padding-inline-start: var(--wa-space-xs);
	border-inline-start-color: color-mix(in srgb, currentColor 22%, transparent);
}

.vibe-banner .search-link,
.vibe-banner .topbar-tools .locale-switcher > wa-button:not(:defined),
.vibe-banner .topbar-tools .locale-switcher > wa-button::part(base),
.vibe-banner .topbar-tools .menu-toggle::part(base),
.vibe-banner .topbar-tools .account-member,
.vibe-banner .notification-trigger {
	min-inline-size: 28px;
	block-size: 28px;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
}

.vibe-banner .topbar-tools .menu-toggle {
	display: inline-flex;
}

.vibe-banner .topbar-tools .menu-toggle::part(base) {
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
}

.vibe-banner .topbar-tools :is(.account-member, .notification-trigger) {
	inline-size: 28px;
}

.vibe-banner .account-member :is(img, i) {
	inline-size: 22px;
	block-size: 22px;
	font-size: calc(1.1rem * var(--wa-font-size-scale, 1));
}

.vibe-banner .account span > a:first-child {
	min-block-size: 28px;
	padding-inline: 0.75rem;
	border-radius: 999px;
	box-shadow: none;
	font-weight: 600;
}

/* 휴대폰 — 배너에 탭이 들어갈 자리가 없다. 대분류 탭·메가 박스와 검색·언어·알림을 숨기고 로그인/계정 · [메뉴](전체 메뉴 서랍 — 모든 메뉴)만 둔다 */
@media (max-width: 599px) {
	.vibe-menu,
	.vibe-banner .topbar-tools :is(.search-pop, .locale-switcher, .notification-bell) {
		display: none;
	}

	.vibe-banner .topbar-tools {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* 전용 도구 막대 */
.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: calc(0.85rem * var(--wa-font-size-scale, 1));
	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: calc(0.78rem * var(--wa-font-size-scale, 1));
}

/* 막대가 좁을 때(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: calc(0.78rem * var(--wa-font-size-scale, 1));
	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: calc(0.8rem * var(--wa-font-size-scale, 1));
	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: calc(0.72rem * var(--wa-font-size-scale, 1));
	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: calc(0.72rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-hero h1 {
	margin: 0;
	font-size: calc(clamp(1.6rem, 4vw, 2.6rem) * var(--wa-font-size-scale, 1));
	font-weight: 800;
	line-height: 1.15;
}
/* 시작 화면 글은 낱말 단위로, 한국어는 어절 단위로 줄을 바꾼다 — 좁은 화면 제목이 "만들어지 / 는"처럼 낱말 중간에서 끊겼다(2026-10-24) */
.vibe-intro :is(h1, h2, h3, p) { overflow-wrap: break-word; }
.vibe-intro :is(h1, h2, h3, p):lang(ko) { word-break: keep-all; }

.vibe-lead {
	margin: 0;
	max-inline-size: 40rem;
	font-size: calc(clamp(0.95rem, 1.6vw, 1.1rem) * var(--wa-font-size-scale, 1));
	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: calc(0.88rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
	cursor: pointer;
}

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

.vibe-block h2 {
	margin: 0 0 0.3rem;
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
}

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

.vibe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.6rem;
}
/* 예시 여섯 개는 한 줄에 셋까지 — 3×2(좁으면 2×3). auto-fill 이면 넓은 화면에서 5개 + 1개로 하나만 다음 줄에 남았다(2026-10-24 디자인 점검) */
.vibe-grid.vibe-examples {
	grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - 1.2rem) / 3)), 1fr));
}

.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: calc(0.85rem * var(--wa-font-size-scale, 1));
	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: calc(1.3rem * var(--wa-font-size-scale, 1));
	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: calc(0.72rem * var(--wa-font-size-scale, 1));
	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: calc(1.6rem * var(--wa-font-size-scale, 1));
	line-height: 1;
	color: var(--wa-color-brand-fill-loud);
}

.vibe-why-card h3 {
	margin: 0;
	font-size: calc(1.05rem * var(--wa-font-size-scale, 1));
}

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

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

/* 잘 부탁하는 법 — 순환 그림 · 요령 네 칸 · 막연한/또렷한 부탁 비교 · 만든 코드를 배우는 곳 */
.vibe-tips {
	display: grid;
	gap: 1rem;
	margin-block-start: 2.4rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--wa-color-surface-border);
}
.vibe-tips h2,
.vibe-tips h3 { margin: 0; }
.vibe-tips h2 { font-size: calc(1.25rem * var(--wa-font-size-scale, 1)); }
.vibe-tips h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: calc(1.05rem * var(--wa-font-size-scale, 1));
}
.vibe-tips-lead {
	margin: 0;
	line-height: 1.7;
	color: var(--wa-color-text-quiet);
}
.vibe-tips .sonub-figure {
	max-inline-size: 40rem;
	margin: 0;
}
.vibe-tip-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vibe-tip-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.8rem;
	margin: 0;
	padding: 1.2rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
}
.vibe-tip-list li > i {
	font-size: calc(1.3rem * var(--wa-font-size-scale, 1));
	color: var(--wa-color-brand-fill-loud);
}
.vibe-tip-list :is(h3, h4) {
	margin: 0 0 0.3rem;
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
}
.vibe-tip-list p {
	margin: 0;
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
	color: var(--wa-color-text-quiet);
}
.vibe-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}
.vibe-compare-card {
	display: grid;
	gap: 0.5rem;
	padding: 1rem 1.2rem;
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-m);
	background: var(--dg-soft);
}
.vibe-compare-card strong {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.vibe-compare-card strong i { color: var(--dg-fill); }
.vibe-compare-card p {
	margin: 0;
	line-height: 1.6;
}
.vibe-next {
	display: grid;
	gap: 0.6rem;
	padding: 1.2rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-brand-fill-quiet);
}
.vibe-next p {
	margin: 0;
	line-height: 1.7;
}
.vibe-next ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vibe-next li { margin: 0; }
.vibe-next a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.vibe-tips :is(p, h2, h3, h4) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
:is(:lang(ja), :lang(zh)) .vibe-tips :is(p, h2, h3, h4) { word-break: normal; }
/* 잘 안 될 때의 세 길은 한 줄에 셋 — 넓지 않으면 auto-fit 이 줄인다 */
.vibe-fix-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
/* 안전하게 공유하기 — 비교 카드처럼 경고 색 띠 */
.vibe-safe {
	display: grid;
	gap: 0.5rem;
	padding: 1rem 1.2rem;
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-m);
	background: var(--dg-soft);
}
.vibe-safe h3 i { color: var(--dg-fill); }
.vibe-safe p {
	margin: 0;
	line-height: 1.7;
}
/* 요령 네 칸은 2×2 — 좁은 화면에서는 한 줄씩 */
@media (max-width: 640px) {
	.vibe-tip-list { grid-template-columns: minmax(0, 1fr); }
}

/* ② 빈 프로젝트 */
.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: calc(2.2rem * var(--wa-font-size-scale, 1));
	color: var(--wa-color-brand-fill-loud);
}

.vibe-empty-box h2 {
	margin: 0;
	font-size: calc(1.5rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.86rem * var(--wa-font-size-scale, 1));
	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: calc(0.86rem * var(--wa-font-size-scale, 1));
	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: calc(0.82rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
	cursor: pointer;
}

.vibe-error-banner small {
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
	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: calc(0.8rem * var(--wa-font-size-scale, 1));
	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: calc(0.82rem * var(--wa-font-size-scale, 1));
	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: calc(0.72rem * var(--wa-font-size-scale, 1));
	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: calc(0.78rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.83rem * var(--wa-font-size-scale, 1));
}

/* ── 게임 배포 안내 ─────────────────────────────── */
.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: calc(1.2rem * var(--wa-font-size-scale, 1));
}

.vibe-deploy h2 {
	flex: 1;
	margin: 0;
	font-size: calc(1.05rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.9rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
}

.vibe-deploy-body h3 {
	margin: 1rem 0 0.4rem;
	font-size: calc(0.95rem * var(--wa-font-size-scale, 1));
}

.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: calc(0.82rem * var(--wa-font-size-scale, 1));
}

/* ── 좁은 화면 — 사이드바는 배너의 라리아 버튼으로 연다 ── */
@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: calc(1rem * var(--wa-font-size-scale, 1)); 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; } }