/*
 * 소개 화면 전용 배치.
 * 정본 시안: Figma 8qAqeXw50F8GKDGkeW0Pua node 1637:3011 (2026-08-12 최초 반영),
 * 2026-09-11 QA10 재실측으로 node 4011:100638(Light)/4011:100853(Dark)에 맞춰 하이라이트
 * 블록·주요서비스 카드·섹션 헤더 아이콘을 갱신(아래 각 규칙 블록 주석 참고). PC 전용 QA라
 * 반응형 규칙은 기존 브레이크포인트 안에서만 새로 추가했다.
 * 재사용 컴포넌트(.page-hero, .section-header)는 css/theme/components.css 에 있다.
 * 색상은 hex 대신 --mili-* 토큰만 참조한다(대응 토큰이 없는 반투명값만 리터럴 — 각 규칙 옆 주석 참고).
 *
 * 시안 색 → 토큰 대응(전부 1:1, 2026-08-12 최초 반영분):
 *     #0E1013 카드 배경  → --mili-bg     (이용안내 카드는 페이지 배경과 같은 색 + 테두리)
 *     #15181C 인트로 배경 → --mili-surface (구 .about-intro, 2026-09-11 .about-highlight 로 대체됨)
 *     #2B3036 테두리      → --mili-line
 *     #F8F9FA / #ADB5BD / #868E96 글자 → --mili-ink / --mili-body / --mili-muted
 *     #B4FF39 링크·번호   → --mili-brand (번호 배지 글자는 --mili-brand-on)
 *
 * 2026-08-13 QA23 재지적 — 공용 .page-hero__lead 의 max-width:44rem 이 이 화면 소개글(2문장)을
 * 데스크톱 폭에서도 두 줄로 꺾이게 했다. 공용 컴포넌트는 다른 화면(검색 결과 없음 안내 등)에서
 * 의도적으로 좁게 쓰므로 값을 바꾸지 않고, 이 화면(.about-page)에서만 폭 제한을 푼다.
 *
 * 시안은 데스크톱(1920) 한 폭뿐이라 좁은 폭 흘림은 우리 판단이다 —
 * 열 수만 공용 브레이크포인트(≥1280 / 1024–1279 / 768–1023 / ≤767)에 맞춰 떨어뜨린다.
 */

/* QA23(2026-08-13): 소개글 두 줄 꺾임 — 원인은 .page-hero__lead 공용 max-width(44rem). 이 화면만 푼다. */
.about-page .page-hero__lead {
    max-width: none;
}

/* ===== AI를 처음 시작하는 사람도… 하이라이트(2단) =====
   2026-09-11 QA10(node 4011:100638/100853) — 옛 .about-intro 단일 카드를 대체한다.
   좌측 로고 박스 배경은 대응 토큰이 없는 반투명값이라 리터럴로 남긴다(다크 rgba(255,255,255,.1)는
   about-feature__icon 옛 배지 배경과 같은 패턴으로 이 파일 상단 주석에 이미 선례가 있던 값이고,
   라이트 rgba(175,229,126,.2)는 Primary/500 라이트(#afe57e)를 20% 얹은 시안 실측값이다). */
.about-highlight {
    display: flex;
    align-items: center;
    gap: var(--mili-space-8);
    margin-bottom: var(--mili-section-gap);
}

.about-highlight__media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40%;
    max-width: 587px;
    aspect-ratio: 587 / 360;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--mili-radius-card);
}

.mili-light .about-highlight__media {
    background: rgba(175, 229, 126, 0.2);
}

.about-highlight__logo {
    width: 45%;
    max-width: 254px;
    height: auto;
}

.about-highlight__body {
    flex: 1 1 0;
    min-width: 0;
}

.about-highlight__title {
    margin: 0;
    color: var(--mili-ink);
    font-size: var(--mili-font-size-t9);
    font-weight: var(--mili-font-weight-bold);
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.about-highlight__desc {
    margin: var(--mili-space-6) 0 0;
    color: var(--mili-ink);
    font-size: var(--mili-body-b2-size);
    font-weight: var(--mili-font-weight-medium);
    line-height: 1.6;
}

/* ===== 섹션 헤더 아이콘(주요서비스·이용 안내) =====
   공용 .section-header/.section-header__title(theme/components.css, 다른 화면과 공유)는
   그대로 두고, 이 화면에만 아이콘 슬롯과 시안 실측 굵기(SemiBold 600 — 공용 규칙은 800)를 얹는다. */
.about-section-header__title {
    display: flex;
    align-items: center;
    gap: var(--mili-space-2);
    font-weight: 600;
}

.about-section-header__icon {
    display: inline-flex;
    color: var(--mili-ink);
}

/* ===== 주요서비스 4열 =====
   2026-09-11 QA10 재실측 — 아이콘 배지(32px, 회색 배경)를 없애고 50px 아이콘을 직접 노출,
   카드 배경을 반투명(장식용 도트 배경이 옅게 비치도록)으로 바꿨다. 반투명 배경은 about-highlight
   와 같은 이유로 대응 토큰이 없어 리터럴이다(home.css .home-card--profile 라이트 rgba(255,255,255,.5)
   선례와 같은 패턴). 아이콘 색은 Primary/700 var(--mili-primary-700) — 다크 실측(#70AA0D)과 정확히
   일치, 라이트는 라이트 스텝(#73AC43)으로 근사한다(같은 토큰을 쓰는 home.css 진행률 선례, "primitives
   표기와 다크/라이트가 서로 다른 스텝이라 우연히 다크값과 같다"는 코멘트 그대로 적용). */
.about-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mili-space-3);
    margin-bottom: var(--mili-section-gap);
}

.about-feature {
    display: flex;
    flex-direction: column;
    gap: 60px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--mili-line);
    border-radius: var(--mili-radius-card);
    padding: 30px;
}

.mili-light .about-feature {
    background: rgba(255, 255, 255, 0.5);
}

.about-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--mili-primary-700);
}

.about-feature__title {
    margin: 0 0 var(--mili-space-3);
    color: var(--mili-ink);
    font-size: var(--mili-font-size-t6);
    font-weight: 600;
    line-height: 1.4;
}

.about-feature__desc {
    flex: 1 1 auto;
    margin: 0;
    color: var(--mili-body);
    font-size: var(--mili-body-b2-size);
    line-height: 1.6;
}

/* 2026-09-11 QA10 재실측(node 4011:100671 등) — 버튼이 다시 초록 아웃라인으로 바뀌었다
   (2026-08-27엔 Neutral 아웃라인이 정본이었으나 이번 시안은 흰 배경 + Primary/700 테두리 +
   Primary/500(다크)·Primary/600(라이트) 글자다). 카탈로그 .btn.small.outline
   (theme/figma-classes.css, 기존 .btn-outline-primary 계승)이 이미 이 값 그대로라 재정의하지
   않는다. */
.about-feature__cta {
    /* .about-feature 가 flex column 이라 기본 align-items:stretch 로는 버튼이 카드 폭
       전체로 늘어난다 — 시안은 글자 폭에 붙는 hug 이라 시작점에 정렬한다. */
    align-self: flex-start;
}

/* ===== 이용 안내 3열 ===== */

.about-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mili-space-3);
    margin-bottom: var(--mili-space-5);
}

.about-step {
    background: var(--mili-bg);
    border: 1px solid var(--mili-line);
    border-radius: var(--mili-radius-card);
    padding: 36px;
}

.about-step__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: var(--mili-space-3);
    border-radius: var(--mili-radius-pill);
    background: var(--mili-brand);
    color: var(--mili-brand-on);
    font-size: var(--mili-body-b2-size);
    font-weight: var(--mili-font-weight-bold);
}

.about-step__title {
    margin: 0 0 var(--mili-space-2);
    color: var(--mili-ink);
    font-size: var(--mili-body-b1-size);
    font-weight: 600;
    line-height: 1.4;
}

.about-step__desc {
    margin: 0;
    color: var(--mili-muted);
    font-size: var(--mili-body-b2-size);
    line-height: 1.6;
}

/* ===== 문의 ===== */

.about-contact {
    border-top: 1px solid var(--mili-line);
    padding-top: var(--mili-space-6);
}

.about-contact__title {
    margin: 0;
    color: var(--mili-ink);
    font-size: var(--mili-body-b2-size);
    font-weight: var(--mili-font-weight-medium);
    line-height: 1.2;
}

.about-contact__text {
    margin: var(--mili-space-2) 0 0;
    color: var(--mili-muted);
    font-size: var(--mili-body-b3-size);
    line-height: var(--mili-line-height-t4);
}

/* ⚠️ 2026-09-14 QA(node 3736:236449 "공통" 카드, "[서비스 소개] 링크 수정" — about.jsp 자체의
   "문의" 문단 FAQ/Q&A 링크를 가리킨다) — 기본 상태 밑줄을 없애고, 호버 색을 Primary/500·
   Primary/Text(현재 기본색과 동일 계열) → Primary/200(다크)·Primary/700(라이트)로 바꾼다. */
.about-contact__text a {
    color: var(--mili-brand);
    text-decoration: none;
}

.about-contact__text a:hover,
.about-contact__text a:focus-visible {
    text-decoration: none;
    color: var(--mili-primary-200);
}

.mili-light .about-contact__text a:hover,
.mili-light .about-contact__text a:focus-visible {
    color: var(--mili-primary-700);
}

/* ===== 좁은 폭 =====
   공용 계층의 네 구간을 그대로 쓴다(새 경계를 만들지 않는다).
   1024–1279 에서 4열을 유지하면 사이드바(240px)를 빼고 카드가 190px 대로 줄어
   시안의 288px 대비 절반이 되므로 2열로 떨어뜨린다. */

@media (max-width: 1279px) {
    .about-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .about-steps {
        grid-template-columns: 1fr;
    }

    /* 시안은 데스크톱 1200px 한 폭뿐이라 좁은 폭 흘림은 우리 판단이다 — 2단 히어로를
       세로 스택으로 떨어뜨린다(사이드바를 뺀 실폭에서 좌측 로고 박스가 40% 고정폭이면
       너무 좁아진다). */
    .about-highlight {
        flex-direction: column;
        align-items: stretch;
    }

    .about-highlight__media {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .about-features {
        grid-template-columns: 1fr;
    }

    .about-feature,
    .about-step {
        padding: var(--mili-space-5);
    }
}