/* ===== 회사 소개 페이지 (about.html) =====
   "소개 > 회사 소개". WHY 카드·비전 카드·CTA 는 style.css 의 랜딩 클래스를 그대로 쓴다. */
.about-hero {
    padding: 160px 0 80px;
    text-align: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--purple-deeper) 0%, var(--purple) 60%, #7B4FE0 100%);
}
.about-hero .eyebrow { color: var(--green); }
.about-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.about-hero-lead {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}

/* ── 회사 소개 본문 ── */
.section-intro { padding: 6rem 0 0; background: var(--white); scroll-margin-top: 90px; }
.intro-inner { max-width: 820px; }
.intro-body p {
    font-size: 1.0625rem;
    line-height: 1.95;
    color: var(--text-secondary);
    word-break: keep-all;
    margin-bottom: 1.25rem;
}
.intro-body p strong { color: var(--text); font-weight: 700; }
.intro-platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.intro-platform {
    padding: 1.5rem 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.intro-platform dt { font-size: 1.125rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.5rem; }
.intro-platform dt a { color: var(--purple); }
.intro-platform dt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.intro-platform dt small { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-tertiary); margin-top: 0.2rem; }
.intro-platform dd { font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); word-break: keep-all; }

/* ── 회사 개요 ── */
.section-overview { padding: 6rem 0; background: var(--white); scroll-margin-top: 90px; }
.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}
.overview-mission h3 {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D5DF88;
    margin-bottom: 1.25rem;
}
.overview-mission {
    padding: 2.25rem 2rem;
    background: var(--purple);
    color: var(--white);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}
.mission-en {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
}
.mission-en strong { color: var(--green); font-weight: 700; }
.mission-quote {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    word-break: keep-all;
}
.mission-desc {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    word-break: keep-all;
    margin-bottom: 1.5rem;
}
.mission-services { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mission-services a {
    padding: 0.4rem 0.875rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background 0.2s;
}
.mission-services a:hover { background: rgba(255, 255, 255, 0.24); color: var(--white); }

/* ── 신념 · 비전 (랜딩 클래스 재사용) — 앵커용 여백만 ── */
.section-why, .section-impact { scroll-margin-top: 90px; }

/* ── 우리가 일하는 방식 ── */
.section-way { padding: 5rem 0; background: var(--white); }
.way-quote {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.way-quote p {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--text);
    word-break: keep-all;
}
.way-quote small {
    display: block;
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── 서비스 한눈에 ── */
.section-about-svc { padding: 6rem 0; background: var(--bg); }
.about-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.about-svc {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.3s;
}
.about-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.about-svc-kind {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 0.75rem;
}
.about-svc h3 { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.25rem; }
.about-svc h3 small { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-tertiary); margin-top: 0.25rem; }
.about-svc p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary); word-break: keep-all; margin: 0.75rem 0 1.25rem; }
.about-svc .platform-btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1024px) {
    .about-hero h1 { font-size: 2.5rem; }
    .about-svc-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 1024px) {
    .intro-platforms { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .section-intro { padding-top: 4.5rem; }
    .intro-body p { font-size: 0.9375rem; }
    .about-hero { padding: 120px 0 60px; }
    .about-hero h1 { font-size: 2rem; }
    .about-hero-lead { font-size: 0.9375rem; }
    .section-overview, .section-about-svc { padding: 4.5rem 0; }
    .overview-grid { grid-template-columns: 1fr; gap: 1rem; }
    .overview-mission { padding: 1.75rem 1.5rem; }
    .mission-quote { font-size: 1.25rem; }
    .section-way { padding: 3.5rem 0; }
    .way-quote p { font-size: 1.125rem; }
}

.intro-platform dt a { text-decoration: underline; text-underline-offset: 3px; }
.mission-en strong { color: #D5DF88; }
.mission-en { color: rgba(255, 255, 255, 0.85); }