/* 바이브 코딩 전체 메뉴 — 강한 제목 착지·빛·단계 조립. SSOT 11·23절. */
[data-coding-motion] {
	--coding-accent: var(--wa-color-brand-fill-loud);
	--webmovie-burst: var(--wa-color-brand-fill-loud), var(--wa-color-warning-fill-loud), var(--wa-color-success-fill-loud);
	--webmovie-cascade: 65ms;
	--webmovie-cue-color: var(--coding-accent);
}
[data-coding-motion='server'], [data-coding-motion='harness'] { --coding-accent: var(--wa-color-success-fill-loud); }
[data-coding-motion='client'], [data-coding-motion='opencode'] { --coding-accent: var(--wa-color-warning-fill-loud); }
.coding-title-stage {
	position: relative;
	isolation: isolate;
	margin-block-end: 2rem;
	padding: clamp(1.1rem, 3vw, 2.3rem);
	padding-block-start: 4rem;
	border: 1px solid color-mix(in srgb, var(--coding-accent, var(--sonub-accent)) 40%, var(--sonub-border));
	border-block-start: 4px solid var(--coding-accent, var(--sonub-accent));
	border-radius: var(--wa-border-radius-xl);
	background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--coding-accent, var(--sonub-accent)) 24%, transparent), transparent 68%), var(--sonub-surface);
	box-shadow: 0 1.3rem 3rem -2rem color-mix(in srgb, var(--coding-accent, var(--sonub-accent)) 65%, transparent);
}
.coding-title-copy { position: relative; z-index: 1; min-inline-size: 0; }
.coding-title-stage:has(.coding-title-visual) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: 1.8rem; }
.coding-title-visual { min-inline-size: 0; overflow: hidden; border-radius: var(--wa-border-radius-l); }
.coding-title-visual .sonub-figure { margin: 0; box-shadow: none; }
.coding-title-visual img { display: block; inline-size: 100%; block-size: auto; }
.coding-title-visual figcaption { font-size: var(--wa-font-size-s); line-height: 1.6; }
.coding-title-copy > :is(header, .sonub-page-header) { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.coding-title-copy h1 { color: var(--sonub-accent-ink); font-size: calc(clamp(1.9rem, 3.6vw, 2.8rem) * var(--wa-font-size-scale, 1)); line-height: 1.2; text-wrap: balance; }
.coding-title-light { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; background: linear-gradient(120deg, transparent 15%, color-mix(in srgb, var(--coding-accent, var(--sonub-accent)) 12%, transparent) 50%, transparent 85%); }
.coding-title-seal { position: absolute; inset-block-start: 0.8rem; inset-inline-start: 1rem; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--wa-border-radius-m); color: var(--wa-color-brand-on-loud); background: var(--wa-color-brand-fill-loud); box-shadow: var(--wa-shadow-m); font-size: var(--wa-font-size-l); }
.coding-title-replay { position: absolute; z-index: 2; inset-block-start: 0.7rem; inset-inline-end: 1rem; background: var(--sonub-surface); color: var(--sonub-accent-ink); font-size: var(--wa-font-size-xs); }
[data-coding-motion] :is(.appdev-section, .harness-block, .opencode-block, .aitools-block, .vibe-tips) { position: relative; }
[data-coding-motion] :is(h2, h3) { text-wrap: balance; }
[data-coding-motion] :is(.appdev-section > h2, .harness-block h2, .opencode-block h2, .aitools-block h2, .vibe-tips > h2) { color: var(--sonub-accent-ink); }
[data-coding-motion] :is(.appdev-figure, .harness-hero, .opencode-hero, .aitools-lesson-picture, .sonub-figure) { border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-m); }
[data-coding-motion] :is(.appdev-note, .appdev-creed, .vibe-safe) { border-inline-start: 4px solid var(--coding-accent); background: color-mix(in srgb, var(--coding-accent) 8%, var(--sonub-surface)); }
[data-coding-motion] :is(.appdev-hub-card, .appdev-sibling, .harness-kind, .opencode-node, .opencode-model, .vibe-why-card) { box-shadow: var(--wa-shadow-s); }
[data-coding-motion] :is(.appdev-role, .vibe-compare-card, .opencode-safe > li) { border-block-start: 3px solid var(--coding-accent); }
[data-coding-motion] .appdev-lines[data-ig-chain] > li { position: relative; z-index: 1; background: var(--sonub-surface); }
[data-coding-motion] .coding-flow { position: relative; isolation: isolate; }
[data-coding-motion] .coding-flow > .ig-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
[data-coding-motion] .coding-flow .ig-line { fill: none; stroke: var(--coding-accent); stroke-width: 2; }
[data-coding-motion] .coding-flow .ig-node { fill: var(--coding-accent); }
[data-coding-motion] .aitools-outline .ig-line { --webmovie-dur: 1100ms; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	[data-coding-motion] :is(.appdev-hub-card, .appdev-sibling, .harness-kind, .opencode-model, .vibe-why-card) { transition: translate 160ms ease, box-shadow 160ms ease; }
	[data-coding-motion] :is(.appdev-hub-card, .appdev-sibling, .harness-kind, .opencode-model, .vibe-why-card):hover { translate: 0 -0.35rem; box-shadow: var(--wa-shadow-m); }
}
@media (max-width: 599px) {
	.coding-title-stage { padding-inline: 1rem; }
	.coding-title-copy h1 { font-size: calc(1.85rem * var(--wa-font-size-scale, 1)); }
}
@media (max-width: 1199px) {
	.coding-title-stage:has(.coding-title-visual) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.coding-title-stage *, [data-coding-motion] [data-webmovie] { animation: none !important; transition: none !important; }
}