*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#172333;background:#f6f8fb;font-family:Arial,"Noto Sans KR",system-ui,sans-serif;word-break:keep-all;line-height:1.7}a{color:inherit;text-underline-offset:4px}button,a.button{font:inherit;cursor:pointer}button{min-height:44px;border:1px solid #c6ced8;background:white;color:inherit;border-radius:5px;padding:8px 14px}button:hover{border-color:#2451cb}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #2451cb;outline-offset:4px}button[aria-pressed=true]{background:#2451cb;border-color:#2451cb;color:white}button:disabled{opacity:.45;cursor:default}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px max(24px,calc((100vw - 1320px)/2));background:#fff;border-bottom:1px solid #dce1e7}.brand{font-size:15px;font-weight:700;text-decoration:none}.switcher{display:flex;gap:4px;background:#f0f3f7;padding:4px;border-radius:7px}.switcher a{text-decoration:none;padding:6px 14px;font-size:13px;border-radius:4px}.switcher a[aria-current=page]{background:#172333;color:white}.wrap{max-width:1320px;margin:auto;padding:42px 28px 70px}h1{font-size:clamp(30px,4vw,52px);line-height:1.25;letter-spacing:-.045em;margin:12px 0 18px;font-weight:750}h2{font-size:24px;line-height:1.45;letter-spacing:-.025em}h3{font-size:17px;margin:0 0 8px}.intro{display:grid;grid-template-columns:1fr 360px;gap:50px;align-items:end;margin-bottom:32px}.intro p{max-width:740px;color:#4c5b6d;font-size:16px}.tool-label{font-size:13px;color:#2451cb;font-weight:700}.repo-note{font-size:12px;color:#586879;border-left:1px solid #cbd3dd;padding-left:22px}.repo-note a{overflow-wrap:anywhere}.tabs{display:flex;flex-wrap:wrap;gap:9px;padding:0 0 20px}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;background:white;border:1px solid #d6dde6;border-radius:9px;overflow:hidden}.diagram-panel{min-width:0}.canvas-toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #e2e6ec;font-size:12px;color:#586879}.canvas-actions{display:flex;gap:6px}.canvas-actions button{font-size:12px;padding:6px 10px}.diagram-stage{overflow:auto;background-color:#fff;background-image:radial-gradient(#dce2ea .8px,transparent .8px);background-size:20px 20px;padding:22px 10px;min-height:520px;display:flex;align-items:center;justify-content:center}.diagram-stage>svg{display:block;width:100%;max-width:840px;height:auto;overflow:visible;flex-shrink:0}.diagram-node{cursor:pointer}.diagram-node:hover>rect,.diagram-node:focus>rect,.diagram-node.active>rect,.diagram-node.active>polygon{stroke:#2451cb;stroke-width:3}.diagram-node.active text{fill:#173fa7}.side-panel{background:#f8faff;border-left:1px solid #d6dde6;padding:28px 24px;display:flex;flex-direction:column}.step-count{font-size:12px;color:#586879}.side-panel h2{margin:9px 0 12px;font-size:24px}.side-panel p{font-size:14px;color:#4c5b6d}.pill{display:inline-flex;background:#e9f0ff;color:#173fa7;border:1px solid #c6d7ff;padding:3px 9px;border-radius:4px;font-size:12px;width:fit-content}.step-controls{display:flex;gap:8px;margin:22px 0 12px}.step-dots{display:flex;gap:6px;flex-wrap:wrap}.step-dots button{min-height:36px;width:36px;padding:3px;font-size:12px}.side-source{margin-top:auto;padding-top:24px;font-size:12px;color:#586879}.code{display:block;background:#172333;color:#e8edf4;border-radius:5px;padding:12px 14px;font:12px/1.7 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.bottom-note{display:flex;gap:24px;justify-content:space-between;padding-top:17px;color:#586879;font-size:12px}.bottom-note p{margin:0}.source-list{margin-top:40px;padding-top:20px;border-top:1px solid #d6dde6;font-size:13px;color:#586879}.source-list summary{cursor:pointer}.source-list ul{padding-left:22px}.source-list code{overflow-wrap:anywhere}.callout{padding:24px 0;border-top:1px solid #d6dde6;display:grid;grid-template-columns:220px 1fr;gap:28px;margin-top:36px}.callout p{margin:0;color:#4c5b6d}.callout h3{margin:0}.compare-link{margin-top:30px;font-size:14px}.compare-link a{color:#2451cb}.view-dialog{border:1px solid #c5ccd7;border-radius:8px;width:min(1250px,96vw);height:90vh;padding:0;overflow:hidden}.view-dialog::backdrop{background:#101b2f99}.dialog-bar{padding:10px 15px;display:flex;justify-content:space-between;align-items:center;background:#f4f7fa;height:65px}.view-dialog iframe{width:100%;height:calc(100% - 65px);border:0}.dialog-bar span{font-size:13px}footer{font-size:12px;margin-top:40px;color:#657284}body::selection{background:#c9dafd}@media(max-width:1000px){.intro{grid-template-columns:1fr 260px;gap:25px}.workbench{grid-template-columns:1fr 280px}.side-panel{padding:22px 18px}.canvas-toolbar{padding:10px;flex-wrap:wrap}}@media(max-width:740px){.topbar{padding:13px 16px;align-items:flex-start;gap:10px;flex-direction:column}.switcher{width:100%}.switcher a{flex:1;text-align:center;padding:7px 6px}.wrap{padding:28px 16px 45px}.intro{grid-template-columns:1fr;gap:12px;margin-bottom:20px}.intro p{font-size:15px;margin:10px 0}.repo-note{border:0;padding:0;font-size:11px}.workbench{grid-template-columns:1fr}.side-panel{border-left:0;border-top:1px solid #d6dde6}.side-panel h2{font-size:23px}.diagram-stage{min-height:340px;justify-content:flex-start;padding:10px}.diagram-stage>svg{min-width:640px}.canvas-toolbar{font-size:11px}.canvas-actions{flex-wrap:wrap}.canvas-actions button{min-height:40px}.tabs button{flex:1;padding:8px;font-size:12px}.step-dots button{min-height:44px;width:44px}.bottom-note{flex-direction:column;gap:8px}.callout{grid-template-columns:1fr;gap:10px;margin-top:28px}.compare-link{margin-top:22px}.view-dialog{width:98vw;height:95vh}.dialog-bar{height:75px;gap:8px}.view-dialog iframe{height:calc(100% - 75px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}@media print{.topbar,.tabs,.step-controls,.canvas-actions,.compare-link,.source-list{display:none}.wrap{padding:0}.workbench{display:block}.side-panel{border:0}.diagram-stage svg{min-width:0}}
#role-labels:not([hidden]){display:flex;justify-content:space-around;padding:20px 20px 0;font-weight:700;font-size:15px;color:#2451cb}#role-labels span+span{color:#347763}.diagram-stage object{display:block;width:100%;height:450px}