/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'IBM Plex Sans KR', sans-serif;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
}

/* 각 섹션 공통 스타일 */
.profile-section-container,
.section-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 화면 정중앙 배치 */
    padding: 60px 40px;
    width: 100%;
}

/* ==================================
   1. 프로필 영역 스타일
================================== */
.profile-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-left img {
    width: 250px;
    height: auto;
}

.profile-credit {
    margin-top: 15px;
    font-size: 14px;
    color: #b0b0b0;
}

.profile-credit a {
    color: #b0b0b0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.profile-credit a:hover {
    color: #777777;
    text-decoration: underline;
}

.profile-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-name {
    font-size: 64px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.description {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #111;
}

/* [수정] 클래스 선택자 점(.)을 추가하여 정상 작동하도록 변경 */
.links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.links a {
    text-decoration: none;
    font-size: 32px;
    color: #000;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.links a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.fa-youtube { color: #FF0000; }
.fa-github { color: #000000; }
.fa-x-twitter { color: #000000; }

/* ==================================
   2. 아카이브 영역 스타일
================================== */

/* [수정] 시안과 동일하게 일직선 정렬 축을 맞춰주는 가이드 박스 */
.archive-inner {
    width: 100%;
    max-width: 1100px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.archive-title {
    font-size: 72px;
    font-weight: 900;
    margin-bottom: 60px;
    letter-spacing: -1px;
    text-align: left;
}

.archive-content {
    display: flex;
    align-items: center;
    gap: 80px;
    width: 100%;
}

.archive-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.archive-left img {
    width: 500px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.archive-left-t {
    margin-top: 15px;
    font-size: 14px;
    color: #b0b0b0;
    text-align: center;
}

.archive-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.archive-description {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #222;
}

/* [추가] copyparty 텍스트 링크 스타일 */
.archive-description .text-link {
    color: #589AF0;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

.archive-description .text-link:hover {
    color: #4382d6;
    text-decoration: underline;
}

.archive-button {
    background-color: #589AF0;
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    padding: 16px 45px;
    border-radius: 40px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.archive-button:hover {
    background-color: #4382d6;
    transform: translateY(-2px);
}

/* ==================================
   3. 모바일 화면 대응 (반응형)
================================== */
@media (max-width: 900px) {
    .profile-section-container,
    .section-container {
        padding: 80px 24px;
        min-height: auto;
    }

    .profile-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .profile-name { font-size: 48px; }
    .links { justify-content: center; }

    .archive-inner {
        align-items: center;
    }
    .archive-title { 
        font-size: 52px; 
        margin-bottom: 40px; 
        text-align: center;
        width: 100%;
    }
    .archive-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .archive-left img {
        width: 100%;
        max-width: 500px;
    }
.archive-right {
        align-items: center;
    }
    .archive-description {
        font-size: 18px;
    }
} /* 👈 모바일 대응 설정 끝! (이 닫는 괄호의 위치가 핵심입니다) */


/* ==================================
   [추가] 로딩 시 페이드인 업 애니메이션
   (모든 기기에서 작동하도록 @media 바깥에 배치)
================================== */

/* 크롬, 사파리 호환성 코드 포함 */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 프로필 영역 컨테이너에 애니메이션 적용 */
.profile-container {
    -webkit-animation: fadeInUp 1.0s cubic-bezier(0.0, 0.25, 0.5, 1) both;
    animation: fadeInUp 1.0s cubic-bezier(0.0, 0.25, 0.5, 1) both;
}

/* 아카이브 영역도 로딩 시 함께 반응하도록 설정 */
.archive-inner {
    -webkit-animation: fadeInUp 1.0s cubic-bezier(0.0, 0.25, 0.5, 1) both;
    animation: fadeInUp 1.0s cubic-bezier(0.0, 0.25, 0.5, 1) both;
    
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}