/* Global */
:root {
    /* App Colors */
    --color-primary: var(--color-soft-yellow);
    --color-primary-variant: var(--color-light-yellow);
    --color-accent: var(--color-warm-orange);
    --color-accent-variant: var(--color-peach);
    --color-text: var(--color-dark-brown);

    /* Colors */
    --color-white: #ffffff;
    --color-dark-brown: #5d4e37;
    /* 부드럽고 따뜻한 노란색 파스텔 톤 (아동보육 테마) */
    --color-soft-yellow: #fef3c7; /* 부드러운 크림 노란색 */
    --color-light-yellow: #fef9e7; /* 연한 노란색 */
    --color-warm-orange: #fb923c; /* 따뜻한 오렌지 */
    --color-peach: #fdba74; /* 부드러운 복숭아 오렌지 */
    --color-gray: #1b1e26;

    /* Size */
    --size-max-width: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

h1, h2, h3, p, ul {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--color-text);
}

button {
    background-color: transparent;
    outline: 0;
    border: 0;
}

button:focus {
    outline: 1px solid transparent;
}

/* Common */
.section {
    padding: 4rem;
    text-align: center;
}

.max-container {
    max-width: var(--size-max-width);
    /* 왼쪽으로 정렬되는 경우 해결. css개념 챕터 참조 */
    margin: auto;
}

.title {
    font-size: 2.5rem;
    margin: 1rem 0;
}

.description {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

/* Header */
.header {
    background-color: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1; /* 헤더가 가장 위로 올라오도록 */
    transition: all 300ms ease;
}

.header--dark {
    background-color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
.header__logo img {
}
- 이렇게 css 선택자를 쓰면 성능에 좋지 않다.
- header__logo 클래스 아래의 img 태그를 선택하는게 아니라, 실제로는
img태그 전부를 고른 뒤 header__logo 태그 아래에 있는걸 선택한다.
-> 명시적으로 class를 선택해주는게 성능에 좋다.
*/
.header__logo__img {
    width: 36px;
    height: 36px;
}

.header__logo__title {
    /* rem : 브라우저의 기본 폰트 사이즈의 배수 크기로 지정. 1.8배 */
    font-size: 1.8rem;
}

.header__toggle {
    display: none;
    color: var(--color-dark-brown);
    font-size: 1.5rem;
    position: absolute;
    top: 1.3rem;
    right: 1rem;
}

.header__menu {
    display: flex;
    gap: 4px;
}

.header__menu__item {
    display: block;
    padding: 8px 16px;
    border-bottom: 1px solid transparent;
}

.header__menu__item:hover {
    border-bottom: 1px solid var(--color-accent);
}

.header__menu__item.active {
    border: 1px solid var(--color-accent);
    border-radius: 4px;
}

/* Home */
#home {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-text);
    padding: 5rem 1rem;
    padding-top: 7rem;
    text-align: center;
}

.home__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.home__divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 44px;
}

.home__divider .shape-fill {
    fill: var(--color-white);
}

.home__avatar {
    width: 250px;
    height: 250px;
    /* 이미지 가로세로 비율 맞춰서 노출 */
    object-fit: cover;
    border-radius: 100%;
    border: 3px solid var(--color-accent);
}

.home__title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.home__title--strong {
    color: var(--color-accent);
}

.home__description {
    font-size: 1.3rem;
}

.home__contact {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-white);
    margin: 2rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    border-radius: 4px;
}

.home__contact:hover {
    /* transparent : 투명한 */
    background-color: transparent;
    color: var(--color-text);
    outline: 2px solid var(--color-accent);
}

/* About */
.majors {
    display: flex; /* 수평정렬 */
    justify-content: space-between; /* 좌우 간격 벌리기 */
    gap: 1rem; /* 좌우 간격 조절 */
    margin: 2.5rem 0;
}

.major {
    background-color: var(--color-primary-variant);
    padding: 2rem 1rem;
    color: var(--color-text);
    border-radius: 1rem;
    cursor: default;
    box-shadow: 5px 5px 0px 0px var(--color-accent);
}

.major__icon {
    font-size: 4rem; /* 이미지 크기도 font size로 키울수 있구나 */
    margin: 1rem 0;
    color: var(--color-accent);
    /* transition : 애니메이션 효과 주기
       all : 모든 애니메이션, 300ms : 지속시간, 효과
       transition: property name | duration | timing function | delay
    */
    transition: all 300ms ease;
}

.major__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

@media screen and (min-width: 769px) {
    .major:hover .major__icon {
        transform: rotate(-15deg) scale(1.2);
    }
}

.jobs {
    text-align: start; /* 왼쪽 정렬 */
}

.job {
    display: flex; /* 수평정렬 */
    align-items: center; /* 수직정렬 */
    gap: 8px;
    margin-bottom: 1rem;
}

/* 주요 경력/학력 로고와 텍스트 정렬 고정 */
.jobs .job img {
    width: 50px;
    height: 50px;
    object-fit: contain; /* 서로 다른 비율 로고 통일 */
    flex: 0 0 50px; /* 로고 영역 고정 폭 */
    display: block;
}

.jobs .job > div {
    flex: 1 1 auto; /* 텍스트 영역은 가변 폭 */
}

.job__name {
    color: var(--color-dark-brown);
}

.job__period {
    color: var(--color-dark-brown);
    font-size: 0.8rem;
}

/* Skills */
#skills {
    position: relative;
    background-color: var(--color-primary-variant);
    color: var(--color-text);
}

.skills__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.skills__divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 44px;
}

.skills__divider .shape-fill {
    fill: var(--color-primary);
}

.skills {
    display: grid;
    /* 그리드에 총 몇개의 행을 가져갈지. 2개행인데 6대4비율 */
    /*grid-template-columns: 5fr 5fr;*/
    margin: 2rem 0; /* 다른 섹션과 동일 폭 유지 */
    border-radius: 8px;
    overflow: hidden; /* radius를 넣었으나, skills__coding의 배경색이 primary라 달라지지 않는다. 넘치는 하위 요소를 히든처리한다. */
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)
}

.skills__title {
    color: var(--color-accent);
    margin: 1rem 0;
    font-size: 1.2rem;
}

.skills__coding {
    /* 두개의 행을 하나로 만든다. span 2개를 차지*/
    grid-row: span 2;
    padding: 1rem;
    background-color: var(--color-primary);
}

.skills__tools {
    padding: 1rem;
}

/* 주요 논문 리스트 가독성 개선 */
.skills__tools ul {
    text-align: start;
    margin: 1rem 0;
}

.skills__tools li {
    position: relative;
    padding-left: 1.25rem; /* 불릿 공간 */
    line-height: 1.7;
    margin-bottom: 0.75rem;
    word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
    hyphens: auto; /* 영어/긴 단어 하이픈 처리 */
}

.skills__tools li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.skills__etc {
    padding: 1rem;
    background-color: var(--color-primary);
    filter: brightness(105%); /* 조금만 밝게. 정의한 한가지 색상을 조금 다른 느낌으로 연출할때 filter사용 */
}

/* 주요 강의 섹션 스타일링 */
.skills__subtitle {
    margin: 0.75rem 0 0.5rem;
    color: var(--color-accent);
    font-weight: 600;
}

.skills__etc ul {
    text-align: start;
    margin: 0.5rem 0 1.25rem;
}

.skills__etc li {
    position: relative;
    padding-left: 1.25rem; /* 불릿 공간 */
    line-height: 1.7;
    margin-bottom: 0.5rem;
    word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
    hyphens: auto; /* 영어/긴 단어 하이픈 처리 */
}

.skills__etc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.bar {
    display: flex; /* 수평정렬 */
    flex-direction: column; /* 바 아래 메타데이터와 배경을 수직으로 */
    padding: 1rem;
    gap: 0.5rem;
}

.bar__metadata {
    display: flex;
    justify-content: space-between;
}

.bar__bg {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary-variant);
}

.bar__value {
    height: 3px;
    background-color: var(--color-accent);
}

/* Work */
#work {
    background-color: var(--color-primary);
    color: var(--color-text); /* button은 부모의 color를 상속받지 않는다. */
}

.categories {
    display: flex;
    justify-content: center;
    margin: 2.5rem;
    gap: 1rem;
}

.category {
    position: relative; /* count absolute를 주면 body에 붙는걸 방지 */
    color: var(--color-text);
    font-size: 1.1rem;
    padding: 0.5rem 2.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-accent);
    cursor: pointer; /* 마우스 올렸을때 손가락 모양 포인터로 변경 */
    white-space: nowrap; /* 줄바꿈 되지 않게 */
}

.category--selected {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.category__count {
    opacity: 0; /* 요소를 투명하게 만드는 속성 */
    position: absolute;
    top: -20px;
    right: 10px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 100%;
    background-color: var(--color-accent-variant);
    color: var(--color-text);
    transition: all 250ms ease-in;
}

.category--selected .category__count,
.category:hover .category__count {
    opacity: 1;
    top: 0;
}

.projects {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개 열, 1배율로 배치 */
    grid-template-rows: repeat(2, 1fr); /* 2개 행, 1배율로 배치 */
    gap: 1rem;
    transition: all 250ms ease-out;
}

.projects.anim-out {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
}

.project {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: var(--color-primary-variant);
    transition: transform 0.3s ease;
}

.project:hover {
    transform: scale(1.03);
}

.project__img {
    width: 100%;
    display: block;
}

.project__text {
    padding: 1rem;
    color: var(--color-text);
}

.project__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.project__hover_description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(251, 146, 60, 0.85); /* 따뜻한 오렌지 배경 */
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
}

.project:hover .project__hover_description {
    opacity: 1;
}

.project__partner {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: var(--color-white);
    opacity: 0.95;
}

.project__link_icon {
    width: 1em; /* Match the font size of the parent */
    height: 1em;
    margin-left: 0.5rem;
    color: var(--color-accent);
    vertical-align: middle; /* Align it better with the text */
}

/* Testimonial */
.testimonials {
    margin: 3rem;
}

.testimonial {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

/* testimonial의 짝수번째 자식요소의 img를 오른쪽으로 배치 */
.testimonial:nth-child(even) .testimonial__img {
    order: 1;
}

.testimonial__img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.testimonial__bubble {
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.testimonial__bubble__name {
    color: var(--color-accent);
    font-weight: bold;
    filter: brightness(70%);
}

/* Arrow up */
.arrow-up {
    background-color: var(--color-primary);
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    font-size: 3rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    text-align: center;
    box-shadow: 5px 5px 0px 0px var(--color-accent);
    transition: opacity 300ms ease-in;
}

/* Footer */
#contact {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-text);
}

.contact__divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.contact__divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 67px;
}

.contact__divider .shape-fill {
    fill: var(--color-accent);
}

.contact__links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 2rem;
}

.contact__link {
    transition: color 250ms ease-in; /* 서서히 색깔 바뀜 */
}

.contact__link:hover {
    color: var(--color-accent);
}

/* 반응형 스타일링. 넓이 0~768px이하까지 */
@media screen and (max-width: 768px) {
    .section {
        padding: 4rem 2rem;
    }

    .title {
        font-size: 2rem;
    }

    .description {
        font-size: 1rem;
    }

    .header {
        flex-direction: column;
        align-items: start;
        background-color: var(--color-primary);
    }

    .header__toggle {
        display: block;
    }

    .header__menu {
        display: none;
        flex-direction: column;
        text-align: center;
        margin: 1rem 4rem;
        gap: 1rem;
    }

    .header__menu.open {
        display: flex;
    }

    .header__nav {
        width: 100%
    }

    #home {
        padding-bottom: 3rem;
    }

    .home__title {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .majors {
        flex-direction: column;
        align-items: center;
    }

    .major {
        max-width: 25rem;
    }

    .major.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .major.visible .major__icon {
        transform: rotate(-15deg) scale(1.2);
    }




    .job {
        justify-content: center;
    }

    .skills {
        grid-template-columns: 1fr;
    }

    .categories {
        flex-direction: column;
    }

    .category {
        width: 100%;
    }

    .projects {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial {
        flex-direction: column;
    }

    .testimonial:nth-child(even) .testimonial__img {
        order: 0;
    }

    .arrow-up {
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
        bottom: 1.5rem;
        right: 1.5rem;
    }
}