/* 이 안내 페이지의 배치만 정의한다. 색·글꼴은 공통 브랜드 토큰을 따른다. */
.connected-hero .section-inner { padding-top: 2.4rem; }
.connected-hero h1 { max-width: 850px; }
.connected-hero .hero-lead { max-width: 790px; }
.connected-hero .scope-note { max-width: 850px; margin-top: 1.5rem; }
.connected-hero .actions { margin-top: 1.5rem; }
.connected-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.connected-flow li { min-width: 0; display: flex; gap: 1rem; padding: 1.35rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.connected-number { flex: 0 0 auto; color: var(--color-accent-dark); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.connected-flow h3 { margin: 0 0 .45rem; font-size: 1.2rem; }
.connected-flow p { margin-bottom: .65rem; }
.connected-flow p:last-child { margin-bottom: 0; }
.connected-stage { color: var(--color-text-soft); font-size: .9rem; font-weight: 700; }
.connected-status { border-top: 1px solid var(--color-border); padding-top: .8rem; font-size: .92rem; }
.connected-status .scope-tag { margin: 0 .3rem .2rem 0; }
.connected-example { list-style: none; counter-reset: stage; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1.2rem; padding: 0; }
.connected-example li { min-width: 0; border-top: 3px solid var(--color-primary); background: var(--color-surface); padding: 1.1rem; }
.connected-example strong { display: block; color: var(--color-primary); margin-bottom: .5rem; }
.connected-example span { display: block; color: var(--color-text-soft); }
@media (max-width: 720px) { .connected-flow, .connected-example { grid-template-columns: minmax(0, 1fr); } .connected-flow li { padding: 1.1rem; } }