#sflHow button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;touch-action:manipulation} #sflHow button:focus-visible,#sflHow [tabindex]:focus-visible{outline:2px solid #315f90;outline-offset:4px} #sflHow h2,#sflHow h3,#sflHow p,#sflHow ol,#sflHow ul{margin:0;padding:0} #sflDiagram{--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:"Noto Sans KR",sans-serif;--head:"Noto Sans KR",sans-serif;--ease:cubic-bezier(.2,.7,.2,1);display:block;margin:0 0 96px} #sflDiagram h2,#sflDiagram h3{font-family:var(--head);font-weight:500;letter-spacing:-.015em} #sflDiagram .story{position:relative;height:calc(100svh + 8 * max(160px, 30svh))} #sflDiagram .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} #sflDiagram .scene{position:relative;min-width:0;min-height:0} #sflDiagram .scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block} #sflDiagram .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} #sflDiagram .viewswitch button{padding:7px 14px;min-width:52px;color:var(--mute);transition:background .25s var(--ease),color .25s var(--ease)} #sflDiagram .viewswitch button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} #sflDiagram .viewswitch button:hover:not([aria-pressed="true"]){background:var(--bg-alt)} #sflDiagram .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} #sflDiagram .legend li{list-style:none} #sflDiagram .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} #sflDiagram .legend button:hover{background:rgba(38,32,26,.06);color:var(--ink)} #sflDiagram .legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #sflDiagram .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)} #sflDiagram .legend li.on button{color:var(--ink);font-weight:500} #sflDiagram .legend li.on i{transform:scale(1.15);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px currentColor} #sflDiagram .legend button[aria-pressed="true"],#sflDiagram .legend li.on button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:500} #sflDiagram .legend button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--bg)} #sflDiagram .legend li[data-part="tube"] i{background:#2e5bb8}#sflDiagram .legend li[data-part="feed"] i{background:#d9b91a}#sflDiagram .legend li[data-part="mold"] i{background:#47a23f}#sflDiagram .legend li[data-part="bend"] i{background:#cf2f34} #sflDiagram .notice{position:absolute;left:0;bottom:0;max-width:48%;font-size:12px;line-height:1.5;color:var(--mute);z-index:2} #sflDiagram .steps{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:8px 0} #sflDiagram .steps-body[hidden],#sflDiagram .partcard[hidden]{display:none} #sflDiagram .steps h2{font-size:clamp(22px,2.1vw,28px);line-height:1.3;margin-bottom:6px} #sflDiagram .steps .lead{color:var(--mute);font-size:14px;margin-bottom:14px} #sflDiagram .steps ol{list-style:none;display:grid;gap:2px;align-content:start} #sflDiagram .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)} #sflDiagram .step:last-child{border-bottom:1px solid var(--line-soft)} #sflDiagram .step .n{font-family:var(--body);font-size:13px;font-weight:500;color:#787065;padding-top:4px;transition:color .3s var(--ease)} #sflDiagram .step h3{font-size:16px;line-height:1.4;font-weight:500;color:#6f675d;transition:color .3s var(--ease)} #sflDiagram .step h3 small{display:block;font-size:12px;font-weight:400;color:#787065;margin-top:1px} #sflDiagram .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)} #sflDiagram .step.on .n{color:var(--ink)} #sflDiagram .step.on h3{color:var(--ink)} #sflDiagram .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)} #sflDiagram .step .bar{grid-column:1/-1;height:2px;background:var(--line-soft);margin-top:7px;position:relative;overflow:hidden;opacity:0;transition:opacity .3s} #sflDiagram .step.on .bar{opacity:1} #sflDiagram .step .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lime)} #sflDiagram .transport{display:flex;align-items:center;gap:8px;margin-top:16px} #sflDiagram .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)} #sflDiagram .tp:hover{background:var(--bg-alt);border-color:var(--ink)} #sflDiagram .tp:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #sflDiagram .tp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #sflDiagram .tp-play{background:var(--ink);color:var(--bg);border-color:var(--ink)} #sflDiagram .tp-play:hover{background:#3a332b} #sflDiagram .tp-play svg path{fill:currentColor} #sflDiagram .tp-play[data-state="playing"] .ic-play{display:none} #sflDiagram .tp-play[data-state="paused"] .ic-pause{display:none} #sflDiagram .tp-hint{font-size:12px;color:var(--mute);margin-left:6px;line-height:1.45;flex:1 1 auto;min-width:0} #sflDiagram .partcard{display:flex;flex-direction:column;gap:0} #sflDiagram .partcard-top{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:14px;color:var(--mute);font-size:13px} #sflDiagram .part-dot{width:12px;height:12px;border-radius:50%;flex:none} #sflDiagram .partcard-close{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;padding:6px 0} #sflDiagram .partcard-close:hover{color:var(--ink)} #sflDiagram .partcard-close span{font-size:20px;line-height:1} #sflDiagram .partcard h3{font-size:clamp(22px,2vw,26px);line-height:1.4;margin-bottom:14px} #sflDiagram .partcard .part-copy{font-size:15.5px;line-height:1.75;color:var(--ink);text-wrap:pretty} #sflDiagram .partcard .part-copy p+p{margin-top:12px;color:var(--mute)} #sflDiagram .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){#sflDiagram .stage{grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr)}#sflDiagram .steps h2{font-size:22px}#sflDiagram .step h3{font-size:15px}#sflDiagram .step p{font-size:13.5px}} @media(min-width:821px) and (max-height:900px){#sflDiagram .step:not(.on) h3 small{display:none}#sflDiagram .step{padding:6px 0}#sflDiagram .steps .lead{margin-bottom:10px}#sflDiagram .transport{margin-top:12px}} @media(min-width:821px) and (max-height:780px){#sflDiagram .stage{min-height:0}#sflDiagram .steps .lead{display:none}#sflDiagram .steps h2{font-size:21px;margin-bottom:8px}#sflDiagram .step{padding:5px 0}#sflDiagram .step h3{font-size:15px}#sflDiagram .step p{font-size:13.5px;line-height:1.55}#sflDiagram .tp{width:32px;height:32px}#sflDiagram .transport{margin-top:10px}} @media(min-width:821px) and (max-height:680px){#sflDiagram .step{padding:4px 0}#sflDiagram .step h3{font-size:14px}#sflDiagram .step .n{font-size:12px}#sflDiagram .step p{font-size:13px;line-height:1.5}#sflDiagram .tp-hint{display:none}} @media(max-width:820px){ #sflDiagram{margin-bottom:64px} #sflDiagram .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} #sflDiagram .scene{min-height:230px} #sflDiagram .legend{font-size:11px;gap:0;padding:4px 0 2px 4px}#sflDiagram .legend button{padding:2px 8px 2px 4px;gap:7px}#sflDiagram .legend i{width:8px;height:8px} #sflDiagram .notice{top:0;bottom:auto;max-width:56%;font-size:10px;line-height:1.45} #sflDiagram .step p,#sflDiagram .partcard .part-copy p{text-wrap:pretty} #sflDiagram .viewswitch button{padding:6px 11px;min-width:46px;font-size:11px} #sflDiagram .steps{justify-content:flex-start;padding:0} #sflDiagram .steps h2{font-size:18px;margin-bottom:2px} #sflDiagram .steps .lead{font-size:12px;margin-bottom:6px} #sflDiagram .steps ol{gap:0} #sflDiagram .step{padding:5px 0;grid-template-columns:28px 1fr} #sflDiagram .step:not(.on) h3 small{display:none} #sflDiagram .step h3{font-size:13px} #sflDiagram .step .n{font-size:12px;padding-top:0} #sflDiagram .step h3 small{font-size:11px} #sflDiagram .step p{font-size:12px;line-height:1.55} #sflDiagram .step.on p{max-height:var(--h,100px);margin-top:4px} #sflDiagram .step .bar{margin-top:5px} #sflDiagram .transport{margin-top:10px;gap:6px} #sflDiagram .tp{width:32px;height:32px} #sflDiagram .tp-hint{display:none} #sflDiagram .partcard h3{font-size:19px;margin-bottom:8px} #sflDiagram .partcard .part-copy{font-size:13px;line-height:1.6} #sflDiagram .partcard .part-copy p+p{margin-top:8px} #sflDiagram .partcard-top{min-height:28px;margin-bottom:6px} #sflDiagram .partcard-note{margin-top:10px;padding-top:8px;font-size:11px} } @media(max-width:820px) and (max-height:700px){#sflDiagram .step:not(.on){padding:4px 0}#sflDiagram .steps .lead{display:none}} @media(min-width:721px) and (max-width:820px){ #sflDiagram .notice{font-size:12px;max-width:52%} #sflDiagram .legend{font-size:13px} #sflDiagram .viewswitch button{font-size:12px} #sflDiagram .steps h2{font-size:20px} #sflDiagram .steps .lead{font-size:13px} #sflDiagram .step .n{font-size:13px} #sflDiagram .step h3{font-size:14px} #sflDiagram .step h3 small{font-size:12px} #sflDiagram .step p{font-size:13.5px;line-height:1.6} #sflDiagram .partcard h3{font-size:21px} #sflDiagram .partcard .part-copy{font-size:14.5px;line-height:1.65} #sflDiagram .partcard-note{font-size:12px} } @media(max-width:720px){ #sflDiagram .notice{font-size:12px;max-width:60%} #sflDiagram .legend{font-size:12px} #sflDiagram .viewswitch button{font-size:12px} #sflDiagram .steps .lead{font-size:13px} #sflDiagram .step .n{font-size:13px} #sflDiagram .step h3{font-size:14px} #sflDiagram .step h3 small{font-size:12px} #sflDiagram .step p{font-size:13px} #sflDiagram .step:not(.on) .bar{display:none} #sflDiagram .partcard .part-copy{font-size:14px} #sflDiagram .partcard-note{font-size:12px} } @media(prefers-reduced-motion:reduce){#sflDiagram .step p,#sflDiagram .step h3,#sflDiagram .step .n,#sflDiagram .legend li,#sflDiagram .legend i,#sflDiagram .legend button,#sflDiagram .viewswitch button{transition:none}} #sflDiagram noscript img{display:block;width:100%;height:auto;max-width:760px;margin:0 auto} @media(max-width:720px){ #sflDiagram .legend{grid-template-columns:auto auto;justify-content:end;column-gap:0;row-gap:0} } @media(max-width:720px) and (max-height:840px){ #sflDiagram .scene{min-height:170px} #sflDiagram .steps .lead{display:none} #sflDiagram .steps ol{position:relative;grid-template-columns:repeat(8,1fr);gap:0;border-top:1px solid var(--line-soft)} #sflDiagram .step{display:contents} #sflDiagram .step .n{grid-row:1;padding:8px 0 7px;text-align:center;border-bottom:1px solid var(--line-soft)} #sflDiagram .step.on .n{box-shadow:inset 0 -2px 0 var(--ink)} #sflDiagram .step:not(.on) h3,#sflDiagram .step:not(.on) .bar{display:none} #sflDiagram .step:not(.on) p{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none} #sflDiagram .step.on h3{grid-row:2;grid-column:1/-1;margin-top:8px} #sflDiagram .step.on p{grid-row:3;grid-column:1/-1} #sflDiagram .step.on .bar{grid-row:4;grid-column:1/-1} #sflDiagram .transport{margin-top:8px} } #sflDiagram{--bg:#f5f6f6;--bg-alt:#e8edf0;--ink:#202e3a;--mute:#526572;--line:rgba(42,64,83,.2);--line-soft:rgba(42,64,83,.12);margin:0} #sflDiagram .story{height:calc(100svh + 7 * max(160px,30svh))} #sflDiagram .stage{grid-template-columns:minmax(0,1.75fr) minmax(330px,.85fr);gap:0 54px;padding:calc(var(--hd) + var(--tabbar) + 16px) 40px 24px;min-height:0;max-width:1440px} #sflDiagram .viz-stack{display:flex;flex-direction:column;min-height:0;min-width:0;gap:14px} #sflDiagram .scene{flex:1 1 auto;min-height:285px;background:linear-gradient(160deg,#edf2f6,#f7f8f8);border:1px solid #d9e1e6;border-radius:3px;overflow:hidden} #sflDiagram .scene canvas{inset:37px 0 0;height:calc(100% - 37px)} #sflDiagram .scene-top{position:absolute;left:18px;right:0;top:0;height:38px;display:flex;align-items:center;font:12px var(--body);letter-spacing:.02em;color:#526b7c} #sflDiagram .scene-top strong{font-weight:500;color:#30485d;margin-right:12px} #sflDiagram .viewswitch{border-top:0;border-right:0;border-radius:0 0 0 3px;background:#f5f7f9} #sflDiagram .viewswitch button{font-size:13px;min-height:38px;min-width:55px;padding:8px 14px} #sflDiagram .detail-row{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(230px,1.4fr);gap:14px;min-height:143px;flex:0 0 143px} #sflDiagram .companion,#sflDiagram .function-detail{position:relative;background:#f0f3f5;border:1px solid #d9e1e6;border-radius:3px;min-width:0;overflow:hidden} #sflDiagram .companion canvas,#sflDiagram .function-detail canvas{width:100%;height:111px;display:block} #sflDiagram .detail-caption{border-top:1px solid #dce3e8;height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12px;color:#415a6e;white-space:nowrap} #sflDiagram .sync-dot{width:5px;height:5px;background:#456f89;border-radius:50%;flex:none} #sflDiagram .legend{position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0;margin:0;background:none;font-size:12px} #sflDiagram .legend button{min-height:40px;padding:8px;gap:7px;background:#e9eef1;border:1px solid transparent;width:100%;justify-content:center;color:#506675} #sflDiagram .legend li[data-part="sheet"] i{background:#547f9b}#sflDiagram .legend li[data-part="punch"] i{background:#bd8841}#sflDiagram .legend li[data-part="turret"] i{background:#34476e}#sflDiagram .legend li[data-part="laser"] i{background:#60976a} #sflDiagram .legend button[aria-pressed="true"]{background:#24394e;color:white} #sflDiagram .notice{position:static;max-width:none;font-size:12px;line-height:1.55;color:#60717d} #sflDiagram .steps{padding:0;justify-content:safe center} #sflDiagram .steps h2{font-size:25px;line-height:1.4;letter-spacing:-.035em;margin:0 0 8px} #sflDiagram .steps .lead{font-size:14px;line-height:1.65;margin:0 0 20px} #sflDiagram .step{padding:9px 0;grid-template-columns:30px 1fr;gap:0 8px} #sflDiagram .step h3{font-size:16px;line-height:1.4} #sflDiagram .step h3 small{font-size:12px;line-height:1.5;color:#647889} #sflDiagram .step p{font-size:15px;line-height:1.65;max-height:0} #sflDiagram .step.on p{max-height:var(--h,230px)} #sflDiagram .step p .scope{display:block;font-size:13px;line-height:1.6;margin-top:8px;color:#536b7f} #sflDiagram .step .n{font-size:12px;letter-spacing:.03em} #sflDiagram .step .bar i{background:#345a79} #sflDiagram .transport{gap:10px;margin-top:17px} #sflDiagram .tp{width:42px;height:42px;background:#f5f7f8}#sflDiagram .tp-play{background:#233b52;color:white} #sflDiagram .tp-hint{font-size:12px;line-height:1.6} #sflDiagram .ds-step-detail{display:none} #sflDiagram .partcard .part-copy{font-size:16px;line-height:1.8} #sflHow .fallback{max-width:1100px;padding:28px;margin:auto}#sflHow .fallback img{width:100%;height:auto}#sflHow .fallback article{padding:22px 0;border-bottom:1px solid #ccd5db}#sflHow .fallback h3{font-size:20px;margin-bottom:8px}#sflHow .fallback p{line-height:1.8} @media(min-width:721px) and (max-height:820px){#sflDiagram .stage{padding-top:calc(var(--hd) + var(--tabbar) + 8px);gap:0 36px}#sflDiagram .step{padding:7px 0}#sflDiagram .steps h2{font-size:23px}#sflDiagram .steps .lead{margin-bottom:12px}#sflDiagram .step p{font-size:14px}#sflDiagram .detail-row{flex-basis:128px;min-height:128px}#sflDiagram .companion canvas,#sflDiagram .function-detail canvas{height:96px}} @media(max-width:1000px) and (min-width:721px){#sflDiagram .stage{grid-template-columns:minmax(0,1.2fr) minmax(300px,.9fr);padding-inline:24px;gap:24px}#sflDiagram .detail-row{grid-template-columns:1fr 1.2fr}#sflDiagram .legend{grid-template-columns:1fr 1fr}} @media(max-width:720px){#sflDiagram .story{height:auto!important}#sflDiagram .stage{position:relative;top:auto;height:auto;min-height:0;padding:16px 18px 24px;display:flex;flex-direction:column;gap:24px;overflow:visible} #sflDiagram .viz-stack{display:contents}#sflDiagram .scene{height:280px;min-height:280px;flex:none;width:100%;order:0}#sflDiagram .scene canvas{inset:45px 0 0;height:235px}#sflDiagram .scene-top{height:45px;left:12px;font-size:11px}#sflDiagram .scene-top strong{margin-right:5px}#sflDiagram .scene-top>span{display:none}#sflDiagram .viewswitch button{min-height:44px;font-size:14px;min-width:52px} #sflDiagram .detail-row{order:1;display:grid;grid-template-columns:1fr 1.2fr;gap:10px;min-height:127px;flex:none;margin-top:-10px}#sflDiagram .companion canvas,#sflDiagram .function-detail canvas{height:96px}#sflDiagram .detail-caption{font-size:12px;padding:0 7px;height:30px;letter-spacing:-.02em} #sflDiagram .steps{order:2;padding:0;display:block}#sflDiagram .steps h2{font-size:23px;line-height:1.45;margin-bottom:13px}#sflDiagram .steps .lead{display:none}#sflDiagram .steps ol{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;min-height:0!important;margin:0 0 16px;border:0} #sflDiagram .step{display:grid!important;grid-template-columns:1fr!important;place-items:center;padding:0!important;border:1px solid #bfcbd4!important;min-height:44px;border-radius:3px}#sflDiagram .step .n{padding:0;grid-row:auto;font-size:14px;color:#3e586d;border:0}#sflDiagram .step.on{background:#243b52}#sflDiagram .step.on .n{color:white;box-shadow:none}#sflDiagram .step h3,#sflDiagram .step p,#sflDiagram .step .bar{display:none!important} #sflDiagram .ds-step-detail{display:block;min-height:180px;border-bottom:1px solid #d0d9df;padding:0 0 17px;font-size:16px;line-height:1.75}#sflDiagram .ds-step-detail h3{font-size:18px;line-height:1.55;letter-spacing:-.03em;margin-bottom:10px}#sflDiagram .ds-step-detail h3 small{display:block;font-size:14px;font-weight:400;color:#4e687d;margin-top:5px}#sflDiagram .ds-step-detail p{font-size:16px;line-height:1.75}#sflDiagram .ds-step-detail .scope{display:block;font-size:14px;line-height:1.7;margin-top:10px;color:#506b7e} #sflDiagram .transport{flex-wrap:wrap;margin-top:17px}#sflDiagram .tp{width:44px;height:44px}#sflDiagram .tp-hint{display:block;flex-basis:100%;margin:0;font-size:13px;line-height:1.7;order:2} #sflDiagram .legend{position:static;order:3;grid-template-columns:repeat(2,1fr);font-size:13px;gap:8px;background:none;padding:0;width:100%}#sflDiagram .legend button{min-height:44px;justify-content:start;padding:10px 12px;font-size:13px}#sflDiagram .notice{order:4;font-size:13px;line-height:1.7;margin:0}#sflDiagram .partcard .part-copy{font-size:16px}#sflDiagram .partcard-close{font-size:14px;min-height:44px} } @media(prefers-reduced-motion:reduce){#sflHow *{scroll-behavior:auto!important;transition:none!important}} #sflDiagram .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #sflCv{touch-action:pan-y} @media(max-width:720px){#sflDiagram .steps ol{gap:2px}#sflDiagram .scene-top{font-size:12px}} #sflHow{overflow-anchor:none} #sflHow .fallback .fallback-spec{font-size:14px;color:#45647a;margin-bottom:9px} #sflDiagram .turret-note{flex:none;margin:0;padding:8px 11px;border-left:2px solid #8c9eac;background:#e9eef2;color:#425d72;font-size:12px;line-height:1.65} @media(max-width:720px){#sflDiagram .turret-note{order:1;font-size:13px;line-height:1.7;margin-top:-12px}#sflDiagram .detail-row{order:2}#sflDiagram .steps{order:3}#sflDiagram .legend{order:4}#sflDiagram .notice{order:5}} #sflHow{word-break:keep-all;overflow-wrap:normal;hyphens:none} #sflDiagram{font-family:var(--body);--maxw:1440px;--gx:40px} #sflHow .sfl-nb{white-space:nowrap} @media (min-width:821px){ #sflDiagram .stage{container:sflHowViewport / size;padding-bottom:calc(24px + 78px + env(safe-area-inset-bottom,0px))} @container sflHowViewport (max-height:576px){#sflDiagram .tp-hint{display:none}} @container sflHowViewport (max-height:796px){#sflDiagram .step:not(.on) h3 small{display:none}} @container sflHowViewport (max-height:620px){#sflDiagram .step{padding:5px 0}#sflDiagram .transport{margin-top:10px}} @container sflHowViewport (max-height:716px){#sflDiagram .steps h2{font-size:23px}#sflDiagram .steps .lead{margin-bottom:12px}#sflDiagram .step p{font-size:14px}#sflDiagram .detail-row{flex-basis:128px;min-height:128px}#sflDiagram .companion canvas,#sflDiagram .function-detail canvas{height:96px}} @container sflHowViewport (max-height:576px){#sflDiagram .steps h2{font-size:21px;margin-bottom:8px}#sflDiagram .tp{width:32px;height:32px}#sflDiagram .step{padding:4px 0}#sflDiagram .step h3{font-size:14px}#sflDiagram .step .n{font-size:12px}#sflDiagram .step p{font-size:13px;line-height:1.5}} } @media(min-width:721px){ #sflDiagram[data-flow] .story{height:auto!important}#sflDiagram[data-flow] .stage{container:none;position:relative;top:auto;height:auto;min-height:0;padding:16px 18px 24px;display:flex;flex-direction:column;gap:24px;overflow:visible} #sflDiagram[data-flow] .viz-stack{display:contents}#sflDiagram[data-flow] .scene{height:280px;min-height:280px;flex:none;width:100%;order:0}#sflDiagram[data-flow] .scene canvas{inset:45px 0 0;height:235px}#sflDiagram[data-flow] .scene-top{height:45px;left:12px;font-size:11px}#sflDiagram[data-flow] .scene-top strong{margin-right:5px}#sflDiagram[data-flow] .scene-top>span{display:none}#sflDiagram[data-flow] .viewswitch button{min-height:44px;font-size:14px;min-width:52px} #sflDiagram[data-flow] .detail-row{order:1;display:grid;grid-template-columns:1fr 1.2fr;gap:10px;min-height:127px;flex:none;margin-top:-10px}#sflDiagram[data-flow] .companion canvas,#sflDiagram[data-flow] .function-detail canvas{height:96px}#sflDiagram[data-flow] .detail-caption{font-size:12px;padding:0 7px;height:30px;letter-spacing:-.02em} #sflDiagram[data-flow] .steps{order:2;padding:0;display:block}#sflDiagram[data-flow] .steps h2{font-size:23px;line-height:1.45;margin-bottom:13px}#sflDiagram[data-flow] .steps .lead{display:none}#sflDiagram[data-flow] .steps ol{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;min-height:0!important;margin:0 0 16px;border:0} #sflDiagram[data-flow] .step{display:grid!important;grid-template-columns:1fr!important;place-items:center;padding:0!important;border:1px solid #bfcbd4!important;min-height:44px;border-radius:3px}#sflDiagram[data-flow] .step .n{padding:0;grid-row:auto;font-size:14px;color:#3e586d;border:0}#sflDiagram[data-flow] .step.on{background:#243b52}#sflDiagram[data-flow] .step.on .n{color:white;box-shadow:none}#sflDiagram[data-flow] .step h3,#sflDiagram[data-flow] .step p,#sflDiagram[data-flow] .step .bar{display:none!important} #sflDiagram[data-flow] .ds-step-detail{display:block;min-height:180px;border-bottom:1px solid #d0d9df;padding:0 0 17px;font-size:16px;line-height:1.75}#sflDiagram[data-flow] .ds-step-detail h3{font-size:18px;line-height:1.55;letter-spacing:-.03em;margin-bottom:10px}#sflDiagram[data-flow] .ds-step-detail h3 small{display:block;font-size:14px;font-weight:400;color:#4e687d;margin-top:5px}#sflDiagram[data-flow] .ds-step-detail p{font-size:16px;line-height:1.75}#sflDiagram[data-flow] .ds-step-detail .scope{display:block;font-size:14px;line-height:1.7;margin-top:10px;color:#506b7e} #sflDiagram[data-flow] .transport{flex-wrap:wrap;margin-top:17px}#sflDiagram[data-flow] .tp{width:44px;height:44px}#sflDiagram[data-flow] .tp-hint{display:block;flex-basis:100%;margin:0;font-size:13px;line-height:1.7;order:2} #sflDiagram[data-flow] .legend{position:static;order:3;grid-template-columns:repeat(2,1fr);font-size:13px;gap:8px;background:none;padding:0;width:100%}#sflDiagram[data-flow] .legend button{min-height:44px;justify-content:start;padding:10px 12px;font-size:13px}#sflDiagram[data-flow] .notice{order:4;font-size:13px;line-height:1.7;margin:0}#sflDiagram[data-flow] .partcard .part-copy{font-size:16px}#sflDiagram[data-flow] .partcard-close{font-size:14px;min-height:44px} #sflDiagram[data-flow] .turret-note{order:1;font-size:13px;line-height:1.7;margin-top:-12px}#sflDiagram[data-flow] .detail-row{order:2}#sflDiagram[data-flow] .steps{order:3}#sflDiagram[data-flow] .legend{order:4}#sflDiagram[data-flow] .notice{order:5} } #sflDiagram .steps .lead{display:block} #sflDiagram[data-measuring] .step,#sflDiagram[data-measuring] .step p{transition:none!important} @media(min-width:721px){ #sflDiagram .transport{flex-wrap:wrap} #sflDiagram .tp-hint{order:-1;flex-basis:100%;margin-left:0;margin-right:120px} #sflDiagram:not([data-flow]) .stage :is(button,[tabindex]){scroll-margin-top:calc(-1 * (var(--review-h,98px) + 64px));scroll-margin-bottom:-94px} } #sflHow>.sfl-intro{display:block;max-width:1440px;margin:0 auto;padding:24px 40px;color:#526572;font:14px/1.65 "Noto Sans KR",sans-serif} #sflDiagram .scene-frame{display:contents} @media(min-width:721px){ #sflDiagram:not([data-flow]) .scene-frame{display:block;position:relative;flex:1 1 auto;min-height:calc(285px * var(--sfl-scene-scale,1));min-width:0} #sflDiagram:not([data-flow]) .scene-frame>.scene{position:absolute;inset:0 0 auto;width:100%;height:100%;min-height:285px;transform:scale(var(--sfl-scene-scale,1));transform-origin:top center} } @media(max-width:720px){#sflHow>.sfl-intro{padding:16px 18px;font-size:13px}}