/* ==========================================
   1. 폰트 및 기본 설정 초기화
   ========================================== */
* {
    margin: 0;          /* 모든 요소의 기본 바깥 여백 제거 */
    padding: 0;         /* 모든 요소의 기본 안쪽 여백 제거 */
    box-sizing: border-box; /* 패딩과 테두리를 너비(width)에 포함시켜 계산 */
}

body {
    /* 웹페이지 기본 배경색 (다크 모드 딥 블랙/그레이) */
    background-color: #0f1115; 
    /* 기본 텍스트 색상 (연한 회색으로 가독성 확보) */
    color: #e4e4e7; 
    /* 시스템 폰트 및 모던 웹용 고딕 계열 폰트 패밀리 지정 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* 하단 고정 메뉴바(Bottom)가 콘텐츠를 가리지 않도록 아래쪽에 여백 추가 */
    padding-bottom: 100px;
    /* 줄 간격을 넓혀 텍스트 가독성 향상 */
    line-height: 1.6;
}


/* ==========================================
   2. 타이포그래피 (텍스트 스타일링)
   ========================================== */
h1, h2, h3 {
    color: #ffffff;     /* 대제목, 중제목은 눈에 띄는 완전한 흰색 */
    font-weight: 600;   /* 폰트 두께를 두껍게 설정 */
    margin-bottom: 0.5rem; /* 제목 아래쪽 간격 설정 */
}

p, li {
    color: #a1a1aa;     /* 일반 본문 및 보조 텍스트는 톤다운된 회색 */
    font-size: 0.95rem; /* 본문 크기를 살짝 컴팩트하게 설정 */
}

ul { margin-left: 1.5rem; margin-bottom: 1.5rem; color: #a1a1aa;}


/* ==========================================
   3. 레이아웃 및 카드/블록 디자인
   ========================================== */
/* 공통 카드/콘텐츠 블록 컨테이너 */
.Block {
    max-width: 768px;   /* 콘텐츠 영역의 최대 가로 너비 제한 */
    margin: 0 auto;     /* 가로 중앙 정렬 */
    padding: 1.5rem 2rem; /* 위아래, 좌우 안쪽 여백 */
    background-color: #17191e; /* 전체 배경보다 살짝 밝은 카드 배경색 */
    border: 1px solid #2d3139; /* 은은한 회색 테두리 */
    border-radius: 12px; /* 모서리를 부드럽게 둥글림 */
    text-align: left;   /* 내부 텍스트 및 정렬 방향을 왼쪽으로 설정 */
    margin-bottom: 2rem; /* 콘텐츠 아래 여백 */
}

/* 메인 타이틀 정렬 */
.title {
    text-align: center; /* 타이틀은 화면 가운데 정렬 */
    margin-top: 2rem;   /* 타이틀 위쪽 여백 */
}

/* 최근 게시물 카드 (호버 효과 포함) */
.Clickable_Block {
    cursor: pointer;    /* 마우스를 올렸을 때 클릭 가능한 손가락 모양으로 변경 */
    transition: all 0.3s ease-out; /* 모든 변경 스타일을 0.3초 동안 부드럽게 전환 */
}

/* 최근 게시물 카드에 마우스를 올렸을 때(Hover) */
.Clickable_Block:hover {
    transform: translateY(-4px); /* 카드를 위쪽으로 4px 살짝 들어 올림 */
    border-color: #404652;       /* 테두리 색상을 더 밝게 변경하여 강조 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* 하단에 깊고 어두운 그림자 효과 추가 */
}


/* ==========================================
   4. 가로 스크롤 섹션 (Featured Projects)
   ========================================== */
/* 스크롤 영역을 감싸는 기준자 래퍼 */
.Featured_Projects_Wrapper {
    position: relative; /* 내부의 절대 위치(absolute) 버튼들의 기준점이 됨 */
    max-width: 768px;   /* 다른 블록들과 동일하게 최대 너비 제한 */
    margin: 0 auto;     /* 가로 중앙 정렬 */
}

/* 섹션 타이틀 (Featured Projects 등) */
.Section_Title {
    max-width: 768px;
    margin: 0 auto 1rem auto; /* 위쪽 0, 아래쪽 1rem 여백으로 균형 맞춤 */
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;   /* 제목보다 더 두껍게 강조 */
    color: #ffffff;
}

/* 가로 스크롤이 가능한 카드 바구니 */
.Featured_Projects {
    display: flex;      /* 내부 카드들을 가로로 나란히 배치 */
    gap: 1.5rem;        /* 카드와 카드 사이의 간격 */
    overflow-x: auto;   /* 가로 방향 콘텐츠가 넘칠 때 스크롤바 생성 */
    scroll-behavior: smooth; /* 스크롤 이동 시 부드럽게 연출 */
    -ms-overflow-style: none; /* (IE, Edge) 스크롤바 숨기기 */
    scrollbar-width: none;    /* (Firefox) 스크롤바 숨기기 */
    padding: 15px 10px 35px 10px; /* 위 15px, 좌우 10px, 아래 35px 패딩 (그림자 잘림 방지) */
}

/* (Chrome, Safari, Opera, Edge) 스크롤바 영역 자체를 숨김 */
.Featured_Projects::-webkit-scrollbar {
    display: none;
}

/* 개별 프로젝트 카드 (이미지 형태) */
.Project {
    flex-shrink: 0;     /* 가로 공간이 부족해도 카드가 찌그러지지 않고 크기 유지 */
    width: 280px;       /* 카드 하나의 고정 가로 너비 */
    border-radius: 12px;
    object-fit: cover;  /* 이미지 비율이 깨지지 않도록 영역에 맞게 채움 */
    border: 1px solid #2d3139;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 은은한 하단 그림자 */
    transition: all 0.3s ease-out; /* 호버 시 부드러운 애니메이션 효과를 위해 추가 */
    cursor: pointer;
}

/* 프로젝트 카드 호버 효과 */
.Project:hover {
    transform: translateY(-4px); /* 위로 4px 들려 올림 */
    border-color: #404652;       /* 테두리 밝게 변경 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* 그림자 진하게 처리 */
}

/* 가로 스크롤 이동 화살표 버튼 공통 */
.scroll-btn {
    position: absolute; /* .Featured_Projects_Wrapper 기준으로 절대 위치 지정 */
    top: 40%;           /* 위에서 40% 위치에 배치 */
    transform: translateY(-50%); /* 버튼 높이의 절반만큼 위로 올려 정확한 수직 중앙 정렬 */
    width: 36px;        /* 버튼 가로 크기 */
    height: 36px;       /* 버튼 세로 크기 */
    background-color: #22252b; /* 다크 모드 버튼 배경색 */
    border: 1px solid #333842; /* 은은한 테두리 */
    border-radius: 50%; /* 버튼을 완전한 원형으로 만듦 */
    cursor: pointer;
    z-index: 10;        /* 카드들보다 항상 위에 보이도록 레이어 순서 지정 */
    display: flex;      /* 내부 화살표 텍스트/아이콘 정렬을 위해 flex 사용 */
    justify-content: center; /* 화살표 가로 중앙 정렬 */
    align-items: center;     /* 화살표 세로 중앙 정렬 */
    font-size: 1rem;
    color: #a1a1aa;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 버튼이 입체적으로 보이도록 그림자 추가 */
    transition: all 0.2s ease;
}

/* 스크롤 버튼 호버 효과 */
.scroll-btn:hover {
    background-color: #2d3139; /* 배경색을 살짝 밝게 */
    color: #ffffff;           /* 화살표를 완전한 흰색으로 */
}

/* 이전/다음 버튼 각각의 좌우 위치 설정 (끝단에 반쯤 걸치게 배치) */
.prev-btn { left: -18px; }
.next-btn { right: -18px; }


/* ==========================================
   5. 하단 고정 플로팅 메뉴 바 (Bottom Bar)
   ========================================== */
.Bottom {
    position: fixed;    /* 스크롤에 관계없이 브라우저 화면에 항상 고정 */
    bottom: 30px;       /* 화면 가장 아래쪽에서 30px 띄움 */
    left: 50%;          /* 화면 왼쪽에서 50% 지점에 배치 */
    transform: translateX(-50%); /* 바 너비의 절반만큼 왼쪽으로 밀어 완벽한 화면 중앙 정렬 */
    width: 90%;         /* 모바일 등 작은 화면에서는 양옆 여백을 두고 90% 너비 유지 */
    max-width: 400px;   /* 데스크톱 등 큰 화면에서 너무 넓어지지 않게 최대 너비 제한 */
    padding: 0.8rem 1.5rem; /* 위아래 및 좌우 패딩 */
    display: flex;      /* 내부 메뉴 항목들을 가로로 나란히 배치 */
    justify-content: space-between; /* 항목들을 양 끝과 중간에 균등한 간격으로 벌림 */
    align-items: center; /* 내부 항목들을 수직 가운데 정렬 */
    background-color: #22252b; /* 묵직한 다크 그레이 바 배경색 */
    border: 1px solid #333842; /* 은은한 테두리 선 */
    border-radius: 16px; /* 모서리를 둥글게 깎아 캡슐/알약 스타일 연출 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* 공중에 떠 있는 느낌을 주는 깊은 그림자 */
    z-index: 1000;      /* 페이지 최상단에 뜨도록 레이어 순서 지정 */
}

/* 하단 바 내부의 글자(p) 및 링크(a) 공통 스타일 */
.Bottom p, .Bottom a {
    cursor: pointer;
    font-weight: 500;   /* 기본보다 약간 두꺼운 중간 두께 폰트 */
    font-size: 0.9rem;  /* 메뉴 글자 크기를 살짝 작고 세련되게 설정 */
    color: #a1a1aa;     /* 기본 비활성화 느낌의 회색 */
    text-decoration: none; /* a 태그의 기본 밑줄 강제 제거 */
    transition: color 0.2s; /* 호버 시 색상 전환 효과를 부드럽게 */
}

/* 하단 바 항목에 마우스를 올렸을 때 효과 */
.Bottom p:hover, .Bottom a:hover {
    color: #ffffff;     /* 마우스를 올린 메뉴만 완전한 흰색으로 불이 켜지듯 강조 */
}


/* ==========================================
   6. 푸터 영역 (Footer)
   ========================================== */
.Footer {
    max-width: 768px;   /* 메인 상단 콘텐츠 블록들과 통일된 너비 */
    margin: 4rem auto 2rem auto; /* 위쪽에 4rem의 큰 공백을 두어 콘텐츠와 완전히 분리 */
    padding-top: 1.5rem; /* 구분선과 푸터 내용 사이의 안쪽 여백 */
    border-top: 1px solid #2d3139; /* 콘텐츠 영역과의 경계를 짓는 얇은 상단 선 */
    display: flex;      /* 왼쪽 카피라이트와 오른쪽 링크를 가로 배치 */
    justify-content: space-between; /* 카피라이트는 왼쪽 끝, 링크는 오른쪽 끝으로 밀어냄 */
    align-items: center; /* 수직 기준 중앙 정렬 */
}

/* 푸터 왼쪽 카피라이트 문구 */
.Footer p {
    color: #a1a1aa;
    font-size: 0.9rem;
    margin: 0;          /* 불필요한 기본 여백 완전 제거 */
}

/* 푸터 오른쪽 링크들을 묶어주는 그룹 */
.Footer_Links {
    display: flex;      /* 링크들을 가로로 나란히 나열 */
    gap: 1.5rem;        /* 링크(ex: GitHub와 Email) 사이의 간격 */
}

/* 푸터 내 링크 스타일 */
.Footer_Links a {
    color: #a1a1aa;
    text-decoration: none; /* 링크 기본 밑줄 제거 */
    font-size: 0.9rem;
    transition: color 0.2s ease;
    cursor: pointer;
}

/* 푸터 링크 호버 효과 */
.Footer_Links a:hover {
    color: #ffffff;     /* 마우스 오버 시 밝은 흰색으로 강조 */
}

/* ==========================================
   7. 컨텐츠영역 (Content_Block)
   ========================================== */

/* 본문 콘텐츠 블록 내부의 중제목(h2) 스타일 */
.Content_Block h2 {
    margin-top: 1.5rem;         /* 위쪽 본문과의 간격을 벌리기 위한 상단 여백 */
    border-bottom: 1px solid #2d3139; /* 제목 아래에 들어가는 은은한 회색 구분선 */
    padding-bottom: 0.5rem;      /* 제목 글자와 아래 구분선 사이의 안쪽 여백 */
    margin-bottom: 1rem;        /* 구분선과 아래쪽 본문(p) 사이의 바깥 여백 */
    font-size: 1.2rem;          /* 본문 흐름에 맞춘 적절한 제목 글자 크기 */
}

/* 본문 콘텐츠 블록 내부의 단락/줄글(p) 스타일 */
.Content_Block p {
    margin-bottom: 1rem;        /* 글과 글 사이가 다닥다닥 붙지 않도록 문단 아래쪽에 여백 추가 */
}

.Content_Block ol {
    margin-left: 1.5rem;        /* 번호 매기기 목록의 들여쓰기 */
    margin-bottom: 1rem;        /* 목록과 다음 콘텐츠 사이의 간격 */
}

.Recent_post_list a{
    color: #a1a1aa;
    text-decoration: none; /* 링크 기본 밑줄 제거 */
    font-size: 0.9rem;
    transition: color 0.2s ease;
    cursor: pointer;
}

.Recent_post_list a:hover {
    color: #ffffff;     /* 마우스 오버 시 밝은 흰색으로 강조 */
}

.tagContainer {
    padding-bottom: 1.0rem;
}

.tag {
    font-size: 0.9rem;
    border : 1px solid #525256;
    width: fit-content;
    padding: 0.5rem 0.5rem;
    border-radius: 20px;
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* 푸터 내 링크 스타일 */
.tagContainer a {
    color: #a1a1aa;
    text-decoration: none; /* 링크 기본 밑줄 제거 */
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* 푸터 링크 호버 효과 */
.tagContainer a:hover {
    color: #ededed;     /* 마우스 오버 시 밝은 흰색으로 강조 */
    border-color: #ededed; /* 마우스 오버 시 밝은 흰색으로 강조 */
}

/* ==========================================
   8. 검색 폼 영역 (Search Form)
   ========================================== */

/* 검색 폼을 감싸는 컨테이너 (Block 클래스 내부에 배치하거나 단독 배치 가능) */
.searchForm {
    max-width: 768px;
    margin: 0 auto 2rem auto; /* 위아래 균형을 맞추는 바깥 여백 */
    display: flex;            /* input과 button을 가로로 나란히 배치 */
    gap: 0.5rem;              /* 요소 사이의 간격 */
}

/* 텍스트 입력창 스타일 */
.searchForm input[type="text"] {
    flex: 1;                  /* 남은 가로 공간을 모두 채움 */
    background-color: #17191e; /* .Block과 통일감을 주는 카드 배경색 */
    color: #ffffff;           /* 입력하는 글자는 선명한 흰색 */
    border: 1px solid #2d3139; /* 기존 블록들과 동일한 은은한 회색 테두리 */
    border-radius: 8px;       /* 과하지 않고 깔끔한 둥근 모서리 */
    padding: 0.75rem 1rem;    /* 위아래, 좌우 안쪽 여백 */
    font-family: inherit;     /* body에 지정된 Inter 및 시스템 폰트 상속 */
    font-size: 0.95rem;       /* 본문 크기와 통일 */
    outline: none;            /* 포커스 시 브라우저 기본 파란 테두리 제거 */
    transition: all 0.2s ease; /* 포커스 효과를 위한 부드러운 전환 */
}

/* 입력창에 마우스를 올렸을 때 (Hover) */
.searchForm input[type="text"]:hover {
    border-color: #404652;    /* .Clickable_Block처럼 테두리를 살짝 밝게 */
}

/* 입력창을 클릭하여 커서가 깜빡일 때 (Focus) */
.searchForm input[type="text"]:focus {
    border-color: #a1a1aa;    /* 텍스트 톤과 맞춰 테두리를 더 선명하게 강조 */
    box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.15); /* 은은한 포커스 링 효과 */
}

/* 플레이스홀더(기본 안내 문구) 스타일 */
.searchForm input[type="text"]::placeholder {
    color: #525256;           /* .tag의 테두리 색상을 활용해 톤다운된 회색 처리 */
}

/* 검색 버튼 스타일 */
.searchForm button {
    background-color: #22252b; /* .scroll-btn, .Bottom과 통일된 다크 그레이 */
    color: #e4e4e7;           /* body 텍스트 색상과 맞춘 연한 회색 */
    border: 1px solid #333842; /* 은은한 테두리 선 */
    border-radius: 8px;       /* input과 통일감 있는 모서리 수치 */
    padding: 0.75rem 1.5rem;   /* 버튼다운 넉넉한 좌우 패딩 */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;         /* 글자를 살짝 두껍게 */
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;      /* 버튼 글자가 아래로 꺾이지 않도록 방지 */
}

/* 검색 버튼 호버 효과 */
.searchForm button:hover {
    background-color: #2d3139; /* 마우스 오버 시 살짝 밝아짐 */
    color: #ffffff;           /* 글자를 완전한 흰색으로 강조 */
    border-color: #404652;
}

/* 검색 버튼 클릭 순간 효과 */
.searchForm button:active {
    transform: scale(0.98);   /* 아주 미세하게 눌리는 느낌의 효과 제공 */
}

/* 검색된 태그 하이라이트 (색상 반전 스타일) */
.tag.highlighted {
    background-color: #e4e4e7; /* 원래 텍스트 색상을 배경으로 */
    color: #17191e;           /* 원래 배경색 계열을 글자색으로 */
    border-color: #e4e4e7;
    font-weight: 600;
}