/* about.css - 태온 사업소개 페이지 전용 스타일
 *
 * 밴드·카드·패널·리빌 시스템은 it_solution.css 를 그대로 재사용한다.
 * (it_solution.css 는 이제 /it_solution 과 /about 이 함께 쓰는 공용 시스템이다)
 * 이 파일에는 사업소개에만 있는 것 - 히어로와 회사 정보 목록 - 만 둔다.
 *
 * 네임스페이스: 이 파일의 모든 선택자는 `.ab-` 또는 `body.page-about` 으로 시작한다.
 */

/* style.css 의 게이트 전용 body(overflow:hidden; height:100vh) 해제
 * 선례: plastic_solution.css 의 body.page-plastic, it_solution.css 의 body.page-it */
body.page-about {
    background-color: #FFFFFF;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* ============================================================
   히어로
   두 사업을 한 화면에 담는다. images/about_hero_bg.jpg 는 게이트의 IT 사진(왼쪽)과
   플라스틱 사진(오른쪽)을 부드럽게 교차시켜 탈채도·네이비 틴트를 입힌 합성본이다.
   원본은 1920x800 으로 만든 뒤 4x4 평균(박스 블러)으로 480x200 까지 줄였고,
   브라우저가 다시 확대하며 한 번 더 부드러워진다. 그래서 15KB 밖에 안 된다.

   텍스트는 왼쪽에만 오므로 스크림도 왼쪽만 진하게 준다.
   오른쪽은 열어 둬야 플라스틱 쪽 비주얼이 보인다.
   ============================================================ */
.ab-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(300px, 40vh, 440px);
    background-color: #143250;
    background-image:
        /* 흰 글자 대비는 이 값에서도 11:1 이상이다(필요치 4.5:1).
           더 어둡게 깔면 왼쪽 IT 비주얼이 통째로 묻혀 두 사업을 보여주는 의미가 없어진다. */
        linear-gradient(90deg,
            rgba(14, 37, 62, 0.76) 0%,
            rgba(14, 37, 62, 0.62) 34%,
            rgba(20, 50, 80, 0.34) 68%,
            rgba(20, 50, 80, 0.24) 100%),
        linear-gradient(180deg, rgba(10, 25, 40, 0.18), rgba(10, 25, 40, 0.32)),
        url('images/about_hero_bg.jpg');
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.ab-hero__inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 62px 20px;
}

.ab-hero__title {
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    word-break: keep-all;
    max-width: 620px;
}

.ab-hero__lead {
    margin-top: 24px;
    max-width: 700px;
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.85);
    word-break: keep-all;
}

.ab-hero__lead + .ab-hero__lead {
    margin-top: 14px;
}

/* ============================================================
   사업부 태그라인
   원고의 따옴표 문장. 사업부 제목 바로 아래에 인용처럼 놓는다.
   ============================================================ */
.ab-tagline {
    margin-bottom: 18px;
    padding-left: 14px;
    border-left: 3px solid #514D6F;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    color: #514D6F;
    word-break: keep-all;
}

/* 사업부 하단 링크 줄. 최종 CTA 만 채움 버튼으로 두고 여기는 조용한 텍스트 링크로 간다. */
.ab-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 4px;
}

/* ============================================================
   회사 정보
   ============================================================ */
.ab-info {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid #e2e8f0;
}

.ab-info__row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 15px 4px;
    border-bottom: 1px solid #e2e8f0;
}

.ab-info__row dt {
    flex: 0 0 130px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #514D6F;
}

.ab-info__row dd {
    flex: 1;
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.7;
    color: #334155;
    word-break: keep-all;
}

/* ============================================================
   반응형 (저장소 브레이크포인트: 1024 / 992 / 768 / 600)
   ============================================================ */
@media (max-width: 1024px) {
    .ab-hero__inner {
        padding: 56px 20px;
    }
}

/* ============================================================
   사업부 제목
   it_solution.css 의 .it-svc-item__title 은 원래 h3 용이다.
   /it_solution 에서는 위에 "태온이 제공하는 서비스" 라는 h2 가 감싸고 있어서 맞지만,
   /about 에서는 감싸는 h2 가 없어 이 제목이 곧 섹션 대제목이다.
   그대로 두면 두 사업부(1.8rem)가 아래 "회사 정보"(2.2rem)보다 작아진다.
   ============================================================ */
body.page-about .it-svc-item__title {
    font-size: 2.2rem;
}

@media (max-width: 768px) {
    .ab-hero__inner {
        padding: 46px 16px;
    }

    /* 모바일도 .it-section-head h2 와 같은 값으로 맞춘다 */
    body.page-about .it-svc-item__title {
        font-size: 1.7rem;
    }

    .ab-hero__lead {
        margin-top: 18px;
    }

    .ab-tagline {
        font-size: 1rem;
    }

    .ab-info__row {
        flex-direction: column;
        gap: 4px;
        padding: 13px 2px;
    }

    .ab-info__row dt {
        flex: none;
    }
}