/*
 * 서명 장면 「유입 링크별 클릭 → 주문」 — 마케팅 기능 상세(feature-detail 틀). 접두사 fx-sigm-.
 * 장면 파일(template-parts/fx/feature-sig-attr.php)이 이 파일을 직접 싣는다. 창·칩·swap 은 틀(feature-detail.css)의 fx-feat-win·fx-feat-chip·fx-feat-swap 을 재사용.
 * 움직임은 transform·opacity 만. 기본 = 끝난 상태, 엔진이 .fm-armed 를 붙이면 처음 상태로 접어 두고 .is-on 에서 펼친다.
 */
.fx-sigm{width:100%;max-width:960px;margin:0 auto;padding:0 var(--fx-gut,16px);color:#111113;font-family:var(--fx-face)}
.fx-sigm .fx-feat-win{flex:none;width:100%;max-width:none}
.fx-sigm__k{font-size:14px;font-weight:600;color:var(--fx-k3)}

/* 링크 만들기 */
.fx-sigm__make{display:grid;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--fx-edge-paper)}
.fx-sigm__fld{display:flex;align-items:center;gap:12px;min-height:44px}
.fx-sigm__fld .fx-sigm__k{flex:0 0 72px}
.fx-sigm__in{flex:1 1 auto;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--fx-edge-paper-strong);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.fx-sigm__chips{display:flex;flex-wrap:wrap;gap:8px}
.fx-sigm__short{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:44px;padding:6px 14px 6px 16px;border-radius:10px;background:var(--fx-paper-2);box-shadow:inset 4px 0 0 var(--fx-brand)}
.fx-sigm__short b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

/* 캠페인 성과 표 */
.fx-sigm__t{margin:18px 0 6px;font-size:17px;font-weight:700}
.fx-sigm__t small{margin-left:6px;font-size:14px;font-weight:500;color:var(--fx-k3)}
.fx-sigm__tab{margin:0;padding:0;list-style:none}
.fx-sigm__row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.8fr) 72px 124px;align-items:center;gap:8px 16px;min-height:62px;padding:8px 6px;border-bottom:1px solid var(--fx-edge-paper);font-size:16px}
.fx-sigm__row--h{min-height:40px;font-size:14px;font-weight:600;color:var(--fx-k3)}
.fx-sigm__row--h .fx-sigm__o,.fx-sigm__row--h .fx-sigm__r{text-align:right}
.fx-sigm__c b{display:block;font-weight:700}
.fx-sigm__c small{display:block;margin-top:1px;font-size:13px;color:var(--fx-k3)}
.fx-sigm__v{display:flex;align-items:center;gap:12px;min-width:0}
.fx-sigm__v em{flex:0 0 44px;text-align:right;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
.fx-sigm__bar{position:relative;flex:1 1 auto;height:10px;border-radius:5px;background:var(--fx-paper-2);overflow:hidden}
.fx-sigm__bar i{display:block;height:100%;border-radius:5px;background:#111113;transform-origin:0 50%;transition:transform .9s var(--fx-ease-std,ease) .15s}
.fx-sigm__o{text-align:right}
.fx-sigm__pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 10px;border-radius:var(--fx-radius-pill,999px);background:var(--fx-brand);color:#111113;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.fx-sigm__r{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.fx-sigm__row--sum{border-bottom:0;min-height:68px;background:var(--fx-paper-2);border-radius:10px;margin-top:6px}
.fx-sigm__row--sum .fx-sigm__c b{font-size:17px}
.fx-sigm__row--sum .fx-sigm__v em{font-size:20px}
.fx-sigm__row--sum .fx-sigm__o em{font-size:20px;font-weight:700;font-style:normal}
.fx-sigm__row--sum .fx-sigm__r em{font-size:24px;font-weight:700;font-style:normal;letter-spacing:-.02em}
.fx-sigm__row--sum .fx-sigm__v{justify-content:flex-end}
.fx-sigm__row--sum .fx-sigm__v em{flex:0 0 auto}

/* 처음 상태(엔진이 장면을 무장했을 때만) */
.fm-armed .fx-sigm__row:not(.fx-sigm__row--h):not(.is-on) .fx-sigm__bar i{transform:scaleX(0)}
.fx-sigm__bar i{transform:scaleX(1)}

@media (max-width:767px){
	.fx-sigm{padding:0 var(--fx-gut,16px)}
	.fx-sigm__fld .fx-sigm__k{flex-basis:56px}
	.fx-sigm__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c r" "v o";gap:6px 12px;min-height:84px;padding:10px 4px}
	.fx-sigm__v{gap:8px}.fx-sigm__v em{flex-basis:34px}
	.fx-sigm__row--h{display:none}
	.fx-sigm__c{grid-area:c}.fx-sigm__r{grid-area:r}.fx-sigm__v{grid-area:v}.fx-sigm__o{grid-area:o}
	.fx-sigm__row:not(.fx-sigm__row--sum) .fx-sigm__v::before{content:"클릭";flex:0 0 auto;font-size:13px;font-weight:600;color:var(--fx-k3)}
	.fx-sigm__o{display:flex;align-items:center;justify-content:flex-end;gap:8px}
	.fx-sigm__o::before{content:"주문";font-size:13px;font-weight:600;color:var(--fx-k3)}
	.fx-sigm__r::after{content:"원";margin-left:1px;font-size:14px}
	.fx-sigm__row--sum .fx-sigm__v{justify-content:flex-start;gap:8px}
	.fx-sigm__row--sum .fx-sigm__v::before{content:"클릭";font-size:13px;font-weight:600;color:var(--fx-k3)}
	.fx-sigm__row--sum{min-height:72px;padding:10px 12px}
	.fx-sigm__row--sum .fx-sigm__r em{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
	.fx-sigm__bar i{transition:none}
}
