/* ============================================================
   기능 랜딩 — 배너·팝업·SEO (기본 포함) 전용 장면. 접두사 .fm-basic-
   공통 부품(.fm-card .fm-chip .fm-check 등)을 먼저 쓰고, 모자란 모양만 여기서 만든다.
   기본 상태 = 끝난 상태. .fm-armed 아래에서 .is-on 없는 것만 처음 상태로 돌아간다.
   ============================================================ */

/* 작은 브라우저 창 */
.fm-basic-page,
.fm-basic-mini {
	position: relative;
	overflow: hidden;
	width: 100%;
	border: 1px solid var(--fs-line-strong);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}
.fm-basic-page { max-width: 420px; height: 250px; }
.fm-basic-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--fs-line); }
.fm-basic-bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--fs-line-strong); }
.fm-basic-lines { display: grid; gap: 8px; padding: 14px; }
.fm-basic-lines b { display: block; height: 10px; border-radius: 5px; background: var(--fs-bg-sunken); }
.fm-basic-lines b:nth-child(1) { width: 62%; height: 14px; }
.fm-basic-lines b:nth-child(2) { width: 100%; }
.fm-basic-lines b:nth-child(3) { width: 86%; }
.fm-basic-lines b:nth-child(4) { width: 70%; }

/* 레이어 팝업 */
.fm-basic-dim { position: absolute; inset: 26px 0 0; background: rgba(17, 17, 17, .32); transition: opacity .3s ease; }
.fm-basic-layer {
	position: absolute;
	top: 56%;
	right: 12%;
	left: 12%;
	padding: 18px 16px 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
	text-align: center;
	transform: translateY(-50%);
	transition: opacity .3s ease, transform .3s ease;
}
.fs-site .fm-basic-layer__t, .fm-basic-layer__t { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.fs-site .fm-basic-layer__d, .fm-basic-layer__d { margin: 0 0 12px; color: var(--fs-ink-2); font-size: 13px; }
.fm-basic-layer__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fs-line); }
.fm-basic-layer__foot .fm-check { font-size: 12px; }
.fm-basic-done { margin: 10px 0 0; }
.fm-armed .fm-basic-layer:not(.is-on), .fm-armed .fm-basic-dim:not(.is-on) { opacity: 0; }
.fm-armed .fm-basic-layer:not(.is-on) { transform: translateY(-40%); }

/* 팝업 모양 3종 */
.fm-basic-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 760px; }
.fm-basic-trio figure { margin: 0; text-align: center; }
.fm-basic-trio figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; }
.fm-basic-mini { height: 128px; }
.fm-basic-mini .fm-basic-lines { gap: 6px; padding: 10px; }
.fm-basic-mini .fm-basic-lines b { height: 7px; }
.fm-basic-mini .fm-basic-lines b:nth-child(1) { height: 10px; }
.fm-basic-shape { position: absolute; background: var(--fs-ink); transition: opacity .3s ease, transform .3s ease; }
.fm-basic-shape--layer { top: 38px; right: 22%; left: 22%; height: 58px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fm-basic-shape--bar { right: 0; bottom: 0; left: 0; height: 24px; background: var(--v2-lime, #c8f05a); }
.fm-basic-shape--slide { right: 8px; bottom: 8px; width: 38%; height: 40px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fm-armed .fm-basic-shape:not(.is-on) { opacity: 0; }
.fm-armed .fm-basic-shape--layer:not(.is-on) { transform: translateY(8px); }
.fm-armed .fm-basic-shape--bar:not(.is-on) { transform: translateY(100%); }
.fm-armed .fm-basic-shape--slide:not(.is-on) { transform: translateX(24px); }

/* 배너 슬라이드 */
.fm-basic-slider { position: relative; height: 128px; overflow: hidden; border: 1px solid var(--fs-line-strong); border-radius: 12px; background: var(--fs-bg-sunken); }
.fm-basic-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	text-align: center;
	transition: opacity .4s ease;
}
.fm-basic-slide small { color: var(--fs-ink-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fm-armed .fm-basic-slide:not(.is-on) { opacity: 0; }
.fm-basic-dots { position: absolute; right: 0; bottom: 10px; left: 0; display: flex; justify-content: center; gap: 6px; }
.fm-basic-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--fs-line-strong); transition: background .2s ease, width .2s ease; }
.fm-basic-dots i.is-on { width: 18px; border-radius: 4px; background: var(--fs-ink); }
.fm-basic-cap { margin: 10px 0 0; color: var(--fs-ink-2); font-size: 12px; }

/* 배너 미리보기 */
.fm-basic-hero { padding: 14px; border: 1px solid var(--fs-line-strong); border-radius: 12px; background: var(--fs-bg-sunken); }
.fm-basic-hero b { display: block; margin-bottom: 8px; font-size: 16px; letter-spacing: -.02em; }

@media (max-width: 767px) {
	.fm-basic-page { height: 236px; }
	.fm-basic-layer { right: 8%; left: 8%; }
	.fm-basic-trio { gap: 8px; }
	.fm-basic-trio figcaption { font-size: 12px; }
}