/* VideoFly Demo — 폰 바깥 안내(장 메뉴) + 폰 화면(하단 탭). 두 메뉴는 같은 장을 가리킨다. */
.demo-page{--phone-h:min(740px,calc(100svh - 150px))}
.demo{overflow-x:clip;padding:28px 0 72px;background:radial-gradient(900px 520px at 78% 18%,#e3ebff 0,transparent 70%),var(--page)}
.demo .wrap.demo-stage{max-width:1240px;display:grid;grid-template-columns:minmax(300px,410px) minmax(0,1fr);gap:48px;align-items:start}

/* ---- 폰 바깥 ---- */
.demo-side{min-width:0;padding-top:10px}
.demo-title{font-size:34px;line-height:1.28;font-weight:750;letter-spacing:-.05em;margin-bottom:26px}
.demo-rail{display:grid;gap:2px;margin-bottom:26px;border-left:2px solid var(--line)}
.rail-item{display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:0 4px;text-align:left;background:none;border:0;border-left:2px solid transparent;margin-left:-2px;padding:9px 0 9px 14px;cursor:pointer;font:inherit;color:var(--muted);transition:color .2s,border-color .2s}
.rail-item:hover{color:var(--text)}
.rail-n{font-size:12px;font-weight:700;letter-spacing:.04em;color:inherit;opacity:.7}
.rail-name{font-size:17px;font-weight:700;letter-spacing:-.03em}
.rail-sub{grid-column:2;font-size:13px;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .3s}

.demo-panel{animation:panel-in .45s ease both}
.demo-panel h2{font-size:24px;line-height:1.42;font-weight:700;letter-spacing:-.045em;margin-bottom:12px}
.demo-panel>p{color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:18px}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.how{border:1px solid var(--line);border-radius:16px;background:var(--raised);padding:0 18px;margin:0 0 16px}
.how summary{font-size:14px;color:var(--accent-deep);padding:13px 0}
.how-list{list-style:none;padding:0;margin:0 0 12px;font-size:14px;color:var(--muted);display:grid;gap:8px}
.how-list b{color:var(--text);font-weight:700;margin-right:4px}
.how-list output,.how-stat output{font-weight:700;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.how-list.three li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.how-list code,.fine code{font-size:12px}
.how-stat{font-size:13px;color:var(--muted);margin:0 0 14px}
.out-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;flex:none;font-style:normal}

code.url{display:block;font-size:12px;line-height:1.7;background:var(--surface);border-radius:10px;padding:10px 12px;margin:0 0 14px;overflow-wrap:anywhere;color:var(--muted)}
code.url .u-origin{color:var(--muted)}
code.url .u-cmd{color:var(--accent-deep);font-weight:700}
code.url:empty{display:none}

.next{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;font:inherit;font-size:15px;font-weight:700;color:var(--accent-deep);cursor:pointer}
.next span{transition:transform .2s}
.next:hover span{transform:translateX(4px)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.demo-panel>.chips{margin:-4px 0 16px}
.quality{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 14px}
.quality-label{font-size:13px;font-weight:700;color:var(--text);margin-right:4px}
.quality .chip{padding:4px 11px;font-size:12px}

/* 체험존 조절판 */
.ctl{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--raised);margin-bottom:14px}
.ctl-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.ctl-name{font-size:13px;font-weight:700;color:var(--text);min-width:96px}
.ctl-row input[type=range]{flex:1;min-width:120px;accent-color:var(--accent)}
.ctl-row output{font-size:13px;font-weight:700;color:var(--accent-deep);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.seg button{border:0;background:none;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-checked=true]{background:var(--raised);color:var(--accent-deep);box-shadow:0 1px 3px #18233722}
.seg button small{font-weight:500;opacity:.75;margin-left:3px}
.ctl-more{border:0;border-top:1px dashed var(--line);border-radius:0;margin:2px 0 0;padding:0;background:none}
.ctl-more summary{font-size:13px;color:var(--accent-deep);padding:12px 0 2px}
.ctl-more[open] summary{padding-bottom:12px}
.ctl-more>.ctl-row+.ctl-row{margin-top:12px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--accent)}
.own{display:flex;gap:6px}
.own input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;background:var(--page);color:var(--text)}
.own input:focus{outline:2px solid var(--accent-2);outline-offset:1px}
.own button{border:0;border-radius:10px;padding:0 14px;background:var(--text);color:var(--page);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.own-error{font-size:12.5px;color:#c0392b;margin-top:-6px}
.fine{font-size:12.5px;color:var(--muted);line-height:1.7}

/* ---- 폰 ---- */
.device-col{position:sticky;top:86px;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.phone{position:relative;height:var(--phone-h);aspect-ratio:9/19.5;padding:11px;border-radius:52px;background:#0d1220;box-shadow:0 0 0 1px #2a3346,0 40px 80px -30px #1d2d6a66,0 18px 36px -18px #0d122055;transition:box-shadow .3s}
.phone::before{content:"";position:absolute;inset:-60px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#7c9cff33,transparent);pointer-events:none}
/* 앰비언트 — 지금 보는 영상의 한 장면이 폰 뒤로 번진다 */
.ambient{position:absolute;left:50%;top:46%;width:150%;max-width:1100px;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-2;pointer-events:none}
.ambient i{position:absolute;inset:0;border-radius:50%;background:center/cover no-repeat;filter:blur(70px) saturate(1.5);opacity:0;transition:opacity 1.2s ease;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.ambient i.on{opacity:.5}
.device-col{isolation:isolate}
.phone[data-orient=landscape]{height:auto;width:min(760px,100%);aspect-ratio:19.5/9}
.phone.turning{animation:turn .6s cubic-bezier(.3,.7,.2,1)}
.phone.turning-back{animation:turn-back .6s cubic-bezier(.3,.7,.2,1)}
@keyframes turn{from{transform:rotate(90deg) scale(.55);opacity:.4}to{transform:none;opacity:1}}
@keyframes turn-back{from{transform:rotate(-90deg) scale(.7);opacity:.4}to{transform:none;opacity:1}}
.phone-screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#000;isolation:isolate}
.phone[data-orient=landscape] .phone-screen{border-radius:40px}

.statusbar{position:absolute;inset:0 0 auto;z-index:6;height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 26px 0 30px;font-size:12.5px;font-weight:700;color:#fff;pointer-events:none}
.statusbar.light{color:#111}
.sb-icons{display:flex;gap:4px}
.sb-icons i{width:14px;height:9px;border-radius:2px;background:currentColor;opacity:.9}
.sb-icons i:nth-child(1){width:10px}.sb-icons i:nth-child(3){width:20px;border-radius:3px}
.phone[data-orient=landscape] .statusbar{display:none}

.screen{position:absolute;inset:0 0 58px;overflow:hidden}
.screen[hidden]{display:none}
.phone[data-orient=landscape] .screen{inset:0 0 0 64px}

.app-tabs{position:absolute;inset:auto 0 0;height:58px;z-index:7;display:grid;grid-template-columns:repeat(3,1fr);background:#0b0d12;border-top:1px solid #ffffff14;padding-bottom:6px}
.app-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:#8a93a6;font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;transition:color .2s}
.app-tabs svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-tabs button[aria-current=page]{color:#fff}
/* 가로: 하단 탭이 왼쪽 세로 레일로 — 같은 메뉴, 다른 배치 (극장은 화면을 가득 채운다) */
.phone[data-orient=landscape] .app-tabs{inset:0 auto 0 0;width:64px;height:auto;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);padding:10px 0;border-top:0;border-right:1px solid #ffffff14}
.phone[data-orient=landscape][data-chapter=feed] .app-tabs{display:none}

vfly-player{display:block;width:100%;height:100%;background:transparent}
/* Chrome 이 영상을 하드웨어 오버레이(별도 평면)로 띄우면 고정 · 회전하는 폰 안에서 평면 위치가 몇 px 어긋나
   영상 위쪽에 페이지 바탕(흰색)이 비친다 — 불투명도를 아주 조금 낮춰 페이지와 함께 합성되게 한다 */
.phone-screen video{opacity:.999}
vfly-player video{width:100%;height:100%}
.fill vfly-player{--media-object-fit:cover;position:absolute;inset:0}

/* 기능 상세 표시 — 폰 위에 덧붙는 작은 라벨 */
.xray{position:absolute;z-index:4;display:none;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.xray span{max-width:100%;overflow:hidden;text-overflow:ellipsis;background:#0a1a4dcc;color:#dfe7ff;border:1px solid #7c9cff66;border-radius:6px;padding:2px 6px;font-family:var(--mono);font-size:10px;line-height:1.4;white-space:nowrap;backdrop-filter:blur(4px)}
.xray span b{color:#fff}
.xray-on .xray{display:flex}

/* 01 피드 — dev.videofly.co.kr/player/demo/flip 스타일 그대로 */
.screen-feed{background:#000;-webkit-user-select:none;user-select:none}
.feed-scroller{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:0}
.feed-scroller::-webkit-scrollbar{display:none}
/* 슬라이드는 <section> 이라 사이트 공통 규칙(section 패딩 · section+section 윗선 1px)을 받는다 — 지워서 영상이 맨 위부터 꽉 차게 */
.slide{position:relative;height:100%;margin:0;padding:0;border:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000 center/cover no-repeat;color:#fff}
.slide .fill{position:absolute;inset:0}
.slide .fill vfly-player video{object-fit:cover}
.slide .xray{left:12px;top:124px;z-index:21}
.screen-feed svg{display:block}
.f-top{position:absolute;inset:34px 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 12px;background:linear-gradient(#00000080,#0000);color:#fff;pointer-events:none}
.f-title{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:500;letter-spacing:.12em}
.f-right{display:flex;align-items:center;gap:6px}
.f-stats{padding:3px 8px;border-radius:4px;background:#0000008c;font:10.5px/1.4 ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.f-bagbtn{width:32px;height:32px;padding:5px}
.f-bagbtn svg{width:100%;height:100%}
.f-tabs{position:absolute;left:0;right:0;top:80px;z-index:20;display:flex;gap:2px;padding:4px 12px;overflow-x:auto;scrollbar-width:none}
.f-tabs::-webkit-scrollbar{display:none}
.f-tabs button{flex:0 0 auto;height:30px;padding:0 13px;border:1px solid transparent;border-radius:16px;background:transparent;color:#ffffffeb;font:inherit;font-size:13px;letter-spacing:-.3px;white-space:nowrap;text-shadow:0 1px 3px #00000080;cursor:pointer}
.f-tabs button.on{color:#ffd60a;text-shadow:none;border-color:#ffffff80;background:#ffffff1a}
.f-play{position:absolute;top:50%;left:50%;z-index:5;width:64px;height:64px;margin:-32px 0 0 -32px;color:#ffffffd9;pointer-events:none;display:none}
.f-play svg{width:100%;height:100%}
.slide.cur:not(.on) .f-play{display:block}
.f-rail{position:absolute;right:10px;bottom:130px;z-index:18;display:flex;flex-direction:column;align-items:center;gap:16px}
.f-rail button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0;color:#fff;font:inherit;cursor:pointer}
.f-rail svg{width:27px;height:27px;filter:drop-shadow(0 1px 3px #00000080)}
.f-rail span{font-size:11px;line-height:1.2;text-shadow:0 1px 3px #00000080}
.f-rail .liked{color:#dc2832}
.f-rail .liked svg path{fill:currentColor}
.f-bottom{position:absolute;left:0;bottom:0;z-index:16;width:100%;padding:0 66px 20px 14px;background:linear-gradient(to top,#000000a6,#0000)}
.f-owner{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.f-owner img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#757575}
.f-owner strong{font-size:13px;font-weight:600}
.f-badge{height:18px;padding:0 7px;border-radius:9px;border:1px solid #fff9;font-size:10px;line-height:16px}
.f-caption{margin:0;font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;cursor:pointer}
.f-caption.expanded{display:block;max-height:30%;overflow-y:auto;-webkit-line-clamp:unset}
.f-tags{display:flex;gap:6px;margin-top:6px;overflow-x:auto;scrollbar-width:none}
.f-tags::-webkit-scrollbar{display:none}
.f-tags span{flex:none;font-size:11.5px;color:#fffc}
.f-product{margin-top:10px}
.f-card{display:flex;align-items:center;padding:6px 10px;border-radius:8px;background:#ffffffeb;color:#000}
.f-info{display:block;flex:1 1 auto;min-width:0}
.f-brand{display:block;font-size:10.5px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-name{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-price{display:flex;align-items:baseline;gap:4px;margin-top:1px;font-size:11.5px}
.f-price em{color:#d6006b;font-weight:700;font-style:normal}
.f-price strong{font-weight:700}
.f-price s{font-size:10px;color:#999}
.f-more{flex:0 0 auto;margin-left:8px;padding:3px 7px;border:0;border-radius:6px;background:#000;color:#fff;font:inherit;font-size:10px;font-weight:600}
.f-seek{position:absolute;left:0;bottom:0;z-index:17;width:100%;height:18px;display:flex;align-items:flex-end;touch-action:none;cursor:pointer}
.f-track{position:relative;width:100%;height:2px;background:#fff3;transition:height .15s}
.f-seek.dragging .f-track{height:4px}
.f-fill{display:block;height:100%;width:0;background:#fff}
.f-empty{position:absolute;top:50%;left:0;z-index:15;width:100%;margin:0;transform:translateY(-50%);text-align:center;color:#ffffffb8;font-size:13.5px;line-height:1.6}
.f-empty[hidden]{display:none}
.f-coach{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000000b3;color:#fff;text-align:center;font-size:13.5px;line-height:1.5;cursor:pointer}
.f-coach[hidden]{display:none}
.f-coach svg{width:42px;height:42px;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(6px)}50%{transform:translateY(-8px)}}

/* 02 쇼핑 — Clips 배치(2열 정사각 · 아바타 · 상품 칩) · 폰 화면은 모두 어둡게 */
.screen-shop{--c-ink:#f1f3f7;--c-muted:#8e96a6;--c-line:#232834;--c-chip:#3a404d;background:#0b0d12;color:var(--c-ink)}
.screen-shop svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c-scroll{position:absolute;inset:34px 0 0;overflow-y:auto;scrollbar-width:none;padding:0 14px 24px}
.c-scroll::-webkit-scrollbar{display:none}
.phone[data-orient=landscape] .c-scroll{inset:0}
.c-appbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;height:46px;margin:0 -14px 12px;background:#0b0d12;border-bottom:1px solid var(--c-line)}
.c-title{font-size:15px;font-weight:700;letter-spacing:-.02em}
.c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
.phone[data-orient=landscape] .c-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}
.c-card{min-width:0;opacity:0;transform:translateY(12px);animation:c-rise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes c-rise{to{opacity:1;transform:none}}
.c-media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#1a1e27;cursor:pointer}
.c-media vfly-player{position:absolute;inset:0;--media-object-fit:cover}
.c-media vfly-player>video{display:block;width:100%;height:100%;object-fit:cover}
.c-cover{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease}
.c-cover.on{opacity:1}
.c-cover.on.hide{opacity:0}
.c-play{position:absolute;top:7px;right:8px;z-index:3;width:23px;height:18px;border-radius:20px;background:#1111114d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;pointer-events:none}
.c-like{position:absolute;right:10px;bottom:8px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff;font-size:12px;text-shadow:0 1px 4px #00000073;pointer-events:none}
.c-like svg{width:22px;height:22px;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 1px 3px #0006)}
.c-media .xray{left:6px;top:6px;right:34px;z-index:4}
.c-meta{padding:9px 2px 0}
.c-user{display:flex;align-items:center;gap:8px}
.c-user img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#232834}
.c-user span{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-name{display:inline-block;max-width:100%;margin-top:7px;padding:3px 6px;border:1px solid var(--c-chip);border-radius:4px;font-size:9px;color:#c3c8d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-more{display:flex;justify-content:center;padding:18px 0}
.c-more[hidden]{display:none}
.c-more span{width:24px;height:24px;border-radius:50%;border:2.5px solid #2b303b;border-top-color:#fff;animation:c-spin .8s linear infinite}
.c-sentinel{height:1px}
@keyframes c-spin{to{transform:rotate(360deg)}}
.c-top{position:absolute;right:12px;bottom:12px;z-index:4;width:40px;height:40px;padding:9px;border:1px solid var(--c-line);border-radius:50%;background:#1a1e27;color:var(--c-ink);box-shadow:0 3px 12px #0006;cursor:pointer}
.c-top svg{width:100%;height:100%}

/* 쇼핑 전면 재생(큰 관심) — 정지 프레임이 화면 가득 커지고(브리지), 1080p 가 그 장면부터 이어 재생 */
.c-host{position:absolute;inset:0;z-index:6;pointer-events:none}
.c-host>*{pointer-events:auto}
.c-detail{position:absolute;inset:0;background:#000;animation:c-fade .25s ease}
@keyframes c-fade{from{opacity:0}to{opacity:1}}
.c-dmedia{position:absolute;inset:0;overflow:hidden;background:#000;cursor:pointer}
.c-dmedia vfly-player{position:absolute;inset:0;--media-object-fit:cover}
.c-dmedia vfly-player>video{display:block;width:100%;height:100%;object-fit:cover}
.phone[data-orient=landscape] .c-dmedia vfly-player{--media-object-fit:contain}
.phone[data-orient=landscape] .c-dmedia vfly-player>video{object-fit:contain}
.c-dmedia.loading vfly-player{visibility:hidden}
.c-dmedia .xray{left:10px;top:88px}
.c-spin{position:absolute;top:50%;left:50%;z-index:7;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:3px solid #ffffff40;border-top-color:#fff;animation:c-spin .8s linear infinite;pointer-events:none}
.c-dbar{position:absolute;inset:34px 0 auto;z-index:8;display:flex;align-items:center;gap:6px;height:46px;padding:0 10px 0 6px;background:linear-gradient(#0009,#0000);color:#fff;pointer-events:none}
.phone[data-orient=landscape] .c-dbar{top:0}
.c-dbar b{flex:1;font-size:14px;font-weight:600}
.c-dbar button{pointer-events:auto}
.c-back{width:36px;height:36px;padding:7px;border:0;background:none;color:#fff;cursor:pointer}
.c-back svg{width:100%;height:100%}
.c-mute{width:34px;height:34px;padding:7px;border:0;border-radius:50%;background:#11111180;color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.c-mute svg{width:100%;height:100%}
.c-mute .muted-i,.c-mute.muted .unmuted{display:none}
.c-mute.muted .muted-i{display:block}
.c-dinfo{position:absolute;inset:auto 0 0;z-index:7;padding:48px 14px 16px;background:linear-gradient(to top,#000000d0,#0000);color:#fff;pointer-events:none}
.phone[data-orient=landscape] .c-dinfo{right:auto;width:48%;padding-bottom:12px}
.c-dinfo button{pointer-events:auto}
.c-author{display:flex;align-items:center;gap:10px}
.c-author img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#232834}
.c-acol{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.c-acol b{font-size:13px}
.c-acol span{max-width:100%;padding:2px 7px;border:1px solid #ffffff59;border-radius:4px;font-size:10px;color:#e6e9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-rlike{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#fff;font:inherit;font-size:11px;cursor:pointer}
.c-rlike svg{width:24px;height:24px}
.c-rlike.on svg{fill:#ff4d6a;stroke:#ff4d6a}
.c-desc{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#e9ecf2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-tags{margin:6px 0 0;font-size:12px;color:#8fb4ff}
.c-bridge{position:absolute;z-index:9;overflow:hidden;border-radius:4px;background:#000;pointer-events:none;transition:top .34s cubic-bezier(.3,.8,.3,1),left .34s cubic-bezier(.3,.8,.3,1),width .34s cubic-bezier(.3,.8,.3,1),height .34s cubic-bezier(.3,.8,.3,1),border-radius .34s ease,opacity .22s ease}
.c-bridge.leaving{opacity:0}
.c-bridge canvas,.c-bridge img{width:100%;height:100%;object-fit:cover;display:block}

/* 폰 아래 조작 */
.device-ctl{display:flex;gap:8px}
.dev-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--raised);color:var(--text);border-radius:999px;padding:8px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.dev-btn:hover{border-color:var(--accent-2)}
.dev-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dev-btn[aria-pressed=true]{background:var(--tint);border-color:var(--accent);color:var(--accent-deep)}

/* ---- 좁은 화면: 장 메뉴는 위, 폰은 가운데, 설명은 아래 ---- */
@media (max-width:980px){
  .demo .wrap.demo-stage{grid-template-columns:1fr;gap:20px}
  .demo-side{display:contents}
  .demo-side>.label,.demo-title{text-align:center}
  .demo-title{font-size:28px;margin-bottom:0}
  .device-col{order:2;position:relative;top:auto}
  .demo-panels{order:3;max-width:560px;width:100%;justify-self:center}
  .demo-page{--phone-h:min(680px,calc(100svh - 120px))}
}
@media (max-width:520px){
  /* 휴대폰에서는 폰 하단 탭이 곧 메뉴 — 바깥 메뉴를 숨기고 폰을 한 화면에 담는다 */
  .demo{padding-top:14px}
  .demo-side>.label,.demo-rail{display:none}
  .demo-title{font-size:23px}
  .phone{height:auto;width:min(300px,100%);padding:8px;border-radius:40px}
  .phone-screen{border-radius:33px}
  .phone[data-orient=landscape]{width:100%;padding:6px;border-radius:26px}
  .phone[data-orient=landscape] .phone-screen{border-radius:21px}
  .rail-name{font-size:15px}
  .ctl-name{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .phone.turning,.phone.turning-back,.demo-panel,.sheet{animation:none}
  .f-coach svg{animation:none}
}

/* ---- 회전: 같은 콘텐츠 · 같은 플레이어, 배치만 바뀐다 ---- */
/* 피드 가로 — 시안: 왼쪽 세로 영상(원본 비율 · 높이에 맞춤 · 좌우 차분한 단색) + 오른쪽 "영상 속 상품" 패널.
   같은 슬라이드 · 같은 플레이어라 재생 위치 · 소리 상태가 그대로다. */
.f-stage{position:absolute;inset:0}
.f-land,.f-panel,.f-mini,.f-capmore{display:none}
.phone[data-orient=landscape] .screen-feed{inset:0;display:grid;grid-template-columns:minmax(0,1fr) 41%;grid-template-rows:minmax(0,1fr);background:#0f1219}
.phone[data-orient=landscape] .screen-feed.video-only{grid-template-columns:minmax(0,1fr)}
.phone[data-orient=landscape] .screen-feed[hidden]{display:none}
.phone[data-orient=landscape] .f-stage{position:relative;inset:auto;min-width:0;height:100%}
.phone[data-orient=landscape] .slide{background-image:none!important;background-color:#0f1219}
.phone[data-orient=landscape] .slide::before{display:none}
.phone[data-orient=landscape] .slide .fill vfly-player{--media-object-fit:contain}
.phone[data-orient=landscape] .slide .fill vfly-player video{object-fit:contain}
.phone[data-orient=landscape] .f-top,.phone[data-orient=landscape] .f-coach,.phone[data-orient=landscape] .f-rail,
.phone[data-orient=landscape] .f-product,.phone[data-orient=landscape] .f-tags{display:none}
.phone[data-orient=landscape] .slide .xray{top:52px;left:12px}
/* 크리에이터 · 한 줄 설명 + 더보기 · 작게 좋아요 · 공유 */
.phone[data-orient=landscape] .f-bottom{padding:0 128px 18px 14px;background:linear-gradient(to top,#0009,#0000)}
.phone[data-orient=landscape] .f-owner{margin-bottom:4px}
.phone[data-orient=landscape] .f-mini{display:inline-flex;align-items:center;gap:8px;margin-left:2px}
.f-mini button{display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:0;color:#fff;font:inherit;font-size:10.5px;cursor:pointer}
.f-mini svg{width:17px;height:17px}
.f-mini .liked{color:#ff5a7a}
.f-mini .liked svg path{fill:currentColor}
.phone[data-orient=landscape] .f-caption{-webkit-line-clamp:1;font-size:11.5px;color:#ffffffd9}
.phone[data-orient=landscape] .f-caption.expanded{max-height:72px}
.phone[data-orient=landscape] .f-capmore{display:inline-block;border:0;background:none;padding:2px 0 0;color:#ffffffb3;font:inherit;font-size:11px;cursor:pointer}
/* 카테고리 탭 — 지금 탭 한 줄, 누르면 펼쳐서 선택 */
.phone[data-orient=landscape] .f-tabs{top:9px;left:50%;right:auto;transform:translateX(-50%);flex-direction:column;align-items:stretch;gap:2px;padding:0;overflow:visible;border-radius:14px}
.phone[data-orient=landscape] .f-tabs button{display:none;height:28px;font-size:12px}
.phone[data-orient=landscape] .f-tabs button.on{display:block;background:#00000073}
.phone[data-orient=landscape] .f-tabs button.on::after{content:" ▾";font-size:10px}
.phone[data-orient=landscape] .f-tabs.open{background:#000000c7;padding:4px;backdrop-filter:blur(8px)}
.phone[data-orient=landscape] .f-tabs.open button{display:block;text-align:left}
.phone[data-orient=landscape] .f-tabs.open button.on::after{content:""}
/* 영상 위 조작 */
.phone[data-orient=landscape] .f-land{display:block}
.f-land>button{position:absolute;z-index:22;display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;padding:0;font:inherit}
.f-land svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px #0008)}
.f-l-back{top:8px;left:6px;width:34px;height:34px}
.f-l-menu{top:8px;left:40px;width:34px;height:34px}
.f-l-menu svg{width:19px;height:19px}
.f-l-mute{top:8px;right:8px;width:34px;height:34px}
.f-l-step{top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:#ffffff1f!important;backdrop-filter:blur(6px)}
.f-l-step svg{width:18px;height:18px}
.f-l-step.prev{left:10px}
.f-l-step.next{right:10px}
.f-l-only{right:10px;bottom:14px;display:inline-flex!important;align-items:center;gap:5px;height:28px;padding:0 11px!important;border:1px solid #ffffff59!important;border-radius:999px;font-size:11.5px!important;font-weight:600}
.f-l-only svg{width:13px;height:13px}
.f-menu{position:absolute;top:44px;left:40px;z-index:23;display:grid;min-width:96px;padding:4px;border-radius:10px;background:#fff;box-shadow:0 6px 20px #0006}
.f-menu[hidden]{display:none}
.f-menu button{border:0;background:none;text-align:left;padding:7px 10px;border-radius:6px;font:inherit;font-size:12.5px;color:#111;cursor:pointer}
.f-menu button:hover{background:#f1f3f7}
/* 영상 속 상품 패널 */
.phone[data-orient=landscape] .screen-feed:not(.video-only) .f-panel{display:flex}
.f-panel{position:relative;flex-direction:column;min-width:0;padding:10px 14px 0;background:#141821;color:#eef1f6;border-radius:14px 0 0 14px}
.f-p-head{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid #262b36}
.f-p-head b{font-size:14.5px;letter-spacing:-.03em}
.f-p-count{font-size:11.5px;font-weight:600;color:#8b93a1}
.f-p-bag{position:relative;margin-left:auto;width:24px;height:24px}
.f-p-bag svg{width:100%;height:100%}
.f-p-bag i{position:absolute;top:-4px;right:-6px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#e0306f;color:#fff;font-size:9.5px;font-style:normal;font-weight:700;line-height:15px;text-align:center}
.f-p-bag i[hidden]{display:none}
.f-p-body{flex:1;min-height:0;overflow-y:auto;padding:8px 0 4px;scrollbar-width:none}
.f-p-body::-webkit-scrollbar{display:none}
.f-p-brand{display:block;font-size:10.5px;color:#8b93a1}
.f-p-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:1px;font-size:13.5px;line-height:1.35;letter-spacing:-.02em}
.f-p-price{display:flex;align-items:baseline;gap:6px;margin-top:3px}
.f-p-price em{font-style:normal;font-weight:800;font-size:14px;color:#ff5a8a}
.f-p-price strong{font-size:15px;font-weight:800}
.f-p-price s{font-size:10.5px;color:#6f7787}
.f-p-thumbs{display:flex;gap:7px;margin:9px 0 2px}
.f-p-thumbs button{position:relative;flex:none;width:50px;height:50px;padding:0;border:1.5px solid #2b3140;border-radius:8px;overflow:hidden;background:#1e232d;cursor:pointer}
.f-p-thumbs button[aria-checked=true]{border-color:#ff5a8a}
.f-p-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.f-p-thumbs span{font-size:9px;color:#a9b1c2;padding:2px}
.f-p-thumbs i{position:absolute;inset:auto 0 0;background:#000a;color:#fff;font-size:9px;font-style:normal}
.f-p-opt{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:7px}
.f-p-opt>span{width:40px;font-size:11.5px;font-weight:700}
.f-p-opt button{min-width:36px;height:25px;padding:0 10px;border:1px solid #3a404d;border-radius:999px;background:transparent;color:#d5dae3;font:inherit;font-size:11.5px;cursor:pointer}
.f-p-opt button[aria-pressed=true]{border:1.5px solid #fff;font-weight:700;color:#fff}
.f-p-ship{display:flex;align-items:center;gap:5px;margin:8px 0 0;font-size:11px;color:#8b93a1}
.f-p-ship svg{width:16px;height:16px;flex:none}
.f-p-empty{margin:28px 0 0;text-align:center;font-size:12px;line-height:1.6;color:#8b93a1}
.f-p-foot{display:flex;gap:7px;padding:8px 0 10px;border-top:1px solid #232834}
.f-p-buy{flex:1;height:36px;border:0;border-radius:8px;background:#fff;color:#111;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.f-p-buy:disabled{background:#3a404d;color:#8e96a6;cursor:default}
.f-p-wish{width:36px;height:36px;border:1px solid #3a404d;border-radius:8px;background:transparent;color:#ff5a8a;display:grid;place-items:center;cursor:pointer}
.f-p-wish svg{width:20px;height:20px}
.f-p-wish[aria-pressed=true] svg path{fill:currentColor}
.f-p-wish:disabled{color:#4a5060;cursor:default}
.f-p-toast{position:absolute;left:12px;right:12px;bottom:56px;margin:0;padding:7px 10px;border-radius:8px;background:#fffffff0;color:#111;font-size:11.5px;text-align:center}
.f-p-toast[hidden]{display:none}
.device-ctl{order:2}
.device-note{order:3;margin:-8px 0 0;font-size:12px;color:var(--muted)}

/* 휴대폰 폭 — 폰을 화면 높이에 맞춘다 */
@media (max-width:520px){
  .phone{height:min(640px,calc(100svh - 160px));width:auto;max-width:100%}
  .phone[data-orient=landscape]{height:auto;width:100%}
}
/* 실제 휴대폰을 가로로 들었을 때 — 제목·메뉴를 접고 폰을 화면에 맞춘다 */
@media (orientation:landscape) and (max-height:500px){
  .demo{padding-top:8px}
  .demo-title,.demo-side>.label,.demo-rail{display:none}
  .phone[data-orient=landscape]{width:auto;height:calc(100svh - 76px);max-width:100%}
}

/* ---- 메뉴 — 유스 케이스 · 내 영상에 적용하기 ---- */
.demo{--vf-purple:#7451e0;--vf-purple-bg:#f3efff;--vf-blue:#2f63e8;--vf-blue-bg:#eef3ff}
.rail-group{margin:14px 0 4px 16px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.rail-group:first-child{margin-top:4px}
.rail-item[aria-current=page]{color:var(--accent-deep);border-left-color:var(--accent)}
.rail-item .rail-sub{max-height:none;opacity:1;font-size:12.5px}
.rail-item[aria-current=page] .rail-sub{color:var(--accent-deep)}
.rail-name{font-size:15.5px}
.rail-item{padding-top:7px;padding-bottom:7px}
@media (min-width:981px){.demo-title{font-size:26px;margin-bottom:18px}}
.rail-toggle{display:none}

/* ---- 단계 본문 — 공감 → 필요성 · 효과 → 선택 → 차별점 → 이전 · 다음 ---- */
.crumb{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.demo-panel h2{font-size:23px}
.pick{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--raised);margin-bottom:12px}
.pick[hidden]{display:none}
.pick-h{margin:0;font-size:13px;font-weight:700;color:var(--accent-deep)}
.lbl{font-size:13px;font-weight:700;color:var(--text)}
.field{display:grid;gap:8px}
.field .fine{margin:0}
.diff{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:14px 16px;border-radius:16px;background:var(--vf-purple-bg);border:1px solid #e3dafc}
.diff-badge{flex:none;padding:1px 9px;border-radius:999px;background:var(--vf-purple);color:#fff;font-size:11.5px;font-weight:700;line-height:1.8}
.diff p{margin:0;font-size:15px;font-weight:700;line-height:1.55;color:#3d2a8a}
.diff small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:#5b4b9c}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.pager>*{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:49%;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.pager span{font-size:11.5px;color:var(--muted)}
.pager b{font-size:14px}
.pager .next{margin-left:auto;align-items:flex-end;text-align:right;border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.pager .next span{color:inherit;opacity:.8}
.empty{display:grid;gap:6px;justify-items:start;padding:18px;border:1px dashed var(--line);border-radius:16px;margin-bottom:12px;font-size:14px;color:var(--muted)}
.empty b{color:var(--text)}
.empty[hidden]{display:none}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row-btns{display:flex;flex-wrap:wrap;gap:6px}

/* 가이드 */
.guide{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--surface)}
.guide-who{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.55}
.guide-who i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--vf-blue),var(--vf-purple));color:#fff;font-style:normal;font-size:10px;font-weight:800}
.guide form{display:flex;gap:6px}
.guide input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;background:var(--raised);color:var(--text)}
.guide form button{border:0;border-radius:10px;padding:0 12px;background:var(--text);color:var(--page);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.guide .chip{padding:4px 11px;font-size:12px}
.guide-say{display:none;margin:0;padding:10px 12px;border-radius:10px;background:var(--raised);border:1px solid var(--line);font-size:13.5px;line-height:1.6}
.guide-say.on{display:grid;gap:6px;justify-items:start}
.guide-say .apply{border:1px solid var(--accent);border-radius:8px;padding:4px 11px;background:none;color:var(--accent-deep);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.guide-say .apply[disabled]{border-color:var(--line);color:var(--muted);cursor:default}
.guide-say small{font-size:11.5px;color:var(--muted)}

/* 선택 컨트롤 */
.opts{display:grid;gap:6px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);background:var(--tint)}
.opt:has(input:disabled){opacity:.5;cursor:default}
.opt input{margin-top:4px;accent-color:var(--accent)}
.opt small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stages li{padding:8px 10px;border-radius:10px;background:var(--surface);font-size:12px;color:var(--muted)}
.stages b{display:block;font-size:12.5px;color:var(--text)}
.log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.log:empty{display:none}
.log li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:var(--surface)}
.log span{color:var(--muted)}
.or{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sample{display:grid;gap:2px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--raised);font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.sample b{font-size:13px}
.sample span{font-size:11.5px;color:var(--muted)}
.sample[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}
.result{margin:0;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.6}
.result[hidden]{display:none}
.result b{display:block}
.result small{display:block;margin-top:3px;font-size:12px;opacity:.85}
.result.ok{background:#f3f6fb;color:var(--text)}
.result.err{background:#fdeeee;color:#8a2525}
.result.wait{background:var(--surface);color:var(--muted)}
.slider{display:grid;gap:6px}
.slider input[type=range]{width:100%;accent-color:var(--accent)}
.time-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.readout{display:flex;flex-wrap:wrap;gap:6px}
.readout div{flex:1;min-width:90px;padding:8px 10px;border-radius:10px;background:var(--surface)}
.readout span{display:block;font-size:11.5px;color:var(--muted)}
.readout b{font-size:16px;font-variant-numeric:tabular-nums}
.seg-bar{position:relative;height:8px;border-radius:99px;background:var(--surface)}
.seg-bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--accent)}
.seg-bar u{position:absolute;top:-4px;width:2px;height:16px;background:var(--vf-purple)}

/* 해상도 표 */
.res{width:100%;border-collapse:collapse;font-size:13px}
.res th,.res td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums}
.res th{font-size:11.5px;color:var(--muted);font-weight:700}
.res td:first-child,.res th:first-child,.res td:last-child,.res th:last-child{text-align:center;width:46px}
.res td .tag{margin-left:6px}
.res small{display:block;font-size:11.5px;color:var(--muted)}
.res input{width:16px;height:16px;accent-color:var(--accent)}
.res input:disabled{opacity:.3}
.res tr.off td:nth-child(2),.res tr.off td:nth-child(3){color:#a3a9b6}
.checks{display:grid;gap:4px}
.checks:empty{display:none}
.checks p{margin:0;padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.55}
.checks .ok{background:#f3f6fb;color:var(--char)}
.checks .warn{background:#fff5e5;color:#7a4a08}

/* 태그 · 자세히 보기 */
.tag{display:inline-block;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.75;white-space:nowrap;vertical-align:1px}
.tag.ok{background:#e9f7f0;color:#1f8a5b}
.tag.warn{background:#fff5e5;color:#a5640b}
.tag.ex{background:var(--surface);color:var(--muted)}
.tag.prod{background:var(--vf-purple-bg);color:var(--vf-purple)}
.qa{display:grid;gap:12px;padding:0 0 14px}
.qa h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px;font-size:13.5px}
.qa p{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.qa p b,.qa output{color:var(--text);font-weight:700}
.qa code{font-size:12px}
.qa .url{margin:6px 0 0}
.qa table{width:100%;margin-top:6px;border-collapse:collapse;font-size:12px}
.qa td,.qa th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.qa th{color:var(--muted)}

/* 주소 — 파랑 원본 · 보라 규칙 · 회색 연결 */
code.url .u-src{color:var(--vf-blue);font-weight:700;background:var(--vf-blue-bg);border-radius:4px}
code.url .u-rule{color:var(--vf-purple);font-weight:700;background:var(--vf-purple-bg);border-radius:4px}
code.url .u-link{color:#8a92a3}
.fine .u-src{color:var(--vf-blue);font-weight:700}
.fine .u-link{color:#8a92a3}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px}
.lg-src{background:var(--vf-blue)}
.lg-rule{background:var(--vf-purple)}
.lg-link{background:#8a92a3}
.c-src{color:var(--vf-blue)}
.c-rule{color:var(--vf-purple)}
.c-link{color:#8a92a3}
.urls{display:grid;gap:10px}
.urls code.url{margin:0}
.urls .fine{margin:0}
.url-h{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;font-size:13px}
.url-h span{font-size:12px;color:var(--muted)}
.copy{margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:2px 9px;background:var(--raised);font:inherit;font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer}
.swap{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--surface)}
pre.code{margin:0;padding:12px 14px;border-radius:10px;background:#141824;color:#e6e9f2;font:12px/1.65 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
pre.code .k{color:#b9a6ff}
pre.code .v{color:#9cc1ff}

/* ---- 폰 화면 · 내 영상에 적용하기 ---- */
.screen-apply{background:#0b0d12;color:#eef1f6}
.a-head{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:40px 16px 10px;background:#10131a;border-bottom:1px solid #232834}
.a-head b{font-size:14px;white-space:nowrap}
.a-head span{min-width:0;font-size:11px;color:#8e96a6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-body{position:absolute;inset:76px 0 0;overflow-y:auto;padding:10px 10px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none}
.a-stage{position:relative;flex:none;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.src-tall .a-stage{aspect-ratio:auto;height:min(330px,52%)}
.a-stage vfly-player{position:absolute;inset:0}
.a-ph{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;color:#8e96a6;font-size:12.5px;text-align:center;line-height:1.6}
.a-ph[hidden]{display:none}
.a-live{margin:0;font-size:10.5px;line-height:1.6;color:#8e96a6}
.a-live b{color:#fff}
.a-live em{font-style:normal;color:#ff8a8a}
.a-tag{display:inline-block;padding:0 6px;border-radius:5px;background:#2b2150;color:#c9b8ff;font-family:var(--mono);font-size:9.5px}
.a-cards{display:grid;gap:8px}
.a-card{margin:0;display:grid;gap:4px;padding:10px;border-radius:12px;background:#161a22;font-size:12px}
.a-card[hidden]{display:none}
.a-card>span,.a-card figcaption span{color:#a9b1c2}
.a-card figcaption{display:flex;justify-content:space-between;gap:6px}
.a-chips{display:flex;flex-wrap:wrap;gap:4px}
.a-chips i{font-style:normal;padding:1px 7px;border-radius:999px;background:#232937;color:#dfe5f1;font-size:10.5px}
.a-img{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222733}
.src-tall .a-fig .a-img{aspect-ratio:9/16;width:46%}
.a-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.a-img img:not([src]){display:none}
.a-img vfly-player{position:absolute;inset:0}
.a-bar{position:relative;height:6px;border-radius:99px;background:#232937}
.a-bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--accent)}
.a-outs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.a-outs figure{margin:0;min-width:0}
.a-outs figcaption{display:block;margin-top:4px;font-size:10.5px;color:#a9b1c2;text-align:center}
.a-main{display:grid;place-items:center;font-size:10px;color:#8e96a6;border:1px dashed #3a404d}
.src-tall .a-outs .a-img{aspect-ratio:9/16}
/* 가로 — 영상 왼쪽, 결과 오른쪽 */
.phone[data-orient=landscape] .a-head{padding-top:12px}
.phone[data-orient=landscape] .a-body{inset:44px 0 0;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto 1fr;align-items:start;column-gap:10px}
.phone[data-orient=landscape] .a-stage{grid-column:1;grid-row:1}
.phone[data-orient=landscape] .src-tall .a-stage,.phone[data-orient=landscape] .screen-apply.src-tall .a-stage{height:230px}
.phone[data-orient=landscape] .a-live{grid-column:1;grid-row:2}
.phone[data-orient=landscape] .a-cards{grid-column:2;grid-row:1/4}

/* ---- 넓은 화면 — Player 문서와 같은 폭 · 같은 목차형 메뉴: [메뉴 | 본문 | 폰] ---- */
@media (min-width:981px){
  .demo .wrap.demo-stage{max-width:var(--w);grid-template-columns:180px minmax(0,1fr) auto;gap:0 36px}
  .demo-side{display:contents}
  .demo-side>.label{grid-column:2;grid-row:1}
  .demo-title{grid-column:2;grid-row:2}
  .demo-panels{grid-column:2;grid-row:3;min-width:0}
  .demo-rail{grid-column:1;grid-row:1/4;align-self:start;position:sticky;top:88px;display:block;margin:0;border-left:0;font-size:14px}
  .device-col{grid-column:3;grid-row:1/4}
  .rail-group{margin:18px 0 6px;font-size:12px;color:var(--graph)}
  .rail-group:first-child{margin-top:0}
  .rail-item{display:block;width:100%;margin:0;padding:6px 0 6px 12px;border-left:2px solid var(--fog);color:var(--char);font-size:14px}
  .rail-item:hover{color:var(--blue);border-color:var(--blue)}
  .rail-item[aria-current=page]{color:var(--blue);border-left-color:var(--blue);font-weight:700}
  .rail-n{margin-right:6px;font-size:12px;font-weight:600;opacity:.7}
  .rail-n:empty{display:none}
  .rail-name{font-size:14px;font-weight:inherit;letter-spacing:0}
  .rail-item .rail-sub{display:block;margin-top:1px;font-size:11.5px;font-weight:400;color:var(--graph)}
  .rail-item[aria-current=page] .rail-sub{color:var(--blue)}
  .demo-page{--phone-h:min(700px,calc(100svh - 150px))}
}
.step-why{color:var(--muted);font-size:15px;line-height:1.8;margin-bottom:18px}
.step-why b{color:var(--text)}

/* 유스 케이스 — 1단: 제목 → 스마트폰 → 상세 설명 */
@media (min-width:981px){
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]){grid-template-columns:180px minmax(0,1fr)}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-rail{grid-row:1/span 12}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) :is(.demo-panels,.demo-panel:not([hidden])){display:contents}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) :is(.demo-side>.label,.demo-title,.demo-panel>*,.device-col){grid-column:2;grid-row:auto;width:100%;max-width:680px}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-side>.label{order:1}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-title{order:2}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-panel>.crumb{order:3}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-panel>h2{order:4}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .device-col{order:5;position:relative;top:auto;margin:6px 0 28px}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-panel>:not(.crumb,h2){order:6}
}

/* ---- 좁은 화면 — 메뉴는 ‘현재 위치’ 버튼으로 연다 ---- */
@media (max-width:980px){
  .rail-toggle{order:1;display:flex;align-items:center;gap:8px;justify-self:center;width:100%;max-width:560px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .rail-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .rail-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .demo-rail,.demo-side .demo-rail{order:1;display:none;grid-template-columns:1fr;width:100%;max-width:560px;justify-self:center;margin:-12px 0 0;padding:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
  .demo-rail.open{display:grid}
  .rail-item{grid-template-columns:34px 1fr;text-align:left;border-left:2px solid transparent;border-bottom:0;margin:0;padding:8px 14px}
  .rail-item[aria-current=page]{border-left-color:var(--accent);border-bottom-color:transparent}
  .rail-item .rail-sub{display:block}
  /* 유스 케이스 — 번호 자리에 점을 찍어 01–05 와 같은 들여쓰기 */
  .rail-n:empty::before{content:"•";font-size:15px;line-height:1}
  /* 점 · 번호는 같은 칸 가운데, 이름과의 간격은 이전의 절반 */
  .rail-item{grid-template-columns:22px 1fr;column-gap:8px}
  .rail-n{text-align:center}
  .opts.two,.samples,.stages{grid-template-columns:1fr}
}
@media (max-width:520px){
  .demo-side>.label{display:none}
  .demo-rail.open{display:grid}
}
@media (orientation:landscape) and (max-height:500px){
  .demo-rail.open{display:grid}
}

/* ---- 유스 케이스 제목 아래 한 줄 — 왜 비디오 플라이인지 ---- */
.demo-panel>.lead{margin:-4px 0 16px;font-size:15.5px;line-height:1.75;color:var(--char)}
@media (min-width:981px){
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-panel>.lead{order:4}
}

/* ---- 폰 화면 light mode ---- */
.statusbar{color:#111;padding:0 22px 0 30px}

.sb-icons{display:flex;align-items:center;gap:5px}
.sb-icons svg{display:block;height:11px;width:auto;fill:currentColor}
.sb-battery{height:12px!important}
.app-tabs{background:#fff;border-top:1px solid #eceef2}
.app-tabs button{color:#9aa1ad}
.app-tabs button[aria-current=page]{color:#111}
.phone[data-orient=landscape] .app-tabs{border-right:1px solid #eceef2}
/* Clips */
.screen-shop{--c-ink:#111;--c-muted:#6b7280;--c-line:#eceef2;--c-chip:#d7dbe3;background:#fff}
.c-appbar{background:#fff}
.c-media{background:#f0f2f5}
.c-name{color:#4b5260}
.c-top{background:#fff;box-shadow:0 3px 12px #0d122026}
/* Feed — 가로 상품 패널 */
.f-panel{background:#fff;color:#111}
.f-p-head{border-bottom-color:#e6e8ee}
.f-p-thumbs button{border-color:#e6e8ee;background:#f3f4f7}
.f-p-thumbs button[aria-checked=true]{border-color:#e0306f}
.f-p-thumbs span{color:#555}
/* 상품 사진 자리 placeholder — 같은 크기의 옅은 칸에 상품 윤곽만(데모용, 실제 상품 사진은 쓰지 않는다) */
.f-p-ph{display:block;width:100%;height:100%;background:#eef0f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7bdc9' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M8.5 4 5 6 3 10l3 1.5V20h12v-8.5L21 10l-2-4-3.5-2c-.6 1.3-1.9 2.1-3.5 2.1S9.1 5.3 8.5 4Z'/%3E%3C/svg%3E") center/58% no-repeat}
/* 둘째 칸 — 여성 치마 윤곽 */
.f-p-ph.skirt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7bdc9' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v2.6H8Z'/%3E%3Cpath d='M8 6.6 4.5 19.5c2.4.7 4.9 1 7.5 1s5.1-.3 7.5-1L16 6.6'/%3E%3Cpath d='M10.5 6.6 9.6 20M13.5 6.6l.9 13.4'/%3E%3C/svg%3E")}
.f-p-thumbs .f-p-ph-tile{flex:none;width:50px;height:50px;padding:0;border:1.5px solid #e6e8ee;border-radius:8px;overflow:hidden}
.f-p-opt button{border-color:#d7dbe3;background:#fff;color:#333}
.f-p-opt button[aria-pressed=true]{border-color:#111;color:#111}
.f-p-price em{color:#e0306f}
.f-p-price s{color:#9aa1ad}
.f-p-foot{border-top-color:#f0f1f4}
.f-p-buy{background:#121826;color:#fff}
.f-p-buy:disabled{background:#a7adb8;color:#fff}
.f-p-wish{border-color:#e2e5eb;background:#fff;color:#e0306f}
.f-p-wish:disabled{color:#c9cdd5}
.f-p-toast{background:#111d;color:#fff}
/* 내 영상에 적용하기 */
.screen-apply{background:#f4f6fb;color:#111}
.a-head{background:#fff;border-bottom-color:#eceef2}
.a-head span{color:#6a7385}
.a-live{color:#6a7385}
.a-live b{color:#111}
.a-live em{color:#c23a3a}
.a-tag{background:#efe9ff;color:#5b3fc4}
.a-card{background:#fff;box-shadow:0 1px 2px #0d12200f}
.a-card>span,.a-card figcaption span,.a-outs figcaption{color:#6a7385}
.a-chips i{background:#eef1f6;color:#333}
.a-img,.a-bar{background:#e6e9f0}
.a-main{color:#8e96a6;border-color:#cfd5df}

/* ---- 기능 상세 — 설계도처럼 주목할 곳을 짚는다 ---- */
/* 폰은 본문과 함께 스크롤한다(따라붙으면 아래 상세 설명을 가린다) — sticky 용 top 도 지운다 */
.device-col{position:relative;top:auto}
.notes{position:absolute;inset:0;z-index:20;pointer-events:none}
.notes[hidden]{display:none}
.notes-svg{position:absolute;left:0;top:0;overflow:visible}
.n-box{fill:none;stroke:#2f63e8;stroke-width:1.6;stroke-dasharray:5 4}
.n-line{fill:none;stroke:#1b2240;stroke-width:1.3}
.n-dot{fill:#fff;stroke:#1b2240;stroke-width:1.6}
.note{position:absolute;display:grid;gap:2px;padding:7px 10px;border:1.3px solid #1b2240;border-radius:6px;background:#fffffff2;box-shadow:3px 3px 0 #1b224022;font-size:11.5px;line-height:1.45;color:#4b5260}
.notes.fresh .note{animation:note-in .35s ease both}
.note b{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4;color:#111;letter-spacing:-.02em}
.note b i{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#1b2240;color:#fff;font-style:normal;font-size:10px}
.note.inside{background:#ffffffeb;backdrop-filter:blur(4px)}
@keyframes note-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .note{animation:none} }

/* 제목은 한 줄, 유스 케이스는 제목 바로 아래 본문 */
@media (min-width:981px){
  .demo-title{white-space:nowrap;font-size:22px;margin-bottom:14px}
  .demo-title br{display:none}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-title{font-size:26px;margin-bottom:8px}
  .demo-stage:is([data-chapter=shop],[data-chapter=feed]) .demo-panel>.lead{margin:0 0 4px}
}

/* ---- 유스 케이스 — 폰 아래는 기존 방식과의 비교표만 ---- */
.cmp{margin:4px 0 0}
.cmp-h{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--graph)}
.cmp table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.5}
.cmp th,.cmp td{padding:11px 14px;border-bottom:1px solid var(--fog);text-align:left;vertical-align:top}
.cmp thead th{font-size:13px;font-weight:700;color:var(--graph);border-bottom:2px solid var(--fog)}
.cmp thead small{display:block;font-size:11.5px;font-weight:500}
.cmp tbody th{width:28%;font-weight:700;color:var(--ink)}
.cmp td{color:var(--graph)}
.cmp td+td,.cmp th.vf{background:var(--vf-blue-bg);color:var(--vf-blue);font-weight:700}
.cmp th.vf{border-radius:12px 12px 0 0;border-bottom-color:#c9d7fb}
.cmp tbody tr:last-child td+td{border-radius:0 0 12px 12px}
.cmp td+td::before{content:"✓";margin-right:7px}
@media (max-width:520px){ .cmp th,.cmp td{padding:9px 8px;font-size:13px} }

/* ---- 유스 케이스 — 폰 아래 세 줄 요약(제목 아래 문장과 같은 결) ---- */
.sum3{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.sum3 li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.7;color:var(--char)}
.sum3 li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--vf-blue)}
/* 피드 위 정보 창(비디오 · 누적 · 현재)은 숨긴다 — 받은 양은 기능 상세가 말해 준다 */
.f-stats{display:none}

/* ---- 유스 케이스 — TL;DR ---- */
.tldr{margin:6px 0 0;padding:4px 0 4px 16px;border-left:3px solid var(--ink)}
.tldr b{display:block;margin-bottom:4px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.tldr ul{margin:0;padding-left:18px;font-size:15px;line-height:1.75;color:var(--char)}
.tldr li::marker{color:var(--accent-2)} /* Changelog 목록과 같은 점 색 */

/* ---- 전면 재생 — 맨 위는 목록과 같은 흰 상태 표시줄(시각 · 신호 · Wi-Fi · 배터리), 영상은 그 아래부터.
        메뉴(〈 전면 재생 · 음소거)는 영상 위 그러데이션에 얹는다 ---- */
.c-detail{background:#fff}
.c-dmedia{top:34px}
.phone[data-orient=landscape] .c-dmedia{top:0}

/* ---- 가로 폰 — 설명은 폰 위 · 아래 두 줄 ---- */
.device-col.notes-stack .phone{margin:112px 0}
/* 세로 폰(좁은 화면) — 설명 칸이 좁아 줄이 늘어나므로 위 · 아래 자리를 조금 더 */
.device-col.notes-stack .phone:not([data-orient=landscape]){margin:132px 0}
.phone-screen:has(.c-detail) .statusbar{z-index:30} /* 전면 재생 위에도 시각 · 아이콘을 보인다 */

/* 주석 들여쓰기 — 제목 둘째 줄과 설명은 번호 뒤 글자에 맞춘다(왼쪽 정렬) */
.note{text-align:left}
.note b{display:grid;grid-template-columns:17px minmax(0,1fr);column-gap:6px;align-items:start}
.note b i{margin-top:1px}
.note>span{padding-left:23px}

/* ---- 숏폼 피드 세로 — 전면 재생과 같은 위쪽: 흰 상태 표시줄, 영상은 그 아래부터 ---- */
.phone[data-chapter=feed] .phone-screen{background:#fff}
.phone[data-orient=portrait] .screen-feed{top:34px}
.phone[data-orient=portrait] .f-top{top:0}
.phone[data-orient=portrait] .f-tabs{top:46px}

/* 숏폼 피드 — 위쪽 탭 메뉴(전체 · 숏폼 · 스타일리뷰 …)는 보이지 않는다. 피드는 ‘전체’ 그대로 */
.f-tabs,.phone[data-orient=landscape] .f-tabs{display:none!important}

/* ---- 내 영상에 적용하기 — 콘솔처럼 간결하게: 제목 · 한 줄 설명 · 설정 카드 · 이전/다음 ---- */
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-title,.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) [data-xray]{display:none}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel{animation:none}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel h2{margin:0 0 4px;font-size:22px;line-height:1.4;letter-spacing:-.03em}
.c-desc{margin:0 0 18px;font-size:14px;color:var(--graph)}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pick{gap:14px;padding:0 16px 16px;border:1px solid #d5dbe5;border-radius:6px;box-shadow:0 1px 1px #0d12200d}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pick-h{margin:0 -16px;padding:10px 16px;border-bottom:1px solid #e3e7ee;border-radius:6px 6px 0 0;background:#f8f9fb;font-size:14px;font-weight:700;color:#16191f}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) :is(.own input,.own button,.sample,.opt,.chip,.result,.readout div,.swap,.guide input){border-radius:4px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .own button{background:var(--accent);color:var(--on-accent)}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .chip.on{border-radius:4px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .lbl{font-size:12.5px;color:#414d5c}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .how{border-radius:6px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .how summary{font-size:13px}
.res caption{caption-side:bottom;padding-top:6px;text-align:left;font-size:12px;color:var(--graph)}
/* 이전 · 다음 — 콘솔 마법사의 아래 단추 */
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager{justify-content:flex-end;gap:8px;margin-top:8px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager>*{flex-direction:row;align-items:center;gap:6px;max-width:none;padding:7px 14px;border-radius:4px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager>* span{font-size:12px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager>* b{font-size:13.5px}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager .next{margin-left:0}

/* 가로 폰 — 유스 케이스처럼 1단: 제목 · 설명 → 폰 → 설정 */
@media (min-width:981px){
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]){grid-template-columns:180px minmax(0,1fr)}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .demo-rail{grid-row:1/span 12}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) :is(.demo-panels,.demo-panel:not([hidden])){display:contents}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) :is(.demo-panel>*,.device-col){grid-column:2;grid-row:auto;width:100%;max-width:680px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .demo-panel>:is(h2,.c-desc){order:4}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .device-col{order:5;position:relative;top:auto;margin:6px 0 24px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .demo-panel>:not(h2,.c-desc){order:6}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .pick,.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .how{margin-bottom:12px}
}
@media (min-width:981px){ .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panels{grid-row:1/4;align-self:start} }
/* 02 대표 이미지 주소 — 시점만 바뀌는 주소를 그대로 보여 준다 */
.cap-url{display:grid;gap:6px}
.cap-url-h{display:flex;align-items:center;font-size:12.5px;font-weight:700;color:#414d5c}
.cap-url code.url{margin:0;border-radius:4px}
/* 이전 · 다음은 선택 영역에서 떼어 폰 아래 끝 높이로 — 이전은 왼쪽, 다음은 오른쪽 (세로 폰 · 넓은 화면) */
@media (min-width:981px){
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):not(:has(.phone[data-orient=landscape])) .demo-panels{align-self:stretch}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):not(:has(.phone[data-orient=landscape])) .demo-panel:not([hidden]){position:relative;box-sizing:border-box;min-height:100%;padding-bottom:64px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):not(:has(.phone[data-orient=landscape])) .pager{position:absolute;left:0;right:0;bottom:0;margin:0;justify-content:space-between}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):not(:has(.phone[data-orient=landscape])) .pager .next{margin-left:auto}
}
.tag[hidden]{display:none}

/* ===== 내 영상에 적용하기 v3 — 단계 표시 · 선택 상자만 ===== */
.step-n{margin-left:4px;font-size:15px;font-weight:600;color:var(--graph)}
.demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pick{padding:16px}
.sel{width:100%;height:40px;padding:0 10px;border:1px solid #c6ccd6;border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer}
.chk input,.radio input{accent-color:var(--accent)}
.seg-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.radio{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
/* 연결 결과 — 아주 짧은 표 */
.kv{width:100%;border-collapse:collapse;font-size:13px;border-radius:4px;overflow:hidden}
.kv th,.kv td{padding:6px 10px;text-align:left;border-bottom:1px solid #ffffff99}
.kv th{width:76px;font-weight:700}
.kv.ok{background:#f3f6fb;color:var(--char)}
.kv.err{background:#fdeeee;color:#a12626}
.kv.err th::before{content:"⚠ ";}
.kv.wait{background:var(--surface);color:var(--graph)}
.kv tr:last-child :is(th,td){border-bottom:0}

/* 슬라이더 — 양 끝 알약(0 · 재생 시간), 손잡이 위 지금 시점 */
.rng{padding:2px 2px 0}
.rng-head{display:flex;justify-content:space-between;margin-bottom:26px}
.rng-pill{padding:1px 7px;border-radius:4px;background:#0a8fff;color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rng-body{position:relative;height:22px}
.rng-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#e8ebf0}
.rng-fill{position:absolute;top:0;bottom:0;border-radius:2px;background:#0a8fff}
.rng-tip{position:absolute;bottom:100%;margin-bottom:6px;transform:translateX(-50%);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.rng input[type=range]{position:absolute;inset:0;width:100%;height:22px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.rng input[type=range]::-webkit-slider-runnable-track{background:none;height:22px}
.rng input[type=range]::-moz-range-track{background:none}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #c9cfd8;box-shadow:0 1px 3px #0d122033;cursor:grab}
.rng input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid #c9cfd8;box-shadow:0 1px 3px #0d122033;cursor:grab}
.rng:not(.dual) input[type=range]{pointer-events:auto}
.rng.off{opacity:.4}
.rng.off input[type=range]::-webkit-slider-thumb{cursor:not-allowed}
/* 손잡이 위치에 맞춘 시점 글자 — 손잡이 폭만큼 안쪽으로 */
.rng-body .rng-tip{left:0}
.rng-body{margin:0 11px}
.rng-body input[type=range]{left:-11px;right:-11px;width:calc(100% + 22px)}

/* 폰 — 대표 이미지 한 장 · 결과 두 개 */
.a-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.a-poster[hidden]{display:none}
.a-outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.a-outs[hidden],.a-outs figure[hidden]{display:none}
.a-outs figure{margin:0;padding:6px;border-radius:10px;background:#fff;box-shadow:0 1px 2px #0d12200f}
.a-outs figcaption{margin-top:4px;font-size:10.5px;text-align:center;color:#6a7385}

/* 05 — 폰 아래 넓은 주소 창(코드 스타일) */
.code-wide{grid-column:2/-1;min-width:0;margin-top:20px;border-radius:8px;overflow:hidden;background:#0f1420;color:#d7dce7;box-shadow:0 10px 30px -18px #0d1220}
.code-wide[hidden]{display:none}
.code-wide-head{padding:10px 16px;border-bottom:1px solid #ffffff14;font-size:12.5px;color:#9aa3b5}
.code-wide-head .c-src{color:#7fb0ff}.code-wide-head .c-rule{color:#c3a6ff}.code-wide-head .c-link{color:#8a92a3}
.code-wide-body{padding:10px 0 14px;overflow-x:auto;font:12.5px/1.75 var(--mono)}
.cl{display:flex;align-items:center;gap:12px;padding:0 16px;white-space:pre}
.cl-n{flex:none;width:16px;color:#5b6475;text-align:right}
.cl-c{color:#6f7a8e}
.cl .copy{margin-left:12px;border-color:#ffffff24;background:transparent;color:#c9d0dc}
.cl code{background:none;padding:0;color:inherit;font:inherit}
.cl code .u-src{color:#7fb0ff;font-weight:700;background:#7fb0ff1a;border-radius:3px}
.cl code .u-rule{color:#c3a6ff;font-weight:700;background:#c3a6ff1a;border-radius:3px}
.cl code .u-link{color:#7c8698}
.code-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
@media (min-width:981px){
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .code-wide{grid-column:2;order:7}
}
@media (max-width:980px){ .code-wide{order:5;width:100%} }
.own[hidden]{display:none}
.demo .code-wide{padding:0}
.cl-k{color:#ff9db0}
.cl{min-height:1.75em}
/* 단계 라벨 — 제목 위 작은 글상자 */
.step-label{display:inline-block;margin:0 0 8px;padding:2px 9px;border:1px solid #c6d4f5;border-radius:4px;background:var(--vf-blue-bg);color:var(--vf-blue);font-size:12px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
@media (min-width:981px){ .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .demo-panel>.step-label{order:4;width:auto;justify-self:start} }
/* 원본 — 라디오 목록 */
.radios{display:grid;gap:6px}
.radio-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #d5dbe5;border-radius:4px;background:#fff;cursor:pointer}
.radio-row:has(input:checked){border-color:var(--accent);background:var(--tint)}
.radio-row input{accent-color:var(--accent)}
.radio-row span{display:flex;align-items:baseline;gap:10px;font-size:14px}
.radio-row small{font-size:12.5px;color:var(--graph)}
/* 내 영상에 적용하기 — 가로 폰은 영상이 화면을 꽉 채운다 */
.phone[data-orient=landscape] .screen-apply .a-head{display:none}
.phone[data-orient=landscape] .screen-apply .a-body{inset:0;display:block;padding:0;overflow:hidden}
.phone[data-orient=landscape] .screen-apply .a-stage,.phone[data-orient=landscape] .screen-apply.src-tall .a-stage{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:0}
.phone[data-orient=landscape] .screen-apply .a-stage vfly-player{--media-object-fit:cover}
.phone[data-orient=landscape] .screen-apply .a-stage vfly-player>video,.phone[data-orient=landscape] .screen-apply .a-poster{object-fit:cover}
.phone[data-orient=landscape] .screen-apply .a-live{position:absolute;left:12px;bottom:10px;z-index:3;padding:2px 8px;border-radius:6px;background:#000000a6;color:#e6e9f0}
.phone[data-orient=landscape] .screen-apply .a-live b{color:#fff}
.phone[data-orient=landscape] .screen-apply .a-live:empty{display:none}
.phone[data-orient=landscape] .screen-apply .a-outs{display:none}
/* 내 영상에 적용하기 세로 — 영상(또는 대표 이미지)만, 검은 바탕 가운데 */
.phone[data-orient=portrait] .screen-apply .a-body{background:#000;justify-content:center;padding:0;gap:6px}
.phone[data-orient=portrait] .screen-apply .a-stage{border-radius:0}
.phone[data-orient=portrait] .screen-apply .a-live{padding:0 12px;color:#a9b1c2;text-align:center}
.phone[data-orient=portrait] .screen-apply .a-live b{color:#fff}

/* ---- 내 영상에 적용하기 — 폰 안 메뉴(탭 · 머리줄)를 숨기고 영상이 화면을 꽉 채운다 ---- */
.phone:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .app-tabs{display:none}
.phone:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .phone-screen{background:#000}
.phone:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .statusbar{color:#fff}
.phone .screen.screen-apply{inset:34px 0 0}
.phone[data-orient=landscape] .screen.screen-apply{inset:0}
.screen-apply{background:#000}
.screen-apply .a-head{display:none}
.phone .screen-apply .a-body{inset:0;display:block;padding:0;overflow:hidden;background:#000}
.phone .screen-apply .a-stage,.phone .screen-apply.src-tall .a-stage{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:0;background:#000}
.phone[data-orient=portrait] .screen-apply .a-stage vfly-player{--media-object-fit:contain}
.phone[data-orient=portrait] .screen-apply .a-stage vfly-player>video,.phone[data-orient=portrait] .screen-apply .a-poster{object-fit:contain}
.phone .screen-apply .a-live{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);padding:2px 10px;border-radius:6px;background:#000000a6;color:#d5dae3;white-space:nowrap}
.phone .screen-apply .a-live b{color:#fff}
.phone .screen-apply .a-live:empty{display:none}
/* 세로 폰 + 세로 영상 — 좌우 여백 없이 세로로 꽉 */
.phone[data-orient=portrait] .screen-apply.src-tall .a-stage vfly-player{--media-object-fit:cover}
.phone[data-orient=portrait] .screen-apply.src-tall .a-stage vfly-player>video,.phone[data-orient=portrait] .screen-apply.src-tall .a-poster{object-fit:cover}
.pager .next[disabled]{background:#c9d0dc;border-color:#c9d0dc;color:#fff;cursor:not-allowed}
/* 가로에서도 정보 한 줄은 아래 가운데 */
.phone[data-orient=landscape] .screen-apply .a-live{left:50%;right:auto;bottom:14px;transform:translateX(-50%);white-space:nowrap}
/* 가로 폰 + 세로 영상 — 위아래가 잘리지 않게 전체를 보인다(좌우는 검은 여백) */
.phone[data-orient=landscape] .screen-apply.src-tall .a-stage vfly-player{--media-object-fit:contain}
.phone[data-orient=landscape] .screen-apply.src-tall .a-stage vfly-player>video,.phone[data-orient=landscape] .screen-apply.src-tall .a-poster{object-fit:contain}
.kv th{width:88px;white-space:nowrap}

/* ---- 내 영상에 적용하기 — 단계 안내: 폰 아래, Changelog 본문과 같은 결 ---- */
.demo .apply-info{grid-column:2/-1;min-width:0;margin-top:28px;padding:28px 0 0;border-top:1px solid var(--line)}
.apply-info[hidden],.apply-info [hidden]{display:none}
.apply-info .update-story{max-width:760px}
.apply-info .update-story h3{margin:0 0 12px;font-size:19px;font-weight:650;line-height:1.5;letter-spacing:-.025em;color:var(--text)}
.apply-info .update-story p{margin:0;font-size:15px;line-height:1.75;color:var(--muted)}
.apply-info .update-story ul{margin:18px 0 0;padding-left:20px;font-size:15px;line-height:1.75;color:var(--muted)}
.apply-info .update-story li{margin:0;padding-left:3px}
.apply-info .update-story li::marker{color:var(--accent-2)}
.apply-info .update-story strong{font-weight:650;color:var(--text)}
.apply-info code{font-size:13px}
.apply-info .tbd{display:inline-block;margin-left:2px;font-size:13px;color:#a5640b}
.apply-info .tbd::before{content:"· "}
.apply-info .info-table{margin:8px 0 0 23px}
.apply-info .info-table table{border-collapse:collapse;font-size:13.5px;color:var(--muted)}
.apply-info .info-table th,.apply-info .info-table td{padding:6px 16px 6px 0;border-bottom:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums}
.apply-info .info-table th{color:var(--text);font-weight:650}
.demo .code-wide + .apply-info{margin-top:24px}
@media (min-width:981px){
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]):has(.phone[data-orient=landscape]) .apply-info{grid-column:2;order:8}
}
@media (max-width:980px){ .demo .apply-info{order:6;width:100%} }
/* 좁은 화면 — 한 줄로 쌓는다(넓은 화면의 2열 자리 grid-column:2/-1 이 둘째 열을 새로 만들지 않게) */
@media (max-width:980px){ .demo .apply-info,.demo .code-wide{grid-column:1/-1} }
/* 좁은 화면 · 내 영상에 적용하기 — 차례대로: 단계 표시 → 제목 → 설명 → 스마트폰 → 선택 → 이전 · 다음 → 상세 설명 */
@media (max-width:980px){
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) :is(.demo-panels,.demo-panel:not([hidden])){display:contents}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel>*{order:7;width:100%;max-width:560px;justify-self:center;min-width:0}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel>.step-label{order:3;width:auto;justify-self:start;margin:4px 0 -10px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel>h2{order:4;margin:0 0 -14px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .demo-panel>.c-desc{order:5;margin:0}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .device-col{order:6}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .apply-info{order:8;max-width:560px;justify-self:center}
  /* 이전 · 다음 — 반반 나눠, 작은 글자(이전 · 다음) 아래에 단계 이름 */
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager{justify-content:space-between}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager>*{flex:0 1 calc(50% - 4px);flex-direction:column;align-items:flex-start;gap:1px}
  .demo-stage:is([data-chapter=s1],[data-chapter=s2],[data-chapter=s3],[data-chapter=s4],[data-chapter=s5]) .pager .next{margin-left:auto;align-items:flex-end}
}
@media (max-width:520px){ .apply-info .update-story h3{font-size:18px} .apply-info .update-story p,.apply-info .update-story ul{font-size:14px} }
.notes.fresh .notes-svg{animation:note-in .35s ease both} /* 지시선도 설명과 함께 서서히 */
/* 영상 탐색 — 스크롤 중엔 주석을 흐리게 숨겼다가 멈추면 새 자리에서 다시 */
.notes{transition:opacity .25s ease}
.notes.moving{opacity:0}

/* 가로 폰 — 주석 자리(위 · 아래)를 회전과 동시에 미리 확보해, 주석이 늦게 붙어도 화면이 밀리지 않게 */
.demo-stage:is([data-chapter=shop],[data-chapter=feed]) .device-col:has(.phone[data-orient=landscape]):has([data-xray][aria-pressed=true]) .phone{margin:112px 0}

/* 단계 안내: 짧은 소제목과 여유 있는 문단, 밝은 연결 예제 */
.demo-panel > .c-desc{display:block;overflow:visible;-webkit-line-clamp:unset;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
.demo-panel > h2{line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.apply-info .update-story{max-width:850px}
.apply-info .update-story h3{font-size:22px;line-height:1.55;word-break:keep-all}
.apply-info .update-story .info-intro{line-height:1.75;word-break:keep-all;overflow-wrap:break-word}
.apply-info .update-story .info-points{display:block;margin:18px 0 0;padding-left:20px;list-style:disc;font-size:15px;line-height:1.75;color:var(--muted)}
.apply-info .info-points li{margin:0;padding-left:3px}
.apply-info .info-points li::marker{color:var(--accent-2)}
.apply-info .info-points strong{display:inline;font-size:15px;font-weight:650;color:var(--text)}
.apply-info .info-points strong::after{content:".";margin-right:.3em}
.apply-info .info-points p{display:inline;font-size:15px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word}
.apply-code-group{margin-top:24px;border:1px solid #d8dfe8;border-radius:10px;overflow:hidden;background:#fff;color:#333}
.editor-title{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f3f5f8;border-bottom:1px solid #d8dfe8;font-size:13px;font-weight:600;color:#384354}
.editor-dot{width:8px;height:8px;border-radius:50%;background:#327dc5}
.editor-language{margin-left:auto;font-size:11px;font-weight:400;color:#667382}
.apply-code-group .code-wide{margin:0;border-radius:0;background:#fff;color:#333;box-shadow:none}
.apply-code-group .code-wide-head{border-bottom:1px solid #edf0f4;color:#606e7e;line-height:1.7}
.apply-code-group .code-wide-body{overflow-x:hidden;padding:14px 0;font-size:12.5px;line-height:1.85}
.apply-code-group .cl{white-space:pre-wrap;overflow-wrap:anywhere}
.apply-code-group .cl code{min-width:0;font-size:inherit}
.apply-code-group .cl code .u-src{color:#1264b5;background:#1264b50d}
.apply-code-group .cl code .u-rule{color:#8052b5;background:#8052b50d}
.apply-code-group .cl code .u-link{color:#6c7786}
.apply-code-group .cl .copy{flex:none;border-color:#d8dfe8;background:#f7f9fc;color:#44536a}
.apply-code-group .cl .copy:hover{background:#eaf0f8}
.apply-code-group .cl-n{color:#919aa7}
.apply-code-group .cl-c{color:#58744a}
.apply-code-group .cl-k{color:#0000ff}
.apply-code-group .u-src,.apply-code-group .c-src{color:#1264b5}
.apply-code-group .u-rule,.apply-code-group .c-rule{color:#8052b5}
.apply-code-group .u-link,.apply-code-group .c-link{color:#6c7786}
.demo-stage .apply-code-group .pick{margin:0;padding:14px 16px 16px;border:0;border-top:1px solid #edf0f4;border-radius:0;background:#fff;box-shadow:none}
.apply-code-group .code-head{color:#384354}
.apply-code-group pre.code{padding:12px 0 0;border-radius:0;background:#fff;color:#333;font-size:12.5px;line-height:1.8}
.apply-code-group pre.code .k{color:#e50000}
.apply-code-group pre.code .v{color:#a31515}
.apply-code-group pre.code .tok-tag{color:#800000}
.apply-code-group pre.code .tok-punct{color:#666}
.apply-info .apply-code-group .code-guidance{padding:12px 16px;border-top:1px solid #edf0f4;background:#fafbfd;font-size:12px;line-height:1.8;color:#606e7e}
@media(max-width:520px){
  .apply-info .update-story h3{font-size:19px}
  .apply-info .info-points p{font-size:14px}
  .editor-title{padding:11px 12px}
  .editor-language{font-size:10px}
}
/* 5/5 플레이어 태그 — 아래 서비스 연결 예제와 같은 밝은 코드 모양 */
/* 5/5 플레이어 태그 — 아래 ‘서비스 연결 예제’와 같은 VS Code 모양(제목줄 · 흰 바탕 · 토큰 색) */
.demo-panel .player-tag-group{margin:0 0 12px}
.player-tag-group .editor-language{margin-left:auto}
.player-tag-group .editor-title .copy{margin-left:10px;border-color:#d8dfe8;background:#f7f9fc;color:#44536a}
.player-tag-group .editor-title .copy:hover{background:#eaf0f8}
.demo-stage .player-tag-group pre.code{margin:0;padding:14px 0;border:0;border-radius:0;white-space:pre-wrap;overflow-wrap:anywhere}
.player-tag-group pre.code .cl{align-items:flex-start;padding:0 16px 0 12px}
.player-tag-group pre.code .cl-n{width:18px}
.player-tag-group pre.code .cl code{flex:1;word-break:break-all}

/* 내 영상에 적용하기 — 아래 상세 설명 목록을 유스 케이스 ‘기술 상세’와 같은 모양으로(왼쪽 막대 · 글자색 · 점 색 · 간격) */
.apply-info .update-story .info-points{margin:18px 0 0;padding:4px 0 4px 34px;border-left:3px solid var(--ink);font-size:15px;line-height:1.75;color:var(--char)}
.apply-info .info-points li{margin:0;padding-left:0}
.apply-info .info-points li::marker{color:var(--accent-2)}
.apply-info .info-points strong{font-size:15px;font-weight:650;color:var(--ink)}
.apply-info .info-points p{color:var(--char);font-size:15px;line-height:1.75}
@media (max-width:520px){ .apply-info .info-points,.apply-info .info-points p,.apply-info .info-points strong{font-size:14px} }

/* 내 영상에 적용하기 아래 상세 설명 — 본문 맨 위(제목 22px/1.4 · 설명 15px/1.8)보다 한 단계 낮게, 같은 줄 간격 비율 */
.apply-info .update-story h3{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.03em}
.apply-info .update-story .info-intro{font-size:14px;line-height:1.8}
.apply-info .update-story .info-points{font-size:14px;line-height:1.8}
.apply-info .info-points strong,.apply-info .info-points p{font-size:14px;line-height:1.8}
@media (max-width:520px){ .apply-info .update-story h3{font-size:17px} .apply-info .update-story .info-intro,.apply-info .update-story .info-points,.apply-info .info-points strong,.apply-info .info-points p{font-size:13.5px} }