/* 2 · 만드는 과정 — 모든 조각은 자기 구간의 진행값 --t(0→1)·사라짐 --o(0→1)만 보고 그려진다(v2-build.js) */
.bd{position:relative;height:480vh;background:radial-gradient(#1212140f 1px,transparent 1.2px) 0 0/16px 16px}
.bd__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  --fw:min(922px,64vw,calc((100svh - 300px) * 1.6)); --gl:#12121433; --gr:#ff3e3e8c; --wire:#12121466}
.bd [data-tl]{--t:0;--o:0}
.bd__cap{position:absolute;left:72px;top:calc(var(--nav) + 20px);line-height:var(--lh-b);color:var(--ink)}
.bd__cap span{display:block;color:var(--steel)}
.bd__pct{position:absolute;right:72px;top:calc(var(--nav) + 18px);text-align:right;color:#12121426}
.bd__pct .mono{display:block;color:var(--steel);margin-bottom:4px}
.bd__pct b{font:600 clamp(48px,5vw,70px)/1 var(--en);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bd__pct i{font:600 22px var(--en);font-style:normal}

/* 안내선 — 가장자리에서 자라 들어온다 */
.bd__guides{position:absolute;inset:0;opacity:var(--gfade,1)}
.gh,.gv{position:absolute;background:var(--gl)}
.gh{left:0;right:0;height:1px;transform:scaleX(var(--t));transform-origin:0 50%}
.gh.rev{transform-origin:100% 50%}
.gv{top:0;bottom:0;width:1px;transform:scaleY(var(--t));transform-origin:50% 0}
.gh.r,.gv.r{background:var(--gr)}
.g-top{top:var(--ft)} .g-bot{top:var(--fb);left:28%}
.g-head{top:var(--hy);right:38%} .g-mid{top:var(--my0);left:46%} .g-btn{top:var(--by);right:52%}
.g-left{left:var(--fl)} .g-right{left:var(--fr);bottom:22%} .g-ctr{left:var(--bx);top:18%}
.xy{position:absolute;font-size:10px;color:var(--pt);opacity:var(--t);white-space:nowrap}
.xy--tl{left:calc(var(--fl) + 8px);top:calc(var(--ft) - 18px)}
.xy--tr{left:calc(var(--fr) - 8px);top:calc(var(--ft) - 18px);translate:-100% 0}
.xy--bl{left:calc(var(--fl) + 8px);top:calc(var(--fb) + 8px)}
.xy--br{left:calc(var(--fr) - 8px);top:calc(var(--fb) + 8px);translate:-100% 0}

/* 브라우저 창 */
.bf{position:absolute;left:50%;top:47%;width:var(--fw);aspect-ratio:922/576;container-type:inline-size;border-radius:12px;
  translate:calc(-50% + var(--mx,0px) * var(--mv,0)) calc(-50% + var(--my,0px) * var(--mv,0));
  scale:calc(1 + (var(--ms,1) - 1) * var(--mv,0));transform-origin:var(--ox,50%) var(--oy,50%);
  background:color-mix(in srgb,var(--paper) calc(var(--live,0) * 100%),transparent);
  box-shadow:0 40px 80px rgb(18 18 20 / calc(.13 * var(--live,0) * (1 - var(--end,0))));opacity:calc(1 - var(--gone,0))}
.bf__ol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:calc(1 - var(--end,0))}
.bf__ol rect{width:calc(100% - 1px);height:calc(100% - 1px);fill:none;stroke:var(--wire);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.bf__bar{position:relative;display:flex;align-items:center;gap:.8cqw;height:4cqw;padding-inline:1.8cqw;border-bottom:1px solid var(--gl);opacity:calc(var(--t) * (1 - var(--end,0)))}
.bf__bar>i{width:.9cqw;height:.9cqw;border-radius:50%;background:#12121433}
.bf__url{position:absolute;left:50%;translate:-50% calc((1 - var(--t)) * 6px);padding:.3cqw 1.4cqw;border:1px solid var(--gl);border-radius:var(--pill);font:1.15cqw var(--mono);color:var(--ink2);opacity:var(--t)}
.bf__url::before{content:"";display:inline-block;width:.6cqw;height:.6cqw;border-radius:50%;background:var(--pt);margin-right:.6cqw;vertical-align:middle}
.bf__chips{margin-left:auto;display:flex;gap:.5cqw}
.bf__chips em{font:normal 1.1cqw var(--mono);padding:.3cqw 1.2cqw;border-radius:var(--pill);background:var(--ink);color:var(--paper);opacity:var(--t);translate:0 calc((1 - var(--t)) * -6px)}
.bf__dim{position:absolute;left:0;right:0;top:-3.4cqw;text-align:center;color:var(--pt);font-size:1.15cqw;border-bottom:1px solid var(--gr);padding-bottom:.4cqw;opacity:calc(var(--t) * (1 - var(--o)))}
.bf__cols{position:absolute;inset:4cqw 4.8cqw 0;display:grid;grid-template-columns:repeat(12,1fr);gap:2.6cqw;opacity:calc(1 - var(--o))}
.bf__cols i{background:#ff3e3e14;transform:scaleY(var(--t,0));transform-origin:50% 0}

/* 창 안 — 선으로 그은 칸(.wf) → 회색 막대(.bar) → 실제 글 */
.bf__body{position:absolute;inset:4cqw 0 0;display:grid;grid-template-columns:52% 38%;justify-content:space-between;padding:4cqw 4.8cqw}
.bf__l{display:flex;flex-direction:column}
.wf{position:absolute;inset:0;border:1px solid var(--wire);border-radius:.3cqw;clip-path:inset(-1px calc((1 - var(--t)) * 100%) -1px -1px);opacity:calc(1 - var(--o))}
.wf--pill{border-radius:var(--pill)}
.bar{position:absolute;left:1cqw;height:3.2cqw;background:#12121424;transform:scaleX(var(--t));transform-origin:0 50%;opacity:calc(1 - var(--o))}
.bar.b1{top:1.6cqw;width:52%}.bar.b2{top:8.4cqw;width:68%}
.bar.b3{top:1cqw;width:92%;height:.8cqw}.bar.b3b{top:3cqw}.bar.b4{top:5cqw;width:60%;height:.8cqw}
.bf__logo{position:relative;width:10cqw;height:2.8cqw;opacity:calc(1 - var(--end,0))}
.bf__logo .wm{position:absolute;left:0;top:.2cqw;font-size:2.4cqw;opacity:var(--t)}
.bf__logo .wm b{color:color-mix(in srgb,var(--pt) calc(var(--pt5,0) * 100%),var(--ink))}
.bf__font{font-size:1.05cqw;color:var(--pt);margin-top:3cqw;height:1.4cqw;opacity:calc(var(--t) * (1 - var(--o)) * (1 - var(--end,0)))}
.bf__h{position:relative;margin-top:.8cqw;height:15cqw;opacity:calc(1 - var(--end,0))}
.bf__h strong{position:absolute;left:1cqw;top:.6cqw;font-size:6.2cqw;line-height:1.2;letter-spacing:-.05em;font-weight:700;white-space:nowrap;
  opacity:var(--t);filter:blur(calc((1 - var(--t)) * 1.4cqw));translate:0 calc((1 - var(--t)) * 1cqw)}
.bf__h strong b{color:color-mix(in srgb,var(--pt) calc(var(--pt5,0) * 100%),var(--ink))}
.bf__p{position:relative;margin-top:2.6cqw;width:78%;min-height:7cqw;opacity:calc(1 - var(--end,0))}
.bf__p em{display:block;padding:.8cqw;font-style:normal;font-size:1.45cqw;line-height:var(--lh-b);color:var(--ink2);opacity:var(--t)}
.bf__btns{position:relative;display:flex;gap:1.3cqw;margin-top:2.6cqw}
.bf__b1,.bf__b2{position:relative;display:flex;align-items:center;height:5.6cqw;border-radius:var(--pill);font-size:1.6cqw;font-weight:600}
.bf__b1{--end:0;width:20cqw;justify-content:space-between;padding:0 .7cqw 0 2.2cqw;
  background:color-mix(in srgb,var(--ink) calc(var(--ink5,0) * 100%),transparent);color:color-mix(in srgb,var(--paper) calc(var(--ink5,0) * 100%),var(--ink))}
.bf__b2{width:19cqw;padding-left:2.2cqw;opacity:calc(1 - var(--end,0))}
.bf__b1 em,.bf__b2 em{position:relative;font-style:normal;opacity:var(--t)}
.bf__dot{position:relative;width:4.2cqw;height:4.2cqw;display:grid;place-items:center}
.bf__dot::before{content:"";width:calc(1.2cqw + 3cqw * var(--pt5,0));aspect-ratio:1;border-radius:50%;background:var(--pt)}
.bf__ring{position:absolute;left:50%;top:50%;width:13cqw;height:13cqw;translate:-50% -50%;overflow:visible;opacity:calc(1 - var(--o))}
.bf__ring circle{fill:none;stroke:var(--gr);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.bf__rad{position:absolute;left:calc(50% + 6.8cqw);top:50%;translate:0 -50%;font-size:1cqw;color:var(--pt);opacity:calc(var(--t) * (1 - var(--o)))}
.bf__52{position:absolute;left:-4.2cqw;top:0;height:100%;display:flex;align-items:center;font-size:1.05cqw;color:var(--pt);border-right:1px solid var(--pt);padding-right:.5cqw;opacity:calc(var(--t) * (1 - var(--o)))}
.bf__r{display:flex;flex-direction:column}
.bf__nav{display:flex;gap:1cqw;opacity:calc(1 - var(--end,0))}
.bf__nav span{position:relative;padding:.5cqw 1.6cqw;font-size:1.3cqw}
.bf__nav em{font-style:normal;opacity:var(--t)}
.bf__img{position:relative;flex:1;min-height:0;margin-top:1.4cqw;overflow:hidden;border-radius:calc(.8cqw * var(--live,0));opacity:calc(1 - var(--end,0))}
.bf__img .wf{border-radius:0}
.bf__x{position:absolute;inset:0;width:100%;height:100%;opacity:calc(1 - var(--o))}
.bf__x path{fill:none;stroke:var(--wire);stroke-width:.3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.bf__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;clip-path:inset(calc((1 - var(--t)) * 100%) 0 0 0);translate:0 calc((1 - var(--t)) * 10%)}

/* 색 견본 · 코드 판 · 이어 주는 선 */
.bf__sw{position:absolute;right:calc(100% + 2.6cqw);top:22cqw;display:flex;flex-direction:column;gap:5cqw;font-size:1.05cqw;line-height:1.4;color:var(--steel);text-align:right;opacity:calc(1 - var(--o))}
.bf__sw li{display:flex;flex-direction:row-reverse;align-items:center;gap:1cqw;opacity:var(--t);translate:calc((1 - var(--t)) * 1.5cqw) 0}
.bf__sw i{width:2.4cqw;height:2.4cqw;border-radius:50%;border:1px solid var(--gl)}
.bf__sw .k{background:var(--ink)}.bf__sw .p{background:var(--paper)}.bf__sw .o{background:var(--pt)}
.bf__wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:calc(1 - var(--o))}
.bf__wire path{fill:none;stroke:var(--pt);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.bf__code{position:absolute;right:-3cqw;top:13cqw;width:50cqw;min-height:21cqw;padding:1.6cqw 2.2cqw;background:var(--ink);color:#e9e9e6;border-radius:.8cqw;font-size:1.3cqw;line-height:1.75;
  box-shadow:0 30px 60px #12121433;opacity:calc(var(--t) * (1 - var(--o)));translate:0 calc((1 - var(--t)) * 2cqw)}
.bf__code .c{color:var(--pt);font-size:1cqw}
.bf__code pre{margin-top:.6cqw;font:inherit;white-space:pre}
.bf__code pre b{color:#f4f4f24d;font-weight:400;margin-right:1.2cqw}
.bf__code pre .k{color:#ff9a6e}.bf__code pre .s{color:#c9d58a}

/* 마지막 — 창이 걷히고 버튼 하나. 버튼에서 12px 띄운 선택 상자, 그 테두리에서 선 네 줄이 뻗는다 */
.bd__last{position:absolute;left:50%;top:43%;translate:-50% -50%;padding:var(--sel-gap);opacity:var(--last,0);pointer-events:none;--sel-gap:12px}
.bd.is-end .bd__last{pointer-events:auto}
.bd__cta{zoom:1.3;box-shadow:0 18px 40px -18px rgb(255 62 62 / .7)}   /* 그림자는 만든 단추에만(metic .b-cta.is-live) */
.bl{position:absolute;background:var(--gl)}
.bl-h1,.bl-h2{left:-60vw;right:-60vw;height:1px;transform:scaleX(var(--t))}
.bl-h1{top:0}.bl-h2{bottom:0}
.bl-v1,.bl-v2{top:-60vh;bottom:-60vh;width:1px;transform:scaleY(var(--t))}
.bl-v1{left:0}.bl-v2{right:0}
.bd__sel{position:absolute;inset:0;border:1px solid #12121473;opacity:var(--t);pointer-events:none}
.bd__sel i{position:absolute;width:7px;height:7px;background:var(--paper);border:1px solid #ff3e3e;scale:var(--t)}
.bd__sel i:nth-child(1){left:-4px;top:-4px}.bd__sel i:nth-child(2){right:-4px;top:-4px}
.bd__sel i:nth-child(3){left:-4px;bottom:-4px}.bd__sel i:nth-child(4){right:-4px;bottom:-4px}
.bd__dimb{position:absolute;left:0;top:calc(100% + 7px);font-size:10px;color:var(--pt);white-space:nowrap;opacity:var(--t)}
.bd__note{position:absolute;left:calc(100% + 44px);top:-58px;font:clamp(30px,2.6vw,38px)/1 var(--hand);color:var(--pt);rotate:-5deg;white-space:nowrap;clip-path:inset(-20px calc((1 - var(--t)) * 100%) -30px -10px)}
.bd__arrow{position:absolute;left:calc(100% + 6px);top:-10px;width:44px;height:56px;overflow:visible}
.bd__arrow path{fill:none;stroke:var(--pt);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
/* 올리면 — 검사 상자(빨간 테·모서리 점·실제 크기 이름표) */
.bd__last .insp{inset:var(--sel-gap)}
.bd__last:has(.bd__cta:hover) .insp{opacity:1;scale:1}

/* 단계 글 */
.bd__txt{position:absolute;left:72px;bottom:clamp(36px,6vh,64px);width:min(520px,60vw)}
.bd__n{display:flex;align-items:center;gap:10px;color:var(--steel);margin-bottom:12px;opacity:var(--txt,0)}
.bd__n b{color:var(--pt);font-weight:400}
.bd__n i{width:24px;height:1px;background:var(--line2)}
.bd__steps{display:grid}
.bd__steps>div{grid-area:1/1;opacity:0;translate:0 12px;filter:blur(4px);transition:opacity .5s var(--ease),translate .7s var(--ease),filter .6s var(--ease)}
.bd__steps>div.is-on{opacity:1;translate:0 0;filter:none}
.bd__steps h3{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.045em;line-height:var(--lh-h)}
.bd__steps p{margin-top:10px;font-size:16px;color:var(--ink2);line-height:var(--lh-b)}
.bd__skip{position:absolute;right:72px;bottom:clamp(36px,6vh,64px);color:var(--ink);opacity:var(--txt,0)}

@media (max-width:900px){
  .bd{height:620vh}
  .bd__stick{--fw:calc(100vw - 56px)}
  .bd__cap{left:28px}.bd__pct{right:22px}.bd__pct b{font-size:40px}
  .bf{top:42%}
  .xy{display:none}
  .bf__sw{right:auto;left:0;top:calc(100% + 3cqw);flex-direction:row;gap:5cqw;font-size:2.4cqw;text-align:left}
  .bf__sw li{flex-direction:row}
  .bf__code{right:0;width:70cqw;font-size:2.2cqw}
  .bd__txt{left:28px;right:22px;width:auto;bottom:30px}
  .bd__steps h3{font-size:24px}.bd__steps p{font-size:15px}
  .bd__skip{display:none}
  .bd__last{top:40%}
  .bd__cta{zoom:1.1}
  .bd__note{left:auto;right:0;top:-62px;font-size:28px}
  .bd__arrow{display:none}
}