/* ============================================================
   기능 랜딩 — AI 디자인 편집 전용 장면 (2026-10-08)
   공통 부품(.fm-card .fm-chip .fm-input .fm-btn .fm-bubble .fm-slide .fm-swap …)을 먼저 쓰고, 미리보기 조각만 여기서 보탠다.
   기본 상태 = 끝난 상태. .fm-armed 아래에서 .is-on 이 없는 것만 처음 상태로 돌아간다.
   ============================================================ */

/* 미리보기 조각 */
.fm-ai-design-prev { margin-bottom: 10px; padding: 14px; border: 1px solid var(--fs-line-strong); border-radius: 12px; background: #fff; }
.fm-ai-design-prev__t { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.fm-ai-design-skel { display: block; height: 6px; margin: 6px 0; border-radius: 3px; background: var(--fs-line-strong); }
.fm-ai-design-skel--s { width: 60%; }
.fm-ai-design-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin-top: 6px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--fs-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	transition: border-radius .3s ease;
}
.fm-armed .fm-ai-design-btn:not(.is-on) { border-radius: 4px; }
.fm-ai-design-btn--sq { border-radius: 4px; }

/* 게시 줄 */
.fm-ai-design-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* 화면 크기 */
.fm-ai-design-site { margin: 0 auto; padding: 12px; overflow: hidden; border: 1px solid var(--fs-line-strong); border-radius: 10px; background: #fff; transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.fm-ai-design-site--narrow { width: 42%; min-width: 120px; }
.fm-armed .fm-ai-design-site--narrow:not(.is-on) { width: 100%; }
.fm-ai-design-site .fm-ai-design-prev__t { margin-bottom: 6px; }
.fm-ai-design-site .fm-ai-design-btn { min-height: 32px; padding: 0 14px; }
.fm-ai-design-frame { min-height: 148px; }

/* 영역 선택 */
.fm-ai-design-pick { display: block; padding: 4px 6px; margin: -4px -6px 6px; border-radius: 6px; outline: 2px solid var(--fs-ink); outline-offset: 1px; background: rgba(200, 240, 90, .35); transition: background .2s ease, outline-color .2s ease; }
.fm-armed .fm-ai-design-pick:not(.is-on) { outline-color: transparent; background: transparent; }

/* 비교 */
.fm-ai-design-cmp { display: flex; width: 100%; }
.fm-ai-design-cmp > span { width: 100%; }
.fm-ai-design-stack { display: block; width: 100%; }
.fm-ai-design-stack .fm-chip { display: flex; width: max-content; margin-bottom: 8px; }

/* 문구 바꾸기 */
.fm-ai-design-copy { display: flex; width: 100%; }
.fm-ai-design-copy > span { width: 100%; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }

/* 섹션 모양 (플럭스 빌더) */
.fm-ai-design-sec {
	margin-top: 10px;
	padding: 22px;
	border: 1px solid var(--fs-ink);
	border-radius: 16px;
	background: var(--fs-ink);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
	color: #fff;
	transition: background .3s ease, color .3s ease, border-radius .3s ease, padding .3s ease, box-shadow .3s ease;
}
.fm-ai-design-sec b { display: block; font-size: 16px; letter-spacing: -.02em; }
.fm-ai-design-sec span { display: block; margin-top: 2px; font-size: 13px; opacity: .8; }
.fm-armed .fm-ai-design-sec:not(.is-on) { padding: 12px; border-color: var(--fs-line-strong); border-radius: 4px; background: #fff; box-shadow: none; color: var(--fs-ink); }

/* 보호 영역 칩 */
.fm-ai-design-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.fm-ai-design-chips .fm-chip { gap: 5px; }
.fm-ai-design-rej { margin: 6px 0 0; font-size: 12px; opacity: .85; }

/* 설정 안내 줄 */
.fm-ai-design-to { display: block; margin-left: auto; color: var(--fs-ink-2); font-size: 12px; white-space: nowrap; }

/* 사용 한도 */
.fm-ai-design-meter { height: 8px; margin: 8px 0 4px; overflow: hidden; border-radius: 4px; background: var(--fs-line); }
.fm-ai-design-meter i { display: block; width: var(--w, 23%); height: 100%; border-radius: 4px; background: var(--fs-ink); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.fm-armed .fm-ai-design-meter i:not(.is-on) { width: 0; }
.fm-ai-design-meter + .fm-ai-design-meterk { display: flex; justify-content: space-between; margin: 0; color: var(--fs-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.fm-ai-design-prov { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
	.fm-ai-design-btn, .fm-ai-design-site, .fm-ai-design-pick, .fm-ai-design-sec, .fm-ai-design-meter i { transition: none; }
}