/* ===========================================================================
   장비소개 (/about/equipment) 전용 스타일
   공통(헤더/퀵메뉴/둘러보기/푸터/.eyebrow/.mark/토큰)은 main.css 에 있다.
   =========================================================================== */

/* 시안: 섹션 3045px, 타이틀 top 153 / 설명 316 / 카드 그리드 452 */
.equipment {
    padding: 153px 0 225px;
    background: url('/static/images/equipment/bg.webp') no-repeat center top / cover;
    color: #fff;
}

.equipment__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.equipment__title {
    font-size: 55px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.1px;
}

.equipment__lead {
    margin-top: 39px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.9px;
}

/* 570 + 30 + 570 = 1170. 시안 행 간격은 29 였으나 열 간격(30)에 맞춰 통일 */
.equipment__list {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* 카드 -----------------------------------------------------------------------
   내려받은 이미지는 사진 영역(위 363px, #f6f6f6)과 흰 본문 영역을 모두 포함한다.
   사진 영역만 잘라 쓰고 본문은 흐름으로 흘려야 글이 길어져도 카드가 안 깨진다.
   ---------------------------------------------------------------------------- */
.equip-card {
    min-height: 770px;
    border-radius: 30px;
    overflow: hidden;
    background-color: #fff;
}

.equip-card__visual {
    aspect-ratio: 570 / 363;
    overflow: hidden;
    background-color: #f6f6f6;
}

.equip-card__visual img {
    display: block;
    width: 100%;
    height: auto;
}

.equip-card__body {
    padding: 71px 69px 60px;
}

.equip-card__title {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 33px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.9px;
    color: #553b26;
}

/* 형광펜은 아이콘을 뺀 이름에만 걸린다 (시안 left 108 = 아이콘 33 + 여백 6).
   공통 .mark 는 22px 본문용 19px 이라 33px 제목에 맞춰 15px 로 덮는다. */
.equip-card__title .mark {
    background: linear-gradient(to top, var(--c-cream) 15px, transparent 15px);
}

/* 시안은 nowrap 이라 줄바꿈이 <br> 위치에서만 일어난다.
   컨테이너 폭에 맡기면 designed 줄바꿈이 깨진다.
   가장 긴 줄이 카드 폭(570) 안에 들어가므로 padding 을 넘겨도 잘리지 않는다. */
.equip-card__desc {
    margin-top: 30px;
    white-space: nowrap;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #535353;
}

.equip-card__desc p + p {
    margin-top: 32px;
}

.equip-card__desc .is-strong {
    font-weight: 500;
    color: #000;
}

/* 반응형 — 모바일 시안이 없어 PC 시안을 축소 해석한 값이다 --------------------- */
/* 컨테이너가 1170 고정에서 풀리는 지점부터 카드가 좁아진다.
   여기서부터 nowrap 을 풀고 글자를 줄여야 카드 밖으로 잘리지 않는다. */
@media (max-width: 1230px) {
    .equipment {
        padding: 90px 0 100px;
    }

    .equipment__title {
        font-size: 40px;
    }

    .equipment__list {
        margin-top: 50px;
    }

    .equip-card {
        min-height: 0;
    }

    .equip-card__body {
        padding: 50px 45px 45px;
    }

    .equip-card__title {
        font-size: 28px;
    }

    .equip-card__desc {
        white-space: normal;
        font-size: 20px;
    }
}

/* 1열로 바뀌면 카드가 화면 폭을 다 쓰므로 사진 영역이 과하게 커진다.
   밴드를 낮춰 잘라내되, 잘린 만큼의 절반을 위로 당겨 장비가 가운데 오게 한다.
   (사진 영역 363/570 = 63.7%, 목표 260/570 = 45.6%, 차이의 절반 = 9%) */
@media (max-width: 900px) {
    .equipment__list {
        grid-template-columns: 1fr;
    }

    .equip-card__visual {
        aspect-ratio: 570 / 260;
    }

    .equip-card__visual img {
        margin-top: -9%;
    }
}

@media (max-width: 768px) {
    .equipment {
        padding: 60px 0 70px;
    }

    .equipment__head {
        gap: 14px;
    }

    .equipment__title {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .equipment__lead {
        margin-top: 20px;
        font-size: 16px;
        letter-spacing: -0.5px;
    }

    .equipment__list {
        margin-top: 35px;
        gap: 20px;
    }

    .equip-card {
        border-radius: 20px;
    }

    .equip-card__body {
        padding: 30px 24px 28px;
    }

    .equip-card__title {
        font-size: 20px;
        gap: 5px;
        letter-spacing: -0.5px;
    }

    .equip-card__title .mark {
        background: linear-gradient(to top, var(--c-cream) 9px, transparent 9px);
    }

    .equip-card__desc {
        margin-top: 16px;
        font-size: 15px;
        letter-spacing: -0.5px;
    }

    .equip-card__desc p + p {
        margin-top: 20px;
    }
}