html {
    height: 100%;
}

body {
    background-color: #f8f9fa;
    font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
}

main {
    flex: 1;
}

footer {
    transition: all 0.3s;
}

h1, h2, h3 {
    font-weight: 700;
    margin-top: 1.5rem;
}

/* 마우스 올렸을 때 더 밝게 변하는 효과 */
.hover-white:hover {
    color: white !important;
    transition: color 0.3s ease;
    transform: translateY(-2px);
    display: inline-block;
}

.myCard {
    padding: 1.6rem;
    border-radius: 15px;
    background: #fff;
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    .myCard:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }


.mysection {
    background-color: #ffffff;
    padding: 2rem;
    margin-bottom: 3rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.clickable-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-width: 2px; /* 테두리 강조 */
}

    /* 마우스 오버 시 효과 */
    .clickable-card:hover {
        transform: translateY(-8px); /* 더 높게 떠오름 */
        shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* 그림자 강화 */
        background-color: #f8f9fa; /* 배경색 살짝 변경 */
    }


/* ASP.NET Core 유효성 검사 메시지 스타일 (빨간색) */
.field-validation-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* 입력창 에러 시 테두리 색상 */
.input-validation-error {
    border-color: #dc3545 !important;
}

/* 공통 버튼 효과 */
.btn-primary {
    background-color: #007bff;
    border: none;
    transition: all 0.2s ease;
}

    .btn-primary:hover {
        background-color: #0056b3;
        transform: translateY(-1px);
    }

/* 이미지 컨테이너: 중앙 정렬 및 여백 */
.img-box {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* 이미지 프레임: 흰색 배경, 테두리, 그림자 */
.img-frame {
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    max-width: 600px;
}

/* 이미지 본체: 반응형 설정 */
.img-custom {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    display: block;
}





    /* 섹션 내 제목 스타일링 */
    .mysection h2, .mysection h3 {
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 1.5rem;
        border-left: 5px solid #007bff; /* 포인트 컬러 바 */
        padding-left: 15px;
    }


/* --- 커스텀 보라색 테마 --- */
/* 1. 글자 색상 */
.text-purple {
    color: #6f42c1 !important;
}
/* 2. 경계선 색상 */
.border-purple {
    border-color: #6f42c1 !important;
}
/* 3. 배경 색상 */
.bg-purple {
    background-color: #6f42c1 !important;
}
/* 4. 아웃라인 버튼 (부트스트랩 스타일) */
.btn-outline-purple {
    color: #6f42c1;
    border-color: #6f42c1;
}
    .btn-outline-purple:hover {
        background-color: #6f42c1;
        color: #fff;
    }
    .btn-outline-purple:focus, .btn-outline-purple.focus {
        box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5);
    }
/* 5. 옅은 배경 (Subtle) - 강조용 */
.bg-purple-light {
    background-color: rgba(111, 66, 193, 0.1) !important;
}

/* --- 커스텀 오렌지 테마 --- */
/* 1. 글자 색상 */
.text-orange {
    color: #F58B00 !important;
}
/* 2. 경계선 색상 */
.border-orange {
    border-color: #F58B00 !important;
}
/* 3. 배경 색상 */
.bg-orange {
    background-color: #F58B00 !important;
}
/* 4. 아웃라인 버튼 (부트스트랩 스타일) */
.btn-outline-orange {
    color: #F58B00;
    border-color: #F58B00;
}

    .btn-outline-orange:hover {
        background-color: #F58B00;
        color: #fff;
    }
    /* 포커스 시 그림자 효과 (RGBA 값 조정) */
    .btn-outline-orange:focus, .btn-outline-orange.focus {
        box-shadow: 0 0 0 0.25rem rgba(255, 145, 0, 0.5);
    }
/* 5. 옅은 배경 (Subtle) - 강조용 */
.bg-orange-light {
    background-color: rgba(255, 145, 0, 0.1) !important;
}
/* 6. 버튼 채우기 스타일 */
.btn-orange {
    background-color: #F58B00;
    color: #fff;
    border: none;
}
    .btn-orange:hover {
        background-color: #D77A00; /* 살짝 어두운 오렌지 */
        color: #fff;
    }