/* ═══════════════════════════════════════════════════════════════════════════
   common.css — 공통 디자인 패턴
   새 섹션 추가 시: 해당 그룹 선택자 목록에 클래스만 추가하세요.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pretendard ──────────────────────────────────────────────────────────── */
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ── 0. Section Wrap ─────────────────────────────────────────────────────── */
/* 섹션 공통 상하 여백. section-wrap 클래스로 공유. */
.section-wrap {
    padding: 90px 0;
}

@media (max-width: 1440px) {
    .section-wrap {
        padding: 60px 0;
    }
}

/* ── 1. Section Inner Container ──────────────────────────────────────────── */
/* 표준 max-width 중앙정렬 컨테이너. 모든 섹션 __inner가 공유. */
.ph__inner,
.about__inner,
.sel-works__inner,
.solutions__inner,
.bizareas__inner,
.numbers__inner,
.latest__inner,
.cta__inner,
.sol-hub__inner,
.sol-pathfinder__inner,
.sol-venues__inner,
.sol-cat-section__inner,
.sol-catsum__inner,
.works-page__inner,
.art-related__inner,
.news-page__inner,
.contact-page__inner,
.co-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 1440px) {
    .ph__inner,
    .about__inner,
    .sel-works__inner,
    .solutions__inner,
    .bizareas__inner,
    .numbers__inner,
    .latest__inner,
    .cta__inner,
    .sol-hub__inner,
    .sol-pathfinder__inner,
    .sol-venues__inner,
    .sol-cat-section__inner,
    .sol-catsum__inner,
    .works-page__inner,
    .art-related__inner,
    .news-page__inner,
    .contact-page__inner,
    .co-inner {
        padding: 0 32px;
    }
}

@media (max-width: 640px) {
    .ph__inner,
    .about__inner,
    .sel-works__inner,
    .solutions__inner,
    .bizareas__inner,
    .numbers__inner,
    .latest__inner,
    .cta__inner,
    .sol-hub__inner,
    .sol-pathfinder__inner,
    .sol-venues__inner,
    .sol-cat-section__inner,
    .sol-catsum__inner,
    .works-page__inner,
    .art-related__inner,
    .news-page__inner,
    .contact-page__inner,
    .co-inner {
        padding: 0 20px;
    }
}

/* ── 2. Eyebrow Label ────────────────────────────────────────────────────── */
/* 섹션 타이틀 위 소형 대문자 컬러 라벨 */
.solutions__eyebrow,
.sol-hub__eyebrow,
.sol-pathfinder__eyebrow,
.sol-venues__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .solutions__eyebrow,
    .sol-hub__eyebrow,
    .sol-pathfinder__eyebrow,
    .sol-venues__eyebrow {
        margin-bottom: 0;
    }
}

/* ── 3. Section Head Layout ──────────────────────────────────────────────── */
/* eyebrow+타이틀 좌, 액션/네비 우 — flex row */
.solutions__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .solutions__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── 4. View All / More Links ────────────────────────────────────────────── */
.solutions__all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #2563EB;
    white-space: nowrap;
    background: none;
    border: none;
    text-decoration: none;
}

.solutions__all-link:hover {
    color: #1A4FC4;
}

/* ── 5. Filter Chips ─────────────────────────────────────────────────────── */
.sel-works__chip,
.works-page__chip {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    font-weight: 500;
    color: var(--color-text-muted);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.sel-works__chip:hover,
.works-page__chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sel-works__chip.active,
.works-page__chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ── 6. Category / Type Labels ───────────────────────────────────────────── */
.sel-works__cat,
.work-card__cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563EB;
}

.latest__cat {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* ── 7. Swiper Pagination ────────────────────────────────────────────────── */
.latest-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.latest-swiper-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    opacity: 1;
    background: var(--color-line);
    transition: background 0.2s;
}

.latest-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
}