/* Workspace V2 플로우 — 프로토타입 2~6 화면 디자인.
   업로드 → 편집/템플릿 → 게시글 → 고객 연결 → 미리보기 → 게시.
   [C1] 자체 --p/--ink 팔레트 제거 → tokens.css var() 통일. 그라데이션 색면 제거. */

.wsv2flow {
  position: fixed; inset: 0; z-index: 9800; display: none; flex-direction: column;
  background: #F9F8F7; color: var(--text);   /* [디자인 통일] 홈과 같은 따뜻한 크림 — 앱 전체 프리미엄 톤 일치(뷰티 살롱 감성) */
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wsv2flow.is-open { display: flex; }

/* 상단바 + 진행 */
.wsv2flow__bar { flex: none; padding: calc(8px + env(safe-area-inset-top)) 16px 0;
  display: grid; grid-template-columns: 40px 1fr 56px; align-items: center; height: 54px; }
.wsv2flow__back { appearance: none; border: 0; background: transparent; color: var(--text);
  width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; }
.wsv2flow__back svg { width: 24px; height: 24px; stroke: var(--text); }
.wsv2flow__title { text-align: center; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.wsv2flow__step { justify-self: end; font-size: 13px; font-weight: 800; color: var(--text-subtle); }
.wsv2flow__progress { flex: none; display: flex; gap: 6px; padding: 6px 18px 12px; }
/* .pg-seg — 진행 막대 (progress용). .seg는 caption 세그탭용이라 별도 클래스로 분리 */
.wsv2flow__progress .pg-seg { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--border); transition: .3s; }
.wsv2flow__progress .pg-seg.done { background: var(--brand-strong); }

/* 화면 전환 */
.wsv2flow__screens { position: relative; flex: 1 1 auto; overflow: hidden; }
.wsv2flow__s { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 18px 24px; opacity: 0; transform: translateX(34px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease; }
.wsv2flow__s.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.wsv2flow__s.prev { transform: translateX(-34px); }
.wsv2flow__s::-webkit-scrollbar { width: 0; }

/* 하단 CTA — 틴트 페이드 유지(배경 위 글 가림 방지) */
.wsv2flow__actionbar { flex: none; display: flex; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(249,248,247,0), #F9F8F7 28%); border-top: 1px solid var(--border); }
.wsv2flow__actionbar.hidden { display: none; }
.wsv2flow__cta { width: 100%; height: 54px; border: 0; border-radius: var(--r-lg); font-size: 16px; font-weight: 900; cursor: pointer;
  background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-brand); }
.wsv2flow__cta:disabled { background: var(--frame); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; }

.wsv2flow .screen-head { margin: 4px 2px 18px; }
.wsv2flow .screen-head h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.03em; margin: 0 0 9px; font-weight: 900; color: var(--text); }
.wsv2flow .screen-head p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); font-weight: 600; }
.wsv2flow .cust-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 12px; }
.wsv2flow .cust-row b { font-size: 13px; color: var(--text); }
.wsv2flow .cust-row a { font-size: 11.5px; color: var(--brand-strong); font-weight: 800; text-decoration: none; cursor: pointer; }

/* A. 사진 업로드 */
.wsv2flow .up-drop { border: 1.5px dashed var(--brand); background: var(--brand-bg); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 18px; margin-bottom: 16px; cursor: pointer; transition: .15s; }
.wsv2flow .up-drop:active { transform: scale(.99); border-color: var(--brand-strong); }
.wsv2flow .up-cloud { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.wsv2flow .up-cloud svg { width: 24px; height: 24px; stroke: var(--brand-strong); }
.wsv2flow .up-drop b { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.wsv2flow .up-note { font-size: 10.5px; color: var(--text-subtle); font-weight: 700; }
.wsv2flow .up-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.wsv2flow .up-toggle-copy b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.wsv2flow .up-toggle-copy span { display: block; font-size: 10.5px; color: var(--text-subtle); font-weight: 600; line-height: 1.4; }
.wsv2flow .ui-toggle { flex: none; width: 46px; height: 27px; border: 0; border-radius: var(--r-pill); background: var(--frame); padding: 3px; cursor: pointer; transition: .2s; }
.wsv2flow .ui-toggle::after { content: ""; display: block; width: 21px; height: 21px; border-radius: 50%; background: #fff; transform: translateX(0); transition: .2s; box-shadow: var(--shadow-sm); }
.wsv2flow .ui-toggle.on { background: var(--brand-strong); box-shadow: var(--shadow-brand); }
.wsv2flow .ui-toggle.on::after { transform: translateX(19px); }
.wsv2flow .up-section { font-size: 12.5px; color: var(--text-muted); font-weight: 800; margin: 0 2px 11px; }
.wsv2flow .up-section b { color: var(--brand-strong); }
.wsv2flow .upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.wsv2flow .photo-tile { height: 128px; border-radius: var(--r-md); position: relative; border: 2px solid transparent;
  box-shadow: var(--shadow-sm); background: var(--frame) center/cover; cursor: pointer; overflow: hidden; }
.wsv2flow .photo-tile.selected { border-color: var(--brand-strong); box-shadow: var(--shadow-md); }
/* 삭제 버튼 — 선택 체크처럼 안 보이게 어두운 휴지통 */
.wsv2flow .thumb-del { position: absolute; right: 7px; top: 7px; width: 26px; height: 26px; border: 0; border-radius: var(--r-md); background: rgba(20,16,16,.6); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.wsv2flow .thumb-del i { font-size: 14px; }
.wsv2flow .thumb-del:active { background: var(--danger); }
.wsv2flow .thumb-tag { position: absolute; left: 7px; bottom: 7px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(31,26,26,.66); color: #fff; font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; }
.wsv2flow .thumb-tag.before { background: rgba(46,163,107,.92); }   /* [v567] 전=초록 */
.wsv2flow .thumb-tag.after { background: var(--brand-strong); }    /* 후=분홍 */
.wsv2flow .thumb-tag.exclude { background: rgba(80,80,80,.8); text-decoration: line-through; }
/* 라벨을 탭하면 역할(전/후/홍보컷/제외) 직접 지정 — 버튼 기본 스타일 리셋 */
.wsv2flow button.thumb-tag { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: inherit; line-height: 1; }

/* [#5] 사진별 전/후 세그먼트 — 토글 순환 대신 직접 지정. 깔끔한 2-칩. */
.wsv2flow .thumb-seg { position: absolute; left: 7px; bottom: 7px; display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: rgba(20,16,16,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wsv2flow button.thumb-seg-b { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: inherit; line-height: 1; min-width: 30px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: transparent; color: rgba(255,255,255,.92); font-size: 11px; font-weight: 800; }
.wsv2flow button.thumb-seg-b.on { background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-sm); }
.wsv2flow button.thumb-seg-b:first-child.on { background: rgba(46,163,107,.95); }   /* [v567] 전=초록 */
.wsv2flow button.thumb-tag::after { content: ""; }
.wsv2flow .up-rolehint { font-weight: 600; color: var(--text-subtle); font-size: 11px; }
.wsv2flow .grid-add { height: 128px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--brand-strong); font-size: 26px; font-weight: 800; border-radius: var(--r-md); cursor: pointer; }
.wsv2flow .grid-add span { font-size: 12px; font-weight: 700; }
/* [업로드 우선] 순서배지 · 기본역할 · 키커 · 가이드 · 요약칩 */
.wsv2flow .thumb-order { position: absolute; left: 7px; top: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-strong); color: #fff; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-sm); }
.wsv2flow button.thumb-seg-b.basic.on { background: var(--text-subtle); }
.wsv2flow .up-kicker { display: flex; align-items: center; gap: 7px; color: var(--brand-strong); font-weight: 800; font-size: 11.5px; margin: 0 2px 10px; }
.wsv2flow .up-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-bg); flex: none; }
.wsv2flow .up-note--rose { color: var(--brand-strong); margin-top: 4px; }
.wsv2flow .up-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.wsv2flow .up-guide-c { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 6px; background: var(--surface-2); text-align: center; }
.wsv2flow .up-guide-c b { display: block; font-size: 13px; color: var(--brand-strong); margin-bottom: 3px; }
.wsv2flow .up-guide-c small { display: block; color: var(--text-subtle); font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.wsv2flow .up-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.wsv2flow .up-chip { border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 10px; font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.wsv2flow .up-chip b { color: var(--brand-strong); }

/* B. 편집 — 연준 원본 5탭 구조 복원(토큰 톤). 아이콘=ph-duotone <i> */
/* 전/후(다중) 사진 편집 전환 스위처 — 전후 콘텐츠에서 각 사진을 각각 보정 */
/* [v550] 편집 사진 carousel 네비 — 큰 프리뷰를 좌우로 넘기고, 여긴 컴팩트 dot+카운터+화살표 */
.wsv2flow .ed-carnav { display: flex; align-items: center; gap: 8px; margin: 8px 2px 10px; }
.wsv2flow .ed-carnav__arw { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.wsv2flow .ed-carnav__arw svg { width: 18px; height: 18px; }
.wsv2flow .ed-carnav__arw:disabled { opacity: .3; cursor: default; }
.wsv2flow .ed-carnav__mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wsv2flow .ed-carnav__pill { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.wsv2flow .ed-carnav__pill b { color: var(--brand-strong); }
.wsv2flow .ed-carnav__dots { display: flex; gap: 6px; align-items: center; }
.wsv2flow .ed-carnav__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: width .15s, background .15s; }
.wsv2flow .ed-carnav__dot.on { width: 20px; border-radius: 4px; background: var(--brand-strong); }
.wsv2flow .ed-carnav__count { font-size: 11px; font-weight: 700; color: var(--text-subtle); }
@media (pointer: coarse) { .wsv2flow .ed-carnav__arw { display: none; } }   /* 모바일: 스와이프 우선, 화살표 숨김 */
.wsv2flow .ed-photo.is-swipeback { transition: filter .12s, transform .18s ease; }   /* 스와이프 미확정 복귀만 부드럽게 */
.wsv2flow .ed-baswitch { display: flex; gap: 8px; margin-bottom: 10px; }
.wsv2flow .ed-baswitch__btn { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center;
  height: 52px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--frame) center/cover;
  padding: 5px; cursor: pointer; position: relative; overflow: hidden; }
.wsv2flow .ed-baswitch__btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); }
.wsv2flow .ed-baswitch__btn span { position: relative; font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.wsv2flow .ed-baswitch__btn.on { border-color: var(--brand-strong); box-shadow: var(--shadow-brand); }
/* 줌 뷰포트 — 사진 확대(핀치/더블탭) 시 둥근 모서리 안에서 클립 */
/* [sticky preview] 정밀 보정/템플릿 패널로 스크롤해도 사진 미리보기가 항상 화면에 보이게 — 상단 고정. */
/* [v575·필수7] 편집 사진은 기본적으로 크게 — '크게' 버튼 의존 없이 진입 즉시 큰 작업창.
   38vh·300px 캡 → 64vh·720px 로 상향(모바일/PC 모두 사진 중심). contain 유지로 사진 전체 가시. */
.wsv2flow .ed-photo-vp { position: sticky; top: 0; z-index: 3; width: 100%; height: clamp(360px, 64vh, 720px); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 10px; box-shadow: var(--shadow-sm); background: var(--frame); touch-action: none; }
/* [v545] cover→contain — 세로 사진 상단/하단이 잘려 보이던 문제 수정. 편집 프리뷰는 업로드 사진 '전체'가 보여야 함.
   background-size 를 별도 longhand 로 분리(단축속성에 두면 var() 무효 시 통째로 드롭될 수 있어 견고하게). */
.wsv2flow .ed-photo { width: 100%; height: 100%; border-radius: 0; background-color: var(--frame); background-position: center; background-size: contain; background-repeat: no-repeat; margin: 0; box-shadow: none; transition: filter .12s; transform-origin: center center; will-change: transform; }
/* 정밀(피부/헤어) 보정 처리 중 — 손 뗄 때 픽셀 연산 진행 표시(스피너) */
.wsv2flow .ed-photo-vp.is-processing::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid rgba(255,255,255,.55); border-top-color: var(--brand-strong); border-radius: 50%; animation: wsv2spin .7s linear infinite; z-index: 4; pointer-events: none; }
.wsv2flow .ed-photo-vp.is-processing::before { content: ""; position: absolute; inset: 0; background: rgba(20,16,12,.18); z-index: 3; pointer-events: none; }
/* [v539] 마스크 보기 overlay + 상태 배지 */
.wsv2flow .ed-mask-ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; transform-origin: center center; will-change: transform; }
.wsv2flow .ed-mask-ov[hidden] { display: none; }
.wsv2flow .ed-mask-badge { position: absolute; left: 8px; top: 8px; z-index: 5; background: rgba(20,16,16,.66); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: var(--r-pill); pointer-events: none; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsv2flow .ed-mask-badge[hidden] { display: none; }
/* [v575·필수8/11] 사진 '아래' slim 도구바 — 사진 위 overlay 제거. 확대/축소·전체화면만(사진 안 가림). */
.wsv2flow .ed-vptools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 12px; }
.wsv2flow .ed-vpzoom { display: flex; align-items: center; gap: 4px; }
.wsv2flow .ed-vpbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; min-width: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface, #fff); color: var(--text); font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .14s, transform .1s; }
.wsv2flow .ed-vpbtn:active { transform: scale(.94); }
.wsv2flow .ed-vpbtn i { font-size: 16px; color: var(--brand-strong); }
.wsv2flow .ed-vpbtn.on { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.wsv2flow .ed-vpbtn.on i { color: #fff; }
.wsv2flow .ed-vpbtn--ic { padding: 0; width: 34px; font-size: 17px; }
.wsv2flow .ed-vpbtn--pct { min-width: 52px; font-variant-numeric: tabular-nums; }
.wsv2flow .ed-vpbtn--fs span { font-size: 12.5px; }
/* 전체화면 편집 — viewport 를 화면 가득 채워 PC/모바일 모두 크게 보정. 도구바만 하단 floating 으로. */
body.itd-edit-fs .wsv2flow .ed-photo-vp { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; border-radius: 0; margin: 0; z-index: 9000; background: #14100c; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
body.itd-edit-fs .wsv2flow .ed-vptools { position: fixed; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9001; margin: 0; }
body.itd-edit-fs .wsv2flow .ed-vptools .ed-vpbtn { background: rgba(28,22,20,.62); color: #fff; border-color: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.itd-edit-fs .wsv2flow .ed-vptools .ed-vpbtn i { color: #fff; }
/* [v540] 마스크 보기 — 정밀 조정 안 pill toggle + inline fallback helper */
/* [v566·scope4] 마스크 도구 = 보정 슬라이더 아래 보조 영역. 위에 얇은 구분선 + 안내 부제. */
.wsv2flow .ed-masktools { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.wsv2flow .ed-mask-subhead { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; }
.wsv2flow .ed-mask-subhead i { font-size: 15px; color: var(--brand-strong); align-self: center; }
/* [v575·필수8] 인식 %는 사진 위 배지 대신 메뉴 쪽 작은 상태칩으로 — 사진 안 가림 */
.wsv2flow .ed-mask-stat { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--brand-strong); background: var(--brand-weak, rgba(200,90,130,.12)); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.wsv2flow .ed-mask-stat[hidden] { display: none; }
.wsv2flow .ed-mask-subhead span { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.wsv2flow .ed-maskpill-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.wsv2flow button.ed-maskpill { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.wsv2flow button.ed-maskpill i { font-size: 16px; }
.wsv2flow button.ed-maskpill .ed-maskpill__hint { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.wsv2flow button.ed-maskpill.on { background: var(--brand-strong); color: #fff; border-color: transparent; }
.wsv2flow button.ed-maskpill.on .ed-maskpill__hint { color: rgba(255,255,255,.82); }
.wsv2flow .ed-mask-helper { flex: 1 1 100%; font-size: 12px; font-weight: 700; color: #9A6B4E; background: #FBF1E8; border: 1px solid #F0DCC9; border-radius: 10px; padding: 8px 11px; }
.wsv2flow .ed-mask-helper[hidden] { display: none; }
/* [v561] 직접 칠하기(수동 마스크) 컨트롤 */
.wsv2flow .ed-paintctl { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, #FAF7F8); }
.wsv2flow .ed-paintctl__lbl { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wsv2flow .ed-paintctl__lbl b { color: var(--brand-strong); font-weight: 800; }
.wsv2flow .ed-paintctl__row { display: flex; gap: 7px; flex-wrap: wrap; }
.wsv2flow button.ed-paintb { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.wsv2flow button.ed-paintb i { font-size: 15px; }
.wsv2flow button.ed-paintb.on { background: var(--brand-strong); color: #fff; border-color: transparent; }
.wsv2flow .ed-paintbrush { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; color: var(--text-muted); }
.wsv2flow .ed-paintbrush input { flex: 1; accent-color: var(--brand-strong); }
/* [v542] 보정 디버그 패널 — 개발자모드에서만 노출 */
.wsv2flow .ed-fxdebug { margin-top: 12px; padding: 11px 12px; border: 1px dashed #B9A7AE; border-radius: 12px; background: #FBF7F8; font-size: 12px; }
.wsv2flow .ed-fxdebug__hd { font-size: 12.5px; font-weight: 800; color: #6A4A52; margin-bottom: 7px; }
.wsv2flow .ed-fxdebug__hd em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: #BC6675; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.wsv2flow .ed-fxdebug__r { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--text-subtle); }
.wsv2flow .ed-fxdebug__r b { color: var(--text); font-weight: 800; text-align: right; word-break: break-all; }
.wsv2flow .ed-fxdebug__btns { display: flex; gap: 6px; margin-top: 9px; }
.wsv2flow .ed-fxdebug__btns button { flex: 1; height: 32px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.wsv2flow .ed-fxdebug__btns .ed-fxdebug__copy { flex: 1.5; border-color: var(--brand-strong); color: var(--brand-strong); }
.wsv2flow .ed-fxdebug__note { margin-top: 8px; font-size: 11px; color: var(--text-subtle); line-height: 1.45; }
/* 편집 섹션 래퍼 — 레이아웃 영향 없이(display:contents) 부분 갱신 컨테이너만 제공 */
.wsv2flow .ed-sec { display: contents; }
.wsv2flow .ed-panel { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; }
/* 펼치기 토글(정밀 조정 / 템플릿) */
.wsv2flow .ed-fold { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 16px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); }
.wsv2flow .ed-fold em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--text-subtle); margin-left: 6px; }
.wsv2flow .ed-fold__caret { width: 18px; height: 18px; stroke: var(--text-muted); flex: none; }
.wsv2flow .ed-fold.open { border-color: var(--brand); color: var(--brand-strong); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.wsv2flow .ed-fold.open .ed-fold__caret { stroke: var(--brand-strong); }
.wsv2flow .ed-fold.open + .ed-panel { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
/* 펼친 본문 여백(템플릿 등 토글이 카드에 딱 붙지 않게) */
.wsv2flow .ed-foldbody { padding: 14px; }
.wsv2flow .ed-foldbody .tpl-chips { margin-bottom: 12px; }
.wsv2flow .ed-foldbody .tpl-grid2 { margin-bottom: 0; }
/* [v554] 정밀조정 카테고리 5개(피부·헤어·눈썹눈가·네일·고급)를 모바일에서도 한 줄에. 4칸 grid → 5칸. */
.wsv2flow .ed-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--border); }
.wsv2flow .ed-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 62px; padding: 0 2px; color: var(--text-muted); font-size: 11px; font-weight: 800; line-height: 1.1; white-space: nowrap; cursor: pointer; position: relative; }
.wsv2flow .ed-tab i { font-size: 21px; }
.wsv2flow .ed-tab.on { color: var(--brand-strong); }
.wsv2flow .ed-tab.on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 0; height: 2px; background: var(--brand-strong); }
/* [v554] 정밀 조정 항상 펼침 — 접기/펼치기 토글·caret 없는 정적 섹션 헤더(기능 숨김 오해 방지). */
.wsv2flow .ed-prec-head { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 4px 0 2px; color: var(--text); font-size: 13.5px; font-weight: 800; }
.wsv2flow .ed-prec-head i { font-size: 18px; color: var(--brand-strong); }
.wsv2flow .ed-tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 15px 6px 4px; }
.wsv2flow .ed-tool { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text-muted); font-size: 10.5px; font-weight: 700; cursor: pointer; }
.wsv2flow .ed-circle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; }
.wsv2flow .ed-circle i { font-size: 21px; color: var(--text-muted); }
.wsv2flow .ed-tool.on .ed-circle { border-color: var(--brand-strong); background: var(--brand-bg); }
.wsv2flow .ed-tool.on .ed-circle i { color: var(--brand-strong); }
.wsv2flow .ed-slider { display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; gap: 14px; padding: 15px 18px 18px; font-size: 13.5px; font-weight: 800; color: var(--text); }
.wsv2flow .ed-slider input[type="range"] { width: 100%; accent-color: var(--brand-strong); }
.wsv2flow .ed-adv .ed-tools { grid-template-columns: repeat(3, 1fr); padding-top: 2px; }
.wsv2flow .ed-slider--beauty { padding-left: 4px; padding-right: 4px; }
.wsv2flow .ed-val { font-size: 18px; color: var(--text); text-align: right; }
/* 좌·우 고정 라벨 슬라이더 (숫자 없음) — 뷰티앱 미니멀 */
.wsv2flow .ed-slider--labeled { grid-template-columns: 58px 1fr 58px; gap: 12px; }
.wsv2flow .ed-slabel { font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.wsv2flow .ed-slabel--lo { text-align: left; }
.wsv2flow .ed-slabel--hi { text-align: right; }
.wsv2flow .ed-bottom { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; margin-bottom: 24px; }
.wsv2flow .ed-bottom .eb { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.wsv2flow .ed-bottom .eb .eb-ic { width: 23px; height: 23px; stroke: var(--text); }
.wsv2flow .ed-bottom .eb.disabled { color: var(--text-subtle); cursor: default; }
.wsv2flow .ed-bottom .eb.disabled .eb-ic { stroke: var(--text-subtle); }
.wsv2flow .ed-bottom .eb.active { color: var(--brand-strong); }
.wsv2flow .ed-bottom .eb.active .activebox { width: 58px; height: 54px; border-radius: var(--r-lg); background: var(--brand-bg); display: grid; place-items: center; margin-bottom: -2px; }
.wsv2flow .ed-bottom .eb.active .eb-ic { stroke: var(--brand-strong); }
/* 배경 탭 / 고급 탭 */
.wsv2flow .ed-bg { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wsv2flow .ed-bg__sublabel { font-size: 11.5px; font-weight: 800; color: var(--text-subtle); margin: 4px 0 -2px; }
/* 배경 정리 옵션 — 배경색 스와치처럼 아이콘 칩 한 줄(원본/인물만/흐림/내 배경) */
.wsv2flow .ed-bg__opts { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 0; }
.wsv2flow .ed-bg__opt { display: flex; flex-direction: column; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; padding: 0; width: 60px; }
.wsv2flow .ed-bg__opticon { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.wsv2flow .ed-bg__opticon i { font-size: 21px; }
.wsv2flow .ed-bg__opt em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-subtle); white-space: nowrap; }
.wsv2flow .ed-bg__opt.on .ed-bg__opticon { border-color: var(--brand-strong); background: var(--brand-bg); color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-bg); }
.wsv2flow .ed-bg__opt.on em { color: var(--brand-strong); }
.wsv2flow .ed-bg__opt[disabled] { opacity: .5; pointer-events: none; }
.wsv2flow .ed-bg__btn[disabled] { opacity: .5; pointer-events: none; }
.wsv2flow .ed-bg__color[disabled] { opacity: .5; pointer-events: none; }
.wsv2flow .ed-bg__status.is-busy { color: var(--brand-strong); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wsv2flow .ed-bg__spin { display: inline-block; animation: wsv2spin .8s linear infinite; }
@keyframes wsv2spin { to { transform: rotate(360deg); } }
.wsv2flow .cap-field-hint { font-size: 11.5px; line-height: 1.5; color: var(--text-subtle); margin: -2px 0 14px; }
.wsv2flow .cap-field-hint b { color: var(--brand-strong); font-weight: 800; }
.wsv2flow .ed-bg__btn { height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wsv2flow .ed-bg__btn i { font-size: 18px; }
.wsv2flow .ed-bg__btn.on { border-color: var(--brand-strong); background: var(--brand-bg); color: var(--brand-strong); }
.wsv2flow .ed-bg__colors { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.wsv2flow .ed-bg__color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.wsv2flow .ed-bg__color.on { border-color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-bg); }
.wsv2flow .ed-bg__status { font-size: 11.5px; color: var(--text-subtle); text-align: center; }
.wsv2flow .ed-bg__status.is-fail { color: var(--danger); font-weight: 700; }
.wsv2flow .ed-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; line-height: 1.45; color: var(--text-subtle); }
.wsv2flow .ed-note svg { width: 14px; height: 14px; stroke: var(--warn); flex: 0 0 auto; margin-top: 1px; }
.wsv2flow .cap-field-label { display: block; font-size: 12px; font-weight: 900; color: var(--text-muted); margin: 0 0 6px; }
.wsv2flow .cap-field-label span { font-weight: 500; color: var(--text-subtle); font-size: 11px; }
.wsv2flow .ed-adv { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.wsv2flow .ed-adv__btn { height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wsv2flow .ed-adv__btn svg { width: 18px; height: 18px; stroke: var(--brand-strong); }
.wsv2flow .ed-adv__btn.on { border-color: var(--brand-strong); color: var(--brand-strong); }
/* [v538] 전·후 사진 확인 — 인라인 역할 재지정 패널 */
.wsv2flow .ed-roles { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.wsv2flow .ed-roles__row { display: flex; align-items: center; gap: 10px; }
.wsv2flow .ed-roles__thumb { width: 44px; height: 44px; border-radius: 10px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid var(--border); }
.wsv2flow .ed-roles__seg { display: inline-flex; gap: 4px; margin-left: auto; }
.wsv2flow button.ed-roles__b { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; min-width: 42px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 800; }
.wsv2flow button.ed-roles__b.on { background: var(--brand-strong); color: #fff; border-color: transparent; }
.wsv2flow button.ed-roles__b.before.on { background: rgba(46,163,107,.95); }   /* [v567] 전=초록 (후=분홍은 .on) */
.wsv2flow .ed-roles__hint { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.wsv2flow .ed-roles-empty { font-size: 13px; color: var(--text-subtle); padding: 8px 2px; }
.wsv2flow .tpl-picked { margin: 10px 2px 0; font-size: 12px; font-weight: 800; color: var(--brand-strong); }
.wsv2flow .tpl-chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.wsv2flow .tpl-chips::-webkit-scrollbar { height: 0; }
.wsv2flow .tpl-chip { flex: none; height: 34px; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0 15px; background: var(--surface); color: var(--text-muted); display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .tpl-chip.on { background: var(--brand-strong); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.wsv2flow .tpl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* [v541] 썸네일 = 디자인 자체가 보이게. 검은 제목 오버레이/그라데이션 제거. 선택=로즈테두리+체크+적용됨 pill. */
.wsv2flow .tpl-item { position: relative; height: 122px; border-radius: var(--r-md); background: var(--frame) center/cover; border: 2px solid transparent; cursor: pointer; box-shadow: var(--shadow-sm); padding: 0; overflow: hidden; -webkit-touch-callout: none; }
.wsv2flow .tpl-item.on { border-color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-strong), var(--shadow-md); }
.wsv2flow .tpl-item .tpl-check { position: absolute; right: 7px; bottom: 7px; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-sm); }
.wsv2flow .tpl-item .tpl-check svg { width: 15px; height: 15px; }
.wsv2flow .tpl-item .tpl-onpill { position: absolute; left: 7px; bottom: 7px; z-index: 2; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand-strong); padding: 3px 9px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
/* [#3] 타입 뱃지(전후/후기/이벤트 등) — 카드 좌상단. 업로드 사진이 아닌 템플릿 메타를 표시 */
/* [이슈5] 배지 가독성 — 9.5px 굵은글씨+좁은 자간(-.2px)이라 '스토리'가 '스로티'처럼 보이던 문제. 글자 키우고 자간 정상화. */
.wsv2flow .tpl-item .tpl-badge { position: absolute; top: 7px; left: 7px; z-index: 1; width: auto; font-style: normal; font-size: 11px; line-height: 1.25; font-weight: 800; color: #fff; background: var(--brand-strong); padding: 3px 9px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); letter-spacing: 0; white-space: nowrap; }
/* [v531] 유형별 기본 템플릿 설정 + '기본' 배지 + 기본 적용 버튼 */
.wsv2flow .tpl-itemwrap { display: flex; flex-direction: column; gap: 6px; }
.wsv2flow .tpl-itemwrap .tpl-item { width: 100%; }
.wsv2flow .tpl-item .tpl-defbadge { position: absolute; top: 7px; right: 7px; z-index: 1; width: auto; font-style: normal; font-size: 10px; font-weight: 800; color: var(--brand-strong); background: #fff; padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); white-space: nowrap; }
.wsv2flow .tpl-setdefault { height: 28px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }
.wsv2flow .tpl-setdefault.on { border-color: var(--brand-strong); color: var(--brand-strong); background: var(--brand-bg); }
.wsv2flow .tpl-applydefault { width: 100%; height: 44px; margin-bottom: 12px; border: 0; border-radius: var(--r-md); background: var(--brand-strong); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-brand); font-family: inherit; }

/* [이슈11] 템플릿 적용 상태 배너 + 해제 버튼 */
.wsv2flow .tpl-applied { margin: 12px 2px 0; display: flex; flex-direction: column; gap: 10px; padding: 11px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--brand); }
.wsv2flow .tpl-applied__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsv2flow .tpl-applied__t { flex: 1 1 100%; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--text-muted); }
.wsv2flow .tpl-applied__t b { color: var(--brand-strong); }
.wsv2flow .tpl-applied__change { flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.wsv2flow .tpl-applied__release { flex: none; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--brand-strong); background: var(--surface); color: var(--brand-strong); font-size: 12px; font-weight: 800; cursor: pointer; }
.wsv2flow .tpl-results { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.wsv2flow .tpl-results::-webkit-scrollbar { display: none; }
.wsv2flow .tpl-result { flex: 0 0 auto; width: 84px; }
.wsv2flow .tpl-result__img { width: 84px; height: 105px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--border); background-color: #000; }
.wsv2flow .tpl-result__lbl { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center; }
/* [v532] 짝(Pair)별 '템플릿 바꾸기' — 결과 타일 아래 작은 버튼. 이 짝만 갤러리에서 골라 교체. */
.wsv2flow .tpl-result__change { display: block; width: 100%; margin-top: 5px; height: 26px; padding: 0 4px; border: 1px solid var(--brand-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--brand-strong); font-size: 10.5px; font-weight: 800; cursor: pointer; }
/* [v534] 짝별 버튼 그룹(바꾸기 + 수정) + '템플릿 수정'(채운 로즈). */
.wsv2flow .tpl-result__btns { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.wsv2flow .tpl-result__btns .tpl-result__change { margin-top: 0; }
.wsv2flow .tpl-result__edit { display: block; width: 100%; height: 26px; padding: 0 4px; border: 0; border-radius: var(--r-pill); background: var(--brand-strong); color: #fff; font-size: 10.5px; font-weight: 800; cursor: pointer; }
/* [v534] 적용 헤더의 '문구 수정' 진입. */
.wsv2flow .tpl-applied__edit { flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 0; background: var(--brand-strong); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
/* [v559] 템플릿 결과 인라인 — 큰 preview 아래로 쭉 내리면 보이는 '합쳐진 전후 결과'(별도 carousel 제거). */
.wsv2flow .tplres { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.wsv2flow .tplres__badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--brand-bg, rgba(213,138,149,.12)); color: var(--brand-strong); font-size: 12px; font-weight: 800; }
.wsv2flow .tplres__badge svg { width: 14px; height: 14px; }
.wsv2flow .tplres__badge em { font-style: normal; font-weight: 700; color: var(--text-muted); }
.wsv2flow .tplres__img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg, 16px); background: var(--frame) center/contain no-repeat; box-shadow: var(--shadow-md); }
.wsv2flow .tplres__pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.wsv2flow .tplres__pairchip { min-height: 34px; padding: 7px 13px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .tplres__pairchip.on { border-color: var(--brand-strong); background: var(--brand-strong); color: #fff; }
/* [v561·항목4] 결과물 전환 = 좌우 스와이프 + dot + 화살표(텍스트 'N번 보기' 칩 대체) */
.wsv2flow .tplres__nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 0; }
.wsv2flow .tplres__dots { display: flex; gap: 6px; align-items: center; }
.wsv2flow .tplres__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: width .15s, background .15s; }
.wsv2flow .tplres__dot.on { width: 20px; border-radius: 4px; background: var(--brand-strong); }
.wsv2flow .tplres__arw { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.wsv2flow .tplres__arw svg { width: 18px; height: 18px; }
.wsv2flow .tplres__arw:disabled { opacity: .35; cursor: default; }
.wsv2flow .tplres__act { display: flex; flex-wrap: wrap; gap: 8px; }
.wsv2flow .tplres__change { flex: 1 1 auto; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; }
.wsv2flow .tplres__edit { flex: 1 1 auto; height: 38px; border-radius: var(--r-md); border: 0; background: var(--brand-strong); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.wsv2flow .tplres__release { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--brand-strong); background: var(--surface); color: var(--brand-strong); font-size: 13px; font-weight: 800; cursor: pointer; }

/* [이슈1] 전후 페어링 미리보기 — 어떤 전 사진이 어떤 후 사진과 묶이는지 명확히 */
.wsv2flow .up-pairs { margin: 4px 0 2px; display: flex; flex-direction: column; gap: 7px; }
.wsv2flow .up-pairs__head { font-size: 12px; font-weight: 800; color: var(--brand-strong); }
.wsv2flow .up-pair { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.wsv2flow .up-pair__n { flex: none; font-size: 11px; font-weight: 800; color: var(--text-muted); min-width: 42px; }
.wsv2flow .up-pair__thumb { position: relative; width: 40px; height: 40px; flex: none; border-radius: 9px; background: var(--frame) center/cover; }
.wsv2flow .up-pair__thumb em { position: absolute; left: 3px; bottom: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: rgba(25,31,40,.7); padding: 1px 5px; border-radius: var(--r-pill); }
.wsv2flow .up-pair__plus { font-size: 14px; font-weight: 800; color: var(--text-muted); }
.wsv2flow .up-pair__need { font-size: 11.5px; font-weight: 700; color: #c0392b; }
.wsv2flow .up-pair--left { background: #fff4f1; border-color: #f3c8bd; }

/* C. 게시글 (FC4: 3x3 시나리오칩 + 고정멘트 꼬리) */
.wsv2flow .cap-photo.cap-photo--sm { width: 100%; height: 200px; border-radius: var(--r-lg); background: var(--frame) center/contain no-repeat; margin-bottom: 12px; }   /* [#14] 잘림(cover)→전체(contain) — 캡션 상단에 사진 풀로 보이게 */
.wsv2flow .cap-byline { font-size: 11px; font-weight: 700; color: var(--text-subtle); text-align: center; padding: 6px 0 10px; }
.wsv2flow .cap-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 0; color: var(--text-subtle); font-size: 13px; }
.wsv2flow .cap-loading-spin { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--brand-strong); border-radius: 50%; animation: wsv2spin .8s linear infinite; }
@keyframes wsv2spin { to { transform: rotate(360deg); } }
.wsv2flow .captail { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 10px 14px; margin: 10px 0 14px; background: var(--surface-2); }
.wsv2flow .captail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wsv2flow .captail__label { font-size: 10.5px; font-weight: 800; color: var(--text-subtle); letter-spacing: .02em; }
.wsv2flow .captail__clear { border: 0; background: transparent; color: var(--danger); font-size: 11px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.wsv2flow .captail__edit { width: 100%; box-sizing: border-box; resize: vertical; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 8px 10px; font-size: 11.5px; line-height: 1.55; color: var(--text); outline: none; font-family: inherit; }
.wsv2flow .captail__edit:focus { border-color: var(--brand); }
.wsv2flow .captail__save { margin-top: 8px; width: 100%; height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.wsv2flow .captail__save:active { background: var(--brand-bg); color: var(--brand-strong); }
/* C. 게시글 */
.wsv2flow .seg { height: 42px; background: var(--brand-bg); border-radius: var(--r-md); padding: 4px; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.wsv2flow .seg-btn { border: 0; border-radius: var(--r-sm); background: transparent; color: var(--brand); font-weight: 900; font-size: 12.5px; cursor: pointer; }
.wsv2flow .seg-btn.on { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-sm); }
.wsv2flow .service-input { width: 100%; height: 46px; font-size: 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: 0 14px; margin-bottom: 14px; color: var(--text); outline: none; }
.wsv2flow .service-input:focus { border-color: var(--brand); }
.wsv2flow .cap-preview--inline { margin: -2px 0 16px; width: 100%; }
.wsv2flow .cap-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: 13px; margin-bottom: 16px; }
.wsv2flow .cap-photo { height: 200px; border-radius: var(--r-md); background: var(--frame) center/cover; position: relative; margin-bottom: 13px; }
.wsv2flow .cap-pill { position: absolute; left: 11px; top: 11px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); color: var(--text); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.wsv2flow .cap-pill svg { width: 13px; height: 13px; stroke: var(--brand-strong); }
.wsv2flow .cap-text { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.wsv2flow .cap-body { width: 100%; min-height: 154px; resize: vertical; border: 0; outline: 0; background: transparent; font-size: 13px; line-height: 1.7; color: var(--text); font-weight: 500; letter-spacing: 0; font-family: inherit; margin: 0 0 10px; }
.wsv2flow .cap-body:focus { background: var(--surface); border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--brand); }
.wsv2flow .cap-hash { font-size: 11px; line-height: 1.6; color: var(--info); font-weight: 700; padding-right: 42px; }
.wsv2flow .cap-count { position: absolute; right: 13px; bottom: 11px; color: var(--text-subtle); font-size: 10px; font-weight: 700; }
.wsv2flow .hash-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wsv2flow .hash-chip { height: 30px; border: 0; border-radius: var(--r-pill); background: var(--frame); color: var(--text-muted); font-size: 11px; font-weight: 800; padding: 0 12px; cursor: pointer; }
.wsv2flow .hash-chip.on { background: var(--brand-bg); color: var(--brand-strong); box-shadow: inset 0 0 0 1px var(--brand); }
/* [Phase B-1] 스토리 편집 진입 버튼 */
/* [#17] inline-flex 는 margin:auto 로 가운데 정렬이 안 돼 PC 에서 좌측으로 쏠렸다 → flex(블록) 로 변경해 max-width+auto margin 가운데 정렬 적용 */
.wsv2flow .cap-edit-btn { width: 100%; height: 50px; margin: 2px 0 14px; border: 1.5px solid var(--brand-strong); border-radius: var(--r-md); background: var(--brand-bg); color: var(--brand-strong); font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.wsv2flow .cap-edit-btn i { font-size: 19px; }
.wsv2flow .cap-edit-btn:active { transform: scale(.99); opacity: .92; }
/* 재생성 버튼 3종 */
.wsv2flow .cap-regen-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wsv2flow .cap-regen-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 calc(50% - 8px); min-width: 92px; height: 42px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .cap-regen-btn i { font-size: 16px; }
.wsv2flow .cap-regen-btn[data-fl="topreview"] { border-color: var(--brand-strong); color: var(--brand-strong); }
.wsv2flow .cap-regen-btn:active { background: var(--surface-strong, var(--border)); }
/* [#3] 초기화는 보조 동작 — 덜 강조(고스트). 한 줄에 3개 주력 + 초기화는 가늘게. */
.wsv2flow .cap-regen-btn.ghost { flex: 0 0 auto; min-width: 0; padding: 0 14px; border-style: dashed; color: var(--text-subtle); font-weight: 700; background: transparent; }
/* [v558] 캡션 UX 리뉴얼 — 시술 문구 입력 + 말투/길이 칩 + 해시태그 토글 + 단일 생성 버튼 */
.wsv2flow .service-input.cap-svc-lg { height: 54px; font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.wsv2flow .cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wsv2flow .cap-chips--seg .cap-chip { flex: 1 1 0; }
.wsv2flow .cap-chip { flex: 0 0 auto; min-height: 38px; padding: 9px 14px; border-radius: var(--r-pill, 999px); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.wsv2flow .cap-chip:active { transform: scale(.97); }
.wsv2flow .cap-chip.on { border-color: var(--brand-strong); background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-brand); }
/* [다양성 팩] 말투·성격 칩 — 아이콘 + 라벨 가로 배치 */
.wsv2flow .cap-tonechips { margin-bottom: 4px; }
.wsv2flow .cap-tonechip { display: inline-flex; align-items: center; gap: 6px; }
.wsv2flow .cap-tonechip i { font-size: 15px; line-height: 1; }
.wsv2flow .cap-tonechip.on i { color: #fff; }
.wsv2flow .cap-hash-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.wsv2flow .cap-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: none; background: var(--border); cursor: pointer; transition: background .18s; padding: 0; }
.wsv2flow .cap-switch.on { background: var(--brand-strong); }
.wsv2flow .cap-switch__dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s; }
.wsv2flow .cap-switch.on .cap-switch__dot { transform: translateX(20px); }
.wsv2flow .cap-gen-btn { width: 100%; height: 54px; border: none; border-radius: var(--r-md); background: var(--brand-strong); color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-brand); }
.wsv2flow .cap-gen-btn:active { transform: scale(.99); opacity: .92; }
.wsv2flow .cap-gen-btn i { font-size: 18px; vertical-align: -3px; margin-right: 2px; }
/* [Phase A-2] 심플 캡션 — 멀티라인 시술 입력 + 우리샵 스타일 적용 토글 */
.wsv2flow .cap-svc-wrap { position: relative; margin-bottom: 8px; }
.wsv2flow .service-input.cap-svc-area { height: auto; min-height: 128px; padding: 14px 14px 26px; font-size: 15px; font-weight: 500; line-height: 1.6; resize: vertical; margin-bottom: 0; font-family: inherit; }
.wsv2flow .cap-svc-count { position: absolute; right: 13px; bottom: 10px; color: var(--text-subtle); font-size: 10.5px; font-weight: 700; pointer-events: none; }
/* [P1-1] 캡션 확인칩 — 생성 전 샵/고객/시술 분리결과 노출·수정 */
.wsv2flow .cap-confirm[hidden] { display: none; }
.wsv2flow .cap-confirm { margin: 2px 0 14px; }
.wsv2flow .cap-confirm__hint { display: block; font-size: 11px; color: var(--text-subtle); margin: 0 2px 7px; }
.wsv2flow .cap-confirm__row { display: flex; flex-wrap: wrap; gap: 7px; }
.wsv2flow .cap-cfm { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text); cursor: pointer; max-width: 100%; }
.wsv2flow .cap-cfm > span { color: var(--text-subtle); font-weight: 600; }
.wsv2flow .cap-cfm > b { font-weight: 800; color: var(--brand-strong); max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsv2flow .cap-cfm > b em { color: var(--text-subtle); font-weight: 600; font-style: normal; }
.wsv2flow .cap-cfm i { font-size: 13px; color: var(--text-subtle); }
.wsv2flow .cap-cfm__ed { font-size: 12px; opacity: .7; }
.wsv2flow .cap-cfm:not(.cap-cfm--svc):active { transform: scale(.97); }
.wsv2flow .cap-cfm--svc { cursor: default; background: var(--surface-2, #faf6f4); }
/* [P2-3] 색·폰트 어울림 조합 칩 */
.wsv2flow .cap-bk__row--harmony { align-items: flex-start; }
.wsv2flow .cap-harm { display: flex; flex-wrap: wrap; gap: 7px; }
.wsv2flow .cap-harm__c { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
.wsv2flow .cap-harm__c:active { transform: scale(.97); }
.wsv2flow .cap-harm__sw { display: inline-flex; }
.wsv2flow .cap-harm__sw i { width: 13px; height: 13px; border-radius: 50%; margin-left: -5px; border: 1.5px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
.wsv2flow .cap-harm__sw i:first-child { margin-left: 0; }
/* [P3-1] 알아서 예쁘게 버튼 */
.wsv2flow .cap-autopretty { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 4px 0 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--brand-strong); background: color-mix(in srgb, var(--brand-strong) 8%, #fff); color: var(--brand-strong); font-size: 13.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .cap-autopretty:active { transform: scale(.99); }
.wsv2flow .cap-autopretty i { font-size: 17px; }
/* [P3-2] 업종 칩 */
.wsv2flow .cap-shoptype { display: flex; flex-wrap: wrap; gap: 6px; }
.wsv2flow .cap-st { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
.wsv2flow .cap-st.on { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.wsv2flow .cap-style-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.wsv2flow .cap-style-row__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wsv2flow .cap-style-row__d { font-size: 11.5px; line-height: 1.4; color: var(--text-subtle); font-weight: 500; }
/* [Phase A-3] 활성 우리샵 스타일 카드 */
.wsv2flow .cap-stylecard { display: flex; align-items: center; gap: 11px; margin: -6px 0 18px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.wsv2flow .cap-stylecard__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--brand-bg); color: var(--brand-strong); font-size: 20px; flex: 0 0 auto; }
.wsv2flow .cap-stylecard__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wsv2flow .cap-stylecard__tx b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.wsv2flow .cap-stylecard__tx b em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand-strong); background: var(--brand-bg); padding: 1px 6px; border-radius: var(--r-pill); margin-left: 4px; vertical-align: 1px; }
/* [v591·#6] 사진에서 뽑은 추천 색 — 탭하면 우리샵 글자색에 적용. */
.wsv2flow .cap-palette { margin: -10px 0 18px; }
.wsv2flow .cap-palette__label { display: block; font-size: 11.5px; color: var(--text-subtle); margin-bottom: 7px; }
.wsv2flow .cap-palette__row { display: flex; gap: 9px; flex-wrap: wrap; }
.wsv2flow .cap-pal { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.wsv2flow .cap-pal:active { transform: scale(.9); }
.wsv2flow .cap-stylecard__tx small { font-size: 11px; color: var(--text-subtle); font-weight: 500; }
/* [#6] 우리샵 스타일 전환/생성 칩 */
.wsv2flow .cap-stylecard:has(+ .cap-stylepick) { margin-bottom: 8px; }
.wsv2flow .cap-stylepick { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 18px; }
.wsv2flow .cap-stylechip { height: 30px; padding: 0 13px; border-radius: var(--r-pill, 999px); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; }
.wsv2flow .cap-stylechip.on { border-color: var(--brand-strong); background: var(--brand-bg); color: var(--brand-strong); }
.wsv2flow .cap-stylechip--new { border-style: dashed; color: var(--text-muted); }
.wsv2flow .cap-presetrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; }
.wsv2flow .cap-presetrow__l { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.wsv2flow .cap-presetrow__btns { display: flex; gap: 6px; flex: 0 0 auto; }
.wsv2flow .cap-presetbtn { width: 36px; height: 36px; border: 1px solid var(--brand-strong); border-radius: 10px; background: var(--brand-bg); color: var(--brand-strong); font-size: 14px; font-weight: 800; cursor: pointer; }
.wsv2flow .cap-presetbtn:active { transform: scale(0.95); }
/* [#7] 프리셋 미리보기 카드 + 이름 */
.wsv2flow .cap-presetrow2 { margin: 0 0 18px; }
.wsv2flow .cap-presetcards { display: flex; gap: 9px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.wsv2flow .cap-presetcards::-webkit-scrollbar { display: none; }
.wsv2flow .cap-presetcard { flex: 0 0 80px; display: flex; flex-direction: column; gap: 5px; }
.wsv2flow .cap-presetcard__btn { padding: 0; border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: transparent; aspect-ratio: 46 / 58; width: 100%; }
.wsv2flow .cap-presetcard__btn:active { transform: scale(0.97); }
.wsv2flow .cap-preset__thumb { width: 100%; height: 100%; display: block; }
.wsv2flow .cap-presetcard__nm { display: flex; align-items: center; gap: 1px; }
.wsv2flow .cap-presetcard__nm span { flex: 1 1 auto; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsv2flow .cap-presetcard__ic { flex: 0 0 auto; width: 18px; height: 18px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0; display: grid; place-items: center; }
.wsv2flow .cap-presetcard__ic:active { color: var(--brand-strong); }
/* [#6] 브랜드킷 — 로고·색·폰트 한 번 등록 */
.wsv2flow .cap-bk { margin: 0 0 18px; border: 0.5px solid var(--border); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.wsv2flow .cap-bk > summary { list-style: none; cursor: pointer; padding: 11px 13px; font-size: 12.5px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; }
.wsv2flow .cap-bk > summary::-webkit-details-marker { display: none; }
.wsv2flow .cap-bk > summary i { font-size: 16px; color: var(--brand-strong); }
.wsv2flow .cap-bk > summary em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); margin-left: auto; }
.wsv2flow .cap-bk__body { padding: 4px 13px 13px; display: flex; flex-direction: column; gap: 11px; }
.wsv2flow .cap-bk__row { display: flex; align-items: center; gap: 9px; }
.wsv2flow .cap-bk__lbl { width: 30px; font-size: 12px; font-weight: 700; color: var(--text-secondary); flex: 0 0 auto; }
.wsv2flow .cap-bk__logo { width: 34px; height: 34px; object-fit: contain; border: 0.5px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.wsv2flow .cap-bk__clear { height: 28px; padding: 0 10px; border: 0.5px solid var(--border); border-radius: var(--r-pill, 999px); background: var(--surface-2); color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.wsv2flow .cap-bk__add { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: var(--r-pill, 999px); background: var(--brand-bg); color: var(--brand-strong); font-size: 12px; font-weight: 700; cursor: pointer; margin-left: auto; }
.wsv2flow .cap-bk__add i { font-size: 15px; }
.wsv2flow .cap-bk__sw { display: flex; gap: 7px; flex-wrap: wrap; }
.wsv2flow .cap-bk__c { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--surface-2); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.wsv2flow .cap-bk__c.on { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--brand-strong); }
.wsv2flow .cap-bk__fonts { display: flex; gap: 6px; flex-wrap: wrap; }
.wsv2flow .cap-bk__f { height: 30px; padding: 0 12px; border-radius: var(--r-pill, 999px); border: 0.5px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; }
.wsv2flow .cap-bk__f.on { border-color: var(--brand-strong); background: var(--brand-bg); color: var(--brand-strong); }
/* [v569·B-1] 작업실 캡션 — 카드형 말투 선택 ("어떤 말투로 써볼까요?") */
.wsv2flow .screen-head__sub { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); font-weight: 600; }
.wsv2flow .cap-tonehead { margin: 6px 2px 12px; }
.wsv2flow .cap-tonehead__t { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.02em; color: var(--text); margin-bottom: 5px; }
.wsv2flow .cap-tonehead__d { display: block; font-size: 12px; line-height: 1.55; color: var(--text-muted); font-weight: 600; }
.wsv2flow .cap-tonecards { display: flex; flex-direction: column; gap: 9px; margin: 0 0 10px; }
.wsv2flow .cap-tonecard { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 15px; border: 1.5px solid var(--border); border-radius: var(--r-lg, 16px); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.wsv2flow .cap-tonecard:active { transform: scale(.995); }
.wsv2flow .cap-tonecard.on { border-color: var(--brand-strong); background: var(--brand-bg); box-shadow: var(--shadow-sm); }
.wsv2flow .cap-tonecard__ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-bg); color: var(--brand-strong); }
.wsv2flow .cap-tonecard__ic i { font-size: 22px; }
.wsv2flow .cap-tonecard.on .cap-tonecard__ic { background: #fff; }
.wsv2flow .cap-tonecard__tx { flex: 1 1 auto; min-width: 0; }
.wsv2flow .cap-tonecard__t { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.wsv2flow .cap-tonecard__d { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); font-weight: 500; word-break: keep-all; }
.wsv2flow .cap-tonecard__chk { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: transparent; border: 1.5px solid var(--border); transition: all .15s; }
.wsv2flow .cap-tonecard__chk i { font-size: 14px; }
.wsv2flow .cap-tonecard.on .cap-tonecard__chk { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.wsv2flow .cap-tonefoot { font-size: 11.5px; line-height: 1.55; color: var(--text-subtle); margin: 0 2px 18px; word-break: keep-all; }
.wsv2flow .cap-restart { display: block; width: 100%; margin: 10px 0 4px; padding: 10px; border: none; background: none; color: var(--text-subtle); font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wsv2flow .cap-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.wsv2flow .cap-redo { height: 50px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: 13.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .cap-preview { height: 50px; border: 0; border-radius: var(--r-md); background: var(--brand-strong); color: #fff; font-size: 14.5px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-brand); white-space: nowrap; }
/* [#10] 피드/스토리 2단 버튼 — 좁은 폭에서도 라벨 안 잘리게(줄바꿈 금지 + 폰트/간격 축소, 아이콘 살짝 작게) */
.wsv2flow .cap-pubrow .cap-preview { font-size: 13.5px; gap: 6px; padding: 0 6px; }
.wsv2flow .cap-pubrow .cap-preview i { font-size: 17px; flex: 0 0 auto; }
.wsv2flow .cap-preview:disabled { background: var(--frame); color: var(--text-subtle); box-shadow: none; cursor: wait; }
.wsv2flow .cap-preview--send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wsv2flow .cap-preview--send i { font-size: 18px; }
/* [스토리] 스토리 버튼 — 피드(채움)와 구분되게 아웃라인 */
.wsv2flow .cap-preview--story { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); color: var(--brand-strong); border: 1.5px solid var(--brand-strong); box-shadow: none; }
.wsv2flow .cap-preview--story i { font-size: 18px; }
.wsv2flow .cap-preview--story:disabled { background: var(--frame); color: var(--text-subtle); border-color: var(--border); }
/* [캐러셀] 여러 장 버튼 */
/* [#13] 스토리 사진 고르기 — 캐러셀식 선택 */
.wsv2flow .cap-storypick { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.wsv2flow .cap-storypick__hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wsv2flow .cap-storypick__hd b { font-size: 15px; font-weight: 900; color: var(--text); }
.wsv2flow .cap-storypick__hd span { font-size: 12.5px; color: var(--text-subtle); }
.wsv2flow .cap-storypick__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wsv2flow .cap-storypick__row::-webkit-scrollbar { display: none; }
.wsv2flow .cap-storypick__cell { position: relative; flex: 0 0 auto; width: 88px; height: 110px; border: 0; border-radius: 14px; background-size: cover; background-position: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.10); transition: transform .12s ease; }
.wsv2flow .cap-storypick__cell:active { transform: scale(.96); }
.wsv2flow .cap-storypick__n { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(21,24,29,.62); color: #fff; font-size: 12px; font-weight: 800; }
.wsv2flow .cap-storypick__cancel { width: 100%; height: 44px; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-subtle); font-size: 14px; font-weight: 800; cursor: pointer; }
.wsv2flow .cap-preview--carousel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--text); }
.wsv2flow .cap-preview--carousel i { font-size: 18px; }
.wsv2flow .cap-preview--carousel:disabled { background: var(--frame); color: var(--text-subtle); }

/* D. 인스타 미리보기 (FC5: ig-notice·ig-pager 제거, confirmline 추가) */
.wsv2flow .confirmline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 10px 2px 14px; }
.wsv2flow .confirmline b { font-weight: 900; color: var(--text); }
/* D. 인스타 미리보기 */
.wsv2flow .ig-notice { min-height: 36px; border-radius: var(--r-lg); background: var(--brand-bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; font-weight: 700; margin-bottom: 14px; padding: 8px 12px; }
.wsv2flow .ig-info { width: 15px; height: 15px; border: 1.4px solid var(--brand); border-radius: 50%; display: grid; place-items: center; color: var(--brand-strong); font-size: 10px; font-weight: 800; font-style: italic; flex: none; }
.wsv2flow .ig-card2 { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.wsv2flow .ig-head2 { height: 58px; display: flex; align-items: center; padding: 0 14px; gap: 10px; }
.wsv2flow .ig-logo { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: #fff; font-size: 18px; line-height: 1.05; text-align: center; flex: none; }
.wsv2flow .ig-logo--photo { background: var(--frame) center/cover; }
.wsv2flow .ig-logo--empty { background: var(--frame); color: var(--text-subtle); }
.wsv2flow .ig-name2 { font-size: 13px; font-weight: 900; color: var(--text); }
.wsv2flow .ig-loc { margin-left: auto; color: var(--text-subtle); font-size: 12px; font-weight: 600; }
.wsv2flow .ig-dots2 { font-size: 18px; font-weight: 800; letter-spacing: 2px; color: var(--text); margin-top: -6px; padding-left: 8px; }
.wsv2flow .ig-pager { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.wsv2flow .ig-pager .d { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.wsv2flow .ig-pager .d.on { background: var(--brand-strong); }
.wsv2flow .ig-photo { width: 100%; height: 330px; background: var(--frame) center/cover; display: block; }
/* [v564·필수6] 인스타 미리보기 carousel — 게시글 carousel 과 동일 스와이프, IG 비율 */
.wsv2flow .ig-car { margin: 0; }
.wsv2flow .ig-car__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wsv2flow .ig-car__track::-webkit-scrollbar { display: none; }
.wsv2flow .ig-car__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; height: 330px; background: #000; cursor: pointer; }   /* [#2] 빠르게 스와이프해도 한 장씩만 넘어가게 */
.wsv2flow .ig-car__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wsv2flow .ig-car__dots { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0 3px; }
.wsv2flow .ig-car__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: width .2s, background .2s; }
.wsv2flow .ig-car__dot.on { width: 16px; border-radius: 3px; background: var(--brand-strong); }
.wsv2flow .cap-car__toggle { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 4px 9px; border-radius: var(--r-pill, 999px); background: rgba(20,16,16,.62); color: #fff; font-size: 11px; font-weight: 800; }
.wsv2flow .ig-act { height: 46px; display: flex; align-items: center; padding: 0 14px; color: var(--text); position: relative; }
.wsv2flow .ig-ic { display: flex; gap: 16px; align-items: center; }
.wsv2flow .ig-ic svg, .wsv2flow .ig-save svg { width: 24px; height: 24px; stroke: var(--text); }
.wsv2flow .ig-save { margin-left: auto; display: inline-flex; }
/* [v589] 카드 액션줄 기능화 — 복사·다시생성·저장 */
.wsv2flow .ig-act--fn { height: auto; gap: 2px; padding: 7px 6px; border-top: 1px solid var(--border); }
.wsv2flow .ig-actbtn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 7px 4px; border-radius: 12px; cursor: pointer; color: var(--text); font: inherit; transition: background .15s; }
.wsv2flow .ig-actbtn:active { background: var(--accent-soft); }
.wsv2flow .ig-actbtn svg { width: 23px; height: 23px; stroke: var(--text); }
.wsv2flow .ig-actbtn b { font-size: 11px; font-weight: 600; color: var(--text-subtle); }

/* [v589] 피드 미리보기 */
.wsv2flow .wsfeed { margin-top: 22px; }
.wsv2flow .wsfeed__lbl { display: block; margin-bottom: 8px; }
.wsv2flow .wsfeed__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 13px 14px; box-shadow: var(--shadow-sm); }
.wsv2flow .wsfeed__prof { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.wsv2flow .wsfeed__av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft) center/cover no-repeat; flex: 0 0 auto; }
.wsv2flow .wsfeed__prof b { font-size: 13px; }
.wsv2flow .wsfeed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 10px; overflow: hidden; }
.wsv2flow .wsfeed__cell { aspect-ratio: 1; background: var(--surface-2) center/cover no-repeat; }
.wsv2flow .wsfeed__cell--ph { background: linear-gradient(160deg, var(--surface-2), var(--frame)); }
.wsv2flow .wsfeed__cell--new { position: relative; outline: 2.5px solid var(--accent); outline-offset: -2.5px; z-index: 1; border-radius: 4px; }
.wsv2flow .wsfeed__new { position: absolute; top: 5px; left: 5px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; letter-spacing: .4px; }
.wsv2flow .wsfeed__cap { font-size: 11.5px; color: var(--text-subtle); text-align: center; margin: 10px 0 0; }
.wsv2flow .ig-copy2 { padding: 4px 14px 15px; font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.wsv2flow .ig-copy2 b { font-weight: 900; }
.wsv2flow .ig-hash { color: var(--info); font-weight: 600; }
.wsv2flow .ig-ago { color: var(--text-subtle); font-size: 11.5px; margin-top: 6px; }
/* [#4] 캡션 직접 편집 — 상시 밑줄 제거(진짜 인스타 글처럼). 포커스 때만 링 표시. */
.wsv2flow .ig-cap-edit { outline: none; border-radius: 6px; padding: 1px 3px; margin: -1px -3px; cursor: text; transition: box-shadow .15s, background .15s; }
.wsv2flow .ig-cap-edit:focus { background: rgba(213,138,149,.08); box-shadow: 0 0 0 2px rgba(213,138,149,.5); }
/* [#4] 해시태그도 상시 밑줄 제거 — 포커스 때만 링. */
.wsv2flow .ig-hash-edit { outline: none; border-radius: 6px; padding: 1px 3px; margin: -1px -3px; cursor: text; transition: box-shadow .15s, background .15s; display: inline-block; min-width: 40px; }
.wsv2flow .ig-hash-edit:focus { background: rgba(59,143,212,.08); box-shadow: 0 0 0 2px rgba(59,143,212,.45); }
.wsv2flow .ig-preview-btn { width: 100%; height: 52px; border: 1px solid var(--brand); background: var(--brand-bg); color: var(--brand-strong); border-radius: var(--r-md); font-weight: 900; font-size: 14px; cursor: pointer; }

/* E. 고객 연결 — _barClass 시각 통일 (아바타 없음, 컬러바+방문횟수) */
.wsv2flow .cust-search { display: flex; align-items: center; gap: 9px; height: 48px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 0 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.wsv2flow .cust-search svg { width: 18px; height: 18px; stroke: var(--text-subtle); flex: none; }
.wsv2flow .cust-search input { flex: 1; border: 0; outline: 0; font-size: 13px; background: transparent; color: var(--text); }
.wsv2flow .cust-card { display: grid; grid-template-columns: 4px 1fr 28px; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 11px 12px 11px 0; margin-bottom: 10px; cursor: pointer; box-shadow: var(--shadow-sm); transition: .15s; overflow: hidden; }
.wsv2flow .cust-card.selected { background: var(--brand-bg); border-color: var(--brand); }
.wsv2flow .cust-bar { align-self: stretch; border-radius: 0 var(--r-sm) var(--r-sm) 0; min-height: 48px; }
.wsv2flow .cust-bar.b1 { background: #DDD; }
.wsv2flow .cust-bar.b2 { background: #16B55E; }
.wsv2flow .cust-bar.b3 { background: #BC6675; }
.wsv2flow .cust-info h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 900; color: var(--text); }
.wsv2flow .cust-info p { margin: 0; font-size: 11px; color: var(--text-subtle); font-weight: 600; }
.wsv2flow .cust-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 800; margin-left: 6px; }
.wsv2flow .cust-badge.b1 { background: var(--frame); color: var(--text-subtle); }
.wsv2flow .cust-badge.b2 { background: #ECFDF5; color: #065F46; }
.wsv2flow .cust-badge.b3 { background: var(--brand-bg); color: var(--brand-strong); }
.wsv2flow .cust-pick { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-subtle); display: grid; place-items: center; justify-self: end; }
.wsv2flow .cust-pick svg { width: 14px; height: 14px; stroke: var(--text-subtle); }
.wsv2flow .cust-card.selected .cust-pick { border: 0; background: var(--brand-strong); color: #fff; box-shadow: var(--shadow-brand); }
.wsv2flow .cust-card.selected .cust-pick svg { stroke: #fff; }
.wsv2flow .linked-card { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); padding: 15px; box-shadow: var(--shadow-sm); }
.wsv2flow .linked-title { display: flex; align-items: center; gap: 7px; color: var(--brand-strong); font-size: 10.5px; font-weight: 900; letter-spacing: .02em; margin-bottom: 12px; }
.wsv2flow .linked-title svg { width: 15px; height: 15px; stroke: var(--brand-strong); }
.wsv2flow .linked-main { display: grid; grid-template-columns: 36px 1fr; gap: 13px; align-items: center; }
.wsv2flow .linked-main .cust-bar { width: 4px; align-self: stretch; min-height: 52px; border-radius: var(--r-sm); }
.wsv2flow .linked-main b { font-size: 13.5px; color: var(--text); }
.wsv2flow .linked-main span { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-subtle); font-weight: 600; line-height: 1.45; }
.wsv2flow .linked-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.wsv2flow .lk-btn { height: 40px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 800; color: var(--text); cursor: pointer; }
.wsv2flow .lk-btn.pink { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-strong); }
.wsv2flow .cust-empty { text-align: center; padding: 22px 12px; color: var(--text-subtle); font-size: 12px; line-height: 1.6; border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface-2); }

/* 인스타 업로드 준비(미연결 게이트) */
.wsv2flow .wsflow-prep { margin-top: 12px; }
.wsv2flow .wsflow-prep__note { font-size: 11.5px; color: var(--text-subtle); margin-bottom: 10px; text-align: center; line-height: 1.5; }
.wsv2flow .wsflow-prep__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wsv2flow .wsflow-prep__row button { height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.wsv2flow .wsflow-prep__row button.pink { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-strong); }

/* #10 올리기 로딩 — 시안 B(잇비 봇). 플로우 내부 오버레이 */
.wsv2pub { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(25,31,40,.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.wsv2pub.is-open { display: flex; }
.wsv2pub__card { width: 300px; max-width: 100%; min-height: 280px; padding: 30px 22px 26px; border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.wsv2pub__bot { width: 78px; height: 78px; border-radius: 50%; background: var(--brand-bg); display: grid; place-items: center;
  color: var(--brand-strong); animation: wsv2pub-bob 1.6s ease-in-out infinite; }
.wsv2pub__bot svg { width: 38px; height: 38px; stroke: var(--brand-strong); fill: none; }
@keyframes wsv2pub-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wsv2pub__dots { display: flex; gap: 5px; margin-top: 12px; }
.wsv2pub__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: wsv2pub-bd 1s ease-in-out infinite; }
.wsv2pub__dots span:nth-child(2) { animation-delay: .15s; }
.wsv2pub__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes wsv2pub-bd { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.wsv2pub__t { font-size: 16px; font-weight: 800; letter-spacing: -.03em; margin-top: 16px; color: var(--text); }
.wsv2pub__s { font-size: 12.5px; color: var(--text-subtle); margin-top: 4px; min-height: 16px; }
.wsv2pub__steps { display: flex; gap: 6px; margin-top: 16px; }
.wsv2pub__steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--frame); transition: .3s; }
.wsv2pub__steps i.on { background: var(--brand); transform: scale(1.25); }
.wsv2pub__steps i.done { background: var(--ok); }
.wsv2pub__card.is-done .wsv2pub__bot { animation: none; }
.wsv2pub__card.is-done .wsv2pub__dots { visibility: hidden; }
.wsv2pub__card.is-done .wsv2pub__t { color: var(--ok); }

/* [다중pair] 캡션 상단 결과물 캐러셀 — scroll-snap 손가락 스와이프 */
.wsv2flow .cap-car { margin: 0 0 16px; }
.wsv2flow .cap-car__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg); border: 1px solid var(--border); scrollbar-width: none; overscroll-behavior-x: contain; }
.wsv2flow .cap-car__track::-webkit-scrollbar { display: none; }
.wsv2flow .cap-car__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; height: 220px; background: #000; }   /* [#2] 한 장씩 스냅 */
.wsv2flow .cap-car__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wsv2flow .cap-car__badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 800;
  color: #fff; background: rgba(17, 24, 39, .55); padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(3px); }
.wsv2flow .cap-car__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; }
.wsv2flow .cap-car__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: width .2s, background .2s; }
.wsv2flow .cap-car__dot.on { width: 20px; border-radius: 4px; background: var(--brand-strong); }
/* [v541] 적용 결과 큰 캐러셀 — 작은 스트립 대신 인스타식 4:5 큰 미리보기 + Pair pill/액션 */
.wsv2flow .tpl-car { margin: 12px 0 2px; }
.wsv2flow .tpl-car .cap-car__slide { aspect-ratio: 4 / 5; height: auto; border-radius: var(--r-md); overflow: hidden; background: var(--frame); }
.wsv2flow .tpl-car .cap-car__img { border-radius: var(--r-md); }
.wsv2flow .tpl-car__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px; }
.wsv2flow button.tpl-car__pill { appearance: none; -webkit-appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 800; height: 30px; padding: 0 13px; border-radius: var(--r-pill); cursor: pointer; }
.wsv2flow button.tpl-car__pill.on { background: var(--brand-strong); color: #fff; border-color: transparent; }
.wsv2flow .tpl-car__actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.wsv2flow .tpl-car__active { font-size: 12.5px; font-weight: 800; color: var(--brand-strong); margin-right: auto; }
.wsv2flow button.tpl-car__change { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 14px; border: 1px solid var(--brand-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--brand-strong); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.wsv2flow button.tpl-car__edit { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--brand-strong); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.wsv2flow .tpl-car--single .cap-car__slide { aspect-ratio: 4 / 5; height: auto; border-radius: var(--r-md); overflow: hidden; }
/* [v541] 썸네일 long press 확대 미리보기 — 중앙 둥근 시트(사이드바 위 z-index, 중앙배치라 미클립) */
.tpl-preview { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.tpl-preview.open { opacity: 1; }
.tpl-preview__backdrop { position: absolute; inset: 0; background: rgba(20,16,16,.5); }
.tpl-preview__sheet { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--surface, #fff); border-radius: 22px 22px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.25); transform: translateY(14px); transition: transform .2s ease; }
.tpl-preview.open .tpl-preview__sheet { transform: translateY(0); }
@media (width >= 768px) { .tpl-preview { align-items: center; } .tpl-preview__sheet { border-radius: 22px; max-width: 380px; padding-bottom: 20px; } }
.tpl-preview__grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 12px; }
.tpl-preview__card { width: 100%; aspect-ratio: 4 / 5; max-height: 56vh; border-radius: var(--r-md); background: var(--frame) center/cover; box-shadow: var(--shadow-sm); }
.tpl-preview__name { text-align: center; margin: 13px 0 4px; }
.tpl-preview__name b { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.tpl-preview__name span { display: block; margin-top: 3px; font-size: 12px; color: var(--text-subtle); }
.tpl-preview__btns { display: flex; gap: 8px; margin-top: 14px; }
.tpl-preview__btns button { appearance: none; -webkit-appearance: none; flex: 1; height: 46px; border-radius: var(--r-md); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.tpl-preview__apply { border: 0; background: var(--brand-strong); color: #fff; flex: 1.4 !important; }
.tpl-preview__def { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.tpl-preview__def.on { border-color: var(--brand-strong); color: var(--brand-strong); }
.tpl-preview__close { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); flex: .7 !important; }
/* [v547] 게시 완료 확인 sheet (이미지 저장 후) */
.pub-ask { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.pub-ask.open { opacity: 1; }
.pub-ask__bd { position: absolute; inset: 0; background: rgba(20,16,16,.5); }
.pub-ask__sheet { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--surface, #fff); border-radius: 26px 26px 0 0; padding: 12px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 44px rgba(40,20,28,.22); transform: translateY(14px); transition: transform .28s cubic-bezier(.24,1,.4,1); }
.pub-ask.open .pub-ask__sheet { transform: translateY(0); }
@media (width >= 768px) { .pub-ask { align-items: center; } .pub-ask__sheet { border-radius: 26px; max-width: 380px; padding-bottom: 22px; } }
.pub-ask__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 16px; }
/* [#18] 상단 아이콘 뱃지 — 인스타 로즈 그라데이션 원 */
.pub-ask__ic { width: 60px; height: 60px; margin: 2px auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FBE7EC, #F6D9E0); box-shadow: 0 6px 18px rgba(213,138,149,.28); }
.pub-ask__ic i { font-size: 30px; color: var(--brand-strong); }
.pub-ask__t { font-size: 17.5px; font-weight: 900; color: var(--text); text-align: center; letter-spacing: -.02em; }
.pub-ask__d { margin-top: 9px; font-size: 13px; color: var(--text-subtle); text-align: center; line-height: 1.55; }
.pub-ask__btns { display: flex; gap: 10px; margin-top: 22px; }
.pub-ask__btns button { flex: 1; height: 52px; border-radius: var(--r-md); font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .13s cubic-bezier(.24,1,.4,1), filter .13s; }
.pub-ask__btns button:active { transform: scale(.97); }
.pub-ask__not { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.pub-ask__done { border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff; flex: 1.35 !important; box-shadow: 0 6px 16px rgba(213,138,149,.34); }
.pub-ask__done i { font-size: 16px; }
.wsv2flow .cap-scenario-head { margin: 6px 2px 8px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.wsv2flow .cap-hashedit { width: 100%; margin: 2px 0 4px; min-height: 52px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; line-height: 1.55; color: #3b82f6; font-weight: 600; font-family: inherit; resize: vertical; background: var(--surface); }
.wsv2flow .cap-hashedit:focus { outline: none; border-color: var(--brand); }
.wsv2flow .cap-car__hint { text-align: center; font-size: 12px; color: var(--text-subtle); margin: 9px 0 0; }
.wsv2flow .cap-car__hint::first-line { font-weight: 600; }

/* [v560] 편집 화면 CTA 2분할(저장하고 게시글 쓰기 / 템플릿 선택하기) — actionbar 는 위 규칙에서 flex */
.wsv2flow__cta--half { flex: 1 1 0; width: auto; min-width: 0; }
.wsv2flow__cta--alt { background: var(--surface); color: var(--brand-strong); border: 1.5px solid var(--brand-strong); box-shadow: none; }
.wsv2flow__cta--alt.hidden { display: none; }

/* [v560] '템플릿 선택' 화면 — 상단 큰 사진(좌우 스와이프) + 전·후 지정 + 템플릿 목록 */
.wsv2flow .tpls { display: flex; flex-direction: column; gap: 18px; }
.wsv2flow .tpls-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px 4px; }
.wsv2flow .tpls-strip::-webkit-scrollbar { height: 0; }
.wsv2flow .tpls-slide { position: relative; flex: 0 0 86%; aspect-ratio: 4 / 5; border-radius: var(--r-lg, 16px); background-size: cover; background-position: center; background-color: var(--frame); scroll-snap-align: center; border: 1px solid var(--border); padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* [v567·필수7] 전=초록 / 후=분홍 (기존엔 반대 — 스왑) */
.wsv2flow button.tpls-slide.is-before { border: 2.5px solid #2EA36B; }
.wsv2flow button.tpls-slide.is-after { border: 2.5px solid var(--brand-strong); }
.wsv2flow .tpls-slide__tag { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: var(--r-pill, 999px); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 800; }
/* [v567·항목3] 클릭순 전/후 — 사진 위 큰 역할 배지(전=초록, 후=분홍) + 짝 번호 */
.wsv2flow .tpls-slide__role { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 3px; min-width: 30px; height: 30px; padding: 0 9px; justify-content: center; border-radius: var(--r-pill, 999px); color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 1px 5px rgba(0,0,0,.28); }
.wsv2flow .tpls-slide.is-before .tpls-slide__role { background: #2EA36B; }
.wsv2flow .tpls-slide.is-after .tpls-slide__role { background: var(--brand-strong); }
.wsv2flow .tpls-slide__role em { font-style: normal; font-size: 11px; font-weight: 800; opacity: .9; }
.wsv2flow .tpls-empty { padding: 28px 12px; text-align: center; color: var(--text-subtle); font-size: 13px; }
/* [v568·B-5] 사진 캐러셀 — 화살표(PC)·점 내비게이션. 모바일은 화살표 숨기고 스와이프, PC는 드래그+화살표. */
.wsv2flow .tpls-carousel { position: relative; }
.wsv2flow .tpls-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; align-items: center; justify-content: center; font-size: 18px; }
.wsv2flow .tpls-nav:active { transform: translateY(-50%) scale(.92); }
.wsv2flow .tpls-nav--prev { left: 6px; }
.wsv2flow .tpls-nav--next { right: 6px; }
.wsv2flow .tpls-dots { display: flex; justify-content: center; gap: 7px; margin-top: 9px; }
.wsv2flow .tpls-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .15s, transform .15s; }
.wsv2flow .tpls-dot.on { background: var(--brand-strong); transform: scale(1.35); }

/* PC: 고정 사이드바 가림 방지. [v716] var(--side-nav-width) — ≥768px 232 / ≥1200px 260 자동 정합 */
@media (width >= 768px) {
  .wsv2flow { left: var(--side-nav-width); }
  .wsv2flow__s { padding: 6px 24px 24px; }
  .wsv2flow .cap-card { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .wsv2flow .cap-card .cap-photo { height: 100%; min-height: 200px; margin-bottom: 0; }   /* [fix] 편집카드 전용 — 캡션 썸네일(.cap-photo--sm)에 새어들어 사진이 거대해지던 것 차단 */
  .wsv2flow .tpls-slide { flex-basis: 60%; }
  .wsv2flow .tpls-carousel.is-multi .tpls-nav { display: flex; }   /* [v568·B-5] PC 에서만 화살표 노출 */
  .wsv2flow .tpls-strip { cursor: grab; }
  .wsv2flow .tpls-strip:active { cursor: grabbing; }
  /* [v569·B-1] 캡션 화면 — PC 에서 폭 너무 넓지 않게 중앙 정렬/최대폭 */
  .wsv2flow__s[data-fs="caption"] > * { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* [캡션재설계] 3축 위저드 + 자주쓰는 시술 태그 — 앱 브랜드 토큰 사용(스킨 자동 일치) */
.wsv2flow .capwiz { background: var(--surface); border-radius: 16px; padding: 14px 14px 16px; margin: 4px 0 18px; box-shadow: 0 4px 16px rgba(168,100,115,.08); }
.wsv2flow .capwiz__head { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 10px; }
.wsv2flow .capwiz__back { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-subtle); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.wsv2flow .capwiz__back:active { background: var(--brand-bg); }
.wsv2flow .capwiz__back i { font-size: 16px; }
.wsv2flow .capwiz__backsp { width: 26px; }
.wsv2flow .capwiz__dots { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.wsv2flow .capwiz__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.10); transition: background .15s; }
.wsv2flow .capwiz__dot.on { background: var(--brand); }
.wsv2flow .capwiz__dot.done { background: var(--brand-strong); }
.wsv2flow .capwiz__q { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin: 2px 0 12px; }
/* [#15] 질문을 헤더 줄에 인라인 — 점 3개와 같은 수평선. */
.wsv2flow .capwiz__q--inline { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsv2flow .capwiz__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wsv2flow .capwiz__opt { border: none; border-radius: 14px; padding: 14px 4px 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all .13s; }
.wsv2flow .capwiz__opt i { font-size: 21px; color: var(--text-subtle); }
.wsv2flow .capwiz__opt span { font-size: 12px; font-weight: 700; letter-spacing: -.3px; color: var(--text-muted); }
.wsv2flow .capwiz__opt:active { transform: scale(.93); background: var(--brand-bg); box-shadow: inset 0 0 0 1.5px var(--brand); }   /* 탭 즉시 브랜드 하이라이트(재렌더 전 활성감) */
.wsv2flow .capwiz__opt:active i, .wsv2flow .capwiz__opt:active span { color: var(--brand-strong); }
.wsv2flow .capwiz__opt--picked { background: var(--brand) !important; box-shadow: inset 0 0 0 1.5px var(--brand), 0 4px 14px rgba(213,138,149,.4) !important; transform: scale(1.04); }
.wsv2flow .capwiz__opt--picked i, .wsv2flow .capwiz__opt--picked span { color: #fff !important; }
.wsv2flow .capwiz__opt.on { background: var(--brand-bg); box-shadow: inset 0 0 0 1.5px var(--brand); }
.wsv2flow .capwiz__opt.on i, .wsv2flow .capwiz__opt.on span { color: var(--brand-strong); }
.wsv2flow .capwiz__done { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.wsv2flow .capwiz__donechk { font-size: 18px; color: var(--brand-strong); }
.wsv2flow .capwiz__donet { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.wsv2flow .capwiz__pick { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--brand-bg); color: var(--brand-strong); }
.wsv2flow .capwiz__redo { margin-left: auto; border: none; background: transparent; color: var(--text-subtle); font-size: 12px; text-decoration: underline; cursor: pointer; }
.wsv2flow .cap-svctags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.wsv2flow .cap-svctag { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--surface); color: var(--text-muted); border: 1px solid rgba(0,0,0,.10); font-weight: 600; cursor: pointer; }
.wsv2flow .cap-svctag:active { transform: scale(.97); }
.wsv2flow .cap-svctag--add { background: var(--brand-bg); color: var(--brand-strong); border: 1px dashed var(--brand); }
.wsv2flow .cap-svctags__hint { font-size: 11.5px; color: var(--text-subtle); margin: 0 0 18px 2px; }

/* [캡션재설계] 업종 선택(자주쓰는 시술 태그 위) */
.wsv2flow .cap-svctype__btn { border: none; background: var(--brand-bg); color: var(--brand-strong); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.wsv2flow .cap-svctype__btn i { font-size: 11px; }
.wsv2flow .cap-svctype { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.wsv2flow .cap-svctype__c { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--surface); color: var(--text-muted); border: 1px solid rgba(0,0,0,.10); font-weight: 600; cursor: pointer; }
.wsv2flow .cap-svctype__c.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* [캡션재설계] 위저드 화면 폴리시 — 앱 기본 스타일이 목업보다 싸보이던 것 스코프로 맞춤 */
.wsv2flow .cap-wizscreen .screen-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.wsv2flow .cap-wizscreen .screen-head__sub { font-size: 12.5px; color: var(--text-subtle); margin-top: 4px; }
.wsv2flow .cap-wizscreen .cap-svc-wrap { position: relative; }
.wsv2flow .cap-wizscreen .cap-svc-area { background: #FAFBFC; border: 1.5px solid var(--brand); border-radius: 14px; padding: 13px 14px; font-size: 15.5px; box-shadow: none; min-height: 78px; }
.wsv2flow .cap-wizscreen .cap-svc-area:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 3px var(--brand-bg); }
.wsv2flow .cap-wizscreen .cap-svc-area::placeholder { color: #B3A9A2; }
.wsv2flow .cap-wizscreen .capwiz__opt { background: #fff; }
.wsv2flow .cap-wizscreen .capwiz__opt.on { background: var(--brand-bg); }
.wsv2flow .cap-wizscreen .cap-gen-btn { font-weight: 700; border-radius: 15px; letter-spacing: -.2px; }
.wsv2flow .cap-wizscreen .cap-field-label { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }

/* [애니메이션] 위저드 단계 전환 — 다음=오른쪽에서 슬라이드-인, 이전=왼쪽에서. 왼쪽으로 부드럽게 넘어가는 느낌 */
@keyframes capwizIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes capwizInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.wsv2flow .capwiz__body { animation: capwizIn .26s cubic-bezier(.22,.61,.36,1) both; }
.wsv2flow .capwiz__body--back { animation-name: capwizInBack; }
@media (prefers-reduced-motion: reduce) { .wsv2flow .capwiz__body { animation: none; } }
/* [직접 입력] 인라인 — 팝업 없이 바로 아래에 타이핑 */
.wsv2flow .capwiz__custom { display: flex; gap: 8px; align-items: center; }
.wsv2flow .capwiz__custin { flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--brand); border-radius: 12px; padding: 0 14px; font-size: 15px; font-family: inherit; background: var(--surface); color: var(--text); }
.wsv2flow .capwiz__custin:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 3px var(--brand-bg); outline: none; }
.wsv2flow .capwiz__custok { flex: none; width: 46px; height: 46px; border: none; border-radius: 12px; background: var(--brand-strong); color: #fff; cursor: pointer; display: grid; place-items: center; }
.wsv2flow .capwiz__custok i { font-size: 18px; }
.wsv2flow .capwiz__custcancel { margin: 10px 0 0; border: none; background: transparent; color: var(--text-subtle); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 2px 0; }

/* ── [ChatComposer 시술 입력창] 입력칸 안에 생성(↑) 버튼 내장 · Astryx 스프링/포커스링 ── */
.wsv2flow .cap-composer { background: #FAFBFC; border: 1.5px solid var(--brand); border-radius: 18px; padding: 12px 12px 10px; margin-bottom: 8px; transition: border-color .18s cubic-bezier(.24,1,.4,1), box-shadow .18s cubic-bezier(.24,1,.4,1); }
.wsv2flow .cap-composer:focus-within { border-color: var(--brand-strong); box-shadow: 0 0 0 3px var(--brand-bg); }
.wsv2flow .cap-composer .cap-svc-area { min-height: 62px; border: none; background: transparent; padding: 2px 4px; box-shadow: none; resize: none; margin: 0; }
.wsv2flow .cap-composer .cap-svc-area:focus { box-shadow: none; border: none; }
.wsv2flow .cap-composer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.wsv2flow .cap-composer__cnt { font-size: 11px; font-weight: 700; color: var(--text-subtle); }
.wsv2flow .cap-composer__send { width: 40px; height: 40px; border: none; border-radius: 999px; background: var(--brand-strong); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-brand); transition: transform .175s cubic-bezier(.24,1,.4,1), opacity .15s; }
.wsv2flow .cap-composer__send:active { transform: scale(.9); }
.wsv2flow .cap-composer__send:disabled { background: var(--frame); color: var(--text-subtle); box-shadow: none; }
.wsv2flow .cap-composer__send i { font-size: 20px; }

/* ── [Skeleton] 캡션 생성중 — 스피너 대신 결과 카드 형태 shimmer (Astryx 로딩) ── */
@keyframes capSkelShimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.wsv2flow .cap-skelwrap { padding: 8px 2px 40px; }
.wsv2flow .cap-skel-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 6px 2px 16px; }
.wsv2flow .cap-skel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-strong); animation: capSkelPulse 1s ease-in-out infinite; }
@keyframes capSkelPulse { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.wsv2flow .cap-skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; }
.wsv2flow .cap-skel-line, .wsv2flow .cap-skel-tags span { background: linear-gradient(100deg, var(--frame) 30%, rgba(0,0,0,.04) 50%, var(--frame) 70%); background-size: 640px 100%; animation: capSkelShimmer 1.2s linear infinite; border-radius: 6px; }
.wsv2flow .cap-skel-line { height: 13px; margin-bottom: 11px; }
.wsv2flow .cap-skel-line--gap { margin-top: 18px; }
.wsv2flow .cap-skel-tags { display: flex; gap: 7px; margin-top: 18px; }
.wsv2flow .cap-skel-tags span { height: 24px; width: 58px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .wsv2flow .cap-skel-line, .wsv2flow .cap-skel-tags span, .wsv2flow .cap-skel-dot { animation: none; } }

/* ── [버튼 마감 통일] 주요 인터랙션에 Astryx 스프링 프레스 일괄 적용 ── */
.wsv2flow .cap-chip, .wsv2flow .cap-svctag, .wsv2flow .cap-svctype__c, .wsv2flow .cap-preview, .wsv2flow .cap-gen-btn { transition: transform .16s cubic-bezier(.24,1,.4,1), background .16s cubic-bezier(.24,1,.4,1), color .16s cubic-bezier(.24,1,.4,1), box-shadow .16s cubic-bezier(.24,1,.4,1), border-color .16s cubic-bezier(.24,1,.4,1); }
.wsv2flow .cap-preview:active:not(:disabled) { transform: scale(.97); }
.wsv2flow .cap-svctype__c:active { transform: scale(.95); }
.wsv2flow .wsv2flow__cta:active:not(:disabled) { transform: scale(.985); }