/* 기능 랜딩 — 쇼핑몰 전용 장면 (2026-10-08). 공통 부품은 feature-motion.css, 여기는 쇼핑몰에만 쓰는 것.
   규칙: 기본 = 끝난 상태, .fm-armed 아래에서 .is-on 이 없는 것만 처음 상태로. */

/* 선택 칩(옵션·기간·필터): 끝난 상태 = 라임 선택 */
.fm-shop-sel { border-color: var(--v2-lime, #c8f05a); background: var(--v2-lime, #c8f05a); color: #111; }
.fm-armed .fm-shop-sel:not(.is-on) { border-color: var(--fs-line-strong); background: #fff; color: var(--fs-ink-2); }
.fm-shop-pre.is-on { border-color: var(--v2-lime, #c8f05a); background: var(--v2-lime, #c8f05a); color: #111; } /* 고르기 전 선택이었다가 꺼지는 칩 */
.fm-shop-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fm-shop-opts__k { flex: 0 0 52px; color: var(--fs-ink-2); font-size: 13px; font-weight: 600; }

/* 결제수단 줄 */
.fm-shop-pay { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fs-line-strong); }
.fm-shop-pay li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--fs-line); font-size: 14px; font-weight: 600; }
.fm-shop-pay small { display: block; color: var(--fs-ink-3); font-size: 12px; font-weight: 500; }

/* 주문 단계 */
.fm-shop-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.fm-shop-steps li { display: inline-flex; align-items: center; gap: 6px; }
.fm-shop-steps li + li::before { content: ""; width: 14px; height: 1px; background: var(--fs-line-strong); }
.fm-shop-step { border-color: var(--v2-lime, #c8f05a); background: var(--v2-lime, #c8f05a); color: #111; }
.fm-armed .fm-shop-step:not(.is-on) { border-color: var(--fs-line-strong); background: #fff; color: var(--fs-ink-3); }

/* 7일 매출 막대 */
.fm-shop-bar { fill: var(--fs-ink-4); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.fm-shop-bar--today { fill: var(--fs-ink); }
.fm-armed .fm-shop-bars:not(.is-on) .fm-shop-bar { transform: scaleY(0); transition-delay: 0s !important; }

/* 합계·금액 줄 */
.fm-shop-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 6px; border-bottom: 1px solid var(--fs-line); font-size: 14px; }
.fm-shop-sum span:first-child { color: var(--fs-ink-2); font-weight: 600; }
.fm-shop-sum b, .fm-shop-sum .fm-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.fm-shop-sum--total { border-bottom: 0; font-size: 15px; }
.fm-shop-sum--total span:first-child { color: var(--fs-ink); }
.fm-shop-minus { color: var(--fs-ink); }
.fm-shop-note { margin: 10px 0 0; color: var(--fs-ink-2); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.fs-site .fm-shop-note { margin: 10px 0 0; }

/* 품절 칩·꺼진 버튼·흐린 줄 */
.fm-shop-out { border-color: var(--fs-ink); background: var(--fs-ink); color: #fff; }
.fm-shop-dim { opacity: .5; }
.fm-btn--ghost-sm { min-height: 32px; padding: 0 14px; border: 1px solid var(--fs-ink); background: #fff; color: var(--fs-ink); font-size: 13px; }

/* 후기 */
.fm-shop-rv { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.fm-shop-rv__t { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fm-shop-rv .fm-chip { transition: transform .15s ease, background .2s ease, border-color .2s ease; }

/* 걸러진 줄: 끝난 상태 = 접힘, 재생 중 .is-on 인 동안만 보임 */
.fm-shop-gone { grid-template-rows: 0fr; opacity: 0; }
.fm-armed .fm-shop-gone.is-on { grid-template-rows: 1fr; opacity: 1; }
.fm-shop-cnt { margin: 0 0 8px; color: var(--fs-ink-2); font-size: 13px; }
.fm-shop-cnt .fm-num { font-size: 14px; }

/* 붙여넣기 줄(송장) */
.fm-shop-paste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fm-shop-paste .fm-input { min-height: 36px; font-size: 13px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.fm-shop-bar { transition: none; }
}