/*
 * 서명 장면 「말로 하면 모서리·색만 바뀌고 잠긴 곳이 표시된다」 — AI 디자인 기능 상세(feature-detail 틀). 접두사 fx-sigd-.
 * 장면 파일(template-parts/fx/feature-sig-design.php)이 이 파일을 직접 싣는다. 창·칩은 틀의 fx-feat-win 을 재사용.
 * 모서리·색은 속성을 바꾸지 않고 세 모습(l0 처음 / l1 모서리 / l2 모서리+색)을 겹쳐 opacity 만 바꾼다. 기본 = 끝난 상태(l2 + 잠금 3곳).
 * 어느 모습을 보일지는 미리보기 루트의 :has(.fx-sigd__m1.is-on) 로 정한다(:has 미지원이면 끝난 상태 그대로 보인다).
 */
.fx-sigd{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start;width:100%;max-width:1080px;margin:0 auto;padding:0 var(--fx-gut,16px);color:#111113;font-family:var(--fx-face)}
.fx-sigd .fx-feat-win{flex:none;width:100%;max-width:none}
.fx-sigd__m1,.fx-sigd__m2{display:none}
.fx-sigd__ico{flex:0 0 auto;color:var(--fx-brand)}

/* 미리보기(왼쪽) */
.fx-sigd__shop{display:grid;gap:16px;padding:18px}
.fx-sigd__nav{display:flex;align-items:center;gap:18px;min-height:40px;padding-bottom:12px;border-bottom:1px solid var(--fx-edge-paper);font-size:14px;color:var(--fx-k3)}
.fx-sigd__nav b{margin-right:auto;font-size:16px;color:#111113}
.fx-sigd__item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:start}
.fx-sigd__photo{display:block;aspect-ratio:1;border-radius:12px;background:#cfcfc8}
.fx-sigd__info{display:grid;gap:10px;min-width:0}
.fx-sigd__name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.fx-sigd__price{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-sigd__tag{display:inline-grid;font-size:13px;font-weight:700}
.fx-sigd__tg{grid-area:1/1;padding:2px 10px;border-radius:4px;color:#fff;transition:opacity .35s var(--fx-ease-std,ease)}
.fx-sigd__tg0{background:#3a3a37;opacity:0}
.fx-sigd__tg2{background:#c2410c;border-radius:999px}

/* 버튼: 세 모습을 겹친다 */
.fx-sigd__btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
.fx-sigd__b{display:grid}
.fx-sigd__l{grid-area:1/1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;font-size:16px;font-weight:700;transition:opacity .35s var(--fx-ease-std,ease)}
.fx-sigd__l0,.fx-sigd__l1,.fx-sigd__l2{background:#111113;color:#fff}
.fx-sigd__l0{border-radius:4px;opacity:0}
.fx-sigd__l1{border-radius:999px;opacity:0}
.fx-sigd__l2{border-radius:999px;background:#c2410c}
.fx-sigd__l--sub{background:#fff;color:#111113;box-shadow:inset 0 0 0 1px #8a8a84}
.fx-sigd__l--sub.fx-sigd__l2{background:#fff;color:#c2410c;box-shadow:inset 0 0 0 1.5px #c2410c}
/* 처음 → 모서리 → 색 (엔진이 장면을 무장했을 때만) */
.fm-armed .fx-sigd__pv:not(:has(.fx-sigd__m1.is-on)) .fx-sigd__l0{opacity:1}
.fm-armed .fx-sigd__pv:not(:has(.fx-sigd__m1.is-on)) .fx-sigd__l2{opacity:0}
.fm-armed .fx-sigd__pv:has(.fx-sigd__m1.is-on):not(:has(.fx-sigd__m2.is-on)) .fx-sigd__l1{opacity:1}
.fm-armed .fx-sigd__pv:has(.fx-sigd__m1.is-on):not(:has(.fx-sigd__m2.is-on)) .fx-sigd__l2{opacity:0}
.fm-armed .fx-sigd__pv:not(:has(.fx-sigd__m2.is-on)) .fx-sigd__tg0{opacity:1}
.fm-armed .fx-sigd__pv:not(:has(.fx-sigd__m2.is-on)) .fx-sigd__tg2{opacity:0}
.fx-sigd__tg2{transition:opacity .35s var(--fx-ease-std,ease)}

/* 잠긴 곳: 점선 윤곽 + 칩 */
.fx-sigd__zone{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.fx-sigd__zone--buy{display:grid;gap:10px}
.fx-sigd__zone::after{content:"";position:absolute;inset:-6px;border:2px dashed #111113;border-radius:12px;pointer-events:none;opacity:1;transition:opacity .35s var(--fx-ease-std,ease)}
.fx-sigd__lock{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:28px;padding:2px 12px 2px 10px;border-radius:var(--fx-radius-pill,999px);background:#111113;color:#fff;font-size:13px;font-weight:600;line-height:1.4;transition:opacity .35s var(--fx-ease-std,ease),transform .35s var(--fx-ease-std,ease)}
.fx-sigd__foot{margin:0;font-size:14px;color:var(--fx-k3)}
.fx-sigd__zone--foot{padding:6px 0}
.fm-armed .fx-sigd__zone:not(.is-on)::after{opacity:0}
.fm-armed .fx-sigd__zone:not(.is-on) .fx-sigd__lock{opacity:0;transform:translateY(6px)}

/* 채팅(오른쪽) */
.fx-sigd__thread{display:grid;gap:10px;padding:16px;align-content:start}
.fx-sigd__bub{max-width:92%;margin:0;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--fx-paper-2);font-size:15px;line-height:1.55;word-break:keep-all}
.fx-sigd__bub small{display:block;margin-bottom:2px;font-size:13px;font-weight:600;color:var(--fx-k3)}
.fx-sigd__bub--me{justify-self:end;border-radius:14px 14px 4px 14px;background:#111113;color:#fff;font-weight:600}
.fx-sigd__bub--no{box-shadow:inset 0 0 0 1.5px #111113;background:#fff}

@media (max-width:1023px){
	.fx-sigd{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
	.fx-sigd__item{grid-template-columns:88px minmax(0,1fr);gap:12px}
	.fx-sigd__nav{gap:12px;font-size:13px}
	.fx-sigd__nav span:nth-of-type(3){display:none}
	.fx-sigd__price{font-size:22px}
	.fx-sigd__shop{padding:14px}
	.fx-sigd__thread{padding:12px}
}
@media (prefers-reduced-motion:reduce){
	.fx-sigd__l,.fx-sigd__tg,.fx-sigd__tg2,.fx-sigd__lock,.fx-sigd__zone::after{transition:none}
}