/* =========================================================
 * about.css v3.0 — 늘봄창의교육 조합 소개 (5-Section 슬림판)
 * 기준: style.css의 design token만 사용 (--color-*, --radius-*, --elevation-2)
 * 2026-07-11 재작성 — Hero / 하는 일 / 교육 프로그램 / 소셜미션 / 문의
 * ========================================================= */

/* ---------- 0. 공통 유틸리티 ---------- */
.text-spring-gradient {
    background: linear-gradient(135deg, #16a34a 0%, #f59e0b 55%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-title {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.section-title h2 {
    font-size: 2.125rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-top: 0.5rem;
}

.section-sub {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 1rem;
}

.section-sub strong {
    color: var(--color-text);
    font-weight: 700;
}

.section-badge {
    display: inline-block;
    background: var(--color-primary-soft);
    color: var(--color-primary-pressed);
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ============================================================
   Section 1 — Hero
   ============================================================ */
.about-hero {
    padding: 6rem 0 3rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #fef9f0 50%, #fff7f0 100%);
    position: relative;
    overflow: hidden;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.spring-petal {
    position: absolute;
    font-size: 2.25rem;
    opacity: 0.32;
    animation: float-petal 8s ease-in-out infinite;
}

.petal-1 { top: 10%; left: 5%; animation-delay: 0s; }
.petal-2 { top: 18%; right: 8%; animation-delay: 1.5s; font-size: 1.875rem; }
.petal-3 { top: 58%; left: 3%; animation-delay: 3s; font-size: 1.875rem; }
.petal-4 { bottom: 20%; right: 5%; animation-delay: 0.8s; }
.petal-5 { bottom: 32%; left: 44%; animation-delay: 2s; font-size: 1.75rem; }

@keyframes float-petal {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-16px) rotate(5deg); }
    66% { transform: translateY(-6px) rotate(-3deg); }
}

.about-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
}

.about-badge {
    background: linear-gradient(90deg, var(--color-secondary-soft) 0%, var(--color-xp-soft) 100%);
    color: #065f46;
    margin-bottom: 1.25rem;
}

.about-hero-title {
    font-size: 3rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 1.25rem;
}

.about-hero-sub {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.85;
    margin-bottom: 2rem;
}

.about-hero-sub strong {
    color: var(--color-text);
    font-weight: 700;
}

.about-hero-cta-wrap {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.about-cta-btn {
    gap: 0.5rem;
}

/* Generation Cards */
.about-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.generation-cards {
    display: flex;
    gap: 0.875rem;
    align-items: center;
}

.gen-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    padding: 1.375rem 1.125rem;
    text-align: center;
    box-shadow: var(--elevation-2);
    animation: float 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.gen-card:hover { transform: translateY(-4px); }

.gen-card-1 { animation-delay: 0s; }
.gen-card-2 { animation-delay: 1s; }
.gen-card-3 { animation-delay: 2s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.gen-avatar,
.tablet-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.center-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #fef9f0 100%);
    border-color: #bbf7d0;
    padding: 1.75rem 1.375rem;
    min-width: 130px;
}

.center-card-label {
    line-height: 1.4;
}

.gen-label {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.gen-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* ============================================================
   Section 2 — 늘봄이 하는 일 (What, 3-card)
   ============================================================ */
.about-what {
    padding: 6rem 0;
    background: var(--color-canvas);
}

.what-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.what-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.what-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-2);
}

.what-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    margin: 0 auto 1rem;
}

.what-icon-blue { background: var(--color-primary-soft); }
.what-icon-green { background: var(--color-secondary-soft); }
.what-icon-amber { background: var(--color-xp-soft); }

.what-card h3 {
    font-size: 1.0625rem;
    margin-bottom: 0.625rem;
    letter-spacing: -0.2px;
    word-break: keep-all;
}

.what-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    word-break: keep-all;
}

/* ============================================================
   Section 3 — 교육 프로그램 (Programs, 3-card)
   ============================================================ */
.about-programs {
    padding: 6rem 0;
    background: var(--color-surface-soft);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.program-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    position: relative;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-2);
}

.prog-blue { border-top-color: #2563eb; }
.prog-green { border-top-color: #16a34a; }
.prog-amber { border-top-color: #f59e0b; }

.prog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.prog-icon {
    font-size: 1.875rem;
    line-height: 1;
}

.prog-number {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-text-mute);
    letter-spacing: 1px;
}

.prog-title-wrap {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-hairline);
}

.prog-title-wrap h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.3px;
}

.prog-sub-title {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.prog-desc {
    font-size: 0.925rem;
    color: var(--color-text-focused);
    line-height: 1.75;
    word-break: keep-all;
}

/* ============================================================
   Section 4 — 소셜미션 (Mission / Evidence / Vision)
   ============================================================ */
.about-mission {
    padding: 6rem 0;
    background: var(--color-canvas);
}

.mission-content {
    max-width: 960px;
    margin: 0 auto;
}

.mission-lead {
    font-size: 1.0625rem;
    color: var(--color-text-focused);
    line-height: 1.85;
    margin-bottom: 2rem;
    text-align: center;
}

.mission-lead strong { color: var(--color-text); font-weight: 700; }

.mission-evidence {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
    margin-bottom: 3rem;
}

.evidence-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 1.375rem 1.25rem;
}

.evidence-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: 0.625rem;
    letter-spacing: -0.5px;
}

.evidence-unit {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 0.1rem;
}

.evidence-body {
    font-size: 0.875rem;
    color: var(--color-text-focused);
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    word-break: keep-all;
}

.evidence-body strong { color: var(--color-text); font-weight: 700; }

.evidence-extra {
    display: inline;
    color: var(--color-text-muted);
}

.evidence-src {
    font-size: 0.72rem;
    color: var(--color-text-mute);
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--color-hairline);
}

.mission-subhead {
    font-size: 1.125rem;
    margin: 2.5rem 0 1.25rem;
    color: var(--color-text);
    text-align: center;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vision-item {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    padding: 0.875rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-focused);
    line-height: 1.55;
}

.vision-item strong { color: var(--color-text); font-weight: 700; }

.vision-emoji {
    font-size: 1.375rem;
    flex-shrink: 0;
}

/* ============================================================
   Section 5 — Contact
   ============================================================ */
.about-contact {
    padding: 6rem 0 7rem;
    background: var(--color-surface-soft);
}

.contact-info-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.75rem;
    max-width: 760px;
    margin: 0 auto;
}

.contact-info-title {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-hairline);
    letter-spacing: -0.2px;
}

.contact-info-rows {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.contact-info-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.875rem;
    align-items: start;
    padding: 0.5rem 0;
}

.contact-info-row > i {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-pressed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.contact-info-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.contact-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.contact-info-value {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.55;
    word-break: keep-all;
}

.contact-info-extra {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

/* Email/Tel 링크 */
.contact-info-link {
    color: var(--color-primary-pressed);
    text-decoration: none;
    transition: color 0.15s ease;
}

.contact-info-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.contact-info-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   Responsive — 960 / 640 / 375 (DESIGN.md §8 준거)
   ============================================================ */
@media (max-width: 960px) {
    /* Hero */
    .about-hero { padding: 4.5rem 0 2.5rem; }
    .about-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .about-hero-title { font-size: 2.25rem; }
    .about-hero-cta-wrap { justify-content: center; }
    .generation-cards { justify-content: center; gap: 0.75rem; }

    /* Section 공통 */
    .section-title { margin-bottom: 2.5rem; }
    .section-title h2 { font-size: 1.75rem; }
    .about-what,
    .about-programs,
    .about-mission,
    .about-contact { padding: 4.5rem 0; }

    /* What */
    .what-grid { grid-template-columns: 1fr; }

    /* Programs */
    .programs-grid { grid-template-columns: 1fr; }

    /* Mission */
    .mission-evidence { grid-template-columns: 1fr; }
    .mission-vision-grid { grid-template-columns: 1fr; }

    /* Contact */
    .contact-info-card { padding: 1.75rem 1.5rem; }
}

@media (max-width: 640px) {
    .about-hero-title { font-size: 1.875rem; }
    .about-hero-sub { font-size: 0.95rem; }
    .section-title h2 { font-size: 1.5rem; }

    /* Program cards */
    .program-card { padding: 1.5rem 1.25rem; }

    /* Generation cards scale */
    .generation-cards { flex-wrap: wrap; }
    .gen-card { padding: 1rem 0.875rem; }
    .center-card { padding: 1.25rem 1rem; min-width: 110px; }
    .gen-avatar, .tablet-icon { font-size: 2rem; }
}

@media (max-width: 375px) {
    .container { padding: 0 0.875rem; }
    .about-hero-cta-wrap .btn { width: 100%; justify-content: center; }
    .about-hero-cta-wrap { flex-direction: column; }
}