#pipeDiagram{--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}
#pipeDiagram h2,#pipeDiagram h3{font-family:var(--head);font-weight:500;letter-spacing:-.015em}


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

#pipeDiagram .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}
#pipeDiagram .scene{position:relative;min-width:0;min-height:0}
#pipeDiagram .scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#pipeDiagram .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}
#pipeDiagram .viewswitch button{padding:7px 14px;min-width:52px;color:var(--mute);transition:background .25s var(--ease),color .25s var(--ease)}
#pipeDiagram .viewswitch button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
#pipeDiagram .viewswitch button:hover:not([aria-pressed="true"]){background:var(--bg-alt)}

#pipeDiagram .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}
#pipeDiagram .legend li{list-style:none}
#pipeDiagram .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}
#pipeDiagram .legend button:hover{background:rgba(38,32,26,.06);color:var(--ink)}
#pipeDiagram .legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#pipeDiagram .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)}
#pipeDiagram .legend li.on button{color:var(--ink);font-weight:500}
#pipeDiagram .legend li.on i{transform:scale(1.15);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px currentColor}
#pipeDiagram .legend button[aria-pressed="true"],#pipeDiagram .legend li.on button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:500}
#pipeDiagram .legend button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--bg)}
#pipeDiagram .legend li[data-part="tube"] i{background:#2e5bb8}#pipeDiagram .legend li[data-part="feed"] i{background:#d9b91a}#pipeDiagram .legend li[data-part="mold"] i{background:#47a23f}#pipeDiagram .legend li[data-part="bend"] i{background:#cf2f34}
#pipeDiagram .notice{position:absolute;left:0;bottom:0;max-width:48%;font-size:12px;line-height:1.5;color:var(--mute);z-index:2}


#pipeDiagram .steps{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:8px 0}
#pipeDiagram .steps-body[hidden],#pipeDiagram .partcard[hidden]{display:none}
#pipeDiagram .steps h2{font-size:clamp(22px,2.1vw,28px);line-height:1.3;margin-bottom:6px}
#pipeDiagram .steps .lead{color:var(--mute);font-size:14px;margin-bottom:14px}
#pipeDiagram .steps ol{list-style:none;display:grid;gap:2px;align-content:start}
#pipeDiagram .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)}
#pipeDiagram .step:last-child{border-bottom:1px solid var(--line-soft)}
#pipeDiagram .step .n{font-family:var(--body);font-size:13px;font-weight:500;color:#787065;padding-top:4px;transition:color .3s var(--ease)}
#pipeDiagram .step h3{font-size:16px;line-height:1.4;font-weight:500;color:#6f675d;transition:color .3s var(--ease)}
#pipeDiagram .step h3 small{display:block;font-size:12px;font-weight:400;color:#787065;margin-top:1px}
#pipeDiagram .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)}
#pipeDiagram .step.on .n{color:var(--ink)}
#pipeDiagram .step.on h3{color:var(--ink)}
#pipeDiagram .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)}
#pipeDiagram .step .bar{grid-column:1/-1;height:2px;background:var(--line-soft);margin-top:7px;position:relative;overflow:hidden;opacity:0;transition:opacity .3s}
#pipeDiagram .step.on .bar{opacity:1}
#pipeDiagram .step .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lime)}

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

#pipeDiagram .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)}
#pipeDiagram .tp:hover{background:var(--bg-alt);border-color:var(--ink)}
#pipeDiagram .tp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#pipeDiagram .tp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pipeDiagram .tp-play{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#pipeDiagram .tp-play:hover{background:#3a332b}
#pipeDiagram .tp-play svg path{fill:currentColor}
#pipeDiagram .tp-play[data-state="playing"] .ic-play{display:none}
#pipeDiagram .tp-play[data-state="paused"] .ic-pause{display:none}
#pipeDiagram .tp-hint{font-size:12px;color:var(--mute);margin-left:6px;line-height:1.45;flex:1 1 auto;min-width:0}

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

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


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

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


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



#pipeDiagram noscript img{display:block;width:100%;height:auto;max-width:760px;margin:0 auto}

@media(max-width:720px){
  #pipeDiagram .legend{grid-template-columns:auto auto;justify-content:end;column-gap:0;row-gap:0}
}

@media(max-width:720px) and (max-height:840px){
  #pipeDiagram .scene{min-height:170px}
  #pipeDiagram .steps .lead{display:none}
  #pipeDiagram .steps ol{position:relative;grid-template-columns:repeat(8,1fr);gap:0;border-top:1px solid var(--line-soft)}
  #pipeDiagram .step{display:contents}
  #pipeDiagram .step .n{grid-row:1;padding:8px 0 7px;text-align:center;border-bottom:1px solid var(--line-soft)}
  #pipeDiagram .step.on .n{box-shadow:inset 0 -2px 0 var(--ink)}
  #pipeDiagram .step:not(.on) h3,#pipeDiagram .step:not(.on) .bar{display:none}
  #pipeDiagram .step:not(.on) p{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
  #pipeDiagram .step.on h3{grid-row:2;grid-column:1/-1;margin-top:8px}
  #pipeDiagram .step.on p{grid-row:3;grid-column:1/-1}
  #pipeDiagram .step.on .bar{grid-row:4;grid-column:1/-1}
  #pipeDiagram .transport{margin-top:8px}
}