* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 글자 폰트랑 배경색 지정하는 부분, color는 기본 글자 색상 */
body {
    font-family: 'Pretendard', sans-serif;
    background-color: #2DBFFF;
    color: #000;
    overflow-x: hidden;
    /* 이건 가로 스크롤바 숨기는 옵션 */
}

header {
    position: relative;
    width: 100%;
}

/* 상단 노란색 배경 부분, 굳이 건드릴 필요 없음 */
header img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;

}

/* 좌상단 KKU MEDIA CONTENTS 10TH GRAD 부분 */
.header-info {
    position: absolute;
    /* 이거 건들지 말기 */
    top: 53px;
    /* 상단 여백 */
    left: 56px;
    /* 좌측으로부터의 여백 */
    font-size: 28px;
    /* 폰트 크기 */
    font-weight: 600;
    /* 폰트 굵기*/
    color: #000;
    /* 색상 */
    line-height: 1.2;
    /* 줄간격*/
    z-index: 10;
    /* 이거 건들지 말기 */
}

/* 우상단 View artwork ~ How to come 버튼 부분 디자인 */
.header-menu {
    position: absolute;
    /* 이거 건들지 말기 */
    top: 30px;
    /* 상단 여백 */
    right: 30px;
    /* 우측 여백 */
    display: flex;
    gap: 25px;
    /* 버튼간의 간격임 */
    font-size: 20px;
    /* 폰트 크기 */
    font-weight: 600;
    /* 폰트 굵기*/

    /* 버튼 색은 바로 아래 조정*/
}

.header-menu a {
    text-decoration: none;
    color: #000;
}

main {
    text-align: center;
    /* 중앙 정렬, 건들지 않길 권장 */
    position: relative;
    padding: 40px 20px 0px;
    /* 패딩값 */
    overflow-y: visible;
}

.title-container {
    position: relative;
    display: inline-block;
    margin-top: 40px;
}

/* 공통 애니메이션 정의 */
@keyframes fadeZoomIn {
    0% {
      opacity: 0;
      transform: scale(0.6); /* 애니메이션 초기 크기임 0.6이면 0.6배 부터 시작 */
    }
    100% {
      opacity: 1;
      transform: scale(1); /* 최종 크기 */
    }
  }

/* 메인 로고 이미지 크기 */
.title-container img.title {
    margin-top: -200px;
    margin-left: -150px;
    width: 70%;
    opacity: 0;
    animation: fadeZoomIn 0.25s ease-out forwards; /* 0.25s 가 애니메이션 실행 시간임 이거 조정하면 애니메이션 길이 조정 가능 */
    /* 가로 너비 */
    /* 가로 너비만 지정하면 세로는 자동으로 비율에 맞춰서 조정되니까 가로 너비만 지정해도 됌 */
}

/* 10th 배지 이미지 위치랑 크기 */
.title-container img.badge {
    position: absolute;
    top: -300px;
    /* 상단으로부터 위치 */
    right: 200px;
    /* 우측으로부터 위치 */
    width: 20%;

    opacity: 0;
    animation: fadeZoomIn 0.25s ease-out forwards; /* 애니메이션 길이 조정하려면 숫자만 조정 */
    animation-delay: 0.25s; /* 애니메이션 첫 시작시 딜레이할 시간임 0.25s면 0.25초 뒤에 시작하겠다는 의미 */
    /* 가로 너비 */
    /* 가로 너비만 지정하면 세로는 자동으로 비율에 맞춰서 조정되니까 가로 너비만 지정해도 됌 */
}


@keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translateY(80px); /* 아래쪽에서 시작 */
    }
    100% {
      opacity: 1;
      transform: translateY(0); /* 제자리로 */
    }
  }

/* 중앙 '하나의~~~세상으로 퍼져나갑니다' 텍스트 부분 */
.description {
    line-height: 1.8;
    /* 줄간격 */
    font-size: 28px;
    margin: 357px auto 447px;
    color: #fff;
    /* 최대 가로 너비를 지정해줌, 없어도 됌 */

    /* 🎬 애니메이션 추가 */
  opacity: 0;
  transform: translateY(80px);
}

/* 애니메이션이 시작될 때 적용될 클래스 */
.description.visible {
    animation: fadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

.buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 240px;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
}

.buttons a {
    display: flex;
    /* 건들지 말기 */
    justify-content: space-between;
    /* 텍스트와 이미지 양 끝으로 밀어내는거, 건들지 말기 */
    align-items: center;
    /* 수직 중앙 정렬 */
    padding: 10px 10px;
    font-size: 25px;
    font-weight: 600;
    width: 270px;
    height: 70px;
    /* 고정 너비 200px임 조정 가능 */
    border: 2px solid #000;
    text-decoration: none;
    transition: 0.2s ease;

    
    opacity: 0;
    transform: translateY(40px);
}

/* 보이기 시작하면 이 클래스가 붙음 */
.buttons.visible a {
    animation: fadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

/* 텍스트 컨테이너 */
.buttons a span {
    /* 텍스트는 왼쪽에 고정 */
    flex-grow: 0;
    text-align: left;
}

/* 이미지 컨테이너 */
.buttons a img.arrow-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.buttons a:hover {
    transform: translateY(-3px);
}

.btn-orange {
    color: black;
    background-color: #FF7B57;
}

.btn-blue {
    color: black;
    background-color: #61D2FF;
}

.btn-yellow {
    color: black;
    background-color: #FFFC5A;
}

.btn-cream {
    color: black;
    background-color: #FFFFCE;}

footer {
    position: relative;
    width: 100%;
    height: 150px;
    text-align: center;
    padding: 40px 40px 20px;
    font-size: 16px;
    color: #000;
    background: linear-gradient(to bottom,
            #2DBFFF 30%,
            #FFFFFF 100%);
    align-content: end;
    margin-top: 60px;

    z-index: 1;
}

/* 하단 그라디언트 이미지 배경임 안건드는게 좋음 */
footer img.gradient {
    /* position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    object-fit: cover;
    z-index: -1; */
    display: none;
}

/* 건들지 말자 */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    z-index: 2;
    position: relative;
    width: 100%;
    margin-bottom: 10px;

}

.footer-logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 40px;
}

/* 하단 로고 이미지 */
.footer-logo img {
    width: 218px;
    /* 가로 크기 */
    /* 최대 가로 너비를 지정해줌, 없어도 됌 */
}


/* ✅ 모바일 전용 스타일 */
@media (max-width: 768px) {
    .header-info {
        left: 20px;
        top: 20px;
        font-size: 10px;
    }

    header img {
        height: 150px;
    }


    /* ✅ 1) 상단 메뉴 숨기기 */
    .header-menu {
        display: none !important;
    }

    .buttons {
        margin-top: 0px;
    }

    /* ✅ 2) 버튼 높이/폰트 축소 */
    .buttons a {
        width: 90%;
        height: 55px;
        /* 기존 70px → 축소 */
        font-size: 24px;
        /* 기존 25px → 축소 */
        padding: 10px 15px;
        border: 1.5px solid #000;
    }

    .buttons a img.arrow-icon {
        width: 20px;
        height: 20px;
    }

    /* ✅ description(본문 텍스트)도 여백 살짝 줄이기 */
    .description {
        font-size: 13px;
        margin-top: 160px;
        margin-bottom: 160px;
    }

    /* ✅ title 로고 위치/크기 자동 조정 */
    .title-container img.title {
        width: 78%;
        margin-left: -70px;
        margin-top: -180px;
    }

    .title-container img.badge {
        width: 28%;
        top: -190px;
        right: 18px;
    }

    /* ✅ 3) footer가 모바일에서도 수평 유지 */
    .footer-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        z-index: 2;
        position: relative;
        /* max-width: 900px; */
        margin: 0;
    }

    footer {
        height: 60px;
        background: linear-gradient(to bottom, #2DBFFF 0%, #FFFFFF 100%);
        padding: 0px 20px 10px 20px;
        margin-top: 0px;
    }

    /* ✅ 3개의 요소를 각각 33% 너비로 강제 */
    .footer-content>p,
    .footer-content>.footer-logo {
        width: 33.33%;
        text-align: center;
        overflow: hidden;
        /* 혹시 모를 넘침 방지 */
        white-space: nowrap;
        /* 줄바꿈 금지 */
        margin: 0px;
    }

    /* ✅ 로고 이미지 크기 축소 */
    .footer-logo img {
        width: 90px;
        height: auto;
    }

    /* ✅ 글자 크기도 모바일 사이즈로 줄이기 */
    .footer-content p {
        font-size: 7px;
        line-height: 1.2;
    }
}