/* ---------------------------------------------------------
   1. 기본 설정 (Reset & Common)
--------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111111;
    
    /* 배경 설정 (Notion Minimalist) */
    background-image: 
        radial-gradient(#d1d5db 1.5px, transparent 1.5px), 
        linear-gradient(135deg, #eeeee2, #f1f1eb);     
    background-size: 24px 24px, 100% 100%;  
    background-repeat: repeat, no-repeat;
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

/* 링크 기본 스타일 */
a { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------
   2. 상단 내비게이션
--------------------------------------------------------- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;

    background: #eeeee8;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-logo { font-weight: 700; font-size: 20px; color: #111; display: flex; align-items: center; gap: 10px; }
.nav-logo::before { content: ''; display: block; width: 12px; height: 12px; background: #111; border-radius: 2px; }
.nav-links a { margin-left: 25px; color: #666; font-size: 15px; font-weight: 500; transition: 0.2s; }
.nav-links a:hover { color: #000; text-decoration: underline; }

/* ---------------------------------------------------------
   3. 메인 페이지 요소 (index.html)
--------------------------------------------------------- */
.container { text-align: center; padding: 0 20px; max-width: 800px; display: flex; flex-direction: column; align-items: center; }

.badge {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #888;
    border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.5);
    padding: 5px 12px; border-radius: 20px; margin-bottom: 25px; display: inline-block;
}

.main-title { font-size: 80px; font-weight: 900; line-height: 1.1; margin-bottom: 20px; letter-spacing: -2px; color: #111; }
.slogan-wrapper { margin-bottom: 15px; display: inline-block; background: #f3f4f6; padding: 5px 15px; border-radius: 6px; }

.slogan {
    font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: #374151;
    display: inline-block; border-right: 2px solid #374151;
    white-space: nowrap; overflow: hidden; width: 0; vertical-align: middle;
    animation: typing 4s steps(24, end) forwards, blink .75s step-end infinite;
}

.intro-text {
    font-family: 'Inter', sans-serif; font-size: 16px; color: #666;
    line-height: 1.6; margin-bottom: 30px; opacity: 0; animation: fadeIn 1s ease-out 1s forwards;
}

.btn-main, .btn-identify {
    display: inline-block; background: #111; color: white;
    padding: 18px 40px; font-size: 16px; font-weight: 600;
    border-radius: 12px; transition: 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-main:hover, .btn-identify:hover { background: #333; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }

/* ---------------------------------------------------------
   4. 소개 & 프로필 공통 요소 (Cards)
--------------------------------------------------------- */
.content-card, .id-card {
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 24px;
    width: 100%; text-align: left; 
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.content-card { padding: 60px 50px; max-width: 700px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); }
.id-card { padding: 50px 40px; width: 320px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }

.content-card h2 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #6b7280; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.content-card h2::before { content: ''; display: block; width: 8px; height: 8px; background: #111; border-radius: 50%; }
.content-card h1 { font-size: 48px; font-weight: 800; margin-bottom: 30px; letter-spacing: -1px; }
.content-card p { font-size: 16px; line-height: 1.7; color: #374151; margin-bottom: 20px; }

.divider { height: 1px; background: #f3f4f6; margin: 40px 0; }
.team-section { display: flex; justify-content: space-between; align-items: center; }
.team-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #9ca3af; display: block; margin-bottom: 4px; }
.operator-name { font-weight: 700; font-size: 16px; color: #111; }

.back-link, .close-btn { margin-top: 30px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6b7280; transition: 0.2s; }
.back-link:hover, .close-btn:hover { color: #111; }

/* ID 카드 전용 */
.text-logo { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; color: #111; margin-bottom: 25px; letter-spacing: -1px; line-height: 1; }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #059669; background: #ecfdf5; padding: 6px 12px; border-radius: 20px; margin-bottom: 30px; border: 1px solid #d1fae5; }
.status-dot { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); animation: pulse 2s infinite; }
.role { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6b7280; margin-bottom: 40px; font-weight: 500; }
.info-group { text-align: left; margin-bottom: 30px; }
.info-item { margin-bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.label { font-family: 'IBM Plex Mono', monospace; color: #9ca3af; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.value { font-family: 'Inter', sans-serif; color: #111; font-size: 14px; font-weight: 600; border-bottom: 1px solid transparent; width: fit-content; transition: 0.2s; }
a.value:hover { border-bottom-color: #111; }

/* ---------------------------------------------------------
   5. 프로젝트 페이지 (projects.html)
--------------------------------------------------------- */
.project-list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.project-card { display: block; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; text-align: left; transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); text-decoration: none; }
.project-card:hover { border-color: #111; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

.project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.project-title { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #111; }
.project-desc { font-size: 14px; color: #4b5563; line-height: 1.6; margin-bottom: 15px; }
.project-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #666; background: #f3f4f6; padding: 4px 8px; border-radius: 4px; }
.project-card:hover .tag { background: #111; color: #fff; }

/* 상태 배지 스타일 */
.status-badge { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; margin-left: 10px; white-space: nowrap; }
.status-badge.completed { color: #059669; background: #ecfdf5; border: 1px solid #d1fae5; } /* 초록 */
.status-badge.active { color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; } /* 파랑 */
.status-badge.planned { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; } /* 빨강 */
.status-badge.in-progress { color : #4b5309; background: #fffbeb; border: 1px solid #fde68a;}

/* ---------------------------------------------------------
   6. 애니메이션 & 반응형
--------------------------------------------------------- */
@keyframes typing { from { width: 0 } to { width: 24ch; } }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: #374151 } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .nav-links { display: none; }
    nav { padding: 20px; }
    h1, .main-title { font-size: 48px; }
    .content-card { padding: 40px 25px; }
    .project-header { flex-direction: column; align-items: flex-start; gap: 5px; }
    .status-badge { margin-left: 0; }
}
/* ---------------------------------------------------------
  7. 모바일 반응형 내비게이션 (Mobile Nav)
--------------------------------------------------------- */

/* 기본 상태 (PC): 모바일 버튼과 메뉴는 숨김 */
.mobile-menu-btn { display: none; }
.mobile-menu-items { display: none; }

/* 화면이 768px보다 작을 때 (태블릿/모바일) 적용 */
@media (max-width: 768px) {
    
    /* 1. 기존 데스크탑 메뉴 숨기기 */
    .nav-links { display: none; }

    /* 2. 햄버거 버튼 보이기 & 꾸미기 */
    .mobile-menu-btn {
        display: block;
        font-size: 24px;
        cursor: pointer;
        color: #111;
        padding: 5px;
    }

    /* 3. 모바일 메뉴 박스 디자인 (하얀 종이가 내려오는 느낌) */
    .mobile-menu-items {
        display: none; /* 평소엔 숨김 */
        position: absolute;
        top: 70px; /* 로고 바로 아래 */
        left: 0;
        width: 100%;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        flex-direction: column;
        padding: 20px 0;
        text-align: center;
        z-index: 99; /* 다른 요소보다 위에 */
    }

    /* 메뉴가 활성화(active) 되면 보이기 */
    .mobile-menu-items.active {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }

    /* 모바일 메뉴 링크 스타일 */
    .mobile-menu-items a {
        padding: 15px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .mobile-menu-items a:last-child { border-bottom: none; }
    .mobile-menu-items a:hover { background: #f9fafb; color: #000; }
}

/* 메뉴가 스르륵 내려오는 애니메이션 */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   9. ADMIN PANEL (admin.html) - 관리자 전용
--------------------------------------------------------- */

.admin-container {
    max-width: 800px;
    margin: 120px auto 60px; /* 상단 여백 확보 */
    padding: 0 20px;
}

/* 로그인 박스 디자인 */
.admin-auth-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-align: center;
}

/* IP 카드 (유저 목록) */
.ip-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.ip-card:hover {
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 차단된 IP 스타일 (붉은색) */
.ip-card.blocked {
    background-color: #fef2f2;
    border-color: #fecaca;
}

/* 텍스트 스타일 */
.ip-address {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

.ip-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.credit-count {
    font-weight: 700;
    color: #2563eb; /* 파란색 강조 */
}

/* 입력창 스타일 (통일감) */
.admin-input {
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}
.admin-input:focus { border-color: #111; }

/* 관리자 버튼들 */
.admin-btn {
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: white;
    transition: 0.2s;
}
.admin-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* 버튼 색상 */
.btn-load { background: #111; width: 100%; padding: 12px; font-size: 14px; margin-top: 10px; }
.btn-give { background: #10b981; } /* 초록 */
.btn-block { background: #ef4444; } /* 빨강 */
.btn-unblock { background: #3b82f6; } /* 파랑 */
.btn-reset { background: #f59e0b; } /* 주황 */

.action-group { display: flex; align-items: center; gap: 8px; }
/* ---------------------------------------------------------
   10. FACT CHECKER APP (factchecker.html)
--------------------------------------------------------- */

/* 입력창 디자인 */
.factcheck-input {
    width: 100%;
    height: 200px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #111;
    background: #ffffff;
    resize: vertical;
    outline: none;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: 0.2s;
}
.factcheck-input:focus {
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 결과 박스 (점수판) */
.result-container {
    margin-top: 50px;
    animation: slideUp 0.5s ease-out;
}

.score-card-container {
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    color: white;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.score-value {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin: 10px 0;
}

/* 분석 리포트 헤더 */
.analysis-header {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
}

/* 증거 박스 */
.evidence-box {
    background: #f9fafb;
    border-left: 4px solid #111;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.factcheck-container { max-width: 800px; margin: 120px auto 60px; padding: 0 20px; }

/* 탭 버튼 */
.tab-container { display: flex; gap: 10px; margin-bottom: 15px; }
.tab-btn {
    padding: 10px 20px; border: none; background: #f3f4f6; 
    color: #666; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: 'Inter';
    transition: 0.2s;
}
.tab-btn.active { background: #111; color: white; }

/* 입력창 숨김/보임 처리를 위한 스타일 */
#urlInput { display: none; height: 60px; } 

/* 로딩 스피너 */
.loading-spinner {
    text-align: center; color: #666; margin-top: 30px; 
    font-family: 'IBM Plex Mono'; font-size: 14px;
    animation: pulse 1.5s infinite;
}

/* ---------------------------------------------------------
   11. CONTACT PAGE STYLING (누락된 부분 추가)
--------------------------------------------------------- */

/* 연락처 리스트 레이아웃 */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

/* 카드 스타일 (버튼처럼 보이게) */
.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: 0.2s;
    cursor: pointer; /* 마우스 올리면 손가락 모양 */
}

/* 마우스 올렸을 때 효과 */
.contact-item:hover {
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* 아이콘과 텍스트 그룹 */
.contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 아이콘 원형 배경 */
.contact-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 50%;
}

/* 텍스트 정렬 */
.contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

.contact-detail {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #6b7280;
}

/* 화살표 애니메이션 */
.contact-arrow {
    font-size: 18px;
    color: #d1d5db;
    transition: 0.2s;
}

.contact-item:hover .contact-arrow {
    color: #111;
    transform: translateX(5px);
}