#pbDiagram{--bg:#F7F6F2;--bg-alt:#EDEBE4;--ink:#26201A;--mute:#5F564E;--lime:#A9C824;--lime-ink:#242B06;--line:rgba(38,32,26,.14);--line-soft:rgba(38,32,26,.08);
  --body:"Source Sans 3","Noto Sans KR",sans-serif;--head:"Noto Sans KR",sans-serif;--ease:cubic-bezier(.2,.7,.2,1);display:block;margin:0 0 96px}
#pbDiagram h2,#pbDiagram h3{font-family:var(--head);font-weight:500;letter-spacing:-.015em}


#pbDiagram .story{position:relative;height:calc(100svh + 8 * max(160px, 30svh))}

#pbDiagram .stage{position:sticky;top:0;height:100svh;min-height:560px;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);grid-template-rows:minmax(0,1fr);gap:0 clamp(32px,6.4vw,92px);padding:calc(var(--hd) + var(--tabbar) + 16px) var(--gx) 22px;overflow:hidden}
#pbDiagram .scene{position:relative;min-width:0;min-height:0}
#pbDiagram .scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#pbDiagram .viewswitch{position:absolute;right:0;top:0;display:flex;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(247,246,242,.9);font-family:var(--head);font-size:12px;z-index:2}
#pbDiagram .viewswitch button{padding:7px 14px;min-width:52px;color:var(--mute);transition:background .25s var(--ease),color .25s var(--ease)}
#pbDiagram .viewswitch button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
#pbDiagram .viewswitch button:hover:not([aria-pressed="true"]){background:var(--bg-alt)}

#pbDiagram .legend{position:absolute;right:0;bottom:0;display:grid;gap:2px;font-family:var(--head);font-size:13px;line-height:1.35;z-index:2;background:rgba(247,246,242,.82);padding:6px 0 4px 6px;border-radius:4px;list-style:none;margin:0}
#pbDiagram .legend li{list-style:none}
#pbDiagram .legend button{display:flex;align-items:center;gap:9px;color:var(--mute);padding:3px 10px 3px 6px;border-radius:3px;transition:color .3s var(--ease),background .25s var(--ease);text-align:left;line-height:1.35}
#pbDiagram .legend button:hover{background:rgba(38,32,26,.06);color:var(--ink)}
#pbDiagram .legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#pbDiagram .legend i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 0 rgba(38,32,26,0);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
#pbDiagram .legend li.on button{color:var(--ink);font-weight:500}
#pbDiagram .legend li.on i{transform:scale(1.15);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px currentColor}
#pbDiagram .legend button[aria-pressed="true"],#pbDiagram .legend li.on button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:500}
#pbDiagram .legend button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--bg)}
#pbDiagram .legend li[data-part="plate"] i{background:#2e5bb8}#pbDiagram .legend li[data-part="clamp"] i{background:#d9b91a}#pbDiagram .legend li[data-part="press"] i{background:#47a23f}#pbDiagram .legend li[data-part="blade"] i{background:#cf2f34}
#pbDiagram .notice{position:absolute;left:0;bottom:0;max-width:48%;font-size:12px;line-height:1.5;color:var(--mute);z-index:2}


#pbDiagram .steps{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:8px 0}
#pbDiagram .steps-body[hidden],#pbDiagram .partcard[hidden]{display:none}
#pbDiagram .steps h2{font-size:clamp(22px,2.1vw,28px);line-height:1.3;margin-bottom:6px}
#pbDiagram .steps .lead{color:var(--mute);font-size:14px;margin-bottom:14px}
#pbDiagram .steps ol{list-style:none;display:grid;gap:2px;align-content:start}
#pbDiagram .step{display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:7px 0;border-top:1px solid var(--line-soft);cursor:pointer;transition:opacity .35s var(--ease)}
#pbDiagram .step:last-child{border-bottom:1px solid var(--line-soft)}
#pbDiagram .step .n{font-family:var(--body);font-size:13px;font-weight:500;color:#787065;padding-top:4px;transition:color .3s var(--ease)}
#pbDiagram .step h3{font-size:16px;line-height:1.4;font-weight:500;color:#6f675d;transition:color .3s var(--ease)}
#pbDiagram .step h3 small{display:block;font-size:12px;font-weight:400;color:#787065;margin-top:1px}
#pbDiagram .step p{grid-column:2;font-size:14px;line-height:1.65;color:var(--mute);max-height:0;overflow:hidden;opacity:0;text-wrap:pretty;transition:max-height .45s var(--ease),opacity .18s var(--ease),margin .4s var(--ease)}
#pbDiagram .step.on .n{color:var(--ink)}
#pbDiagram .step.on h3{color:var(--ink)}
#pbDiagram .step.on p{max-height:var(--h,180px);opacity:1;margin-top:6px;transition:max-height .45s var(--ease),opacity .35s var(--ease) .12s,margin .4s var(--ease)}
#pbDiagram .step .bar{grid-column:1/-1;height:2px;background:var(--line-soft);margin-top:7px;position:relative;overflow:hidden;opacity:0;transition:opacity .3s}
#pbDiagram .step.on .bar{opacity:1}
#pbDiagram .step .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lime)}

#pbDiagram .transport{display:flex;align-items:center;gap:8px;margin-top:16px}

#pbDiagram .tp{width:36px;height:36px;flex:0 0 auto;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease)}
#pbDiagram .tp:hover{background:var(--bg-alt);border-color:var(--ink)}
#pbDiagram .tp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#pbDiagram .tp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pbDiagram .tp-play{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#pbDiagram .tp-play:hover{background:#3a332b}
#pbDiagram .tp-play svg path{fill:currentColor}
#pbDiagram .tp-play[data-state="playing"] .ic-play{display:none}
#pbDiagram .tp-play[data-state="paused"] .ic-pause{display:none}
#pbDiagram .tp-hint{font-size:12px;color:var(--mute);margin-left:6px;line-height:1.45;flex:1 1 auto;min-width:0}

#pbDiagram .partcard{display:flex;flex-direction:column;gap:0}
#pbDiagram .partcard-top{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:14px;color:var(--mute);font-size:13px}
#pbDiagram .part-dot{width:12px;height:12px;border-radius:50%;flex:none}
#pbDiagram .partcard-close{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;padding:6px 0}
#pbDiagram .partcard-close:hover{color:var(--ink)}
#pbDiagram .partcard-close span{font-size:20px;line-height:1}
#pbDiagram .partcard h3{font-size:clamp(22px,2vw,26px);line-height:1.4;margin-bottom:14px}
#pbDiagram .partcard .part-copy{font-size:15.5px;line-height:1.75;color:var(--ink);text-wrap:pretty}
#pbDiagram .partcard .part-copy p+p{margin-top:12px;color:var(--mute)}
#pbDiagram .partcard-note{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--mute);line-height:1.5}

#pbDiagram .part-thick .pt-title{font-family:var(--head);font-size:13px;font-weight:500;color:var(--mute);letter-spacing:.01em;margin-bottom:6px}
#pbDiagram .pt-list{margin:0}
#pbDiagram .pt-list > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line-soft)}
#pbDiagram .pt-list > div:last-child{border-bottom:1px solid var(--line-soft)}
#pbDiagram .pt-list dt{font-family:var(--head);font-size:16px;font-weight:500;color:var(--ink);line-height:1.35;min-width:0}
#pbDiagram .pt-list dt small{display:block;font-family:var(--body);font-size:12px;font-weight:400;color:var(--mute);margin-top:1px}
#pbDiagram .pt-list dd{margin:0;flex:0 0 auto;font-family:var(--head);font-weight:500;font-size:clamp(24px,2.1vw,30px);line-height:1.1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;color:var(--ink)}
#pbDiagram .pt-list dd span{font-family:var(--body);font-size:13px;font-weight:400;color:var(--mute);letter-spacing:0}
#pbDiagram .pt-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--mute)}
#pbDiagram .pt-models{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#pbDiagram .pt-models button{font-family:var(--head);font-size:13px;font-weight:500;line-height:1.2;padding:7px 10px;border:1px solid var(--line);border-radius:4px;color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
#pbDiagram .pt-models button:hover{border-color:var(--ink)}
#pbDiagram .pt-models button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#pbDiagram .pt-models button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(min-width:821px) and (max-height:780px){#pbDiagram .pt-list > div{padding:8px 0}#pbDiagram .pt-list dd{font-size:24px}#pbDiagram .pt-note{margin-top:8px}}

@media(max-width:820px){#pbDiagram .pt-list > div{padding:8px 0}#pbDiagram .pt-list dt{font-size:14px}#pbDiagram .pt-list dt small{font-size:12px}#pbDiagram .pt-list dd{font-size:22px}#pbDiagram .pt-list dd span{font-size:12px}#pbDiagram .pt-note{font-size:12px;margin-top:8px}#pbDiagram .part-thick .pt-title{font-size:12px}}

@media(max-width:1100px){#pbDiagram .stage{grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr)}#pbDiagram .steps h2{font-size:22px}#pbDiagram .step h3{font-size:15px}#pbDiagram .step p{font-size:13.5px}}


@media(min-width:821px) and (max-height:900px){#pbDiagram .step:not(.on) h3 small{display:none}#pbDiagram .step{padding:6px 0}#pbDiagram .steps .lead{margin-bottom:10px}#pbDiagram .transport{margin-top:12px}}
@media(min-width:821px) and (max-height:780px){#pbDiagram .stage{min-height:0}#pbDiagram .steps .lead{display:none}#pbDiagram .steps h2{font-size:21px;margin-bottom:8px}#pbDiagram .step{padding:5px 0}#pbDiagram .step h3{font-size:15px}#pbDiagram .step p{font-size:13.5px;line-height:1.55}#pbDiagram .tp{width:32px;height:32px}#pbDiagram .transport{margin-top:10px}}
@media(min-width:821px) and (max-height:680px){#pbDiagram .step{padding:4px 0}#pbDiagram .step h3{font-size:14px}#pbDiagram .step .n{font-size:12px}#pbDiagram .step p{font-size:13px;line-height:1.5}#pbDiagram .tp-hint{display:none}}

@media(max-width:820px){
  #pbDiagram{margin-bottom:64px}
  #pbDiagram .stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px 0;padding:calc(var(--hd) + var(--tabbar) + 8px) 16px 12px;min-height:0}
  #pbDiagram .scene{min-height:230px}
  #pbDiagram .legend{font-size:11px;gap:0;padding:4px 0 2px 4px}#pbDiagram .legend button{padding:2px 8px 2px 4px;gap:7px}#pbDiagram .legend i{width:8px;height:8px}
  #pbDiagram .notice{top:0;bottom:auto;max-width:56%;font-size:10px;line-height:1.45}   
  #pbDiagram .step p,#pbDiagram .partcard .part-copy p{text-wrap:pretty}
  #pbDiagram .viewswitch button{padding:6px 11px;min-width:46px;font-size:11px}
  #pbDiagram .steps{justify-content:flex-start;padding:0}
  #pbDiagram .steps h2{font-size:18px;margin-bottom:2px}
  #pbDiagram .steps .lead{font-size:12px;margin-bottom:6px}
  #pbDiagram .steps ol{gap:0}
  #pbDiagram .step{padding:5px 0;grid-template-columns:28px 1fr}
  #pbDiagram .step:not(.on) h3 small{display:none}
  #pbDiagram .step h3{font-size:13px}
  #pbDiagram .step .n{font-size:12px;padding-top:0}
  #pbDiagram .step h3 small{font-size:11px}
  #pbDiagram .step p{font-size:12px;line-height:1.55}
  #pbDiagram .step.on p{max-height:var(--h,100px);margin-top:4px}
  #pbDiagram .step .bar{margin-top:5px}
  #pbDiagram .transport{margin-top:10px;gap:6px}
  #pbDiagram .tp{width:32px;height:32px}
  #pbDiagram .tp-hint{display:none}
  #pbDiagram .partcard h3{font-size:19px;margin-bottom:8px}
  #pbDiagram .partcard .part-copy{font-size:13px;line-height:1.6}
  #pbDiagram .partcard .part-copy p+p{margin-top:8px}
  #pbDiagram .partcard-top{min-height:28px;margin-bottom:6px}
  #pbDiagram .partcard-note{margin-top:10px;padding-top:8px;font-size:11px}
}
@media(max-width:820px) and (max-height:700px){#pbDiagram .step:not(.on){padding:4px 0}#pbDiagram .steps .lead{display:none}}


@media(min-width:721px) and (max-width:820px){
  #pbDiagram .notice{font-size:12px;max-width:52%}
  #pbDiagram .legend{font-size:13px}
  #pbDiagram .viewswitch button{font-size:12px}
  #pbDiagram .steps h2{font-size:20px}
  #pbDiagram .steps .lead{font-size:13px}
  #pbDiagram .step .n{font-size:13px}
  #pbDiagram .step h3{font-size:14px}
  #pbDiagram .step h3 small{font-size:12px}
  #pbDiagram .step p{font-size:13.5px;line-height:1.6}
  #pbDiagram .partcard h3{font-size:21px}
  #pbDiagram .partcard .part-copy{font-size:14.5px;line-height:1.65}
  #pbDiagram .partcard-note{font-size:12px}
}
@media(max-width:720px){
  #pbDiagram .notice{font-size:12px;max-width:60%}   
  #pbDiagram .legend{font-size:12px}
  #pbDiagram .viewswitch button{font-size:12px}
  #pbDiagram .steps .lead{font-size:13px}
  #pbDiagram .step .n{font-size:13px}
  #pbDiagram .step h3{font-size:14px}
  #pbDiagram .step h3 small{font-size:12px}
  #pbDiagram .step p{font-size:13px}
  #pbDiagram .step:not(.on) .bar{display:none}
  #pbDiagram .partcard .part-copy{font-size:14px}
  #pbDiagram .partcard-note{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#pbDiagram .step p,#pbDiagram .step h3,#pbDiagram .step .n,#pbDiagram .legend li,#pbDiagram .legend i,#pbDiagram .legend button,#pbDiagram .viewswitch button{transition:none}}