/* =============================================================================
 * 글로벌 스타일 — 영구크린 블로그 (mcyg-blog)
 *
 * 모든 색상·간격·라운드는 var(--*) 토큰만 사용한다. hex/px 직접 사용 금지.
 * tokens.css 를 의존하므로 단독 사용 불가.
 *
 * 섹션
 *   1) 리셋
 *   2) 타이포
 *   3) 컨테이너
 *   4) 사이트 헤더
 *   5) 사이트 풋터
 *   6) 버튼
 *   7) 유틸리티
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1) 리셋
 * -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    /* v4.0.0 — 영구크린 베이스 폰트 (PC 15px / Mobile 16px) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    letter-spacing: var(--ls-body-m);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all; /* 한글 줄바꿈 가독성 */
    overflow-wrap: break-word;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button {
    font-family: inherit;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

/* WP 코어 접근성: 화면 읽기 전용 텍스트 */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: fixed !important;
    top: var(--space-2);
    left: var(--space-2);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    z-index: var(--z-toast);
    clip: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
}


/* -----------------------------------------------------------------------------
 * 2) 타이포
 * -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    /* v4.0.0 — 영구크린 bold = 600 (이전 700) */
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
}

/* v4.0.0 — 영구크린 6계층 Head/SubHead 매트릭스
 * 각 사이즈마다 line-height·letter-spacing 이 다름 (균일 -0.02em 아님). */
h1 {
    font-size: var(--fs-head-xl);
    line-height: var(--lh-head-xl);
    letter-spacing: var(--ls-head-xl);
}
h2 {
    font-size: var(--fs-head-l);
    line-height: var(--lh-head-l);
    letter-spacing: var(--ls-head-l);
}
h3 {
    font-size: var(--fs-head-m);
    line-height: var(--lh-head-m);
    letter-spacing: var(--ls-head-m);
}
h4 {
    font-size: var(--fs-head-xs);
    line-height: var(--lh-head-xs);
    letter-spacing: var(--ls-head-xs);
}
h5 {
    font-size: var(--fs-subhead-l);
    line-height: var(--lh-subhead-l);
    letter-spacing: var(--ls-subhead-l);
}
h6 {
    font-size: var(--fs-subhead-m);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
}

p {
    margin: 0 0 var(--space-4);
}

small {
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    color: var(--color-text-soft);
}

code,
pre,
kbd,
samp {
    font-family: var(--font-family-mono);
    font-size: 0.95em;
}


/* -----------------------------------------------------------------------------
 * 3) 컨테이너
 *    .container          (1136) 본사 콘텐츠 폭 — 헤더·풋터·페이지 wrapper 통일
 *    .container--wide    (1136) alias (호출 일관성 유지)
 *    .container--prose   (760)  글 본문 가독 폭
 *    .container--mobile  (640)  모바일 wrapper (향후 폼·메뉴 등)
 *
 *    v3.0.0 — 본사와 동일한 1136px 로 통일 (이전 1200px). 헤더 GNB / 페이지 콘텐츠
 *    X 좌표 정렬 동기화. .container--narrow / --container-base 토큰은 사용처 0건으로 제거.
 * -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-pad); /* tokens.css 단일 진실 공급원 — 헤더·페이지·풋터 동기 */
}

.container--wide {
    max-width: var(--container-wide);
}

.container--prose {
    max-width: var(--container-prose);
}

.container--mobile {
    max-width: var(--container-mobile);
}


/* -----------------------------------------------------------------------------
 * 4) 사이트 헤더
 * -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sticky);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* v4.0.1 — height 고정 → padding 기반 자연 확장 (영구꿀팁 Figma 28+28) */
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.site-header__brand {
    display: flex;
    align-items: center;
    /* v4.0.1 — 로고 ~ 첫 GNB 메뉴 좌측 60px (Figma) */
    gap: var(--space-15);
    flex: 1 1 auto;
    min-width: 0;
}

.site-header__logo,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    /* v4.0.0 — Display/s (20 / bold) — 텍스트 폴백 로고 톤 */
    font-size: var(--fs-display-s);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display-s);
    letter-spacing: var(--ls-display-s);
    color: var(--color-primary);
    text-decoration: none;
}

.site-header__logo:hover,
.custom-logo-link:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

.custom-logo {
    max-height: 28px;   /* v3.1.5 — 헤더 높이 84px 대비 상대적으로 작아 보이도록 (이전 40px) */
    width: auto;
}

/* GNB */
.site-header__nav {
    display: none;
}

.site-header__menu {
    display: flex;
    list-style: none;
    /* v4.0.1 — 영구꿀팁 Figma 48px (이전 40px) */
    gap: var(--space-12);
    margin: 0;
    padding: 0;
}

.site-header__menu a {
    display: inline-block;
    padding: var(--space-2) 0;
    color: var(--color-text-muted);    /* v4.0.0 — 토큰화 (gray-700) */
    /* v4.1.8 — Label/xl 매트릭스 (15/1.4/-0.02em). v4.1.19 — weight medium(500) → regular(400). */
    font-size: var(--fs-label-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-xl);
    letter-spacing: var(--ls-label-xl);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a {
    color: var(--color-primary);
}

@media (min-width: 900px) {
    .site-header__nav {
        display: block;
    }
}

/* CTA — 친절상담 + 1566-0924 + 햄버거 (영구꿀팁 톤) */
.header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.header-cta__phone {
    display: none;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-text-muted);   /* v4.0.0 — 토큰화 (gray-700) */
    letter-spacing: var(--ls-label-xl);
    text-decoration: none;
}

.header-cta__phone:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.header-cta__phone-label {
    /* v4.1.15 — 본사 .call-center 톤 정합. v4.1.19 — weight medium(500) → regular(400). */
    font-size: var(--fs-label-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-xl);
    letter-spacing: var(--ls-label-xl);
    color: var(--color-text-muted);
}

.header-cta__phone-num {
    /* v4.0.0 — Label/xl (15). v4.1.19 — weight bold(600) → medium(500). */
    font-size: var(--fs-label-xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-xl);
}

.header-cta__phone:hover .header-cta__phone-label {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .header-cta__phone {
        display: inline-flex;
    }
}

/* 햄버거 메뉴 토글 — 데스크톱·모바일 공통 노출 */
.header-cta__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-default);
}

.header-cta__menu-toggle:hover {
    background-color: var(--color-bg-soft);
}

.header-cta__menu-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.header-cta__menu-bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-text-strong);
    border-radius: 1px;
    transition: transform var(--transition-fast) var(--ease-default);
}


/* -----------------------------------------------------------------------------
 * 5) 사이트 풋터 — 영구꿀팁(본사 블로그) 톤 정밀 보정 (v3.1.1)
 *    구조:
 *      .site-footer__grid     : 2컬럼 (좌: .footer-cs / 우: .footer-aside)
 *        .footer-aside        : .footer-company-card + .footer-menus(회사 / 파트너모집)
 *      .site-footer__business : 사업자정보 토글 + 빠른 링크 + 안내문 + SNS(브랜드 컬러 원형)
 *      .site-footer__bottom   : 카피라이트 (v4.1.5 — NICE A0 배지 임시 제거,
 *                                              본사 이미지 자산 수신 시 복원)
 *
 *    v3.1.0 의 .site-footer__trust / .trust-badges / .trust-badge 블록은 제거됨
 *    (본사 이미지 자산 미수신, 텍스트 placeholder 시각 무게 빈약).
 * -------------------------------------------------------------------------- */

.site-footer {
    margin-top: var(--space-20);
    padding: var(--space-12) 0 var(--space-10);
    background-color: var(--color-bg-footer);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* ----- 1) 그리드 영역 (cs + aside) ----- */

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1fr auto;
        gap: var(--space-12);
        align-items: start;
    }
}

.footer__heading {
    /* v4.0.0 — SubHead/m (17 / bold) */
    font-size: var(--fs-subhead-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-4);
}

.footer__heading-arrow {
    color: var(--color-text-soft);
    margin-left: var(--space-1);
}

/* 고객센터 */
.footer-cs__phone {
    display: inline-block;
    /* v4.0.0 — Head/xl (28 / bold) — 영구크린 풋터 폰 톤 */
    font-size: var(--fs-head-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-xl);
    letter-spacing: var(--ls-head-xl);
    color: var(--color-text-strong);
    margin-bottom: var(--space-2);
    text-decoration: none;
}

.footer-cs__phone:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-cs__hours {
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    letter-spacing: var(--ls-caption-l);
    color: var(--color-text-soft);
    margin: 0;
}

/* ----- 회사소개 카드 + 회사/파트너 메뉴 (우측 그룹) ----- */

/* .footer-aside — 240px 고정 폭으로 카드·메뉴 그룹을 통일.
 * 데스크톱(.site-footer__grid 의 auto 컬럼) 에서 240px 로 고정,
 * 모바일 미디어 쿼리에서 100% 로 풀어 화면을 넘지 않게 한다. */
.footer-aside {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

@media (max-width: 767.98px) {
    .footer-aside {
        width: 100%;
    }
}

/* 컴팩트 회사소개 카드 — 부모(.footer-aside 240px) 폭을 100% 상속.
 * 아이콘 + 라벨을 가로·세로 모두 가운데 정렬. */
.footer-company-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 60px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition:
        border-color var(--transition-fast) var(--ease-default),
        color var(--transition-fast) var(--ease-default),
        box-shadow var(--transition-fast) var(--ease-default);
}

.footer-company-card:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}

/* 아이콘 컬러 — 흰 카드 위에서 명확히 인지되도록 gray-300 톤 */
.footer-company-card__icon {
    display: inline-flex;
    color: var(--color-gray-300);
    transition: color var(--transition-fast) var(--ease-default);
}

.footer-company-card__label {
    /* v4.0.0 — Label/xxl (16 / bold) */
    font-size: var(--fs-label-xxl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-label-xxl);
    letter-spacing: var(--ls-label-xxl);
}

/* 회사 + 파트너모집 2-컬럼 미니 메뉴
 * grid 1fr 1fr 로 폭을 균등 배분 — .footer-aside 240px 안에서
 * 두 컬럼이 시각적으로 균형있게 자리잡도록. gap 은 space-10 으로 여유 확보. */
.footer-menus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    width: 100%;
}

.footer-menu__heading {
    /* v4.0.0 — Label/l (14 / bold) */
    font-size: var(--fs-label-l);
    font-weight: var(--fw-bold);
    line-height: var(--lh-label-l);
    letter-spacing: var(--ls-label-l);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-3);
}

.footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-menu ul a {
    /* v4.0.0 — Body/s (14 / regular) */
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

.footer-menu ul a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ----- 2) 사업자정보 영역 ----- */

.site-footer__business {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.footer-brand__name {
    /* v4.0.0 — Body/l (16 / bold) */
    font-size: var(--fs-body-l);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body-l);
    letter-spacing: var(--ls-body-l);
    color: var(--color-text-strong);
}

.footer-brand__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-soft);
    font-family: inherit;
    /* v4.0.0 — Body/s (14) */
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    cursor: pointer;
    transition: color var(--transition-fast) var(--ease-default);
}

.footer-brand__toggle:hover,
.footer-brand__toggle:focus-visible {
    color: var(--color-primary);
}

.footer-brand__toggle-arrow {
    font-size: 10px;
    transition: transform var(--transition-fast) var(--ease-default);
}

.footer-brand__toggle[aria-expanded="true"] .footer-brand__toggle-arrow {
    transform: rotate(180deg);
}

.footer-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    /* v4.0.0 — Body/s (14) */
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
}

.footer-quick-links a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

.footer-quick-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-quick-links__primary {
    color: var(--color-text-strong) !important;
    font-weight: var(--font-weight-semibold);
}

.footer-bizinfo {
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    letter-spacing: var(--ls-caption-l);
    color: var(--color-text-soft);
}

.footer-bizinfo__row {
    margin: 0 0 var(--space-1);
}

.footer-bizinfo__row--muted {
    color: var(--color-text-light);
}

.footer-notice {
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    letter-spacing: var(--ls-caption-l);
    color: var(--color-text-soft);
}

.footer-notice p {
    margin: 0 0 var(--space-1);
}

/* SNS 5종 — 브랜드 컬러 원형 SVG (helper 가 컬러 처리, CSS 는 사이즈/간격만) */
.footer-sns {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.footer-sns__link {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    transition: transform var(--transition-fast) var(--ease-default),
                opacity var(--transition-fast) var(--ease-default);
}

.footer-sns__link:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.footer-sns__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.footer-sns__link svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ----- 3) bottom 영역 (카피라이트) -----
   v4.1.5 — NICE A0 배지(.footer-nice*) 임시 제거. 본사 이미지 자산 수신 시 복원.
   flex space-between 레이아웃은 유지 — 자식이 한 개여도 카피라이트가 좌측 정렬되어
   자연스럽고, 배지 복원 시 우측 자동 정렬됨. */

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-copyright {
    margin: 0;
    /* v4.0.0 — Caption/m (12) */
    font-size: var(--fs-caption-m);
    line-height: var(--lh-caption-m);
    letter-spacing: var(--ls-caption-m);
    color: var(--color-text-light);
}


/* -----------------------------------------------------------------------------
 * 6) 버튼
 *    .btn               베이스
 *    .btn--primary      Primary CTA
 *    .btn--ghost        Outline
 *    .btn--md / --lg    사이즈
 * -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-base);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default),
        color var(--transition-fast) var(--ease-default),
        box-shadow var(--transition-fast) var(--ease-default);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variants */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.btn--primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--ghost:hover {
    background-color: var(--color-bg-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

/* Sizes — 본사 매트릭스 (44 / 52 / 64) */
.btn--sm {
    padding: 0 var(--space-4);
    font-size: var(--btn-fs-sm);
    min-height: var(--btn-height-sm);
}

.btn--md {
    padding: 0 var(--space-5);
    font-size: var(--btn-fs-md);
    min-height: var(--btn-height-md);
}

.btn--lg {
    padding: 0 var(--space-6);
    font-size: var(--btn-fs-lg);
    min-height: var(--btn-height-lg);
}

.btn--xlg {
    padding: 0 var(--space-8);
    font-size: var(--btn-fs-xlg);
    font-weight: var(--font-weight-bold);
    min-height: var(--btn-height-xlg);
    border-radius: var(--radius-lg);
}


/* -----------------------------------------------------------------------------
 * 7) 유틸리티
 * -------------------------------------------------------------------------- */

.u-text-muted    { color: var(--color-text-muted); }
.u-text-strong   { color: var(--color-text-strong); }
.u-text-center   { text-align: center; }
.u-text-right    { text-align: right; }
.u-bg-soft       { background-color: var(--color-bg-soft); }
.u-mt-4          { margin-top: var(--space-4); }
.u-mt-6          { margin-top: var(--space-6); }
.u-mt-8          { margin-top: var(--space-8); }
.u-mb-4          { margin-bottom: var(--space-4); }
.u-mb-6          { margin-bottom: var(--space-6); }
.u-mb-8          { margin-bottom: var(--space-8); }
.u-flex          { display: flex; }
.u-flex-center   { display: flex; align-items: center; justify-content: center; }
.u-gap-2         { gap: var(--space-2); }
.u-gap-4         { gap: var(--space-4); }
.u-hidden        { display: none !important; }

@media (min-width: 768px) {
    .u-hidden-md-up { display: none !important; }
}

@media (max-width: 767.98px) {
    .u-hidden-mobile { display: none !important; }
}