#architecture{scroll-margin-top:90px}
.architecture-layout{display:grid;gap:42px}
.architecture-figure{margin:0}
.architecture-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b4bfac transparent}
.architecture-pixel{display:block;width:100%;max-width:1100px;min-width:760px;height:auto;margin:0 auto;overflow:visible;font-family:"Archivo","Noto Sans KR",sans-serif}
.architecture-pixel text{shape-rendering:auto;letter-spacing:-.025em}
.arch-node{outline:none}.arch-node:hover text,.arch-node:focus-visible text{fill:#b94715}
.arch-node:focus-visible{outline:2px dashed #c75422;outline-offset:6px}
.architecture-figure figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding:18px 0;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);line-height:1.7}
.architecture-figure figcaption i{display:inline-block;width:6px;height:6px;margin-right:6px;background:#ec7722}
.architecture-layout>.architecture-figure{min-width:0}
.architecture-layout>div{min-width:0}
.architecture-layout .g1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.architecture-layout .cell{border:0;background:transparent;padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start}
.architecture-layout .cell+.cell{border-left:1px solid var(--line)}
.architecture-layout .cell p{flex:1;margin-bottom:24px}
.architecture-layout .cell h3{margin:12px 0 16px;font-size:24px}
.architecture-layout .cell .lbl{font-size:10px}
@media(max-width:720px){.architecture-layout{gap:24px}.architecture-layout .g1{grid-template-columns:1fr}.architecture-layout .cell{padding:26px 0}.architecture-layout .cell+.cell{border-left:0;border-top:1px solid var(--line)}.architecture-figure figcaption{font-size:11px}.architecture-scroll{padding-bottom:12px}}