/* ==========================================================================
   ai-build.css — 「AI 구축」 대메뉴 허브·상세 (/ai-build/*)
   solution.css 위에 얹는다. 데이터: scripts/ai-build-pages.js
   ========================================================================== */

/* 상단 분야 이동 줄 (모바일에서는 드롭다운이 없으므로 이 줄로 이동) */
.aib-related {
    position: sticky;
    top: 70px;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--sol-line);
    margin-top: 70px;
}
.aib-related .container {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    scrollbar-width: none;
}
.aib-related .container::-webkit-scrollbar { display: none; }
.aib-related-label {
    flex: none;
    font-size: .78rem;
    font-weight: 800;
    color: var(--sol-blue);
    margin-right: 6px;
}
.aib-related a {
    flex: none;
    font-size: .86rem;
    color: #374151;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--sol-line);
    white-space: nowrap;
}
.aib-related a:hover { border-color: var(--sol-blue); color: var(--sol-blue); }
.aib-related a[aria-current="page"] { background: var(--sol-navy); border-color: var(--sol-navy); color: #fff; }
body[data-page="ai-build"] .sol-hero { padding-top: 64px; }

.aib-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.aib-path { display: block; text-decoration: none; color: inherit; }
.aib-path .sol-case-more { display: inline-block; margin-top: 14px; }

.aib-note { margin: 22px auto 0; max-width: 780px; text-align: center; color: var(--text-light); font-size: .93rem; }

/* 허브 분야 카드 */
.aib-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.aib-menu-card {
    display: block;
    background: #fff;
    border: 1px solid var(--sol-line);
    border-radius: 14px;
    padding: 22px 20px;
    text-decoration: none;
    transition: var(--transition);
}
.aib-menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c9dcf5; }
.aib-menu-card i { font-size: 1.3rem; color: var(--sol-blue); }
.aib-menu-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin: 12px 0 6px; }
.aib-menu-card p { font-size: .9rem; line-height: 1.6; color: var(--text-light); margin: 0; }

/* 허브 개발 역량 (어두운 섹션) */
.aib-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.aib-cap {
    display: block;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    padding: 24px 22px;
    background: rgba(255, 255, 255, .06);
    transition: var(--transition);
}
.aib-cap:hover { background: rgba(255, 255, 255, .12); }
.aib-cap h3 { color: #fff; font-size: 1.1rem; margin: 0 0 8px; }
.aib-cap h3 i { color: #7bb8ff; margin-right: 6px; }
.aib-cap p { color: rgba(255, 255, 255, .85); font-size: .93rem; line-height: 1.7; margin: 0; }

@media (max-width: 768px) {
    .aib-related { top: 70px; }
}

/* 한글 어절 중간 줄바꿈 방지 */
body[data-page="ai-build"] .sol-hero h1,
body[data-page="ai-build"] .sol-hero-sub,
body[data-page="ai-build"] .sol-head h2 { word-break: keep-all; }