/* 공통 레이아웃 제한 해제 (이 페이지는 풀폭) */
.page-title, .page-content { max-width: none !important; }
.binary-header + * { margin-top: 0; }

/* Hero */
.infra-hero{
    background: radial-gradient(1200px 400px at 50% -10%, #eaf2ff 0, #ffffff 60%);
    border-bottom: 1px solid #e5e7eb;
}
.infra-hero__inner{
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 20px 36px;
    text-align: center;
}
.infra-hero h1{
    font-size: clamp(32px, 3.6vw, 48px);
    margin: 0;
    color: #204c7a;
}
.infra-hero p{
    margin: 12px 0 14px;
    color: #334155;
    font-size: clamp(15px, 1.6vw, 18px);
}
.stack-badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px }
.stack-badges span{
    border:1px solid #cfe0ff; background:#fff; color:#2563eb;
    padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px;
}

/* CI/CD flow */
.flow{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:8px }
.flow .dot{
    background:#ffffff; border:1px solid #dbeafe; color:#1d4ed8; padding:6px 10px; border-radius:999px; font-weight:700;
}
.flow .arrow{ color:#64748b; font-weight:800 }

/* Section containers */
.infra-block{ max-width: 1400px; margin: 28px auto; padding: 0 20px; }
.infra-block h2{ margin: 8px 0 14px; color:#1e293b; font-size: 22px; }
.hint-center{ text-align:center; color:#64748b; margin:10px 0 2px; }

/* Diagram */
.diagram-wrap{
    background:#fff; border:1px solid #e5e7eb; border-radius:16px;
    padding:18px; box-shadow:0 6px 22px rgba(0,0,0,.05);
}
.diagram{ width:100%; height:auto; display:block }

/* Grid cards (서비스 하이라이트) */
.infra-grid{
    max-width: 1400px; margin: 10px auto 40px; padding: 0 20px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 1100px){ .infra-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .infra-grid{ grid-template-columns: 1fr; } }

.card{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:16px 16px 14px; box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.card h3{ margin:4px 0 10px; color:#1f2937; font-size: 18px; }
.bullet{ margin:6px 0 0 18px; color:#374151; }
.bullet li{ margin:.25rem 0; }

.card.highlight{
    border-color:#bfd2ff;
    box-shadow:0 10px 28px rgba(59,130,246,.12);
}

.links2{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.links2 a{
    flex: 1 1 160px; text-align:center; padding:10px 12px;
    border:1px solid #dbeafe; border-radius:10px; color:#1d4ed8; background:#fff;
    font-weight:800; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease;
}
.links2 a:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(29,78,216,.15) }