@charset "utf-8";

@layer pages {
    .section-home-hero {
        background: #000;
        .hero-video {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }
    }
    .section-project-stats {
        padding-block: var(--space-section-block-3);
        text-align: center;
        color: var(--color-white);
        background: #5e9bcd url("/assets/images/home/project-stats-bg.webp") no-repeat 50% / cover;
        * {
            font-family: var(--font-family-gmarket);
            color: inherit;
        }
        .list {
            display: grid;
            gap: var(--space-4) var(--grid-gap);
            margin-top: var(--space-heading-content);
            @media (width >= 1280px) {
                grid-template-columns: repeat(4, 1fr);
            }
            @media (width < 1280px) {
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 220rem), 1fr));
            }
        }
        .value {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: var(--space-2);
            font-size: var(--font-size-body-1);
            @media (width >= 1280px) {
                margin-bottom: 46rem;
            }
        }
        .number {
            font-weight: var(--font-weight-700);
            font-size: var(--font-size-display-1);
            font-family: var(--font-family-pretendard);
        }
        .label {
            display: block;
            font-weight: var(--font-weight-700);
            font-size: var(--font-size-body-1);
        }
        .desc {
            display: block;
            margin-top: var(--space-1);
            font-size: var(--font-size-body-2);
        }
    }
    .section-company-intro {
        padding-block: var(--space-section-block-3);
        text-align: center;
        background: #ececec url("/assets/images/home/company-intro-bg.webp") no-repeat 50% / cover;
        .desc {
            margin-top: 44rem;
            font-size: var(--font-size-body-1);
            line-height: 1.75;
        }
        .links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--grid-gap);
            margin-top: var(--space-heading-content);
            @media (width >= 1280px) {
                --grid-gap: 32rem;
            }
        }
        .link {
            display: flex;
            justify-content: center;
            gap: 1.11111111em;
            width: 100%;
            max-width: 240rem;
            padding: 14rem;
            font-weight: var(--font-weight-600);
            font-size: var(--font-size-body-2);
            text-decoration: none;
            background: var(--color-white);
            border: var(--border-width-1) solid var(--color-primary-base);
            border-radius: var(--radius-4);
            &.-primary {
                color: var(--color-white);
                background: var(--color-primary-base);
                border-color: #0000;
            }
            &.-arrow-right::after {
                display: block;
                width: 16rem;
                aspect-ratio: 16 / 15;
                background: url("/assets/images/icon/arrow-right-white.svg") no-repeat 50% / contain;
                content: "";
            }
        }
    }
    .section-cases {
        padding-block: var(--space-section-block-2);
        hgroup {
            text-align: center;
        }
        .a-subheading {
            max-width: 46ch;
            margin-inline: auto;
            text-wrap: balance;
        }
        .cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--grid-gap);
            margin-top: var(--space-heading-content);
            @media (width >= 1280px) {
                --grid-gap: 40rem;
            }
        }
        .item {
            flex: 0 1 340rem;
        }
        .card {
            display: block;
            padding: var(--_padding);
            text-decoration: none;
            border: var(--border-width-1) solid #0000001f;
            border-radius: 24rem;
            @media (width >= 1280px) {
                --_padding: 48rem 50rem 43rem;
            }
            @media (width < 1280px) {
                --_padding: 32rem 24rem 28rem;
            }
        }
        .meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1) var(--space-2);
            align-items: center;
            justify-content: space-between;
        }
        .badge {
            padding: 3rem 10rem;
            font: var(--font-body-4-bold);
            color: var(--color-white);
            text-box-trim: trim-both;
            background: var(--color-secondary-base);
            border-radius: var(--radius-2);
        }
        .client {
            font: var(--font-body-3-bold);
            color: var(--color-primary-base);
        }
        .title {
            margin-top: 20rem;
            font: var(--font-heading-3);
            font-family: var(--font-family-gmarket);
            text-wrap: balance;
            color: var(--color-neutral-800);
        }
        .specs {
            display: grid;
            gap: 9rem;
            margin-top: 18rem;
        }
        .spec {
            display: grid;
            gap: var(--space-1) 30rem;
            @media (width >= 360px) {
                grid-template-columns: auto 1fr;
            }
        }
        .label {
            font-weight: var(--font-weight-500);
            color: var(--color-neutral-400);
        }
        .value {
            font-weight: var(--font-weight-700);
            color: var(--color-neutral-500);
        }
        .cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: var(--_margin-top);
            padding-top: 28rem;
            font-weight: var(--font-weight-700);
            font-family: var(--font-family-gmarket);
            color: var(--color-primary-base);
            border-top: var(--border-width-1) solid #0e3a6352;
            @media (width >= 1280px) {
                --_margin-top: 84rem;
            }
            @media (width < 1280px) {
                --_margin-top: var(--space-6);
            }
            &::after {
                display: block;
                width: 13rem;
                aspect-ratio: 1;
                background: url("/assets/images/icon/arrow-top-right-primary.svg") no-repeat 50% / contain;
                translate: 18% -18%;
                content: "";
            }
        }
    }
    .logo-list {
        row-gap: var(--space-4);
        padding-block: 32rem;
        @media (width >= 768px) {
            display: flex;
            flex-wrap: wrap;
            column-gap: 100rem;
        }
        @media (width < 768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: var(--grid-gap);
        }
        .logo {
            display: block;
            width: auto;
            max-width: 100%;
            height: auto;
        }
    }
}