/* ================================================= */
/* 🎨 색상 설정 (전체 사이트에서 쓰이는 색깔 모음)      */
/*                                                     */
/* ★ 여기 색을 바꾸면 → 사이트 전체의 색이 한꺼번에 바뀜 */
/* ★ 색을 바꾸고 싶으면 # 뒤의 코드를 바꾸면 됩니다     */
/*   예: #60a5fa → #ff9999 (분홍색)                    */
/*   색 코드 찾는 법: 구글에 "색상 코드 선택기" 검색!    */
/* ================================================= */
:root {
    --primary-color: #e97414;
    /* ★ 바꾸면 → [앞면+뒷면] 상단 파란 바의 왼쪽 색이 바뀜 */
    --secondary-color: #f1680c;
    /* ★ 바꾸면 → [앞면+뒷면] 상단 파란 바의 오른쪽 색이 바뀜 */
    --text-main: #4a4a4a;
    /* ★ 바꾸면 → 이름, 소속값, 증명문구 등 큰 글자 색이 바뀜 */
    --text-sub: #888888;
    /* ★ 바꾸면 → "소속", "전화번호", 날짜 등 작은 글자 색이 바뀜 */
    --bg-color: #f0f9ff;
    /* ★ 배경 색 (현재는 안 쓰이고 있음) */
    --card-bg: rgba(255, 255, 255, 0.95);
    /* 카드 배경색 (반투명 흰색) */
}

/* 모든 요소의 기본 여백을 0으로 초기화 (⛔ 건드리지 마세요) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ================================================= */
/* 📱 전체 화면 배경 설정                               */
/* ★ 바꾸면 → 학생증 카드 뒤의 배경 전체가 바뀜          */
/* ================================================= */
body {
    /* 글꼴 설정 (⛔ 건드리지 마세요) */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

    /* ★ 바꾸면 → 카드 뒤에 깔리는 배경 색이 바뀜 (그라데이션) */
    /* ★ #e0f2fe = 왼쪽 위 시작 색, #bae6fd = 오른쪽 아래 끝 색 */
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    margin: 0;
    padding: 0;
    width: 100vw;
    /* 화면 가로 100% 꽉 채움 (⛔ 건드리지 마세요) */
    height: 100vh;
    /* 화면 세로 100% 꽉 채움 (⛔ 건드리지 마세요) */
    overflow: hidden;
    /* 스크롤 안 되게 막기 */
    user-select: none;
    /* 텍스트 드래그 선택 방지 */
    -webkit-user-select: none;
    /* 아이폰/사파리에서도 드래그 방지 */
}

/* ================================================= */
/* 🎯 카드를 화면 정중앙에 놓아주는 상자                 */
/* ⛔ 건드리지 마세요 - 중앙 정렬이 깨질 수 있습니다     */
/* ================================================= */
.main-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* 가로 중앙 */
    align-items: center;
    /* 세로 중앙 */
    z-index: 10;
}

/* ================================================= */
/* 🌈 배경 효과 전용 상자                               */
/* ⛔ 건드리지 마세요 - 배경 빛 효과용                   */
/* ================================================= */
.bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* ================================================= */
/* ✨ 배경 숨쉬는 빛 효과 (둥근 빛이 커졌다 작아짐)     */
/* ★ 바꾸면 → 카드 뒤에서 움직이는 둥근 빛이 바뀜       */
/* ================================================= */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    /* 동그랗게 만들기 */
    filter: blur(40px);
    /* ★ 바꾸면 → 빛이 더 뿌옇게/선명하게 됨 (숫자↑ = 더 뿌옇게) */
    z-index: 0;
    pointer-events: none;
    animation: breathe 8s infinite alternate ease-in-out;
    /* ★ 8s 바꾸면 → 빛이 커졌다 작아지는 속도가 바뀜 */
}

/* ★ 배경 빛 1번 → 화면 왼쪽 위에 있는 흰색 빛 */
.shape1 {
    width: 300px;
    /* ★ 바꾸면 → 이 빛의 가로 크기가 바뀜 */
    height: 300px;
    /* ★ 바꾸면 → 이 빛의 세로 크기가 바뀜 */
    background: rgba(255, 255, 255, 0.4);
    /* ★ 바꾸면 → 이 빛의 색상이 바뀜 */
    top: -50px;
    /* ★ 바꾸면 → 빛의 위아래 위치가 바뀜 (숫자↑ = 아래로) */
    left: -50px;
    /* ★ 바꾸면 → 빛의 좌우 위치가 바뀜 (숫자↑ = 오른쪽으로) */
    animation-delay: 0s;
}

/* ★ 배경 빛 2번 → 화면 오른쪽 아래에 있는 하늘색 빛 */
.shape2 {
    width: 400px;
    height: 400px;
    background: rgba(147, 197, 253, 0.5);
    /* ★ 바꾸면 → 이 빛의 색상이 바뀜 (현재: 하늘색) */
    bottom: -100px;
    /* ★ 바꾸면 → 빛의 위아래 위치가 바뀜 */
    right: -100px;
    /* ★ 바꾸면 → 빛의 좌우 위치가 바뀜 */
    animation-delay: 2s;
    /* 2초 후에 움직이기 시작 */
}

/* ★ 배경 빛 3번 → 화면 왼쪽 중간에 있는 흰색 빛 */
.shape3 {
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.3);
    bottom: 20%;
    /* ★ 바꾸면 → 빛의 위아래 위치가 바뀜 */
    left: 10%;
    /* ★ 바꾸면 → 빛의 좌우 위치가 바뀜 */
    animation-delay: 4s;
    /* 4초 후에 움직이기 시작 */
}

/* 빛이 숨쉬듯 커졌다 작아지는 애니메이션 (⛔ 건드리지 마세요) */
@keyframes breathe {
    0% {
        transform: scale(0.8) translate(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2) translate(20px, -20px);
        opacity: 0.9;
    }
}

/* ================================================= */
/* 📇 카드 전체 크기 설정                               */
/* ★ 바꾸면 → 학생증 카드 자체의 크기가 바뀜             */
/* ================================================= */
.card-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 340px;
    /* ★ 바꾸면 → 카드의 가로 너비가 바뀜 (숫자↑ = 더 넓어짐) */
    height: 520px;
    /* ★ 바꾸면 → 카드의 세로 높이가 바뀜 (숫자↑ = 더 길어짐) */
    perspective: 1500px;
    /* 3D 효과의 원근감 (⛔ 건드리지 마세요) */
    cursor: pointer;
    /* 마우스를 올리면 손가락 모양으로 변함 */
}

/* 카드 안쪽 - 뒤집기 애니메이션용 (⛔ 건드리지 마세요) */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* ★ 0.8s 바꾸면 → 뒤집히는 속도가 바뀜 */
    transform-style: preserve-3d;
}

/* 클릭하면 카드가 뒤집힘 (⛔ 건드리지 마세요) */
.card-inner.is-flipped {
    transform: rotateY(180deg);
}

/* ================================================= */
/* 앞면과 뒷면 공통 설정                                */
/* ★ 바꾸면 → 앞면과 뒷면 카드 모두에 적용됨             */
/* ================================================= */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    /* ★ 바꾸면 → 카드 배경색이 바뀜 (앞면+뒷면 모두) */
    border-radius: 24px;
    /* ★ 바꾸면 → 카드 모서리 둥글기가 바뀜 (숫자↑ = 더 둥글) */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    /* ★ 바꾸면 → 카드 아래 그림자가 바뀜 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 앞면 (⛔ 건드리지 마세요) */
.card-front {
    transform: rotateY(0deg);
}

/* 뒷면 (⛔ 건드리지 마세요) */
.card-back {
    transform: rotateY(180deg);
}

/* ================================================= */
/* 🔷 [앞면+뒷면] 상단 파란색 영역                      */
/* ★ 바꾸면 → 카드 맨 위의 하늘색 바 부분이 바뀜         */
/* ================================================= */
.card-header {
    /* 파란색 그라데이션 배경 (위에서 설정한 primary → secondary 색) */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 30px 20px 60px;
    /* ★ 바꾸면 → 파란 바의 안쪽 여백이 바뀜 (위 30px, 좌우 20px, 아래 60px) */
    text-align: center;
    color: white;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    /* 아래쪽을 사선으로 잘라줌 */
    position: relative;
}

/* ================================================= */
/* ✏️ [앞면] "오금청소년센터" 글자 / [뒷면] "STUDENT CARD" 글자 */
/* ★ 바꾸면 → 상단 파란 바 안의 큰 글자 스타일이 바뀜    */
/* ================================================= */
.org-name {
    display: inline-block;
    font-size: 1.1rem;
    /* ★ 바꾸면 → "오금청소년센터" / "STUDENT CARD" 글자 크기가 바뀜 */
    font-weight: 700;
    /* ★ 바꾸면 → 글자 굵기가 바뀜 (100~900, 숫자↑ = 더 굵게) */
    letter-spacing: 1px;
    /* ★ 바꾸면 → 글자 사이 간격이 바뀜 */
    opacity: 0.9;
    /* ★ 바꾸면 → 글자 투명도가 바뀜 (0 = 안 보임, 1 = 완전 보임) */
    margin-bottom: 5px;
    /* ★ 바꾸면 → 큰 글자와 작은 글자 사이 간격이 바뀜 */
    text-decoration: none;
    color: #4D96FF;
    /* ★ 바꾸면 → 글자 색이 바뀜 */
    transition: opacity 0.2s;
}

/* [앞면] "오금청소년센터" 위에 마우스를 올리면 밝아지는 효과 */
a.org-name:hover {
    opacity: 1;
}

/* ================================================= */
/* ✏️ [앞면] "STUDENT ID" 작은 영어 글자                */
/* ★ 바꾸면 → 앞면 상단 파란 바 안의 작은 글자가 바뀜    */
/* ================================================= */
.card-title {
    font-size: 0.8rem;
    /* ★ 바꾸면 → "STUDENT ID" 글자 크기가 바뀜 */
    font-weight: 500;
    /* ★ 바꾸면 → 글자 굵기가 바뀜 */
    letter-spacing: 3px;
    /* ★ 바꾸면 → 글자 사이 간격이 바뀜 (숫자↑ = 더 벌어짐) */
    opacity: 0.8;
    /* ★ 바꾸면 → 글자 투명도가 바뀜 */
    /* ★★ [앞면] "STUDENT ID" 위치 조절 ★★ */
    margin-top: 5px;
    /* ★ 바꾸면 → "STUDENT ID"가 위/아래로 이동 (숫자↑ = 아래로) */
    margin-bottom: 0px;
    /* ★ 바꾸면 → "STUDENT ID" 아래 간격이 바뀜 */
}

/* ================================================= */
/* ✏️ [뒷면] "STUDENT CARD" 위치 조절 전용              */
/* ★ 바꾸면 → 뒷면 상단의 "STUDENT CARD" 위치가 바뀜    */
/* ================================================= */
.back-title {
    margin-top: 100px;
    /* ★ 바꾸면 → "STUDENT CARD"가 위/아래로 이동 (숫자↑ = 아래로) */
    margin-bottom: 0px;
    /* ★ 바꾸면 → "STUDENT CARD" 아래 간격이 바뀜 */
}

/* ================================================= */
/* 📝 [앞면] 카드 본문 영역                             */
/* (사진, 이름, 소속, 전화번호가 들어있는 영역)          */
/* ★ 바꾸면 → 앞면의 사진+이름+정보 영역 전체가 바뀜     */
/* ================================================= */
.card-body {
    padding: 0 24px 20px;
    /* ★ 바꾸면 → 본문의 안쪽 여백이 바뀜 (위 0, 좌우 24px, 아래 20px) */
    text-align: center;
    margin-top: -50px;
    /* ★ 바꾸면 → 본문이 파란 바와 얼마나 겹치는지 바뀜 (음수 = 위로 올라감) */
    flex: 1;
}

/* [뒷면] 본문 전용 설정 (⛔ 건드리지 마세요) */
.back-body {
    display: flex;
    flex-direction: column;
}

/* ================================================= */
/* 📷 [앞면] 프로필 사진 (동그란 사진 틀)               */
/* ★ 바꾸면 → 앞면의 동그란 프로필 사진 크기/모양이 바뀜 */
/* ================================================= */
.profile-img-wrapper {
    width: 130px;
    /* ★ 바꾸면 → 사진 틀 가로 크기가 바뀜 (숫자↑ = 사진이 커짐) */
    height: 130px;
    /* ★ 바꾸면 → 사진 틀 세로 크기가 바뀜 (가로와 같은 숫자로!) */
    margin: 0 auto 20px;
    /* 가운데 정렬 + ★ 20px 바꾸면 → 사진 아래 간격이 바뀜 */
    border-radius: 50%;
    /* 동그랗게 만들기 (⛔ 건드리지 마세요) */
    padding: 5px;
    /* ★ 바꾸면 → 사진 주위 흰색 테두리 두께가 바뀜 */
    background: white;
    /* ★ 바꾸면 → 사진 테두리 색이 바뀜 */
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.25);
    /* ★ 바꾸면 → 사진 주변 그림자가 바뀜 */
    position: relative;
    z-index: 10;
}

/* 프로필 사진 자체 (⛔ 건드리지 마세요) */
.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ================================================= */
/* ✏️ [앞면] 학생 이름 (예: "홍길동")                   */
/* ★ 바꾸면 → 앞면 사진 아래의 큰 이름 글자가 바뀜      */
/* ================================================= */
.student-name {
    font-size: 1.6rem;
    /* ★ 바꾸면 → 이름 글자 크기가 바뀜 (숫자↑ = 더 크게) */
    font-weight: 800;
    /* ★ 바꾸면 → 이름 글자 굵기가 바뀜 (100~900) */
    color: var(--text-main);
    /* 글자 색 (위의 --text-main에서 설정) */
    margin-bottom: 15px;
    /* ★ 바꾸면 → 이름과 아래 정보 사이 간격이 바뀜 */
}

/* ================================================= */
/* 💡 [앞면] "클릭해서 뒤집기 ↺" 안내 문구               */
/* ★ 바꾸면 → 앞면 맨 아래 깜빡이는 안내 글자가 바뀜     */
/* ================================================= */
.click-hint {
    font-size: 0.75rem;
    /* ★ 바꾸면 → 안내 문구 글자 크기가 바뀜 */
    color: var(--text-sub);
    /* 글자 색 (위의 --text-sub에서 설정) */
    animation: blink 2s infinite;
    /* ★ 2s 바꾸면 → 깜빡이는 속도가 바뀜 (숫자↓ = 빠르게) */
    margin-top: 15px;
    /* ★ 바꾸면 → 정보 리스트와의 간격이 바뀜 */
}

/* 깜빡이는 애니메이션 (⛔ 건드리지 마세요) */
@keyframes blink {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ================================================= */
/* 📋 [앞면] 세부 정보 리스트 (소속, 전화번호 상자)      */
/* ★ 바꾸면 → 앞면의 "소속 / 전화번호" 정보 박스가 바뀜  */
/* ================================================= */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* ★ 바꾸면 → "소속"과 "전화번호" 사이 간격이 바뀜 */
    background: white;
    /* ★ 바꾸면 → 정보 박스 배경색이 바뀜 */
    border-radius: 16px;
    /* ★ 바꾸면 → 정보 박스 모서리 둥글기가 바뀜 */
    padding: 20px;
    /* ★ 바꾸면 → 정보 박스 안쪽 여백이 바뀜 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* 살짝 그림자 */
    border: 1px solid #f5f5f5;
    /* ★ 바꾸면 → 정보 박스 테두리 색이 바뀜 */
    margin-top: 10px;
    /* ★ 바꾸면 → 이름과 정보 박스 사이 간격이 바뀜 */
}

/* 정보 한 줄 (예: "소속 | 오금청소년센터 자치단") */
.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    /* ★ 바꾸면 → 구분선 위 간격이 바뀜 */
    border-bottom: 1px solid #f0f0f0;
    /* ★ 바꾸면 → 항목 사이 구분선 색/굵기가 바뀜 */
}

/* 마지막 항목은 구분선 없음 (⛔ 건드리지 마세요) */
.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ================================================= */
/* ✏️ [앞면] "소속", "전화번호" 같은 왼쪽 작은 글자      */
/* ★ 바꾸면 → 정보 박스의 왼쪽 회색 글자가 바뀜          */
/* ================================================= */
.info-label {
    font-size: 0.85rem;
    /* ★ 바꾸면 → "소속", "전화번호" 글자 크기가 바뀜 */
    color: var(--text-sub);
    /* 글자 색 (연한 회색) */
    font-weight: 500;
    /* ★ 바꾸면 → 글자 굵기가 바뀜 */
}

/* ================================================= */
/* ✏️ [앞면] "오금청소년센터 자치단", "010-..." 오른쪽 큰 글자 */
/* ★ 바꾸면 → 정보 박스의 오른쪽 진한 글자가 바뀜        */
/* ================================================= */
.info-value {
    font-size: 0.95rem;
    /* ★ 바꾸면 → 실제 정보 글자 크기가 바뀜 */
    color: var(--text-main);
    /* 글자 색 (진한 회색) */
    font-weight: 600;
    /* ★ 바꾸면 → 글자 굵기가 바뀜 */
}

/* ================================================= */
/* 📜 [뒷면] 증명 문구 상자 (점선 테두리 박스)           */
/* ★ 바꾸면 → 뒷면 가운데의 "위 사람은..." 상자가 바뀜   */
/* ================================================= */
.certification-box {
    /* ★★ 증명 문구 상자 위치 조절 (px 숫자를 바꾸세요) ★★ */
    margin-top: 100px;
    /* ★ 바꾸면 → 상자가 위/아래로 이동 (숫자↑ = 아래로 내려감) */
    margin-bottom: 0px;
    /* ★ 바꾸면 → 상자와 바코드 사이 간격이 바뀜 (숫자↑ = 위로 올라감) */
    padding: 20px;
    /* ★ 바꾸면 → 상자 안쪽 여백이 바뀜 */
    border: 1px dashed #d9e2ec;
    /* ★ 바꾸면 → 점선 테두리 색/굵기가 바뀜 */
    border-radius: 12px;
    /* ★ 바꾸면 → 상자 모서리 둥글기가 바뀜 */
    background: #f8fbff;
    /* ★ 바꾸면 → 상자 배경색이 바뀜 (현재: 아주 연한 파란색) */
}

/* ================================================= */
/* ✏️ [뒷면] "위 사람은 ~ 증명합니다." 증명 문구         */
/* ★ 바꾸면 → 뒷면 상자 안의 메인 문장 스타일이 바뀜     */
/* ================================================= */
.cert-text {
    font-size: 1rem;
    /* ★ 바꾸면 → 증명 문구 글자 크기가 바뀜 */
    line-height: 1.6;
    /* ★ 바꾸면 → 줄과 줄 사이 간격이 바뀜 (숫자↑ = 줄 간격 넓어짐) */
    color: var(--text-main);
    margin-bottom: 30px;
    /* ★ 바꾸면 → 문구와 날짜 사이 간격이 바뀜 */
}

/* [뒷면] 증명 문구 안에서 굵은 "오금청소년센터" 글씨 */
.cert-text strong {
    color: var(--primary-color);
    /* ★ 바꾸면 → "오금청소년센터" 강조 색이 바뀜 (현재: 하늘색) */
    font-weight: 800;
}

/* ================================================= */
/* ✏️ [뒷면] 발급 날짜 (예: "2026. 07. 24")            */
/* ★ 바꾸면 → 뒷면 상자 안의 날짜 글자가 바뀜           */
/* ================================================= */
.cert-date {
    font-size: 0.9rem;
    /* ★ 바꾸면 → 날짜 글자 크기가 바뀜 */
    color: var(--text-sub);
    margin-bottom: 10px;
    /* ★ 바꾸면 → 날짜와 센터장 사이 간격이 바뀜 */
}

/* ================================================= */
/* ✏️ [뒷면] 발급자 이름 (예: "오금청소년센터장")        */
/* ★ 바꾸면 → 뒷면 상자 맨 아래의 센터장 글자가 바뀜     */
/* ================================================= */
.cert-director {
    font-size: 1.1rem;
    /* ★ 바꾸면 → 센터장 글자 크기가 바뀜 */
    font-weight: 700;
    /* ★ 바꾸면 → 글자 굵기가 바뀜 */
    color: var(--text-main);
    letter-spacing: 2px;
    /* ★ 바꾸면 → 글자 사이 간격이 바뀜 */
}

/* ================================================= */
/* 📊 [뒷면] 카드 하단 바코드 영역                      */
/* ★ 바꾸면 → 뒷면 맨 아래의 바코드+번호 영역이 바뀜     */
/* ================================================= */
.card-footer {
    padding: 20px;
    /* ★ 바꾸면 → 바코드 영역 안쪽 여백이 바뀜 */
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    /* ★ 바꾸면 → 바코드 영역 배경색이 바뀜 */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* 아주 얇은 구분선 */
}

/* [뒷면] 바코드 줄무늬 (장식용) */
.barcode {
    width: 80%;
    /* ★ 바꾸면 → 바코드의 가로 너비가 바뀜 (% 숫자) */
    height: 40px;
    /* ★ 바꾸면 → 바코드의 세로 높이가 바뀜 */
    margin: 0 auto 10px;
    background: repeating-linear-gradient(90deg,
            #333,
            #333 2px,
            transparent 2px,
            transparent 4px,
            #333 4px,
            #333 5px,
            transparent 5px,
            transparent 8px);
    opacity: 0.6;
    /* ★ 바꾸면 → 바코드 진하기가 바뀜 (0 = 안 보임, 1 = 진하게) */
}

/* [뒷면] 바코드 아래 번호 (예: "OGYC-2026-0001") */
.barcode-number {
    font-size: 0.75rem;
    /* ★ 바꾸면 → 바코드 번호 글자 크기가 바뀜 */
    letter-spacing: 2px;
    /* ★ 바꾸면 → 글자 사이 간격이 바뀜 */
    color: var(--text-sub);
    font-family: monospace;
    /* 코드 느낌의 글꼴 */
}