* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        }
        body {
            background-color: #0d1117;
            color: #c9d1d9;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            text-align: center;
            background: #161b22;
            padding: 40px 20px;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            border: 1px solid #30363d;
        }
        /* 프로필 이미지 스타일 */
        .img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            margin: 0 auto 20px; /* 정중앙 정렬 및 아래 간격 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }
        /* 이름 스타일 */
        .name {
            font-size: 1.5rem;         /* 기존 24px을 유연한 단위로 변경 */
            font-weight: 700;
            color: #f0f6fc;
            margin-bottom: 12px;       /* 소개글과의 간격을 살짝 늘려 답답함 해소 */
            letter-spacing: -0.02em;   /* 타이틀 자간을 좁혀 시각적 완성도 향상 */
        }

        /* 소개글 영역 전체 */
        .bio {
            margin-bottom: 30px;       /* 기존 유지: 아래쪽 링크 목록과의 간격 */
            line-height: 1.6;          /* 줄간격을 살짝 넓혀 가독성 향상 */
        }

        /* [추가] 강조하는 첫 번째 문장 */
        .bio-highlight {
            font-size: 0.95rem;        /* 약 15px 크기로 은은한 강조 */
            font-weight: 600;          /* 본문보다 두껍게 처리 */
            color: #f0f6fc;            /* 선명한 화이트로 시선 집중 */
            margin-bottom: 8px;        /* 두 문장 사이의 간격 */
            word-break: keep-all;      /* 모바일에서 단어 단위로 예쁘게 줄바꿈 */
        }

        /* [추가] 안내하는 두 번째 문장 */
        .bio-sub {
            font-size: 0.875rem;       /* 기존 14px을 유연한 단위로 변경 */
            font-weight: 400;
            color: #8b949e;            /* 차분한 회색조 유지 */
        }
        .links {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;          /* 부모 너비에 맞춤 */
            max-width: 480px;     /* PC 화면에서 너무 퍼지지 않도록 제한 */
            margin: 0 auto;       /* 화면 중앙 정렬 */
        }

        /* 1. 애니메이션 효과 정의 (키프레임) */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px); /* 20px 아래에서 시작 */
            }
            to {
                opacity: 1;
                transform: translateY(0);    /* 원래 위치로 이동 */
            }
        }

        .link-card {
            /* 레이아웃 변경: 가로 정렬 및 중앙 정렬 */
            display: flex;
            align-items: center;
            
            background-color: #21262d;
            color: #c9d1d9;
            text-decoration: none;
            padding: 16px 20px;   /* 좌우 여백을 살짝 늘려 안정감 부여 */
            border-radius: 12px;
            font-size: 1rem;      /* 16px 유연한 단위로 변경 */
            font-weight: 600;
            border: 1px solid #30363d;
            
            /* 부드러운 전환 효과 (성능 최적화) */
            transition: background-color 0.2s ease, 
                        color 0.2s ease, 
                        border-color 0.2s ease, 
                        transform 0.2s ease;
            
            cursor: pointer;

            /* [추가] 초기 상태를 숨겨두고 애니메이션 지정 */
            opacity: 0; 
            animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* 3. 카드별로 등장 시차(Delay) 두기 */
        .link-card:nth-child(1) {
            animation-delay: 0.1s;
        }
        .link-card:nth-child(2) {
            animation-delay: 0.25s;
        }
        .link-card:nth-child(3) {
            animation-delay: 0.4s;
        }

        .link-card:hover {
            background-color: #1f6feb;
            color: #ffffff;
            border-color: #58a6ff;
            transform: translateY(-2px) !important;
            
            /* 호버 시 카드가 더 돋보이도록 은은한 그림자 추가 */
            box-shadow: 0 8px 20px rgba(31, 111, 235, 0.2); 
        }

        /* [추가] 내부 요소 배치 최적화 */
        .link-card .icon {
            font-size: 1.25rem;   /* 이모지 크기를 글씨보다 살짝 키움 */
            margin-right: 12px;   /* 이모지와 텍스트 사이 간격 */
            display: flex;
            align-items: center;
        }

        .link-card .link-text {
            display: flex;
            flex-direction: column; /* 이메일 주소 등이 있을 때 아래로 자연스럽게 떨어지도록 */
            gap: 2px;
            text-align: left;       /* 왼쪽 정렬 유지 */
        }

        /* [추가] 이메일 주소 같은 서브 텍스트용 스타일 */
        .link-card .email-address {
            font-size: 0.8rem;
            font-weight: 400;
            opacity: 0.7;
        }

        .link-card .site-address {
            font-size: 0.8rem;
            font-weight: 400;
            opacity: 0.7;
        }

        .footer {
            /* 레이아웃 & 여백 */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: auto;        /* 화면 하단 고정을 위한 치트키 */
            padding: 32px 0;         /* 위아래 충분한 숨통을 틔워주는 여백 */

            /* 타이포그래피 */
            font-size: 0.8rem;       /* 12px~13px 유동적 크기 (웹 접근성 권장) */
            font-weight: 400;
            letter-spacing: -0.01em; /* 영문 자간을 살짝 좁혀 정갈하게 */
            line-height: 1.5;
            text-align: center;

            /* 색상 & 디테일 */
            color: #8b949e;          /* 기존 색상보다 가독성을 살짝 높인 깃허브풍 회색 */
            border-top: 1px solid rgba(240, 246, 252, 0.1); /* 상단에 은은한 구분선 */
        }