/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    /* Korean typography: prevent mid-word line breaks in CJK text.
       Without this, browsers break Korean text at any syllable, causing
       orphaned single words (e.g. "검색") to wrap onto their own line
       and create awkward visual gaps. keep-all forces breaks only at
       spaces/punctuation. overflow-wrap fallback handles long Latin
       words/URLs that would otherwise overflow. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Fade in animation class */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.fade-in.delay-100 {
    animation-delay: 0.1s;
}

.fade-in.delay-200 {
    animation-delay: 0.2s;
}

.fade-in.delay-300 {
    animation-delay: 0.3s;
}

/* Scroll animations — SAFE DEFAULTS (2026-05-25 hotfix)
   기본 상태를 visible로 유지. JS의 IntersectionObserver가 실패하거나
   element를 놓쳐도 콘텐츠가 항상 보이도록 안전망. transition만 적용해서
   .active 토글 시 부드럽게 전환 효과 가능 (사용 시).
   이전엔 opacity:0으로 시작했다가 일부 모바일 페이지에서 콘텐츠가
   영영 안 보이는 버그 발생. */
.scroll-fade-in {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.scroll-slide-left {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

.scroll-slide-right {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Navigation hover effects */
nav a {
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #235945;
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/* Button hover effects */
button {
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.hover\:shadow-xl {
    transition: all 0.3s ease;
}

.hover\:shadow-xl:hover {
    transform: translateY(-5px);
}

/* Form input focus effects */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(35, 89, 69, 0.1);
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #235945;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Logo background blend */
.logo-container {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.logo-container:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure logo image is never distorted */
img[src="logo.jpg"] {
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #235945;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2F735A;
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
    transition: all 0.3s ease;
}

/* Parallax effect for hero section */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #235945 0%, #2F735A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Image hover effects */
.image-hover {
    overflow: hidden;
}

.image-hover img {
    transition: transform 0.5s ease;
}

.image-hover:hover img {
    transform: scale(1.1);
}

/* Floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* Success message styles */
.success-message {
    background-color: #10b981;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    animation: fadeIn 0.5s ease-out;
}

/* Error message styles */
.error-message {
    background-color: #ef4444;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    animation: fadeIn 0.5s ease-out;
}

/* Mobile menu animation */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

#mobile-menu.active {
    transform: translateX(0);
}

/* Scroll to top button animation */
#scroll-top {
    transition: all 0.3s ease;
}

#scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .fade-in {
        animation-duration: 0.6s;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}

/* Print styles */
@media print {
    nav, footer, .floating {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #235945;
    outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}