/* 체험단 히어로: 현실(인물 영상 3컷) → 웹(PC 브라우저 창: 글쓰기 → 검색 결과).
   무대는 680x620 으로 그리고 --s 배율로 줄인다. */
.vh-hero--ss { background:#f2f6f5; }
.vh-hero--ss::before { display:none; }
.vh-hero--ss .vh-inner { position:relative; z-index:2; }
.vh-hero--ss .vh-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 60% at 76% 48%,rgba(20,184,166,.16),transparent 70%),radial-gradient(30% 44% at 98% 92%,rgba(37,70,158,.12),transparent 70%),radial-gradient(28% 40% at 56% 4%,rgba(3,199,90,.10),transparent 70%); }
.ss { --s:.92; position:absolute; top:78px; bottom:0; left:52%; right:0; z-index:1; pointer-events:none; display:flex; align-items:center; justify-content:center; perspective:1800px; }
.ss-stage { position:relative; flex:none; width:680px; height:620px; transform:scale(var(--s)); transform-style:preserve-3d; }
.ss-win { position:absolute; inset:0; transform:scale(var(--k,1)) rotateY(calc(-9deg * var(--tilt,1))) rotateX(calc(3deg * var(--tilt,1))); will-change:transform,opacity; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(17,19,24,.08),0 40px 80px rgba(20,60,60,.18),0 10px 24px rgba(17,19,24,.10);
  color:#111318; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; text-align:left; word-break:keep-all; letter-spacing:normal; }
.ss-stage * { box-sizing:border-box; margin:0; }
.ss-chrome { position:relative; z-index:2; display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#eef0f2; border-bottom:1px solid #e1e4e8; }
.ss-chrome i { width:11px; height:11px; border-radius:50%; background:#d3d7dc; }
.ss-chrome i:nth-child(1) { background:#ff6058; } .ss-chrome i:nth-child(2) { background:#ffbd2e; } .ss-chrome i:nth-child(3) { background:#28c840; }
.ss-url { margin-left:14px; flex:1; height:24px; border-radius:6px; background:#fff; font-size:12px; line-height:24px; padding:0 12px; color:#555; }
.ss-page { position:absolute; left:0; right:0; top:38px; bottom:0; display:flex; flex-direction:column; background:#fff; }
.ss-caret { display:inline-block; vertical-align:middle; width:2px; height:1.1em; margin-left:2px; background:#111318; }

/* 글쓰기 화면 */
.ss-ed-bar { flex:none; display:flex; align-items:center; gap:16px; height:50px; padding:0 18px; border-bottom:1px solid #e8eaed; font-size:13px; color:#666; }
.ss-ed-logo { font:800 19px/1 Arial,sans-serif; color:#03c75a; }
.ss-ed-tools { flex:1; }
.ss-pub { background:#03c75a; color:#fff; font-weight:700; font-size:14px; padding:8px 18px; border-radius:6px; transition:transform .12s,background .12s; }
.ss-pub.is-press { background:#029c47; transform:scale(.93); }
.ss-ed-body { padding:26px 46px; display:flex; flex-direction:column; gap:18px; }
.ss-ed-ttl { font-size:26px; font-weight:700; line-height:1.3; min-height:34px; }
.ss-ed-img { width:100%; height:270px; border-radius:6px; border:2px dashed #dfe3e6; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.ss-ed-img span { display:none; }
.ss-ed-img:not(.is-on)::after { content:'사진 추가'; font-size:14px; color:#9aa0a6; }
.ss-ed-img.is-on { border:0; background:linear-gradient(135deg,color-mix(in srgb,var(--a) 55%,#fff),var(--a)); background-size:cover; background-position:center; align-items:flex-end; justify-content:flex-start; padding:12px; }
.ss-ed-img.is-on span { display:block; font-size:13px; color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.ss-ed-txt { font-size:16px; line-height:1.7; color:#333; min-height:54px; }

/* 검색 결과 화면 */
.ss-head { flex:none; display:flex; align-items:center; gap:14px; padding:18px 22px 12px; }
.ss-logo { flex:none; width:34px; height:34px; border-radius:7px; background:#03c75a; color:#fff; font:900 20px/34px Arial,sans-serif; text-align:center; }
.ss-box { flex:1; display:flex; align-items:center; height:48px; border:2px solid #03c75a; border-radius:8px; padding:0 6px 0 16px; font-size:18px; font-weight:600; }
.ss-q { white-space:nowrap; }
.ss-go { margin-left:auto; display:flex; align-items:center; justify-content:center; width:40px; height:36px; border-radius:6px; color:#03c75a; transition:background .12s,color .12s; }
.ss-go.is-press { background:#03c75a; color:#fff; }
.ss-tabs { flex:none; display:flex; gap:22px; padding:0 22px; border-bottom:1px solid #e8eaed; font-size:14px; color:#555; }
.ss-tabs span { padding:10px 0 11px; }
.ss-tabs .is-on { color:#111318; font-weight:700; box-shadow:inset 0 -3px 0 #03c75a; }
.ss-meta { flex:none; display:flex; justify-content:space-between; align-items:baseline; padding:14px 22px 8px; font-size:14px; }
.ss-meta b { font-size:20px; color:#03a94d; font-variant-numeric:tabular-nums; }
.ss-sort { font-size:12px; color:#777; }
.ss-list { position:relative; flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent); mask-image:linear-gradient(180deg,#000 88%,transparent); }
.ss-track { position:absolute; left:0; right:0; top:0; will-change:transform; }
.ss-card { display:flex; gap:16px; height:124px; padding:14px 22px; border-top:1px solid #f0f1f3; }
.ss-card.is-mine { background:#f3fbf6; }
.ss-card-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ss-by { display:flex; align-items:center; gap:7px; font-size:12px; color:#333; }
.ss-by i { font-style:normal; color:#888; }
.ss-card.is-mine .ss-by i { color:#03a94d; font-weight:700; }
.ss-by-ava { width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.8) 0 4px,transparent 4.5px),var(--a); }
.ss-ttl { font-size:16px; font-weight:600; color:#0c43b7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-ttl b { font-weight:800; }
.ss-snip { font-size:13px; line-height:1.5; color:#444; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ss-ph { flex:none; width:96px; height:96px; border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--a) 55%,#fff),var(--a)); background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:6px; }
.ss-ph span { font-size:10px; line-height:1.3; color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* 현실: 인물 영상 3컷 */
.ss-real { position:absolute; inset:0; z-index:2; border-radius:18px; overflow:hidden; background:#ddd; transform:scale(var(--k,1)); will-change:transform,opacity;
  box-shadow:0 40px 80px rgba(20,60,60,.20),0 10px 24px rgba(17,19,24,.12); }
.ss-cut { position:absolute; inset:0; opacity:0; }
.ss-cut video { width:100%; height:100%; object-fit:cover; display:block; }
.ss-cut-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:40px; color:#fff;
  background:linear-gradient(160deg,#c9b8a3,#8f7d6b); font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
.ss-cut:nth-child(2) .ss-cut-ph:not(.ss-cut-img) { background:linear-gradient(160deg,#b7c4b8,#6f8579); }
.ss-cut-img { background-size:cover; background-position:center; padding:0; }
.ss-cut:nth-child(3) .ss-cut-ph:not(.ss-cut-img) { background:linear-gradient(160deg,#aebbd0,#66748c); }
.ss-cut-ph b { font-size:44px; font-weight:800; }
.ss-cut-ph span { font-size:18px; line-height:1.5; font-weight:600; opacity:.9; }
.ss-flash { position:absolute; inset:0; background:#fff; opacity:0; }
/* 촬영: 각도가 다른 사진이 찰칵마다 바뀜 */
.ss-shots { position:absolute; inset:0; }
.ss-shot { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:transform,opacity; }
/* 작성 컷: 영상 속 노트북 화면 자리에 원근을 맞춰 겹치는 글쓰기 창 복제본(transform 은 스크립트가 넣음) */
.ss-win.ss-scr { inset:auto; left:0; top:0; width:680px; height:620px; transform-origin:0 0; border-radius:0; box-shadow:none; }
.ss-cut video { transform-origin:0 0; will-change:transform; }

@media(max-width:1280px) { .ss { --s:.78; } }
@media(max-width:1024px) { .ss { --s:.6; } }
@media(max-width:767px) {
  .vh-hero--ss { flex-direction:column; align-items:stretch; }
  .ss { position:relative; left:auto; right:auto; top:auto; bottom:auto; flex:none; height:400px; margin-top:-20px; --s:.5; overflow:hidden; }
}