/*============================================================================================================================================

    1. 기본 설정 및 초기화 (Basic Setup & Reset)
    - 색상 변수 정의 및 전체 요소 초기화

/*============================================================================================================================================*/

:root {
    --color-emphasis: #3873A6;       /* 강조 색상 (파란 계열) */
    --color-light: #F2F2F2;          /* 기본 텍스트 및 밝은 배경 */
    --color-gray-light: #BFBFBF;     /* 연한 회색 */
    --color-gray: #8C8C8C;           /* 중간 회색 (보조 텍스트) */
    --color-dark: #262626;           /* 전체 배경색 (어두운 색) */
}

/* 전체 리셋 + 기본 텍스트 색만 지정 */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--color-dark);  
    color: var(--color-light);            
    padding-left: 10px;
    font-family: 'Noto Sans KR', sans-serif; /* 폰트 예시 (필요시 추가) */
}

/*============================================================================================================================================

    2. 히어로 섹션 (Hero Section)
    - 전체 화면 인트로, 스크롤 시 사라지는 효과 포함

/*============================================================================================================================================*/
.hero {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark); 
    overflow: hidden;
    transition: transform 1.0s ease, opacity 1.5s ease;
    z-index: 1;
    text-align: center;
    color: var(--color-light);   
}

/* 스크롤 시 히어로 섹션 숨김 처리 */
.hero.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* 프로필 사진 스타일 */
.hero-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 1.2rem;
    background-image: url("../img/me.png"); /* 이미지 경로 확인 필요 */
    background-size: cover;
    background-position: center;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(191, 191, 191, 0.7);
}

.hero-name {
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    color: var(--color-light);
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-gray);
}

/*============================================================================================================================================

    3. 메인 레이아웃 (Main Layout)
    - 본문 콘텐츠의 최대 너비 및 정렬 설정

/*============================================================================================================================================*/
main {
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-light);
    min-height: 105vh; /* 스크롤을 유도하기 위한 최소 높이 */
    padding-bottom: 5rem;
}

/*============================================================================================================================================

    4. 자기소개 섹션 (Bio Section)
    - 웨이브 텍스트 애니메이션 포함

/*============================================================================================================================================*/
.wave-text span {
    display: inline-block;
    font-size: 4rem;
    animation: wave 2s ease-in-out infinite;
}

.wave-text p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 1rem;
}

/* 글자별 애니메이션 지연 효과 */
.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.2s; }
.wave-text span:nth-child(3) { animation-delay: 0.4s; }
.wave-text span:nth-child(4) { animation-delay: 0.6s; }

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

/*============================================================================================================================================
    
    Unified Table Style (Skills & Projects)
    - 스킬과 프로젝트 섹션 모두에 적용되는 공통 테이블 스타일입니다.

/*============================================================================================================================================*/

/* 테이블 컨테이너 (모바일 스크롤 지원) */
.table-container {
    width: 100%;
    overflow-x: auto;
    background-color: #1c1c1c;
    border-radius: 0.9rem;
    border: 1px solid rgba(140, 140, 140, 0.25);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    margin-bottom: 2rem;
}

/* 테이블 기본 */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    color: var(--color-light);
    min-width: 700px; /* 프로젝트 설명 때문에 최소 너비를 조금 더 확보 */
}

/* 헤더 스타일 */
.custom-table thead {
    background-color: rgba(56, 115, 166, 0.15);
}

.custom-table th {
    padding: 1.2rem;
    font-size: 1rem;
    color: var(--color-emphasis);
    border-bottom: 2px solid rgba(191, 191, 191, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 셀 스타일 */
.custom-table td {
    padding: 1.5rem 1.2rem;
    border-bottom: 1px solid rgba(191, 191, 191, 0.1);
    vertical-align: middle; /* 세로 중앙 정렬 */
}

/* 마지막 행 테두리 제거 */
.custom-table tbody tr:last-child td {
    border-bottom: none;
}

/* 행 호버 효과 */
.custom-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transition: background-color 0.2s ease;
}

/* 텍스트 스타일 유틸리티 */
.fw-bold {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-light);
}

.sub-text {
    font-size: 0.85rem;
    color: var(--color-gray);
    font-weight: normal;
}

.desc-text {
    font-size: 0.9rem;
    color: var(--color-gray);
    line-height: 1.6;
}

/* 태그 리스트 스타일 */
.table-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
}

.table-tags li {
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(242, 242, 242, 0.07);
    color: var(--color-light);
    border: 1px solid rgba(191, 191, 191, 0.3);
    white-space: nowrap;
}

/* 링크 버튼 스타일 */
.table-link {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--color-light);
    background-color: var(--color-emphasis);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.table-link:hover {
    background-color: #285173;
    transform: translateY(-2px);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .custom-table th, 
    .custom-table td {
        padding: 1rem 0.8rem;
    }
    
    .desc-text {
        min-width: 200px; /* 모바일에서 설명글이 너무 좁아지지 않게 */
    }
}

/*============================================================================================================================================

    7. 반응형 디자인 (Responsive Design)
    - 모바일 및 태블릿 화면 대응

/*============================================================================================================================================*/

@media (max-width: 768px) {
    /* 모바일에서 테이블 컨테이너 모서리 조정 */
    .skills-table-container {
        border-radius: 0.5rem;
    }
    
    /* 모바일 테이블 패딩 축소 */
    .skills-table th, 
    .skills-table td {
        padding: 1rem 0.8rem;
    }

    /* 프로젝트 그리드 간격 조정 */
    .projects-grid {
        grid-template-columns: 1fr; /* 1열로 변경 */
    }

    .hero-name {
        font-size: 2rem;
    }
    
    .wave-text span {
        font-size: 3rem;
    }
}

@media (max-width: 600px) {
    .skills, .projects {
        margin-top: 2rem;
    }
}