/* --- Reset & Base --- */
:root {
    --bg-light: #ffffff;
    --bg-dark: #000000;
    --text-light: #ffffff;
    --text-dark: #000000;
    --text-gray: #888888;
    --border-color: #eeeeee;
    /* System font stack with Pretendard as fallback */
    --font-main: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, strong, span {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
}
 
/* --- Point Text Styling --- */
.point-text {
    font-weight: 700;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 40%, #003D82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    transition: all 0.3s ease;
    display: inline;
}

.point-text:hover {
    background: linear-gradient(135deg, #1DB6F6 0%, #007AFF 40%, #0051D5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}

.point-text-light {
    font-weight: 600;
    background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 40%, #03A9F4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    transition: all 0.3s ease;
    display: inline;
}

.point-text-light:hover {
    background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 40%, #29B6F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 6px rgba(79, 195, 247, 0.3);
}

/* --- Section-specific Point Text Styles --- */

/* Intro Section - Dynamic Blue to Purple */
.section-intro .point-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.4s ease;
}

.section-intro .point-text:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 50%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

/* Philosophy Section - Tech Green */
.section-philosophy .point-text {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 50%, #11998e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    transition: all 0.4s ease;
}

.section-philosophy .point-text:hover {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 50%, #38ef7d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 12px rgba(56, 239, 125, 0.3);
}

/* About Section - Blue/Green Gradient */
.section-about .point-text {
    background: linear-gradient(135deg, #38ef7d 0%, #43e97b 50%, #1e90ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    transition: all 0.4s ease;
}

.section-about .point-text:hover {
    background: linear-gradient(135deg, #1e90ff 0%, #38ef7d 50%, #43e97b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px rgba(67, 233, 123, 0.3);
}

/* Journey Section - Golden Yellow */
.section-journey .point-text {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 750;
    transition: all 0.4s ease;
}

.section-journey .point-text:hover {
    background: linear-gradient(135deg, #4facfe 0%, #f093fb 50%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Skills Section - Keep original light blue for contrast on dark background */
.section-skills .point-text-light {
    background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 40%, #03A9F4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Research Section - Purple Science */
.section-research .point-text {
    background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    transition: all 0.4s ease;
}

.section-research .point-text:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

/* Projects Section - Dynamic Teal */
.section-project .point-text {
    background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 50%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 650;
    transition: all 0.4s ease;
}

.section-project .point-text:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px rgba(20, 184, 166, 0.3);
}

/* Contact Section - Rose Pink */
.section-contact .point-text {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #be185d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    transition: all 0.4s ease;
}

.section-contact .point-text:hover {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.3);
}

/* Gradient Animation for Intro */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Scroll Progress Bar --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #007AFF 0%, #1DB6F6 50%, #4FC3F7 100%);
    width: 0%;
    transition: width 0.1s ease-out;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
}

.back-to-top::before {
    content: '↑';
    font-weight: bold;
}

/* --- Global Floating Objects --- */
.global-objects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.floating-sphere {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 122, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 122, 255, 0.1);
}

.sphere-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 85%;
    animation: float-sphere-1 20s ease-in-out infinite;
}

.sphere-2 {
    width: 120px;
    height: 120px;
    top: 60%;
    left: 5%;
    animation: float-sphere-2 25s ease-in-out infinite;
}

.sphere-3 {
    width: 60px;
    height: 60px;
    top: 80%;
    left: 80%;
    animation: float-sphere-3 18s ease-in-out infinite;
}

.floating-cube {
    position: absolute;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.06));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    transform-origin: center;
}

.cube-1 {
    width: 40px;
    height: 40px;
    top: 30%;
    left: 10%;
    animation: float-cube-1 15s ease-in-out infinite;
}

.cube-2 {
    width: 55px;
    height: 55px;
    top: 45%;
    left: 90%;
    animation: float-cube-2 22s ease-in-out infinite;
}

.floating-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(0, 122, 255, 0.15);
    background: transparent;
}

.ring-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 50%;
    animation: float-ring-1 30s linear infinite;
}

.ring-2 {
    width: 70px;
    height: 70px;
    top: 70%;
    left: 25%;
    animation: float-ring-2 35s linear infinite;
}

.floating-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.4), rgba(29, 182, 246, 0.6));
}

.particle-1 {
    top: 15%;
    left: 20%;
    animation: float-particle-1 12s ease-in-out infinite;
}

.particle-2 {
    top: 40%;
    left: 70%;
    animation: float-particle-2 14s ease-in-out infinite;
}

.particle-3 {
    top: 65%;
    left: 60%;
    animation: float-particle-3 16s ease-in-out infinite;
}

.particle-4 {
    top: 85%;
    left: 15%;
    animation: float-particle-4 11s ease-in-out infinite;
}

.particle-5 {
    top: 25%;
    left: 95%;
    animation: float-particle-5 13s ease-in-out infinite;
}

/* Animation Keyframes */
@keyframes float-sphere-1 {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    25% { transform: translateX(-100px) translateY(-50px) scale(1.1); }
    50% { transform: translateX(-200px) translateY(30px) scale(0.9); }
    75% { transform: translateX(-50px) translateY(80px) scale(1.05); }
}

@keyframes float-sphere-2 {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    33% { transform: translateX(150px) translateY(-80px) scale(1.2); }
    66% { transform: translateX(300px) translateY(100px) scale(0.8); }
}

@keyframes float-sphere-3 {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    30% { transform: translateX(-80px) translateY(-100px) scale(1.15); }
    60% { transform: translateX(-160px) translateY(50px) scale(0.85); }
}

@keyframes float-cube-1 {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    25% { transform: translateX(200px) translateY(-100px) rotate(90deg); }
    50% { transform: translateX(400px) translateY(50px) rotate(180deg); }
    75% { transform: translateX(200px) translateY(150px) rotate(270deg); }
}

@keyframes float-cube-2 {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    33% { transform: translateX(-180px) translateY(-120px) rotate(-120deg); }
    66% { transform: translateX(-350px) translateY(80px) rotate(-240deg); }
}

@keyframes float-ring-1 {
    0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateX(-200px) translateY(100px) rotate(90deg) scale(1.2); }
    50% { transform: translateX(-400px) translateY(-50px) rotate(180deg) scale(0.8); }
    75% { transform: translateX(-200px) translateY(-150px) rotate(270deg) scale(1.1); }
    100% { transform: translateX(0) translateY(0) rotate(360deg) scale(1); }
}

@keyframes float-ring-2 {
    0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
    20% { transform: translateX(150px) translateY(-80px) rotate(-72deg) scale(1.15); }
    40% { transform: translateX(300px) translateY(60px) rotate(-144deg) scale(0.9); }
    60% { transform: translateX(200px) translateY(180px) rotate(-216deg) scale(1.25); }
    80% { transform: translateX(50px) translateY(100px) rotate(-288deg) scale(0.85); }
    100% { transform: translateX(0) translateY(0) rotate(-360deg) scale(1); }
}

@keyframes float-particle-1 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.4; }
    25% { transform: translateX(300px) translateY(-200px); opacity: 0.8; }
    50% { transform: translateX(600px) translateY(100px); opacity: 0.6; }
    75% { transform: translateX(300px) translateY(300px); opacity: 0.9; }
}

@keyframes float-particle-2 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.5; }
    30% { transform: translateX(-250px) translateY(150px); opacity: 0.7; }
    60% { transform: translateX(-500px) translateY(-100px); opacity: 0.9; }
}

@keyframes float-particle-3 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; }
    40% { transform: translateX(-200px) translateY(-250px); opacity: 0.4; }
    80% { transform: translateX(-400px) translateY(50px); opacity: 0.8; }
}

@keyframes float-particle-4 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.3; }
    35% { transform: translateX(400px) translateY(-300px); opacity: 0.7; }
    70% { transform: translateX(800px) translateY(100px); opacity: 0.5; }
}

@keyframes float-particle-5 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.7; }
    25% { transform: translateX(-150px) translateY(200px); opacity: 0.3; }
    75% { transform: translateX(-300px) translateY(-100px); opacity: 0.9; }
}


/* --- Global Styles --- */
.section {
    width: 100%;
    min-height: 100vh;
    padding: 6rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    scroll-margin-top: 0;
}

/* --- Improved hover effects for cards --- */
.skill-item, .research-item, .project-image-mockup {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skill-item:hover, .research-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.15);
}

.project-image-mockup:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 122, 255, 0.2);
}

/* --- Improved typography hierarchy --- */
h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 4rem;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* --- Better section transitions --- */
.section-intro {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.section-about, .section-journey, .section-research {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.section-philosophy, .section-skills, .section-contact {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

/* --- Enhanced project section --- */
.project-wrapper { 
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
}

/* --- Improved stat items --- */
.stat-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 500;
}

/* --- Improved journey timeline --- */
.journey-item {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.journey-item:hover {
    background: rgba(0, 122, 255, 0.02);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 12px;
    border-bottom: 1px solid rgba(0, 122, 255, 0.2);
}

.journey-item:first-child { 
    border-top: 1px solid var(--border-color); 
}

.journey-item strong { 
    font-size: 1.2rem; 
    font-weight: 700; 
    flex-shrink: 0; 
    margin-right: 2rem; 
    min-width: 160px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.journey-item span { 
    font-size: 1.1rem; 
    color: var(--text-gray); 
    text-align: right; 
    line-height: 1.6; 
}

/* --- Section 1: Intro --- */
.intro-content {
    position: relative;
    z-index: 2;
}

.intro-text {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

.intro-line {
    display: block;
    overflow: hidden;
    margin-bottom: 0.2rem;
}

.digital-experience {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 50%, #003D82 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.digital-experience::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 50%, #003D82 100%);
    border-radius: 2px;
    opacity: 0.6;
}

/* 한자 강조 스타일 */
.hanja-char {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 30%, #003D82 70%, #002147 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    transition: all 0.4s ease;
    animation: hanjaGlow 4s ease-in-out infinite;
}

.hanja-char::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, 
        rgba(0, 122, 255, 0.15), 
        rgba(0, 81, 213, 0.25), 
        rgba(0, 61, 130, 0.15),
        rgba(0, 33, 71, 0.1)
    );
    border-radius: 6px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: hanjaAura 4s ease-in-out infinite;
    filter: blur(1px);
}

.hanja-char:hover::before {
    opacity: 1;
}

@keyframes hanjaGlow {
    0%, 100% {
        filter: brightness(1) contrast(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.2) contrast(1.1);
        transform: scale(1.03);
    }
}

@keyframes hanjaAura {
    0%, 100% {
        opacity: 0;
        transform: scale(0.95);
    }
    25% {
        opacity: 0.4;
        transform: scale(1.05);
    }
    75% {
        opacity: 0.3;
        transform: scale(1.02);
    }
}

.intro-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    pointer-events: none;
    z-index: 1;
}

.floating-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #007AFF, #0051D5);
    border-radius: 50%;
    opacity: 0.3;
}

.floating-dot:nth-child(1) {
    top: 20%;
    left: 15%;
    animation: float1 6s ease-in-out infinite;
}

.floating-dot:nth-child(2) {
    top: 60%;
    right: 20%;
    animation: float2 8s ease-in-out infinite;
}

.floating-dot:nth-child(3) {
    bottom: 25%;
    left: 25%;
    animation: float3 7s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-20px) translateX(10px); }
    66% { transform: translateY(10px) translateX(-15px); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(15px) translateX(-10px); }
    50% { transform: translateY(-10px) translateX(20px); }
    75% { transform: translateY(25px) translateX(-5px); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-30px) translateX(15px); }
}

/* --- Section 2: Philosophy --- */
.section-philosophy {
    background-color: var(--bg-dark);
    color: var(--text-light);
}
.philosophy-text {
    font-size: 4.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin: 0;
}
.philosophy-text div { 
    display: block; 
    margin-bottom: 0.2rem;
}

.philosophy-text span { 
    display: inline; 
}

.philosophy-break {
    display: inline-block;
    white-space: nowrap;
}

/* --- Section 3: About --- */
.section-about {
    flex-direction: row;
    gap: 5rem;
}
.about-image-wrapper { width: 350px; height: 350px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-color: #e8e8e8; background-size: contain; background-position: center; background-repeat: no-repeat; }
.about-text-wrapper { max-width: 500px; }
.about-text-wrapper h2 { text-align: left; margin-bottom: 1rem; font-weight: 700; font-size: 2.5rem; }
.about-text-wrapper p { font-size: 1.1rem; line-height: 1.8; }

/* --- Section 4: Journey --- */
.section-journey h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 4rem;
}
.journey-timeline { width: 100%; max-width: 800px; margin-bottom: 4rem; }

.journey-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3rem;
}

/* --- Section 5: Skills --- */
.section-skills { background-color: var(--bg-dark); color: var(--text-light); }
.section-skills h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.skills-subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 4rem;
    text-align: center;
}
.skills-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    width: 100%;
    max-width: 1200px;
}
.skill-category h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--text-light);
}
.skill-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.skill-item {
    background-color: #1a1a1a;
    padding: 1.5rem;
    border-radius: 10px;
}
.skill-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}
.skill-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
}
.skill-level {
    font-size: 0.9rem;
    color: #4FC3F7;
    font-weight: 600;
}
.skill-bar {
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}
.skill-progress {
    height: 100%;
    background: linear-gradient(90deg, #4FC3F7, #29B6F6);
    border-radius: 2px;
    transition: width 0.8s ease;
}
.skill-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.4;
    margin: 0;
}

/* --- Section 6: Research --- */
.section-research h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.research-subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 4rem;
    text-align: center;
}
.research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
}
.research-item {
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    text-align: center;
}
.research-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}
.research-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}
.research-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}
.research-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.research-stats span {
    font-size: 0.9rem;
    background-color: #f0f0f0;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    color: var(--text-dark);
    font-weight: 500;
}
.research-tech {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.research-tech span {
    font-size: 0.8rem;
    background: linear-gradient(135deg, #4FC3F7, #29B6F6);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-weight: 500;
}

/* --- Section 7: Projects (Apple Style) --- */
.section-projects {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    padding: 8rem 2rem;
    position: relative;
    overflow: hidden;
}

.projects-header {
    text-align: center;
    margin-bottom: 6rem;
    position: relative;
    z-index: 2;
    padding-bottom: 2rem;
}

.projects-header h2 {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b 0%, #475569 50%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(60px);
}

.projects-subtitle {
    font-size: 1.3rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.6;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(40px);
}

.projects-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.project-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(100px) scale(0.9);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.6s ease;
    border-radius: 24px;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.project-card:hover::before {
    opacity: 1;
}

.project-card:nth-child(even) {
    grid-template-columns: 1fr 1fr;
}

.project-card:nth-child(even) .project-visual {
    order: 2;
}

.project-card:nth-child(even) .project-content {
    order: 1;
}

.project-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.project-mockup {
    position: relative;
    width: 100%;
    max-width: 350px;
    aspect-ratio: 4/3;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    padding: 1rem;
    box-shadow: 
        0 16px 32px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-mockup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card:hover .project-mockup {
    transform: scale(1.05) rotateY(5deg);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.project-card:hover .project-mockup::before {
    opacity: 1;
}

.project-icon {
    width: 100%;
    height: 100%;
    max-width: 280px;
    max-height: 210px;
    border-radius: 16px;
    transition: transform 0.4s ease;
    object-fit: contain;
}

/* --- Dynamic Mockup Styles --- */
.mockup-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mockup-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 단어의 숲 애니메이션 */
.mockup-container[data-project="wordforest"] .mockup-floating-word {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.mockup-container[data-project="wordforest"] .word-1 {
    animation-name: wordFloat1;
    animation-delay: 0s;
}

.mockup-container[data-project="wordforest"] .word-2 {
    animation-name: wordFloat2;
    animation-delay: 0.8s;
}

.mockup-container[data-project="wordforest"] .word-3 {
    animation-name: wordFloat3;
    animation-delay: 1.6s;
}

.mockup-container[data-project="wordforest"] .word-4 {
    animation-name: wordFloat4;
    animation-delay: 2.4s;
}

.mockup-container[data-project="wordforest"] .mockup-ai-indicator {
    animation: aiPulse 2s ease-in-out infinite;
}

.mockup-container[data-project="wordforest"] .mockup-progress-bar {
    animation: progressGlow 3s ease-in-out infinite;
}

.mockup-container[data-project="wordforest"] .mockup-connection-lines {
    animation: connectionFlow 4s ease-in-out infinite;
}

.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 50%;
    opacity: 0.6;
}

.particle-1 {
    top: 20%;
    left: 15%;
    animation: particleFloat1 6s ease-in-out infinite;
}

.particle-2 {
    top: 60%;
    left: 80%;
    animation: particleFloat2 8s ease-in-out infinite;
}

.particle-3 {
    top: 40%;
    left: 60%;
    animation: particleFloat3 5s ease-in-out infinite;
}

/* 인사이트 코드 애니메이션 */
.mockup-container[data-project="insight"] .mockup-chart-ring {
    animation: rotate 10s linear infinite;
}

.mockup-container[data-project="insight"] .mockup-chart-element {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.mockup-container[data-project="insight"] .element-1 {
    animation-name: bounce;
    animation-delay: 0s;
}

.mockup-container[data-project="insight"] .element-2 {
    animation-name: slideIn;
    animation-delay: 1s;
}

.mockup-container[data-project="insight"] .element-3 {
    animation-name: scaleUp;
    animation-delay: 2s;
}

.mockup-container[data-project="insight"] .mockup-trend-line {
    animation: drawLine 4s ease-in-out infinite;
}

.data-points {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.data-point {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #11998e;
    border-radius: 50%;
    opacity: 0.8;
}

.point-1 {
    top: 25%;
    left: 20%;
    animation: dataPointFloat1 4s ease-in-out infinite;
}

.point-2 {
    top: 45%;
    left: 70%;
    animation: dataPointFloat2 5s ease-in-out infinite;
}

.point-3 {
    top: 65%;
    left: 40%;
    animation: dataPointFloat3 3s ease-in-out infinite;
}

.point-4 {
    top: 35%;
    left: 85%;
    animation: dataPointFloat4 6s ease-in-out infinite;
}

/* 모바일 학생증 애니메이션 */
.mockup-container[data-project="student"] .mockup-phone-body {
    animation: phoneGlow 3s ease-in-out infinite;
}

.mockup-container[data-project="student"] .mockup-profile-icon {
    animation: profilePulse 2s ease-in-out infinite;
}

.mockup-container[data-project="student"] .mockup-info-line {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.mockup-container[data-project="student"] .line-1 {
    animation-name: typeWriter;
    animation-delay: 0s;
}

.mockup-container[data-project="student"] .line-2 {
    animation-name: typeWriter;
    animation-delay: 0.5s;
}

.mockup-container[data-project="student"] .line-3 {
    animation-name: typeWriter;
    animation-delay: 1s;
}

.mockup-container[data-project="student"] .mockup-qr-code {
    animation: qrScan 4s ease-in-out infinite;
}

.signal-bars {
    position: absolute;
    top: 15%;
    right: 25%;
    display: flex;
    gap: 2px;
    align-items: end;
}

.signal-bar {
    width: 3px;
    background: #fff;
    border-radius: 1px;
}

.bar-1 {
    height: 8px;
    animation: signalBlink 1s ease-in-out infinite;
}

.bar-2 {
    height: 12px;
    animation: signalBlink 1s ease-in-out infinite 0.2s;
}

.bar-3 {
    height: 16px;
    animation: signalBlink 1s ease-in-out infinite 0.4s;
}

.bar-4 {
    height: 20px;
    animation: signalBlink 1s ease-in-out infinite 0.6s;
}

/* 애니메이션 키프레임들 */
@keyframes wordFloat1 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

@keyframes wordFloat2 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-12px) scale(1.03); }
}

@keyframes wordFloat3 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-6px) scale(1.08); }
}

@keyframes wordFloat4 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.06); }
}

@keyframes aiPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes progressGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
}

@keyframes connectionFlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

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

@keyframes particleFloat1 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
    33% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
    66% { transform: translateY(10px) translateX(-5px); opacity: 0.5; }
}

@keyframes particleFloat2 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.4; }
    50% { transform: translateY(-15px) translateX(-10px); opacity: 0.9; }
}

@keyframes particleFloat3 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.6; }
    25% { transform: translateY(-10px) translateX(8px); opacity: 0.3; }
    75% { transform: translateY(8px) translateX(-6px); opacity: 0.8; }
}

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

@keyframes bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes slideIn {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(3px); }
}

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

@keyframes drawLine {
    0% { stroke-dasharray: 0 100; }
    50% { stroke-dasharray: 50 50; }
    100% { stroke-dasharray: 100 0; }
}

@keyframes dataPointFloat1 {
    0%, 100% { transform: translateY(0px); opacity: 0.8; }
    50% { transform: translateY(-8px); opacity: 0.4; }
}

@keyframes dataPointFloat2 {
    0%, 100% { transform: translateX(0px); opacity: 0.8; }
    50% { transform: translateX(5px); opacity: 0.5; }
}

@keyframes dataPointFloat3 {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

@keyframes dataPointFloat4 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.8; }
    33% { transform: translateY(-5px) translateX(3px); opacity: 0.5; }
    66% { transform: translateY(3px) translateX(-2px); opacity: 0.9; }
}

@keyframes phoneGlow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 107, 107, 0.3)); }
    50% { filter: drop-shadow(0 0 15px rgba(255, 167, 38, 0.6)); }
}

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

@keyframes typeWriter {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

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

@keyframes signalBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 기존 SVG 스타일 유지 */
.project-icon circle,
.project-icon rect,
.project-icon polygon,
.project-icon line,
.project-icon text {
    /* SVG 요소 초기 상태 */
    opacity: 0;
    transform: scale(0.8);
}

.project-content {
    position: relative;
}

.project-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    transition: color 0.3s ease;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.project-card:hover .project-title {
    color: #0f172a;
}

.project-description {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-weight: 400;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.project-tag {
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    color: #475569;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(20px) scale(0.8);
}

.project-tag:hover {
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3);
    width: fit-content;
    position: relative;
    overflow: hidden;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.project-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.project-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
    background: linear-gradient(135deg, #334155, #475569);
}

.project-link:hover::before {
    left: 100%;
}

.project-link svg {
    transition: transform 0.3s ease;
}

.project-link:hover svg {
    transform: translateX(4px);
}




/* --- Section 8: Contact (Apple Style) --- */
.section-contact {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.section-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 80%, rgba(0, 122, 255, 0.1), transparent),
                radial-gradient(circle at 70% 20%, rgba(29, 182, 246, 0.08), transparent);
    pointer-events: none;
}

.contact-container {
    max-width: 1000px;
    width: 100%;
    padding: 4rem 2rem;
    position: relative;
    z-index: 2;
}

.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(50px);
}

.contact-subtitle {
    font-size: 1.3rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.contact-main {
    display: flex;
    justify-content: center;
}

.contact-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    transition: all 0.4s ease;
    width: 100%;
    max-width: 400px;
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(40px);
}

.contact-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.1);
}

.contact-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #007AFF, #0051D5);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    transition: all 0.3s ease;
}

.contact-card:hover .contact-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
}

.contact-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.8rem;
}

.contact-link {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 500;
    color: #007AFF;
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
    position: relative;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007AFF, #0051D5);
    transition: width 0.3s ease;
}

.contact-link:hover::after {
    width: 100%;
}

.contact-info p {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
}

.contact-social {
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(40px);
}

.social-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-align: center;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-light);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s ease;
}

.social-link:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.3);
}

.social-link:hover::before {
    left: 100%;
}

.social-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.social-link:hover .social-icon {
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
    transform: scale(1.1);
}

.social-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.social-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.social-desc {
    font-size: 0.85rem;
    color: #64748b;
}

.contact-footer {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(30px);
}

.footer-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 500;
}

.footer-icon {
    color: #f43f5e;
    animation: heartbeat 2s ease-in-out infinite;
}

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

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .section { padding: 4rem 1.5rem; }
    h2 { font-size: 2.5rem; margin-bottom: 3rem; }
    .intro-text { font-size: 3.5rem; }
    .philosophy-text { font-size: 3.5rem; }
    .section-about { flex-direction: column; text-align: center; gap: 3rem; }
    .about-image-wrapper { width: 250px; height: 250px; }
    .about-text-wrapper h2 { text-align: center; }
    .journey-item { flex-direction: column; align-items: flex-start; padding: 1.5rem 0; }
    .journey-item strong { margin-bottom: 0.5rem; }
    .journey-item span { text-align: left; }
    .skills-categories { grid-template-columns: 1fr; }
    .journey-stats { flex-direction: column; gap: 2rem; }
    .research-grid { grid-template-columns: 1fr; }
    .research-item { padding: 1.5rem; }
    .projects-header { padding: 4rem 1rem 3rem; }
    .projects-header h2 { font-size: 2.5rem; }
    .projects-subtitle { font-size: 1.1rem; }
    .projects-container { gap: 4rem; }
    .project-card { 
        grid-template-columns: 1fr !important; 
        gap: 3rem; 
        padding: 2rem;
    }
    .project-card:nth-child(even) .project-visual { order: 0; }
    .project-card:nth-child(even) .project-content { order: 0; }
    .project-mockup { max-width: 350px; }
    .project-title { font-size: 2rem; }
    .project-description { font-size: 1rem; }
    .contact-container { padding: 3rem 1.5rem; }
    .contact-title { font-size: 2.5rem; }
    .contact-content { grid-template-columns: 1fr; gap: 3rem; }
    .contact-card { padding: 2rem; }
    .social-link { padding: 1rem; }
}

@media (max-width: 768px) {
    .section { padding: 3rem 1rem; }
    .section-research { padding: 4rem 1rem 3rem; }
    h2 { font-size: 1.8rem; margin-bottom: 2rem; }
    .intro-text { font-size: 2.5rem; }
    .digital-experience::after { bottom: -6px; height: 2px; }
    .hanja-char {
        font-weight: 700;
        animation-duration: 3s;
    }
    .hanja-char::before {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
    }
    .floating-dot { width: 4px; height: 4px; }
    .philosophy-text { font-size: 2.5rem; }
    
    /* Mobile optimization for floating objects */
    .sphere-1, .sphere-2, .sphere-3 { 
        transform: scale(0.7); 
        opacity: 0.6;
    }
    .cube-1, .cube-2 { 
        transform: scale(0.6); 
        opacity: 0.5;
    }
    .ring-1, .ring-2 { 
        transform: scale(0.5); 
        opacity: 0.4;
    }
    .floating-particle { 
        width: 2px; 
        height: 2px; 
        opacity: 0.3;
    }
    .about-image-wrapper { width: 200px; height: 200px; }
    .about-text-wrapper p { font-size: 1rem; }
    .journey-item strong { font-size: 1.1rem; }
    .journey-item span { font-size: 1rem; }
    .skill-item { padding: 1rem; }
    .skill-name { font-size: 1rem; }
    .journey-stats { gap: 1.5rem; }
    .stat-number { font-size: 2rem; }
    .research-item h3 { font-size: 1.3rem; }
    .research-item p { font-size: 0.9rem; }
    .projects-header { padding: 3rem 1rem 2rem; }
    .projects-header h2 { font-size: 2rem; }
    .projects-container { gap: 3rem; }
    .project-card { 
        padding: 1.5rem; 
        gap: 2rem;
    }
    .project-mockup { max-width: 280px; padding: 1rem; }
    .project-title { font-size: 1.5rem; }
    .project-description { font-size: 0.9rem; }
    .project-tags { gap: 0.5rem; }
    .project-tag { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
    .project-link { padding: 0.8rem 1.5rem; font-size: 0.9rem; }
    .contact-container { padding: 2rem 1rem; }
    .contact-title { font-size: 2rem; }
    .contact-subtitle { font-size: 1.1rem; }
    .contact-header { margin-bottom: 3rem; }
    .contact-content { gap: 2rem; }
    .contact-card { padding: 1.5rem; }
    .contact-icon { width: 48px; height: 48px; }
    .social-icon { width: 40px; height: 40px; }
    .social-link { padding: 0.8rem; }
}

/* --- Smooth scroll behavior --- */
html {
    scroll-behavior: smooth;
}

/* --- Better focus states --- */
a, button, .skill-item, .research-item {
    outline: none;
}

a:focus-visible, button:focus-visible, .skill-item:focus-visible, .research-item:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Performance optimizations --- */
* {
    box-sizing: border-box;
}

body, html {
    overflow-x: hidden;
}

/* --- Better animations performance --- */
.floating-sphere,
.floating-cube,
.floating-ring,
.floating-particle,
.floating-dot {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* === 새로운 다중 SVG 목업 애니메이션 스타일 === */

/* 독서실 회원증 (studyroom) 애니메이션 */
.mockup-container[data-project="studyroom"] .mockup-scan-line {
    animation: scanLine 2s ease-in-out infinite;
}

.mockup-container[data-project="studyroom"] .status-indicator {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 12px;
    height: 12px;
}

.mockup-container[data-project="studyroom"] .status-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #00ff88;
    animation: statusPulse 2s ease-in-out infinite;
}

.mockup-container[data-project="studyroom"] .status-dot.active {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

@keyframes scanLine {
    0%, 100% { transform: translateY(0px); opacity: 0.8; }
    50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* 한강물 온도 (hangang) 애니메이션 */
.mockup-container[data-project="hangang"] .mockup-wave {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.mockup-container[data-project="hangang"] .wave-1 {
    animation-name: waveFloat1;
    animation-delay: 0s;
}

.mockup-container[data-project="hangang"] .wave-2 {
    animation-name: waveFloat2;
    animation-delay: 1s;
}

.mockup-container[data-project="hangang"] .sun-rays {
    animation: sunRotate 8s linear infinite;
    transform-origin: 200px 120px;
}

.mockup-container[data-project="hangang"] .floating-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mockup-container[data-project="hangang"] .bubble {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(116, 185, 255, 0.6);
    border-radius: 50%;
    animation: bubbleFloat 4s ease-in-out infinite;
}

.mockup-container[data-project="hangang"] .bubble-1 {
    left: 60px;
    bottom: 80px;
    animation-delay: 0s;
}

.mockup-container[data-project="hangang"] .bubble-2 {
    left: 300px;
    bottom: 90px;
    animation-delay: 1s;
}

.mockup-container[data-project="hangang"] .bubble-3 {
    left: 150px;
    bottom: 85px;
    animation-delay: 2s;
}

.mockup-container[data-project="hangang"] .bubble-4 {
    left: 250px;
    bottom: 95px;
    animation-delay: 3s;
}

@keyframes waveFloat1 {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.6; }
    50% { transform: scaleX(1.1) scaleY(0.9); opacity: 0.8; }
}

@keyframes waveFloat2 {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.4; }
    50% { transform: scaleX(0.9) scaleY(1.1); opacity: 0.6; }
}

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

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
    25% { transform: translateY(-15px) scale(1.1); opacity: 0.8; }
    75% { transform: translateY(-5px) scale(0.9); opacity: 0.4; }
}

/* ivViewer (ivviewer) 애니메이션 */
.mockup-container[data-project="ivviewer"] .mockup-webtoon-page {
    animation: pageSlide 4s ease-in-out infinite;
}

.mockup-container[data-project="ivviewer"] .page-1 {
    animation-delay: 0s;
}

.mockup-container[data-project="ivviewer"] .page-2 {
    animation-delay: 1.3s;
}

.mockup-container[data-project="ivviewer"] .page-3 {
    animation-delay: 2.6s;
}

.mockup-container[data-project="ivviewer"] .mockup-loading-page {
    animation: loadingFade 2s ease-in-out infinite;
}

.mockup-container[data-project="ivviewer"] .mockup-scroll-indicator {
    animation: scrollMove 3s ease-in-out infinite;
}

.mockup-container[data-project="ivviewer"] .update-dots {
    position: absolute;
    top: 60px;
    left: 50px;
    display: flex;
    gap: 5px;
}

.mockup-container[data-project="ivviewer"] .update-dot {
    width: 6px;
    height: 6px;
    background: #fd79a8;
    border-radius: 50%;
    animation: updateBlink 1.5s ease-in-out infinite;
}

.mockup-container[data-project="ivviewer"] .dot-1 { animation-delay: 0s; }
.mockup-container[data-project="ivviewer"] .dot-2 { animation-delay: 0.5s; }
.mockup-container[data-project="ivviewer"] .dot-3 { animation-delay: 1s; }

@keyframes pageSlide {
    0%, 80%, 100% { transform: translateX(0px); opacity: 1; }
    10%, 70% { transform: translateX(-5px); opacity: 0.8; }
}

@keyframes loadingFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

@keyframes scrollMove {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
}

@keyframes updateBlink {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* QWER DNS (qwerdns) 애니메이션 */
.mockup-container[data-project="qwerdns"] .mockup-network-signal {
    animation: signalPulse 2s ease-in-out infinite;
}

.mockup-container[data-project="qwerdns"] .signal-1 {
    animation-delay: 0s;
}

.mockup-container[data-project="qwerdns"] .signal-2 {
    animation-delay: 0.7s;
}

.mockup-container[data-project="qwerdns"] .signal-3 {
    animation-delay: 1.4s;
}

.mockup-container[data-project="qwerdns"] .mockup-connection-line {
    animation: connectionFlow 3s ease-in-out infinite;
}

.mockup-container[data-project="qwerdns"] .security-status {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 24px;
    height: 24px;
}

.mockup-container[data-project="qwerdns"] .status-ring {
    width: 100%;
    height: 100%;
    border: 3px solid #00b894;
    border-radius: 50%;
    animation: securityScan 4s linear infinite;
}

@keyframes signalPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes connectionFlow {
    0%, 100% { stroke-dashoffset: 0; opacity: 0.7; }
    50% { stroke-dashoffset: 10; opacity: 1; }
}

@keyframes securityScan {
    0% { transform: rotate(0deg); border-color: #00b894; }
    25% { transform: rotate(90deg); border-color: #00a085; }
    50% { transform: rotate(180deg); border-color: #00b894; }
    75% { transform: rotate(270deg); border-color: #00a085; }
    100% { transform: rotate(360deg); border-color: #00b894; }
}

/* ivLis API (ivlisapi) 애니메이션 */
.mockup-container[data-project="ivlisapi"] .mockup-data-block {
    animation: dataLoad 3s ease-in-out infinite;
}

.mockup-container[data-project="ivlisapi"] .block-1 {
    animation-delay: 0s;
}

.mockup-container[data-project="ivlisapi"] .block-2 {
    animation-delay: 0.5s;
}

.mockup-container[data-project="ivlisapi"] .block-3 {
    animation-delay: 1s;
}

.mockup-container[data-project="ivlisapi"] .mockup-loading-indicator {
    animation: loadingSpinner 1s linear infinite;
    transform-origin: 280px 120px;
}

.mockup-container[data-project="ivlisapi"] .mockup-cursor {
    animation: cursorBlink 1s ease-in-out infinite;
}

.mockup-container[data-project="ivlisapi"] .network-requests {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mockup-container[data-project="ivlisapi"] .request-dot {
    width: 8px;
    height: 3px;
    background: #6c5ce7;
    border-radius: 2px;
    animation: requestFlow 2s ease-in-out infinite;
}

.mockup-container[data-project="ivlisapi"] .dot-1 { animation-delay: 0s; }
.mockup-container[data-project="ivlisapi"] .dot-2 { animation-delay: 0.3s; }
.mockup-container[data-project="ivlisapi"] .dot-3 { animation-delay: 0.6s; }

@keyframes dataLoad {
    0%, 100% { opacity: 0.5; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.05); }
}

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

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes requestFlow {
    0%, 100% { transform: translateX(0px); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
}

/* ivLog (ivlog) 애니메이션 */
.mockup-container[data-project="ivlog"] .mockup-content-line {
    animation: contentWrite 4s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .line-1 {
    animation-delay: 0s;
}

.mockup-container[data-project="ivlog"] .line-2 {
    animation-delay: 0.8s;
}

.mockup-container[data-project="ivlog"] .line-3 {
    animation-delay: 1.6s;
}

.mockup-container[data-project="ivlog"] .line-4 {
    animation-delay: 2.4s;
}

.mockup-container[data-project="ivlog"] .mockup-typing-cursor {
    animation: typingCursor 1s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .mockup-like-button {
    animation: likePulse 3s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .mockup-new-post-notification {
    animation: notificationBlink 2s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .mockup-scroll-progress {
    animation: scrollProgress 5s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .idea-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mockup-container[data-project="ivlog"] .idea-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fab1a0;
    border-radius: 50%;
    animation: ideaFloat 3s ease-in-out infinite;
}

.mockup-container[data-project="ivlog"] .particle-1 {
    top: 50px;
    left: 50px;
    animation-delay: 0s;
}

.mockup-container[data-project="ivlog"] .particle-2 {
    top: 70px;
    right: 80px;
    animation-delay: 1s;
}

.mockup-container[data-project="ivlog"] .particle-3 {
    bottom: 100px;
    left: 80px;
    animation-delay: 2s;
}

@keyframes contentWrite {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(1.02); opacity: 0.8; }
}

@keyframes typingCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes likePulse {
    0%, 90%, 100% { transform: scale(1); }
    95% { transform: scale(1.1); }
}

@keyframes notificationBlink {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes scrollProgress {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

@keyframes ideaFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
    25% { transform: translateY(-8px) rotate(90deg); opacity: 1; }
    75% { transform: translateY(-3px) rotate(270deg); opacity: 0.8; }
}