/* ===================================================================== */
/* [CSS 변수 (디자인 토큰)] 전체 사이트에서 반복 사용되는 색상 값입니다.      */
/* 여기를 수정하면 → 해당 색상을 사용하는 모든 요소가 한꺼번에 변경됩니다.     */
/* ===================================================================== */
:root {
    /* [메인 색상] 헤더 배경, 이름 색상, 버튼 배경 등에 사용됩니다. */
    /* 수정 포인트: 색상 코드를 바꾸면 → 사이트 전체의 주요 파란색이 변경됩니다. */
    /* 현재: 경민대학교 CI 색상 PANTONE 2935 C */
    --km-primary: #0057B8;

    /* [보조 색상] 헤더 하단의 강조선(border)에 사용됩니다. */
    /* 수정 포인트: 색상 코드를 바꾸면 → 헤더 아래 포인트 라인 색상이 변경됩니다. */
    /* 현재: 경민대학교 CI 색상 PANTONE 312 C */
    --km-secondary: #00A9E0;

    /* [카드 배경색] 동문증 카드의 배경색입니다. */
    /* 수정 포인트: #ffffff를 다른 색으로 바꾸면 → 카드 배경이 변경됩니다. */
    --card-bg: #ffffff;

    /* [메인 텍스트 색상] 본문 글씨 색상입니다. */
    /* 수정 포인트: 바꾸면 → 일반 텍스트(전화번호, 이메일 등)의 색상이 변경됩니다. */
    --text-main: #333333;

    /* [보조 텍스트 색상] 라벨("연락처", "이메일") 등 덜 중요한 텍스트 색상입니다. */
    /* 수정 포인트: 바꾸면 → 라벨 텍스트 색상이 변경됩니다. */
    --text-sub: #666666;

    /* [파스텔 블루] 연락처 행에 마우스를 올릴 때 배경색으로 사용됩니다. */
    /* 수정 포인트: 바꾸면 → 전화번호/이메일 행의 호버 배경색이 변경됩니다. */
    --pastel-blue: #e8f0fe;

    /* [호버 블루] 기타 호버 효과에 사용됩니다. */
    --hover-blue: #d2e3fc;
}

/* [전역 초기화] 모든 요소의 기본 여백과 패딩을 제거합니다. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* [배경 애니메이션] 배경색이 서서히 움직이는 효과입니다. (현재는 미사용) */
/* 배경에 animation: gradient-flow를 추가하면 다시 활성화됩니다. */
@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===================================================================== */
/* [페이지 배경 및 전체 레이아웃]                                          */
/* 수정 포인트 (background): 배경색/그라데이션을 바꾸면 → 카드 뒤의 배경이 변경됩니다. */
/* 예: background: #ffffff; → 순백색 배경                                  */
/* 예: background: linear-gradient(135deg, #667eea, #764ba2); → 보라 그라데이션 */
/* 수정 포인트 (padding): 값을 늘리면 → 카드와 화면 가장자리 사이의 여백이 넓어집니다. */
/* ===================================================================== */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    /* 단정하고 깨끗한 쿨톤 화이트 배경 */
    background: linear-gradient(135deg, #f4f7fb 0%, #ffffff 100%);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* ===================================================================== */
/* [카드 컨테이너] 동문증 카드 전체를 감싸는 영역입니다.                     */
/* 수정 포인트 (max-width): 값을 바꾸면 → 카드의 최대 가로 너비가 변경됩니다. */
/* 수정 포인트 (border-radius): 값을 바꾸면 → 카드 모서리의 둥근 정도가 변경됩니다. */
/* 수정 포인트 (box-shadow): 값을 바꾸면 → 카드 아래 그림자의 크기/진하기가 변경됩니다. */
/* ===================================================================== */
.card-container {
    background: var(--card-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    /* 헤더 영역이 모서리를 넘어가지 않게 */
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

/* [카드 호버 효과] 카드에 마우스를 올리면 살짝 위로 떠오르는 효과입니다. */
/* 수정 포인트 (translateY): 값을 바꾸면 → 떠오르는 높이가 변경됩니다. (-5px → -10px 등) */
/* 이 효과를 없애려면 → 이 블록 전체를 삭제하세요. */
.card-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* ===================================================================== */
/* [상단 헤더] 학교 이름 + 로고가 있는 파란색 상단 영역입니다.              */
/* 수정 포인트 (background): 바꾸면 → 헤더 배경색이 변경됩니다. (기본: CI 메인 블루) */
/* 수정 포인트 (padding): 바꾸면 → 헤더의 위아래 높이(여백)가 변경됩니다. */
/* 수정 포인트 (border-bottom): 바꾸면 → 헤더 아래 골드/시안 강조선이 변경됩니다. */
/* ===================================================================== */
.id-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: var(--km-primary);
    color: white;
    padding: 20px 0;
    border-bottom: 4px solid var(--km-secondary);
    text-decoration: none;
    transition: background 0.3s;
}

/* [헤더 호버] 마우스를 올렸을 때 헤더 배경이 약간 어두워집니다. */
/* 수정 포인트: 색상 코드를 바꾸면 → 호버 시 헤더 배경색이 변경됩니다. */
.id-header:hover {
    background: #002850;
}

/* [학교 로고] 헤더 좌측의 둥근 로고 이미지입니다. */
/* 수정 포인트 (width/height): 바꾸면 → 로고 크기가 변경됩니다. */
/* 수정 포인트 (border-radius): 50%=원형, 8px=둥근사각형, 0=정사각형 */
.univ-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    object-fit: cover;
}

/* [학교 이름 래퍼] 한글명과 영문명을 세로로 묶는 영역입니다. */
.univ-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* [학교 한글 이름] "경민대학교" 텍스트 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 학교 이름 글자 크기가 변경됩니다. */
/* 수정 포인트 (letter-spacing): 바꾸면 → 글자 사이의 간격이 변경됩니다. */
.univ-name {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

/* [학교 영문 이름] "KYUNGMIN ALUMNI" 텍스트 스타일입니다. */
/* 수정 포인트 (opacity): 0~1 사이의 값으로 바꾸면 → 텍스트 투명도가 변경됩니다. */
.univ-eng {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.85;
}

/* ===================================================================== */
/* [프로필 영역] 증명사진과 인적사항(이름, 학과, 졸업년도)이 배치되는 영역입니다. */
/* 수정 포인트 (padding): 바꾸면 → 프로필 영역의 내부 여백이 변경됩니다. */
/* 수정 포인트 (gap): 바꾸면 → 사진과 텍스트 사이의 간격이 변경됩니다. */
/* ===================================================================== */
.profile-section {
    display: flex;
    padding: 30px 25px 15px;
    gap: 20px;
    align-items: center;
}

/* [프로필 사진 틀] 증명사진을 감싸는 회색 테두리 영역입니다. */
/* 수정 포인트 (width/height): 바꾸면 → 사진 틀의 크기가 변경됩니다. (비율 유지 권장: 3:4) */
/* 수정 포인트 (border-radius): 바꾸면 → 사진 틀의 둥근 정도가 변경됩니다. (50%=원형) */
/* 수정 포인트 (background): 바꾸면 → 사진 테두리(배경) 색상이 변경됩니다. */
.profile-img-wrapper {
    width: 110px;
    height: 145px;
    border-radius: 8px;
    padding: 3px;
    background: #eaeaea;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* [프로필 이미지] 실제 사진의 표시 방식입니다. */
/* 수정 포인트 (object-fit): cover=꽉채움, contain=비율유지, fill=늘림 */
#profileImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* ===================================================================== */
/* [온라인 상태 표시기] 사진 우측 하단의 초록색 깜빡이는 원형 점입니다.      */
/* 수정 포인트 (background-color): 바꾸면 → 점의 색상이 변경됩니다. (예: #f87171=빨강) */
/* 수정 포인트 (width/height): 바꾸면 → 점의 크기가 변경됩니다. */
/* 이 기능을 없애려면 → .status-indicator 블록과 ::after 블록 모두 삭제하세요. */
/* ===================================================================== */
.status-indicator {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background-color: #4ade80;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 10;
}

/* [상태 표시기 애니메이션] 초록색 점 주위로 퍼지는 맥박(ping) 효과입니다. */
/* 수정 포인트 (border 색상): 바꾸면 → 퍼지는 원의 색상이 변경됩니다. */
/* 수정 포인트 (animation 시간): 2s를 바꾸면 → 깜빡이는 속도가 변경됩니다. (작을수록 빠름) */
.status-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #4ade80;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.8;
}

/* [핑 애니메이션] 상태 표시기의 퍼지는 효과를 정의합니다. */
@keyframes ping {

    75%,
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* [학생 정보 래퍼] 이름, 학과, 졸업년도 텍스트를 감싸는 영역입니다. */
.student-info {
    flex: 1;
}

/* [이름 스타일] 카드에 크게 표시되는 이름의 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 이름 글자 크기가 변경됩니다. */
/* 수정 포인트 (color): 바꾸면 → 이름 색상이 변경됩니다. (기본: CI 메인 블루) */
.student-info .name {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--km-primary);
}

/* [학과/졸업년도 스타일] 이름 아래 보조 정보의 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 학과/졸업년도 글자 크기가 변경됩니다. */
/* 수정 포인트 (color): 바꾸면 → 학과/졸업년도 글자 색상이 변경됩니다. */
.student-info .affiliation,
.student-info .student-id {
    font-size: 0.95rem;
    color: var(--text-sub);
    margin-bottom: 4px;
    font-weight: 600;
}

/* ===================================================================== */
/* [연락처 정보 영역] 전화번호, 이메일 행들을 감싸는 영역입니다.            */
/* 수정 포인트 (padding): 바꾸면 → 좌우 여백이 변경됩니다. */
/* ===================================================================== */
.info-section {
    padding: 0 25px;
    margin-bottom: 15px;
}

/* [연락처 각 행] 전화번호/이메일 한 줄의 스타일입니다. */
/* 수정 포인트 (padding): 바꾸면 → 각 행의 위아래 높이가 변경됩니다. */
/* 수정 포인트 (border-bottom): 바꾸면 → 행 사이 구분선 스타일이 변경됩니다. */
/*   예: "1px solid #ccc"=실선, "1px dashed #e0e0e0"=점선, "none"=구분선 없음 */
.info-row {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    text-decoration: none;
    color: var(--text-main);
    border-bottom: 1px dashed #e0e0e0;
    transition: background 0.3s, border-radius 0.3s;
}

/* [연락처 행 호버] 마우스를 올렸을 때 배경색이 연한 파란색으로 변합니다. */
/* 수정 포인트 (background): 바꾸면 → 호버 시 배경색이 변경됩니다. */
.info-row:hover {
    background: var(--pastel-blue);
    border-radius: 8px;
    border-bottom: 1px solid transparent;
}

/* [연락처 아이콘 색상] 전화/이메일 아이콘의 색상입니다. */
/* 수정 포인트 (color): 바꾸면 → 아이콘 색상이 변경됩니다. */
.info-row .icon {
    color: var(--km-primary);
    margin-right: 12px;
    display: flex;
}

/* [연락처 라벨] "연락처", "이메일" 등의 라벨 텍스트 스타일입니다. */
/* 수정 포인트 (width): 바꾸면 → 라벨의 고정 너비가 변경됩니다. (정렬에 영향) */
.info-row .label {
    font-size: 0.85rem;
    color: var(--text-sub);
    width: 65px;
    font-weight: 700;
}

/* [연락처 값] 실제 전화번호/이메일 텍스트의 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 번호/이메일 글자 크기가 변경됩니다. */
.info-row .text {
    font-size: 0.95rem;
    font-weight: 500;
}

/* ===================================================================== */
/* [연락처 추가 버튼] "연락처 추가"를 감싸는 영역과 버튼 스타일입니다.      */
/* 수정 포인트 (background): 바꾸면 → 버튼 배경색이 변경됩니다. */
/* 수정 포인트 (border-radius): 바꾸면 → 버튼 모서리의 둥근 정도가 변경됩니다. */
/* 수정 포인트 (padding): 바꾸면 → 버튼의 위아래 높이가 변경됩니다. */
/* 수정 포인트 (font-size): 바꾸면 → 버튼 글자 크기가 변경됩니다. */
/* ===================================================================== */
.action-section {
    padding: 10px 25px;
}

.primary-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--km-primary);
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 58, 112, 0.3);
    transition: all 0.3s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

/* [버튼 호버] 마우스를 올렸을 때 버튼이 어두워지고 살짝 떠오릅니다. */
/* 수정 포인트 (background): 바꾸면 → 호버 시 버튼 색상이 변경됩니다. */
.primary-btn:hover {
    background: #002850;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 58, 112, 0.4);
}

/* [버튼 클릭] 클릭 시 버튼이 약간 눌리는 효과입니다. */
.primary-btn:active {
    transform: translateY(1px) scale(0.98);
}

/* ===================================================================== */
/* [소셜 섹션] 카카오톡, 인스타그램, 디스코드 아이콘 버튼 영역입니다.       */
/* 수정 포인트 (gap): 바꾸면 → 아이콘들 사이의 간격이 변경됩니다. */
/* 수정 포인트 (padding): 바꾸면 → 소셜 영역의 여백이 변경됩니다. */
/* ===================================================================== */
.social-section {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px 25px 25px;
}

/* [소셜 버튼 기본] 각 소셜 아이콘의 원형 버튼 스타일입니다. */
/* 수정 포인트 (width/height): 바꾸면 → 버튼 크기가 변경됩니다. (두 값을 같게 유지) */
/* 수정 포인트 (background): 바꾸면 → 기본 상태의 버튼 배경색이 변경됩니다. */
/* 수정 포인트 (border-radius): 50%=원형, 12px=둥근사각형 */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-sub);
    background: #f0f0f0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.social-btn .icon {
    display: flex;
    transition: color 0.3s;
}

/* [소셜 버튼 호버 공통] 마우스를 올리면 위로 떠오르고 그림자가 생깁니다. */
/* 수정 포인트 (translateY): 바꾸면 → 떠오르는 높이가 변경됩니다. */
.social-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* [카카오톡 호버] 마우스를 올리면 카카오 노란색으로 변합니다. */
/* 수정 포인트: #FEE500을 바꾸면 → 카카오톡 호버 배경색이 변경됩니다. */
.social-btn.kakao:hover {
    background: #FEE500;
    color: #3A2929;
}

.social-btn.kakao:hover .icon svg {
    fill: #3A2929;
}

.social-btn.kakao .icon svg {
    fill: var(--text-sub);
    transition: fill 0.3s;
}

/* [인스타그램 호버] 마우스를 올리면 인스타 핑크색으로 변합니다. */
/* 수정 포인트: #E1306C를 바꾸면 → 인스타그램 호버 배경색이 변경됩니다. */
.social-btn.instagram:hover {
    background: #E1306C;
    color: white;
}

.social-btn.instagram:hover .icon {
    color: white;
}

/* [디스코드 호버] 마우스를 올리면 디스코드 보라색으로 변합니다. */
/* 수정 포인트: #5865F2를 바꾸면 → 디스코드 호버 배경색이 변경됩니다. */
.social-btn.discord:hover {
    background: #5865F2;
    color: white;
}

.social-btn.discord:hover .icon {
    color: white;
}

/* ===================================================================== */
/* [하단 푸터] 증명 문구와 QR 코드가 표시되는 카드 최하단 영역입니다.       */
/* 수정 포인트 (background): 바꾸면 → 푸터 배경색이 변경됩니다. */
/* 수정 포인트 (border-top): 바꾸면 → 상단 구분선 스타일이 변경됩니다. */
/* ===================================================================== */
.id-footer {
    background: #f9f9f9;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #dddddd;
}

.footer-text {
    text-align: left;
}

/* [증명 제목] "ALUMNI IDENTIFICATION" 등의 제목 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 제목 글자 크기가 변경됩니다. */
/* 수정 포인트 (color): 바꾸면 → 제목 글자 색상이 변경됩니다. */
.footer-title {
    font-size: 0.75rem;
    color: #444;
    letter-spacing: 1px;
    font-weight: 800;
    margin-bottom: 4px;
}

/* [증명 부제] "위 사람을 본교 졸업생임을 증명함." 등의 부제 스타일입니다. */
/* 수정 포인트 (font-size): 바꾸면 → 부제 글자 크기가 변경됩니다. */
.footer-sub {
    font-size: 0.6rem;
    color: #888;
}

/* [QR 코드] 우측의 QR 코드 이미지 표시 스타일입니다. */
/* 수정 포인트 (width/height): 바꾸면 → QR 코드 표시 크기가 변경됩니다. */
/* 수정 포인트 (border-radius): 바꾸면 → QR 코드 모서리의 둥근 정도가 변경됩니다. */
.qr-code {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    mix-blend-mode: multiply;
    /* 하얀 배경에 자연스럽게 섞이도록 */
}

/* ===================================================================== */
/* [리플 이펙트 애니메이션] 버튼 클릭 시 물결처럼 퍼지는 시각 효과입니다.    */
/* script.js에서 동적으로 생성되며, 이 키프레임이 애니메이션을 정의합니다. */
/* ===================================================================== */
@keyframes ripple-effect {
    to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* ===================================================================== */
/* [반응형 디자인] 화면 너비가 480px 이하(모바일)일 때 레이아웃을 조정합니다. */
/* 수정 포인트 (max-width: 480px): 이 값을 바꾸면 → 반응형이 적용되는 화면 너비 기준이 변경됩니다. */
/* 수정 포인트 (flex-direction: column): 이걸 row로 바꾸면 → 모바일에서도 가로 배치가 유지됩니다. */
/* 추가 포인트: 더 많은 반응형 규칙을 여기에 추가할 수 있습니다. */
/* ===================================================================== */
@media (max-width: 480px) {
    .card-container {
        max-width: 330px;
    }

    .profile-section {
        flex-direction: column;
        text-align: center;
        padding-top: 30px;
    }

    .info-row .label {
        width: 50px;
    }
}