/* ==========================================================
   커스텀 스타일 — Tailwind 유틸리티로 표현하기 어려운 것만 작성
   ========================================================== */

/* 부드러운 스크롤 + 고정 헤더(64px)에 섹션이 가려지지 않도록 여백 확보 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

/* ----- 섹션 제목 공통 스타일 ----- */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.875rem;
    font-weight: 800;
    color: #0f172a; /* slate-900 */
    margin-bottom: 0.5rem;
}

.dark .section-title {
    color: #ffffff;
}

/* 제목 앞의 포인트 컬러 장식 바 */
.section-title::before {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #d97706; /* amber-600 */
}

.dark .section-title::before {
    background: #fbbf24; /* amber-400 */
}

/* ----- Skills 뱃지 ----- */
.skill-badge {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #cbd5e1; /* slate-300 */
    background: #ffffff;
    color: #334155; /* slate-700 */
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.skill-badge:hover {
    border-color: #d97706;
    color: #d97706;
    transform: translateY(-2px);
}

.dark .skill-badge {
    border-color: #334155; /* slate-700 */
    background: #0f172a;   /* slate-900 */
    color: #cbd5e1;        /* slate-300 */
}

.dark .skill-badge:hover {
    border-color: #fbbf24;
    color: #fbbf24;
}

/* ----- Experience 타임라인 ----- */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

/* 타임라인 세로선 */
.timeline::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: #cbd5e1; /* slate-300 */
}

.dark .timeline::before {
    background: #334155; /* slate-700 */
}

.timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* 타임라인 도트 */
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 9999px;
    background: #d97706; /* amber-600 */
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
}

.dark .timeline-item::before {
    background: #fbbf24; /* amber-400 */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
}

.timeline-date {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: #d97706;
    margin-bottom: 0.25rem;
}

.dark .timeline-date {
    color: #fbbf24;
}

/* ----- Experience 상세 이력 아코디언 -----
   grid-template-rows 0fr → 1fr 트릭으로 높이를 몰라도 부드럽게 펼침 */
.exp-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.exp-detail > div {
    overflow: hidden;
}

.exp-detail.open {
    grid-template-rows: 1fr;
}

/* 펼쳐진 상태에서 화살표 아이콘 180도 회전 */
.exp-chevron {
    transition: transform 0.3s ease;
}

.exp-toggle[aria-expanded="true"] .exp-chevron {
    transform: rotate(180deg);
}

/* ----- Contact SNS 아이콘 링크 ----- */
.sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1; /* slate-300 */
    color: #64748b;            /* slate-500 */
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.sns-link:hover {
    border-color: #d97706;
    color: #d97706;
    transform: translateY(-3px);
}

.dark .sns-link {
    border-color: #334155; /* slate-700 */
    color: #94a3b8;        /* slate-400 */
}

.dark .sns-link:hover {
    border-color: #fbbf24;
    color: #fbbf24;
}

/* ----- 스크롤 등장 애니메이션 -----
   기본은 살짝 아래 + 투명, IntersectionObserver가
   .reveal-visible을 붙이면 제자리로 떠오름 */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* 애니메이션 축소 설정 사용자는 등장 효과 없이 바로 표시 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}