/* =========================================================
   1. 전체 기본 설정 (초기화)
   ========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* 폰트 종류: 원하시는 폰트 이름으로 바꿀 수 있습니다. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
    
    /* 전체 배경색 (원하는 Hex 컬러 코드로 변경 가능) */
    background-color: #f0f2f5; 
    
    /* 기본 글자 색상 */
    color: #26292D;
    
    /* 
      화면 왼쪽 상단 정렬 설정
      - flex 중심 정렬이 아니라 기본 문서 흐름으로 배치합니다.
    */
    display: block;
    min-height: 100vh; /* 화면 전체 높이를 사용 */
    padding: 20px;     /* 모바일 화면 등에서 여백 보장 */
    margin-left: 450px; /* 조금 오른쪽으로 배치 */
}


/* =========================================================
   2. 상단 헤더 영역 (ohwjdtjr 링크)
   ========================================================= */
.top-header {
    /* 카드와의 간격 (숫자가 클수록 카드와 멀어집니다) */
    margin-bottom: 16px; 
}

.top-header a {
    font-size: 3rem;      /* 글자 크기 (기본값: 1rem = 16px) */
    font-weight: 500;       /* 글자 두께 (400: 보통, 700: 굵게) */
    color: #4366CE;         /* 링크 글자 색상 */
    text-decoration: none;  /* 밑줄 제거 */
    transition: color 0.2s; /* 색상 변경 시 부드러운 효과 시간 */
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15); /* 글자 그림자 효과 */
}

/* 마우스 올려도 색상 변화 없음 */
.top-header a:hover {
    text-decoration: underline; /* 마우스 올려도 밑줄 유지 */
}

/* =========================================================
   2-1. 화면 고정 이미지 (오른쪽 상단)
   ========================================================= */

.screen-img {
    position: fixed; /* 화면 기준 위치 고정 */
    
    /* 
       위치 조절 옵션 (원하는 조합으로 수치 조절)
       top/bottom 중 하나, left/right 중 하나를 골라 사용하세요.
    */
    top: 50px;    /* 화면 맨 위에서 30px 내려옴 */
    left: 75px;  /* 화면 맨 왼쪽에서 30px 오른쪽으로 */
    
    /* 이미지 크기 지정 */
    width: 300px;
    object-fit: cover;
    border-radius: 8px; /* 이미지 모서리 둥글게 */
}

/* =========================================================
   3. 프로필 카드 박스 디자인
   ========================================================= */
.profile-card {
    background-color: rgb(187, 187, 187); /* 카드 배경색 (흰색) */
    
    /* 카드 크기 조절 */
    width: 100%;
    max-width: 500px; /* ★ 카드의 최대 너비입니다. (300px ~ 500px 사이 추천) */
    
    /* 카드 안쪽 여백: [위아래여백] [좌우여백] */
    padding: 32px 24px; 
    
    /* 
      모서리 둥글기 (0px: 완전 네모, 8px: 약간 둥글게, 20px: 많이 둥글게)
    */
    border-radius: 12px; 
    
    /* 
      그림자 효과: [X축] [Y축] [번짐정도] [색상/투명도]
      - 0.05를 0.15로 올리면 그림자가 더 짙어집니다.
    */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15); 
}

/* 프로필 카드 메인 제목 (h1) */
.profile-card .title {
    font-size: 1.35rem;     /* 제목 크기 */
    color: #111827;         /* 진한 검은색 계열 */
    margin-bottom: 12px;    /* 설명글과의 간격 */
    word-break: keep-all;   /* 한글 단어가 중간에 끊기지 않고 줄바꿈되도록 설정 */
}

/* 한 줄 소개글 (p) */
.profile-card .description {
    font-size: 0.95rem;     /* 본문 크기 */
    color: #313842;         /* 부드러운 회색 */
    line-height: 1.6;       /* 줄간격 (1.5 ~ 1.8 추천) */
    margin-bottom: 24px;    /* 리스트 영역과의 간격 */
}


/* =========================================================
   4. 정보 리스트 영역 (ul, li)
   ========================================================= */
.info-list {
    list-style: none;             /* 기본 검은 점(bullet) 제거 */
    border-top: 1px solid #f3f4f6;/* 카드 내부 위쪽 구분선 (색상 변경 가능) */
    padding-top: 20px;            /* 구분선과 첫 번째 항목 사이의 여백 */
}

.info-list li {
    font-size: 0.9rem;      /* 목록 글자 크기 */
    color: #313842;         /* 목록 글자 색상 */
    margin-bottom: 12px;    /* 각 항목 사이의 간격 */
    
    /* 아이콘과 글자를 수평으로 예쁘게 맞춤 */
    display: flex;
    align-items: center;
}

/* 마지막 목록 항목은 아래쪽 간격을 없앰 */
.info-list li:last-child {
    margin-bottom: 0;
}

/* 깃허브 링크 스타일 */
.info-list a {
    color: #4366CE;         /* 포인트 파란색 */
    text-decoration: none;  /* 밑줄 제거 */
    margin-left: 6px;       /* 텍스트와 약간 띄우기 */
    font-weight: 600;       /* 약간 굵게 */
}

/* 깃허브 링크 마우스 올라갔을 때 */
.info-list a:hover {
    text-decoration: underline; /* 밑줄 다시 표시 */
}

/* 방문자 카운트 상자 스타일 */
.visitor-box {
    margin-top: 20px;
    padding: 12px;
    background-color: #f8fafc;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}

/* 숫자 강조 스타일 */
#visit-count {
    color: #2563eb; /* 포인트 파란색 */
    font-weight: 700;
    font-size: 1rem;
}

#date-style {
   color: #111827;
   font-size:1rem;
   font-weight: 600;
}