/* ==========================================================================
   파일명: visual-feedback.css
   설명: 저시력자, 장애인, 고령자를 위한 시각적 피드백 강화
   ========================================================================== */

/* ==========================================================================
   1. 버튼 상호작용 피드백
   ========================================================================== */

/* 모든 버튼 기본 트랜지션 */
button,
.btn,
input[type="submit"],
input[type="button"] {
    transition: all 0.2s ease;
    position: relative;
}

/* 호버 시 - 살짝 위로 올라가는 효과 */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 클릭 시 - 눌리는 효과 */
button:active:not(:disabled),
.btn:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Primary 버튼 강조 */
.btn-primary:hover {
    background: #004494 !important;
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.3) !important;
}

/* 비활성화된 버튼 */
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================================================
   2. 입력란 포커스 강화
   ========================================================================== */

/* 입력란 포커스 시 - 더 명확한 테두리와 빛나는 효과 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border: 3px solid #0056b3 !important;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.2) !important;
    outline: none !important;
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* 입력란 에러 상태 */
input.error,
textarea.error {
    border: 3px solid #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2) !important;
}

/* 입력란 성공 상태 */
input.success,
textarea.success {
    border: 3px solid #28a745 !important;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2) !important;
}

/* ==========================================================================
   3. 로딩 상태 표시
   ========================================================================== */

/* 로딩 중 버튼 */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 15px;
    margin-top: -8px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* 로딩 텍스트 */
.loading-text {
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   4. 성공/실패 메시지 애니메이션
   ========================================================================== */

/* 부드럽게 나타나기 */
.fade-in {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 에러 메시지 흔들림 효과 */
.shake {
    animation: shake 0.5s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px);
    }
}

/* 성공 메시지 체크마크 애니메이션 */
.success-checkmark {
    display: inline-block;
    animation: scaleIn 0.3s ease-in-out;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   5. 링크 및 상호작용 요소 강화
   ========================================================================== */

/* 링크 호버 시 */
a:hover {
    text-decoration: underline;
    transition: all 0.2s ease;
}

/* 클릭 가능한 카드 */
.card:hover,
.card-horizontal:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease;
}

.card:focus-visible,
.card-horizontal:focus-visible {
    outline: 4px solid #FFD700 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #222, 0 0 0 6px #FFD700 !important;
}

/* 체크박스/라디오 버튼 강화 */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    transform: scale(1.1);
    transition: transform 0.1s ease;
}

/* ==========================================================================
   6. 진행 상태 표시
   ========================================================================== */

/* 진행 바 */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0056b3, #0073e6);
    border-radius: 4px;
    transition: width 0.3s ease;
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% {
        background-position: -100% 0;
    }

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

/* ==========================================================================
   7. 툴팁 및 도움말
   ========================================================================== */

/* 툴팁 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.tooltip:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ==========================================================================
   8. 알림 배너 (Toast)
   ========================================================================== */

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success {
    border-left: 4px solid #28a745;
}

.toast.error {
    border-left: 4px solid #dc3545;
}

.toast.info {
    border-left: 4px solid #0056b3;
}

/* ==========================================================================
   9. 스켈레톤 로딩 (콘텐츠 로딩 중)
   ========================================================================== */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

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

/* ==========================================================================
   10. 고대비 모드 대응
   ========================================================================== */

/* 고대비 모드에서도 애니메이션 유지 */
body[data-theme="high-contrast"] button:hover,
body[data-theme="high-contrast"] .btn:hover {
    transform: translateY(-2px);
    border: 3px solid #00FF00 !important;
}

body[data-theme="high-contrast"] input:focus {
    border: 4px solid #FFFF00 !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.3) !important;
}

/* ==========================================================================
   11. 모바일 대응
   ========================================================================== */

@media (max-width: 768px) {

    /* 모바일에서는 호버 효과 제거 (터치 디바이스) */
    button:hover,
    .btn:hover,
    .card:hover {
        transform: none;
    }

    /* 터치 시 피드백 강화 */
    button:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    /* 툴팁 크기 조정 */
    .tooltip::after {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}

/* ==========================================================================
   12. 접근성 - 애니메이션 감소 설정 존중
   ========================================================================== */

/* 사용자가 애니메이션 감소를 선호하는 경우 */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}