/* =========================================
   1. 폰트 및 라이브러리 임포트
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* =========================================
   2. CSS 변수 설정 (테마 시스템)
   ========================================= */
:root {
    /* [다크 모드 기본값] */
    --bg-color: #0d1117;
    --text-color: #e0e0e0;
    --text-color-secondary: #8b949e;
    --primary-color: #58a6ff;
    
    /* 글래스모피즘 스타일 (카드 배경/테두리) */
    --card-bg-color: rgba(22, 27, 34, 0.6);
    --card-border-color: rgba(240, 246, 252, 0.1);
    
    /* 버튼 스타일 */
    --btn-secondary-bg: #21262d;
    --btn-secondary-border: #30363d;
    
    /* 기본 폰트 */
    --body-font: "Pretendard Variable", Pretendard, sans-serif;
}

body.light-mode {
    /* [라이트 모드 값] - body에 클래스 추가 시 적용 */
    --bg-color: #f4f7f6;
    --text-color: #1f2328;
    --text-color-secondary: #656d76;
    --primary-color: #0969da;
    
    --card-bg-color: rgba(255, 255, 255, 0.7);
    --card-border-color: rgba(210, 213, 218, 0.5);
    
    --btn-secondary-bg: #f6f8fa;
    --btn-secondary-border: #d0d7de;
}

/* =========================================
   3. 기본 스타일 (Reset & Base)
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* [추가] 커스텀 스크롤바 디자인 */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--btn-secondary-border);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-secondary);
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    padding: 1rem;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    min-height: 100vh;
}

/* =========================================
   4. 배경 효과 (글래스모피즘 강화)
   ========================================= */
/* [추가] 은은한 그라디언트 배경 애니메이션 */
.bg-gradient {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; /* 콘텐츠 뒤로 배치 */
    pointer-events: none;
    background: radial-gradient(circle at 15% 50%, rgba(88, 166, 255, 0.15), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(139, 88, 255, 0.15), transparent 25%);
    filter: blur(40px);
    opacity: 0.8;
}
body.light-mode .bg-gradient {
    background: radial-gradient(circle at 15% 50%, rgba(9, 105, 218, 0.1), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(40, 167, 69, 0.1), transparent 25%);
}

.container {
    max-width: 800px;
    margin: 1rem auto;
    position: relative;
    z-index: 1;
}

/* =========================================
   5. UI 컴포넌트 스타일
   ========================================= */

/* --- 테마 토글 버튼 --- */
#theme-toggle {
    position: fixed;
    top: 1.5rem; right: 1.5rem;
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    backdrop-filter: blur(10px);
    color: var(--text-color);
    cursor: pointer;
    z-index: 1000;
    padding: 0.6rem;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#theme-toggle:hover { transform: rotate(15deg) scale(1.1); }
#theme-toggle .fa-moon { display: none; }
#theme-toggle .fa-sun { display: block; }
body.light-mode #theme-toggle .fa-moon { display: block; }
body.light-mode #theme-toggle .fa-sun { display: none; }

/* --- 프로필 섹션 --- */
.profile { text-align: center; margin-bottom: 2.5rem; }
.profile-img {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 4px solid var(--card-bg-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.profile-img:hover { transform: scale(1.05); }
.profile-name { font-size: 2rem; font-weight: 700; margin-top: 1rem; }
.profile-handle { color: var(--primary-color); font-weight: 500; margin-bottom: 1.5rem; }
.profile-links { display: flex; justify-content: center; gap: 1.5rem; }
.profile-links a {
    font-size: 1.6rem; color: var(--text-color-secondary);
    transition: color 0.2s, transform 0.2s;
}
.profile-links a:hover { color: var(--primary-color); transform: translateY(-3px); }

/* --- 탭 네비게이션 --- */
.tabs {
    display: flex; justify-content: center;
    background-color: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: 50px;
    padding: 0.3rem;
    max-width: 380px;
    margin: 0 auto 2.5rem;
    backdrop-filter: blur(10px);
}
.tab {
    flex: 1;
    font-family: inherit; font-weight: 600;
    background: none; border: none;
    color: var(--text-color-secondary);
    padding: 0.6rem 1rem; border-radius: 40px;
    cursor: pointer; transition: all 0.3s;
}
.tab.active {
    color: #fff;
    background-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(88, 166, 255, 0.3);
}

/* --- 탭 패널 공통 --- */
.tab-panel { display: none; animation: fadeIn 0.4s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 정보 그리드 (Info Tab & Layout Container) --- */
.info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    background-color: var(--card-bg-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.info-title { margin-bottom: 1.2rem; color: var(--primary-color); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.info-item { display: flex; align-items: center; margin-bottom: 1.2rem; }
.info-item i { width: 30px; color: var(--text-color-secondary); font-size: 1.2rem; }
.info-item-title { display: block; font-size: 0.85rem; color: var(--text-color-secondary); }
.info-item-value { font-weight: 500; font-size: 1rem; }

/* --- 서비스 카드 (Projects Tab) --- */
.card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.card {
    background-color: var(--card-bg-color);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border-color);
    border-radius: 16px; padding: 1.5rem;
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 160px; transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-color: var(--primary-color); }
.card h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.card p { font-size: 0.95rem; color: var(--text-color-secondary); }

/* [수정] 카드 링크 아이콘 정렬 (오른쪽 하단 고정) */
.card-link {
    align-self: flex-end; /* 항상 오른쪽 정렬 */
    margin-top: auto; padding-top: 1rem;
    font-size: 1.2rem; color: var(--text-color); opacity: 0.6;
}
.card-link:hover { color: var(--primary-color); opacity: 1; }

/* 와이드 카드 (관리자용 등) */
.card-wide-half { grid-column: span 2; flex-direction: row; align-items: center; min-height: auto; }
.card-wide-half .card-link { margin: 0; padding: 0; }

/* --- 모달 (Popup) --- */
#srv-error-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 1000;
    opacity: 0; visibility: hidden; transition: 0.3s;
    backdrop-filter: blur(4px);
}
#srv-error {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -40%);
    background: var(--bg-color); border: 1px solid var(--card-border-color);
    border-radius: 16px; padding: 2rem; width: 90%; max-width: 360px;
    z-index: 1001; text-align: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
#srv-error-overlay.active, #srv-error.active { opacity: 1; visibility: visible; }
#srv-error.active { transform: translate(-50%, -50%); }
.btn { padding: 0.7rem 1.5rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--text-color); border: 1px solid var(--btn-secondary-border); }
.btn-secondary:hover { background: var(--text-color-secondary); color: #fff; }

/* =========================================
   6. 타임라인 & 향후 계획 (Plans Tab)
   ========================================= */
/* [수정] 타임라인 컨테이너가 그리드 전체 너비를 사용하도록 변경 */
#plans-content {
    grid-column: 1 / -1; /* 2단 그리드 무시하고 100% 확장 */
    width: 100%;
}

#plans-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border-color);
    padding-bottom: 0.5rem;
}
#plans-content h3:first-child { margin-top: 0; }

#plans-content p {
    color: var(--text-color-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    word-break: keep-all; /* 한글 단어 끊김 방지 */
}

#plans-content ul {
    list-style: none;
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

/* 리스트 아이템 공통 스타일 */
#plans-content li {
    position: relative;
    color: var(--text-color-secondary);
    padding-bottom: 1rem;
    padding-left: 0.8rem;
    word-break: keep-all;
}

/* 리스트 아이콘 (점) */
#plans-content li::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    z-index: 1;
}

/* [중요] 첫 번째 목록(타임라인)만 왼쪽에 줄(Line) 표시 */
#plans-content ul:first-of-type li {
    border-left: 2px solid var(--card-border-color);
}
/* 첫 번째 목록은 줄 위에 점이 위치하도록 조정 */
#plans-content ul:first-of-type li::before {
    left: -5px;
}
/* 첫 번째 목록의 마지막 아이템은 줄 끊기 */
#plans-content ul:first-of-type li:last-child {
    border-left: 2px solid transparent;
}

/* [중요] 두 번째 목록(향후 계획)부터는 줄 없이 점만 표시 */
#plans-content ul:not(:first-of-type) li {
    border-left: none;
    padding-bottom: 0.5rem;
}

/* 인라인 코드 스타일 */
#plans-content code {
    background-color: var(--btn-secondary-bg);
    border-radius: 4px;
    padding: 0.2em 0.4em;
    font-family: 'IBM Plex Sans KR', 'Poppins', sans-serif;
    font-size: 0.9em;
}

/* =========================================
   7. 반응형 스타일 (Mobile)
   ========================================= */
@media (max-width: 768px) {
    /* 정보 탭 그리드 1단 변경 */
    .info-grid { grid-template-columns: 1fr; }
    
    /* 모바일 카드 스타일 조정 */
    .card-wide-half { 
        grid-column: auto; 
        flex-direction: column; 
        align-items: flex-start; 
    }
    
    /* [수정] 모바일에서도 카드 아이콘 오른쪽 하단 정렬 유지 */
    .card-wide-half .card-link { 
        margin-top: 1rem; 
        align-self: flex-end; 
    }
    
    /* 배경 흐림 효과 조정 */
    .bg-gradient { filter: blur(60px); opacity: 0.5; }
}

/* =========================================
   8. 푸터
   ========================================= */
footer { 
    margin-top: 4rem; 
    text-align: center; 
    font-size: 0.85rem; 
    color: var(--text-color-secondary); 
    opacity: 0.7; 
}