/*
    style.css
    - Custom styles to complement Tailwind CSS.
    - Defines a magazine-like feel and custom component styles.
*/

/* 1. Global Font & Body Styles */
body {
    font-family: 'Pretendard', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* For magazine-like text rendering */
h1, h2, h3, h4, h5, h6, p, a, span, div {
    text-rendering: optimizeLegibility;
    word-break: keep-all;
}

.bg-gradient-dark {
    background-color: #111111; /* Fallback */
    background: radial-gradient(ellipse at center, #1c1c1c 0%, #111111 100%);
}
.aos-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}
.aos-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 커스텀 딜레이 클래스 */
.delay-200 { transition-delay: 200ms; }
.delay-400 { transition-delay: 400ms; }

/* The Success Logic - Connecting Lines (CSS) */
.success-logic-grid {
    position: relative;
}
/* Common styles for connecting lines */
.success-logic-grid > div {
    position: relative;
    isolation: isolate; /* Ensures z-index works against pseudo-elements */
}
.success-logic-grid > div::after { /* Horizontal line */
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    transition: background-color 0.3s ease;
}
.success-logic-grid > div:not(:last-child)::before { /* Vertical line for smaller screens */
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    transition: background-color 0.3s ease;
}
.success-logic-grid > div:hover::after,
.success-logic-grid > div:hover::before {
     background-color: rgba(59, 130, 246, 0.5); /* Accent blue on hover */
}

/* Large screens (lg and up) */
@media (min-width: 1024px) {
    .success-logic-grid > div::after { /* Horizontal lines */
        height: 2px;
        width: calc(100% + 2rem); /* Connects across gap-8 (2rem) */
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
    }
    .success-logic-grid > div:nth-child(4n)::after { /* Hide last horizontal line in each row */
        display: none;
    }
    .success-logic-grid > div::before { /* Hide vertical lines on lg */
        display: none;
    }
}

/* Medium screens (sm to lg) */
@media (min-width: 640px) and (max-width: 1023px) {
    .success-logic-grid > div::after { /* Horizontal lines for odd items */
        height: 2px;
        width: calc(100% + 2rem); /* Connects across gap-8 (2rem) */
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
    }
    .success-logic-grid > div:nth-child(even)::after { /* Hide horizontal for even items */
        display: none;
    }
    .success-logic-grid > div::before { /* Vertical lines for first two items */
        width: 2px;
        height: calc(100% + 2rem); /* Connects across gap-8 (2rem) */
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .success-logic-grid > div:nth-child(3)::before,
    .success-logic-grid > div:nth-child(4)::before { /* Hide vertical for last two items */
        display: none;
    }
}

/* Small screens (mobile) */
@media (max-width: 639px) {
    .success-logic-grid > div::after { /* Hide horizontal on mobile */
        display: none;
    }
    .success-logic-grid > div:not(:last-child)::before { /* Vertical lines */
        width: 2px;
        height: calc(100% + 2rem); /* Connects across gap-8 (2rem) */
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    /* Adjust font sizes for main titles on mobile */
    h2 {
        font-size: 2.25rem !important; /* Equivalent to Tailwind's text-4xl */
        line-height: 1.2 !important; /* Adjust line-height for better readability */
    }
    h3 {
        font-size: 2.25rem !important; /* Make h3 same size as h2 on mobile */
        line-height: 1.2 !important; /* Adjust line-height for better readability */
    }
    h4 {
        font-size: 1.25rem !important; /* Equivalent to Tailwind's text-xl */
        line-height: 1.2 !important; /* Adjust line-height for better readability */
    }
    p {
        font-size: 1rem !important; /* Adjust paragraph font size for mobile */
        line-height: 1.6 !important; /* Adjust line-height for better readability */
    }
}