/* KoreaGenie 리뉴얼 — About us (v2) 페이지 전용 CSS [P6-3]
   확정 시안 docs/design/about-v2.html.
   공통 클래스(.wrap/.card/.card-h/.chip)는 md3-components.css 재사용.
   토큰은 md3-tokens.css 사용. 미존재 클래스만 아래에 추출. */

/* page head (시안 agency.css 기준 추출) */
.page-head { padding: 24px 0 8px; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--md-primary);
    background: var(--md-primary-container);
    padding: 6px 12px;
    border-radius: var(--r-full);
    margin-bottom: 14px;
}
.eyebrow .material-symbols-rounded { font-size: 16px; }
.page-head h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.4px; }

/* mission copy */
.ab-mission {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.3px;
    max-width: 820px;
    margin: 8px 0 24px;
}
.ab-mission b { color: var(--md-primary); }

/* section heading */
.ab-h2 { font-size: 1.2rem; font-weight: 700; }

/* service grid */
.ab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 8px;
}
.ab-card {
    background: var(--md-surface-container);
    border-radius: var(--r-lg);
    padding: 22px;
}
.ab-card .ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ab-grid-top { margin-bottom: 8px; }
.ab-spacer { height: 40px; }
.ab-card h3 { font-size: 1.1rem; font-weight: 700; }
.ab-card p { font-size: .88rem; color: var(--md-on-surface-variant); margin-top: 4px; }

/* link card hover affordance */
a.ab-card { display: block; color: inherit; text-decoration: none; }

/* stats band */
.ab-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-radius: var(--r-xl);
    padding: 26px;
    margin: 24px 0;
}
.ab-stats .s { text-align: center; }
.ab-stats .num { font-size: 2rem; font-weight: 800; }
.ab-stats .lbl { font-size: .82rem; opacity: .85; }

/* company info list */
.info-list { display: flex; flex-direction: column; }
.info-row {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: .92rem;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { flex: 0 0 120px; color: var(--md-on-surface-variant); }
.info-row .v { flex: 1; font-weight: 500; }

@media (max-width: 820px) {
    .ab-grid { grid-template-columns: 1fr; }
    .ab-stats { grid-template-columns: repeat(2, 1fr); }
    .page-head h1 { font-size: 1.6rem; }
}
@media (max-width: 640px) {
    .ab-stats { grid-template-columns: repeat(2, 1fr); }
}