/* =========================================================
   about.css — 브랜드 소개 페이지 전용 스타일 (TASK-406)
   - 기존 about.html <head> 인라인 <style> 규칙을 그대로 이관.
   - CSS 변수(--stiz-black 등)는 css/style.css @import에서 정의되므로
     이 파일은 반드시 style.css 뒤에 로드한다.
   ========================================================= */

/* 다크 히어로: 배경 이미지 + 어두운 그라디언트 오버레이 */
.about-hero {
    position: relative;
    overflow: hidden;
    background: var(--stiz-black);
    color: var(--stiz-white);
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 17, 17, .18), rgba(17, 17, 17, .94)),
        url("../../images/hero_bg.jpg") center / cover;
    /* webp 우선(용량 -54%): image-set 지원 브라우저만 적용, 미지원 시 위 jpg 유지 */
    background-image:
        linear-gradient(180deg, rgba(17, 17, 17, .18), rgba(17, 17, 17, .94)),
        image-set(url("../../images/hero_bg.webp") type("image/webp"), url("../../images/hero_bg.jpg") type("image/jpeg"));
    opacity: .72;
}

/* 스토리 미디어: 4:3 비율 고정 + 이미지 커버 */
.about-story-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.about-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 통계 스트립: 모바일 2열 → 데스크탑 4열, 1px 선으로 셀 구분 */
.about-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--border);
    gap: 1px;
}

@media (min-width: 768px) {
    .about-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.about-stat {
    background: var(--stiz-black);
    color: var(--stiz-white);
    padding: 28px 18px;
    text-align: center;
}

/* benefit 카드(품질/시안/납기/A/S) 그리드
   - Tailwind md:grid-cols-4는 빌드CSS 미포함(E-26)이라 순수 CSS로 정의.
   - 모바일 1열 → 640px 2열 → 1024px 4열 */
.about-value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .about-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .about-value-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.about-value-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--stiz-white);
    padding: 28px;
}

/* 회사정보 테이블: 행 구분선 + 라벨 열 고정폭 */
.about-info-table tr {
    border-bottom: 1px solid var(--border);
}

.about-info-table tr:last-child {
    border-bottom: 0;
}

.about-info-table td {
    padding: 14px 0;
    vertical-align: top;
    font-size: 14px;
}

.about-info-table td:first-child {
    width: 112px;
    color: var(--gray-500);
    font-weight: 800;
}

/* 연혁 (stiz.kr 회사소개 13건) — 연도 띠 + 썸네일 + 이름·기간. 모바일은 한 줄로 접힘 */
.about-history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.about-history-item { border-bottom: 1px solid var(--border); }
.about-history-link { display: grid; grid-template-columns: 72px 96px 1fr; gap: 18px; align-items: center; padding: 14px 0; text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease-standard); }
.about-history-link:hover { background: var(--surface-muted); }
.about-history-year { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--stiz-black); }
.about-history-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--surface-muted); }
.about-history-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.about-history-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.about-history-period { font-size: 12px; font-weight: 700; color: var(--text-muted); }
@media (max-width: 640px) {
    .about-history-link { grid-template-columns: 56px 1fr; }
    .about-history-thumb { display: none; }
    .about-history-year { font-size: 16px; }
}

/* 스토리 사진 캡션 (실제 후원 구단 사진 출처 표기) */
.about-story-caption { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
