/* ---------------------------------------
   About
--------------------------------------- */

.about-page {
    width: 100%;

    padding:
        0
        var(--page-x);
}


/* ---------------------------------------
   Intro
--------------------------------------- */

.about-intro {
    width: 100%;

    font-family:
        var(--font-schema),
        var(--font-ko),
        sans-serif;

    font-size: clamp(
        36px,
        2.961vw,
        45px
    );

    line-height: 1.09;
}


.about-intro em {
    font-style: italic;
}


/* ---------------------------------------
   Content
--------------------------------------- */

.about-content {
    margin-top: 70px;

    align-items: start;

    font-family:
        var(--font-hal),
        var(--font-ko),
        serif;

    font-size: 16px;
    line-height: 1.30;
}


/* Left = 6 cols */

.about-contact {
    grid-column: 1 / span 6;
}


.about-contact__email,
.about-contact__link {
    display: block;
}


.about-contact__email {
    margin-top: 0;

    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    text-align: left;
}


.about-contact__link {
    width: fit-content;

    margin-top: 8px;
}


/* ---------------------------------------
   CV
--------------------------------------- */

.about-cv {
    grid-column: 7 / span 9;
}


.about-cv__row {
    display: grid;

    grid-template-columns:
        repeat(9, minmax(0, 1fr));

    column-gap: var(--grid-gap);

    align-items: start;
}


.about-cv__section {
    grid-column: 1 / span 3;
}


.about-cv__year {
    grid-column: 4 / span 1;
}


.about-cv__text {
    grid-column: 5 / span 5;
    line-height: 1.2;
}

.about-cv__text p {
    margin: 0;
}


/*
 * 같은 section 안의 여러 row는 붙이고,
 * 새 section이 시작될 때 간격
 */

.about-cv__row:has(
    .about-cv__section:not(:empty)
) {
    margin-top: 48px;
}


.about-cv__row:first-child {
    margin-top: 0 !important;
}

.about-cv__row {
    margin-top: 8px !important;
}

/* ---------------------------------------
   Footer
--------------------------------------- */

.section-about .site-footer {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    column-gap: var(--grid-gap);

    align-items: end;
    justify-content: initial;
}

.section-about .site-footer__text {
    grid-column: 7 / -1;

    text-align: left;
}