/* External imports removed to prevent ERR_NAME_NOT_RESOLVED errors */


/* Hero Section - about.html은 중앙 정렬 */
.hero-section.start {
    background: radial-gradient(circle at 40% 70%, #0b2242 0%, #15161b 100%);
    color: var(--color-text-light);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 0 2rem 0;
    text-align: center;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: visible;
    margin-top: calc(-1 * var(--navbar-height));
    padding-top: calc(var(--navbar-height) + 2rem);
}

/* CC SVG Overlay - 중간 레이어 */
.cc-svg-overlay {
    position: absolute;
    top: calc(-1 * var(--navbar-height));
    left: 0;
    width: 100%;
    height: calc(100% + var(--navbar-height));
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-svg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: brightness(1.0);
}

/* 금융 차트 캔버스 */
.financial-chart-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    opacity: 0.3;
}

/* 파티클 캔버스 */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
}

/* 별자리 연결선 캔버스 */
.constellation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 13;
    pointer-events: none;
}

/* 금융 용어 오버레이 */
.financial-terms-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 14;
    pointer-events: none;
    overflow: visible;
}

.financial-term {
    position: absolute;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(186, 170, 99, 0.7);
    font-family: 'Courier New', monospace;
    opacity: 0;
    animation: floatTerm 8s infinite ease-in-out, twinkle 3s infinite ease-in-out;
    text-shadow: 0 0 15px rgba(186, 170, 99, 0.6),
                 0 0 30px rgba(186, 170, 99, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

.financial-term::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(186, 170, 99, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(186, 170, 99, 0.6),
                0 0 20px rgba(186, 170, 99, 0.4);
    animation: pulse 2s infinite ease-in-out;
}

.financial-term:hover {
    color: rgba(186, 170, 99, 1);
    text-shadow: 0 0 20px rgba(186, 170, 99, 0.9),
                 0 0 40px rgba(186, 170, 99, 0.6);
    transform: scale(1.2);
}

.financial-term:hover::before {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 15px rgba(186, 170, 99, 0.9),
                0 0 30px rgba(186, 170, 99, 0.6);
}

.term-1 { top: 15%; left: 10%; animation-delay: 0s; }
.term-2 { top: 25%; right: 15%; animation-delay: 1s; }
.term-3 { top: 45%; left: 8%; animation-delay: 2s; }
.term-4 { top: 60%; right: 12%; animation-delay: 3s; }
.term-5 { top: 75%; left: 15%; animation-delay: 4s; }
.term-6 { top: 35%; right: 8%; animation-delay: 5s; }
.term-7 { top: 55%; left: 20%; animation-delay: 6s; }
.term-8 { top: 80%; right: 20%; animation-delay: 7s; }

@keyframes floatTerm {
    0%, 100% {
        opacity: 0.6;
        transform: translateY(0) translateX(0) scale(1);
    }
    25% {
        transform: translateY(-15px) translateX(5px) scale(1.05);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) translateX(-5px) scale(1);
    }
    75% {
        transform: translateY(-20px) translateX(3px) scale(1.05);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* 금융 수식 컨테이너 */
.financial-formula-container {
    position: relative;
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    z-index: 20;
}

.formula-item {
    background: rgba(10, 35, 66, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(186, 170, 99, 0.3);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
    cursor: pointer;
}

.formula-item.show {
    opacity: 1;
    transform: translateY(0);
}

.formula-item:hover {
    background: rgba(10, 35, 66, 0.9);
    border-color: rgba(186, 170, 99, 0.6);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(186, 170, 99, 0.2);
}

.formula-text {
    display: block;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    color: #baaa63;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.formula-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.formula-1 { animation-delay: 2s; }

/* Hero Section Content - 최상위 레이어 */
.hero-section .container {
    position: relative;
    z-index: 50 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-section.start h1 {
    font-size: 5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.7;
    text-align: center;
    letter-spacing: 0.1em;
    perspective: 1000px;
    transform-style: preserve-3d;
}

  /* 드라마틱한 현대식 애니메이션 */
.fade-in {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) scale(0.5) rotateX(90deg);
    filter: blur(10px);
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: dramaticReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* 글자별 애니메이션 딜레이 */
  .char-1 { 
    animation-delay: 0.1s; 
  }
  .char-2 { 
    animation-delay: 0.25s; 
  }
  .char-3 { 
    animation-delay: 0.4s; 
  }
  .char-4 { 
    animation-delay: 1.0s; 
  }
  .char-5 { 
    animation-delay: 1.15s; 
  }
  .char-6 { 
    animation-delay: 1.3s; 
  }
  
  /* 드라마틱한 등장 애니메이션 */
  @keyframes dramaticReveal {
    0% {
      opacity: 0;
      transform: translateY(50px) scale(0.5) rotateX(90deg);
      filter: blur(10px);
    }
    50% {
      opacity: 0.8;
      transform: translateY(-10px) scale(1.1) rotateX(0deg);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) rotateX(0deg);
      filter: blur(0);
    }
  }
  
  /* 호버 시 추가 효과 */
  .fade-in:hover {
    transform: scale(1.1) translateY(-5px);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8),
                 0 0 60px rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

/* 금융 이론 느낌 강화 - 타이틀 효과 */
.theory-reality-title {
    position: relative;
    z-index: 20;
}

.theory-reality-title .fade-in {
    position: relative;
    transition: all 0.3s ease;
}

.theory-reality-title .fade-in::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #baaa63, transparent);
    transition: width 0.5s ease;
}

.theory-reality-title .fade-in:hover::after {
    width: 100%;
}

/* 모바일에서 금융 용어 최적화 */
@media (max-width: 768px) {
    .financial-terms-overlay {
        display: block !important;
    }
    
    .financial-term {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: rgba(186, 170, 99, 0.9) !important;
        opacity: 0.8 !important;
        text-shadow: 0 0 20px rgba(186, 170, 99, 0.8),
                     0 0 40px rgba(186, 170, 99, 0.5),
                     0 2px 4px rgba(0, 0, 0, 0.3) !important;
        animation: floatTermMobile 6s infinite ease-in-out, twinkleMobile 2s infinite ease-in-out !important;
    }
    
    .financial-term::before {
        width: 10px !important;
        height: 10px !important;
        box-shadow: 0 0 15px rgba(186, 170, 99, 0.9),
                    0 0 30px rgba(186, 170, 99, 0.6) !important;
    }
    
    /* 모바일에서 용어 위치 재조정 - 화면 중앙에 더 가깝게 배치 */
    .term-1 { top: 20%; left: 5%; animation-delay: 0s; }
    .term-2 { top: 30%; right: 5%; animation-delay: 0.5s; }
    .term-3 { top: 50%; left: 5%; animation-delay: 1s; }
    .term-4 { top: 65%; right: 5%; animation-delay: 1.5s; }
    .term-5 { top: 80%; left: 5%; animation-delay: 2s; }
    .term-6 { top: 40%; right: 5%; animation-delay: 2.5s; }
    .term-7 { top: 60%; left: 5%; animation-delay: 3s; }
    .term-8 { top: 85%; right: 5%; animation-delay: 3.5s; }
    
    /* 모바일용 애니메이션 - 더 부드럽고 눈에 잘 띄게 */
    @keyframes floatTermMobile {
        0%, 100% {
            opacity: 0.8;
            transform: translateY(0) translateX(0) scale(1);
        }
        25% {
            transform: translateY(-10px) translateX(3px) scale(1.05);
        }
        50% {
            opacity: 1;
            transform: translateY(-8px) translateX(-3px) scale(1);
        }
        75% {
            transform: translateY(-12px) translateX(2px) scale(1.05);
        }
    }
    
    @keyframes twinkleMobile {
        0%, 100% {
            opacity: 0.8;
        }
        50% {
            opacity: 1;
        }
    }
    
    .financial-formula-container {
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .formula-item {
        padding: 1rem 1.5rem;
    }
    
    .formula-text {
        font-size: 0.9rem;
    }
    
    .formula-label {
        font-size: 0.8rem;
    }
}

/* 작은 모바일 화면 (480px 이하) 추가 최적화 */
@media (max-width: 480px) {
    .financial-term {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: rgba(186, 170, 99, 1) !important;
        opacity: 0.9 !important;
        text-shadow: 0 0 25px rgba(186, 170, 99, 1),
                     0 0 50px rgba(186, 170, 99, 0.7),
                     0 3px 6px rgba(0, 0, 0, 0.4) !important;
    }
    
    .financial-term::before {
        width: 12px !important;
        height: 12px !important;
        box-shadow: 0 0 20px rgba(186, 170, 99, 1),
                    0 0 40px rgba(186, 170, 99, 0.8) !important;
    }
    
    /* 작은 화면에서는 용어 수를 줄이고 더 중앙에 배치 */
    .term-1 { top: 25%; left: 8%; }
    .term-2 { top: 40%; right: 8%; }
    .term-3 { top: 60%; left: 8%; }
    .term-4 { top: 75%; right: 8%; }
    .term-5 { display: none; } /* 일부 용어 숨김 */
    .term-6 { display: none; }
    .term-7 { display: none; }
    .term-8 { display: none; }
}

.about-section {
    background-color: #ffffff; /* White background */
    color: #212529; /* Default dark text color for readability */
    /* py-5 class in HTML will handle top/bottom padding (3rem) for the inner container */
    /* margin-top: 100px is inline in HTML, applies to the whole section */
}

/* Styles for content within .about-section's inner .container */
.about-section .container h2,
.about-section .container h5 {
    color: #0A2342; /* Match heading color to the site's dark blue */
}

.about-section .container p,
.about-section .container li {
    color: #495057; /* Slightly lighter dark gray for body text */
}

  /* ===== MODERN MISSION SECTION ===== */
  .mission-modern {
    position: relative;
    width: 100%;
    min-height: 80vh;
    padding: 6rem 5rem;
    background: #ffffff;
    color: #0A2342;
    text-align: center;
    overflow: hidden;
  }
  
  .mission-modern .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  .mission-header {
    margin-bottom: 4rem;
  }
  
  .mission-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #0A2342;
    background: linear-gradient(135deg, #0A2342 0%, #6c8299 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
  }
  
  .mission-title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #baaa63 0%, #6c8299 100%);
    margin: 0 auto;
    border-radius: 2px;
    animation: expandWidth 1s ease-out 0.5s both;
  }
  
  @keyframes expandWidth {
    from {
      width: 0;
    }
    to {
      width: 80px;
    }
  }
  
  .mission-content-wrapper {
    position: relative;
  }
  
  .mission-description {
    font-size: 1.6rem;
    line-height: 2;
    color: #2c3e50;
    margin-bottom: 4rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .mission-description.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .mission-highlight {
    color: #baaa63;
    font-weight: 700;
    position: relative;
    display: inline-block;
  }
  
  .mission-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(186, 170, 99, 0.2);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: highlightExpand 1s ease-out 1s both;
  }
  
  @keyframes highlightExpand {
    to {
      transform: scaleX(1);
    }
  }
  
  /* Financial Metrics Grid */
  .financial-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 4rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .metric-card {
    background: #ffffff;
    border: 2px solid #e8ecef;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(10, 35, 66, 0.05);
    opacity: 0;
    transform: translateY(30px);
    animation: cardFadeIn 0.8s ease forwards;
  }
  
  .metric-card:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .metric-card:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .metric-card:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  @keyframes cardFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #baaa63 0%, #6c8299 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  
  .metric-card:hover {
    transform: translateY(-8px);
    border-color: #baaa63;
    box-shadow: 0 12px 40px rgba(186, 170, 99, 0.15);
  }
  
  .metric-card:hover::before {
    transform: scaleX(1);
  }
  
  .metric-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    color: #baaa63;
    transition: all 0.4s ease;
  }
  
  .metric-icon svg {
    width: 100%;
    height: 100%;
  }
  
  .metric-card:hover .metric-icon {
    transform: scale(1.1) rotate(5deg);
    color: #6c8299;
  }
  
  .metric-card:hover .metric-value {
    color: #baaa63;
    transform: scale(1.05);
  }
  
  .metric-card:hover .metric-bar {
    box-shadow: 0 0 10px rgba(186, 170, 99, 0.5);
  }
  
  .metric-value {
    transition: all 0.3s ease;
  }
  
  .metric-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0A2342;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
  }
  
  .metric-value::after {
    content: '%';
    font-size: 2rem;
    margin-left: 0.2rem;
  }
  
  .metric-label {
    font-size: 1rem;
    color: #6c8299;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .metric-chart {
    width: 100%;
    height: 6px;
    background: #e8ecef;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  
  .metric-bar {
    height: 100%;
    background: linear-gradient(90deg, #baaa63 0%, #6c8299 100%);
    border-radius: 3px;
    width: var(--progress);
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  
  .metric-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
  }
  
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  /* Mission Chart Canvas */
  .mission-chart-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
  }
  
  /* Mission Particles */
  .mission-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
  
  .mission-particles::before,
  .mission-particles::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(186, 170, 99, 0.1) 0%, transparent 70%);
    animation: float 20s infinite ease-in-out;
  }
  
  .mission-particles::before {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }
  
  .mission-particles::after {
    bottom: 10%;
    right: 10%;
    animation-delay: 10s;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }
  

  .about-section {
    max-width: 1200px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    line-height: 1.8;
    color: #000000;
    font-family: 'Noto Sans KR', sans-serif;
}
/* 헤더 스타일 */
.about-section h2 {
    font-weight: 700;
    font-size: 3rem;
    color: #0A2342;
    padding-left: 0.8rem;
    margin-bottom: 3rem;
}

/* 본문 텍스트 스타일 */
.about-section p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.about-section .row {
  margin-bottom: 8rem;
}

/* 강조 텍스트 (strong) 스타일 */
.about-section strong {
    color: #7e665e;
    font-weight: 700;
}

/* 팀원 소개 섹션 이미지 */
.about-section img {
    border: 4px solid #ffffff;
    padding: 5px;
    background-color: #fff;
}


/* 팀원 이름 */
.about-section h5 {
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

/* 반응형 미디어 쿼리 (모바일에서도 예쁘게) */
@media (max-width: 768px) {
    /* Hero Section 모바일 최적화 - about.html은 중앙 정렬 */
    .hero-section.start {
        background: radial-gradient(circle at 40% 70%, #0b2242 0%, #15161b 100%);
        min-height: 100dvh;
        padding: calc(var(--navbar-height) + 1rem) 0 4rem 0;
        align-items: center;
        justify-content: center;
        margin-top: calc(-1 * var(--navbar-height));
        padding-top: calc(var(--navbar-height) + 2rem);
    }
    
    /* 모바일에서 컨테이너 마진 조정 */
    .hero-section .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* CC SVG Mobile Adjustments */
    .cc-svg-overlay {
        top: calc(-1 * var(--navbar-height));
        height: calc(100% + var(--navbar-height));
    }
    
    .cc-svg-image {
        opacity: 0.4;
    }
    
    .hero-section.start h1 {
        font-size: 2.5rem !important;
        line-height: 1.3;
        margin: 0;
        text-align: center;
        letter-spacing: 0.05em;
    }
    
    /* 모바일에서 애니메이션 조정 */
    .fade-in {
        color: #ffffff;
        animation: dramaticRevealMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    
    @keyframes dramaticRevealMobile {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.7);
            filter: blur(5px);
        }
        50% {
            opacity: 0.8;
            transform: translateY(-5px) scale(1.05);
            filter: blur(1px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }
    
    /* About Section 모바일 최적화 */
    .about-section {
        padding: 2rem 1rem; /* 패딩 증가 */
    }

    .about-section h2 {
        font-size: 1.8rem; /* 약간 증가 */
        margin-bottom: 1.5rem;
    }

    .about-section p {
        font-size: 1.1rem; /* 가독성 향상 */
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }

    .about-section img {
        width: 100px !important; /* 더 컴팩트하게 */
        margin-bottom: 1rem;
    }
    
    /* Our Story Section 모바일 최적화 */
    .our-story-section {
        padding: 3rem 1rem !important;
        min-height: auto !important;
    }
    
    .story-main-title {
        font-size: 2.5rem !important;
        margin-bottom: 3rem !important;
    }
    
    .story-main-title::after {
        width: 60px !important;
    }
    
    .story-cards-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    .story-card {
        grid-column: 1 / -1 !important;
        padding: 2rem 1.5rem !important;
        min-height: 200px !important;
    }
    
    .story-card-1,
    .story-card-3,
    .story-card-4,
    .story-card-5 {
        grid-column: 1 / -1 !important;
    }
    
    .story-card-2 {
        grid-column: 1 / -1 !important;
    }
    
    .story-card-number {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    .story-card-text {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
    }
    
    .question-mark {
        font-size: 8rem !important;
    }
    
    .quote-icon {
        font-size: 3rem !important;
    }
    
    .quote-text {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    .solution-icons {
        padding: 1rem !important;
    }
    
    .solution-icon {
        font-size: 3rem !important;
    }
    
    .solution-item {
        font-size: 1.8rem !important;
        padding-left: 1.5rem !important;
    }
    
    .story-card-cta-text {
        font-size: 1.5rem !important;
    }
    
    .story-card-arrow {
        font-size: 2rem !important;
    }
    
    /* Legacy mobile styles */
    .story-paragraph {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem;
    }
    
    .story-highlight {
        font-size: 1.3rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem;
    }
    
    /* Team Mission Section 모바일 최적화 */
    .mission-modern {
        min-height: auto !important;
        padding: 3rem 1.5rem !important;
    }
    
    .mission-title {
        font-size: 2.2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .mission-title-underline {
        width: 60px !important;
    }
    
    .mission-description {
        font-size: 1.2rem !important;
        line-height: 1.8 !important;
        margin-bottom: 3rem !important;
        padding: 0 0.5rem;
    }
    
    .financial-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    .metric-card {
        padding: 2rem 1.5rem !important;
    }
    
    .metric-value {
        font-size: 2.5rem !important;
    }
    
    .metric-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* ===== MAGAZINE TEAM SECTION 모바일 최적화 ===== */
    .team-magazine-section {
        padding: 3rem 0 !important; /* 6rem에서 축소 */
    }
    
    .team-section-header {
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }
    
    .team-title {
        font-size: 2.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .team-title::after {
        width: 60px !important;
    }
    
    .team-subtitle {
        font-size: 1rem !important;
    }
    
    /* 모바일에서 매거진 레이아웃 단순화 */
    .team-member-magazine {
        margin: 2rem 1rem !important;
        min-height: auto !important;
        border-radius: 20px !important;
        animation: none !important;
        opacity: 1 !important;
    }
    
    .team-member-magazine:nth-child(even),
    .team-member-magazine:nth-child(odd) {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    .member-content {
        padding: 2rem 1.5rem !important;
    }
    
    .member-name {
        font-size: 2rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .member-role {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: 1px !important;
    }
    
    .member-quote {
        padding: 1.2rem !important;
        margin: 1.5rem 0 !important;
    }
    
    .quote-mark {
        font-size: 4rem !important;
        top: -1.5rem !important;
    }
    
    .quote-text {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-left: 1.5rem !important;
    }
    
    .member-details {
        margin-top: 1.5rem !important;
        gap: 1rem !important;
    }
    
    .detail-item {
        padding: 0.8rem !important;
    }
    
    .detail-label {
        font-size: 0.75rem !important;
    }
    
    .detail-value {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    .experience-item {
        font-size: 0.9rem !important;
        padding-left: 1.2rem !important;
    }
    
    .member-social-icons {
        top: 1rem !important;
        right: 1rem !important;
        gap: 0.6rem !important;
    }
    
    .member-social-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }
    
    /* 모바일에서 매거진 레이아웃을 세로형으로 변경 */
    .team-member-magazine {
        margin: 2rem 1rem !important; /* 좌우 마진 통일, 상하 축소 */
        min-height: auto !important; /* 50vh에서 auto로 변경 */
        border-radius: 15px !important;
        flex-direction: column !important; /* 세로 배치 */
        display: block !important; /* flexbox에서 block으로 변경 */
    }
    
    .team-member-magazine:nth-child(even),
    .team-member-magazine:nth-child(odd) {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    /* 모바일에서 배경 이미지를 상단에 배치 */
    .member-background-container {
        position: relative !important; /* absolute에서 relative로 변경 */
        width: 100% !important; /* 40%에서 100%로 변경 */
        height: 250px !important; /* 고정 높이 설정 */
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }
    
    .member-background-image {
        border-radius: 15px 15px 0 0 !important; /* 상단 모서리만 둥글게 */
    }
    
    .member-overlay {
        background: linear-gradient(180deg, 
            rgba(0, 0, 0, 0.3) 0%, 
            rgba(0, 0, 0, 0.6) 100%) !important; /* 세로 그라데이션으로 변경 */
    }
    
    /* 모바일에서 콘텐츠를 하단에 배치 */
    .member-content {
        position: relative !important;
        width: 100% !important; /* 60%에서 100%로 변경 */
        padding: 2rem 1.5rem !important; /* 3rem에서 축소 */
        background: #ffffff !important; /* 완전 불투명 흰색 */
        height: auto !important;
        display: block !important;
    }
    
    .member-name {
        font-size: 2rem !important; /* 3rem에서 축소 */
        margin-bottom: 0.3rem !important;
        animation: none !important; /* 애니메이션 제거 */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .member-role {
        font-size: 1rem !important; /* 1.5rem에서 축소 */
        margin-bottom: 1rem !important;
        letter-spacing: 1px !important;
        animation: none !important; /* 애니메이션 제거 */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .quote-mark {
        font-size: 3rem !important; /* 6rem에서 축소 */
        top: -1rem !important;
        left: -0.5rem !important;
    }
    
    .quote-text {
        font-size: 1.1rem !important; /* 1.4rem에서 축소 */
        line-height: 1.4 !important;
        margin-left: 1rem !important;
        animation: none !important; /* 애니메이션 제거 */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .member-quote {
        margin: 1rem 0 !important;
        animation: none !important; /* 애니메이션 제거 */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .member-details {
        margin-top: 1.5rem !important;
        animation: none !important; /* 애니메이션 제거 */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .detail-label {
        font-size: 0.8rem !important;
    }
    
    .detail-value {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* 모바일에서 교대 레이아웃 완전 제거 */
    .team-member-magazine:nth-child(even) .member-background-container {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
        right: auto !important;
        left: auto !important;
    }
    
    .team-member-magazine:nth-child(even) .member-content {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .team-member-magazine:nth-child(even) .member-info {
        align-items: flex-start !important;
    }
    
    .team-member-magazine:nth-child(even) .quote-mark {
        left: -0.5rem !important;
        right: auto !important;
    }
    
    .team-member-magazine:nth-child(even) .quote-text {
        margin-left: 1rem !important;
        margin-right: 0 !important;
    }
    
    .team-member-magazine:nth-child(even) .experience-item {
        padding-left: 1rem !important;
        padding-right: 0 !important;
    }
    
    .team-member-magazine:nth-child(even) .experience-item::before {
        left: 0 !important;
        right: auto !important;
    }
}

/* ===== MAGAZINE STYLE TEAM SECTION ===== */
.team-magazine-section {
    background: #ffffff;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.team-section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.team-title {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0A2342 0%, #6c8299 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    position: relative;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.team-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #baaa63 0%, #6c8299 100%);
    border-radius: 2px;
    animation: expandWidth 1s ease-out 0.3s forwards;
}

@keyframes expandWidth {
    to {
        width: 80px;
    }
}

.team-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Team Member Magazine Layout */
.team-member-magazine {
    position: relative;
    margin: 3rem auto;
    max-width: 850px;
    min-height: 24vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(10, 35, 66, 0.1);
    display: flex;
    align-items: center;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.team-member-magazine:nth-child(1) {
    animation-delay: 0.2s;
}

.team-member-magazine:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(186, 170, 99, 0.25);
}

.team-member-magazine:nth-child(even) {
    margin-left: auto;
    margin-right: 2rem;
}

.team-member-magazine:nth-child(odd) {
    margin-left: 2rem;
    margin-right: auto;
}

/* Social Media Icons */
.member-social-icons {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    display: flex;
    gap: 0.75rem;
    flex-direction: row;
}

.member-social-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.instagram-icon {
    color: #E4405F;
}

.instagram-icon:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(228, 64, 95, 0.4);
}

.linkedin-icon {
    color: #0077B5;
}

.linkedin-icon:hover {
    background: #0077B5;
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}

.member-social-icon:active {
    transform: scale(0.95);
}

/* Background Image with Parallax Effect */
.member-background-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    overflow: hidden;
}

.member-background-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(20%) brightness(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.team-member-magazine:hover .member-background-image {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.08);
}

.member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.35) 100%);
    transition: opacity 0.2s ease;
}

.team-member-magazine:hover .member-overlay {
    opacity: 0.8;
}

/* Content Layout */
.member-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2rem;
    width: 65%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.team-member-magazine:hover .member-content {
    background: rgba(255, 255, 255, 1);
}

.member-info {
    color: #0A2342;
    max-width: 600px;
}

.member-name {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    transition: all 0.3s ease;
    color: #0A2342;
}

.team-member-magazine:hover .member-name {
    color: #baaa63;
    transform: translateX(5px);
}

.member-role {
    font-size: 1.1rem;
    font-weight: 600;
    color: #baaa63;
    margin-bottom: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.team-member-magazine:hover .member-role {
    color: #6c8299;
}

/* Quote Section */
.member-quote {
    margin: 1.5rem 0;
    position: relative;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(186, 170, 99, 0.05) 0%, rgba(108, 130, 153, 0.05) 100%);
    border-radius: 14px;
    border-left: 4px solid #baaa63;
    transition: all 0.4s ease;
}

.team-member-magazine:hover .member-quote {
    background: linear-gradient(135deg, rgba(186, 170, 99, 0.1) 0%, rgba(108, 130, 153, 0.1) 100%);
    transform: translateX(5px);
    border-left-color: #6c8299;
}

.quote-mark {
    font-size: 5rem;
    color: #baaa63;
    font-family: Georgia, serif;
    position: absolute;
    top: -1.5rem;
    left: -0.8rem;
    opacity: 0.25;
    transition: all 0.3s ease;
}

.team-member-magazine:hover .quote-mark {
    opacity: 0.4;
    transform: scale(1.05);
}

.quote-text {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.5;
    margin-left: 1.8rem;
    font-weight: 400;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.team-member-magazine:hover .quote-text {
    color: #0A2342;
}

/* Details Section */
.member-details {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.detail-item {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem;
    background: rgba(186, 170, 99, 0.03);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.team-member-magazine:hover .detail-item {
    background: rgba(186, 170, 99, 0.08);
    transform: translateX(5px);
}

.detail-label {
    font-size: 0.85rem;
    color: #baaa63;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.team-member-magazine:hover .detail-label {
    color: #6c8299;
}

.detail-value {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.team-member-magazine:hover .detail-value {
    color: #0A2342;
}

.experience-item {
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.experience-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: #baaa63;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.team-member-magazine:hover .experience-item::before {
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(186, 170, 99, 0.6);
    background: #6c8299;
}

.team-member-magazine:hover .experience-item {
    padding-left: 1.8rem;
}

/* Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternating Layout */
.team-member-magazine:nth-child(even) .member-background-container {
    right: auto;
    left: 0;
}

.team-member-magazine:nth-child(even) .member-content {
    margin-left: auto;
    justify-content: flex-start;
    text-align: left;
}

.team-member-magazine:nth-child(even) .member-info {
    align-items: flex-start;
}


/* ===== OUR STORY SECTION - MODERN REDESIGN ===== */
.our-story-section {
  background: #ffffff;
  width: 100%;
  padding: 6rem 2rem;
  font-family: 'Noto Sans KR', sans-serif;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.story-chart-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  z-index: 1;
  pointer-events: none;
}

.our-story-section .container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

.story-main-title {
  font-weight: 800;
  font-size: 4rem;
  text-align: center;
  color: #0A2342;
  margin-bottom: 5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0A2342 0%, #6c8299 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.story-main-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #baaa63 0%, #6c8299 100%);
  border-radius: 2px;
}

/* Story Cards Container */
.story-cards-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

/* Story Card Base Styles */
.story-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(10, 35, 66, 0.08);
  border: 2px solid transparent;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(186, 170, 99, 0.02) 0%, rgba(108, 130, 153, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

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

.story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(186, 170, 99, 0.2);
  border-color: rgba(186, 170, 99, 0.3);
}

.story-card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  z-index: 1;
  pointer-events: none;
}

.story-card-chart {
  width: 100%;
  height: 100%;
}

.story-card-content {
  position: relative;
  z-index: 2;
}

.story-card-number {
  font-size: 1rem;
  font-weight: 700;
  color: #baaa63;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.story-card:hover .story-card-number {
  opacity: 1;
  transform: translateX(5px);
}

.story-card-text {
  font-size: 1.3rem;
  line-height: 1.9;
  color: #2c3e50;
  font-weight: 400;
  transition: color 0.3s ease;
}

.story-card:hover .story-card-text {
  color: #0A2342;
}

.story-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, #baaa63 0%, #6c8299 100%);
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}

.story-card:hover .story-card-accent {
  height: 100%;
}

/* Card 1: Full Width */
.story-card-1 {
  grid-column: 1 / -1;
  min-height: 250px;
}

/* Card 2: Question Highlight - Split Layout */
.story-card-2 {
  grid-column: 1 / 7;
  background: linear-gradient(135deg, rgba(186, 170, 99, 0.05) 0%, rgba(108, 130, 153, 0.05) 100%);
  border: 2px solid rgba(186, 170, 99, 0.2);
}

.story-card-2:hover {
  background: linear-gradient(135deg, rgba(186, 170, 99, 0.1) 0%, rgba(108, 130, 153, 0.1) 100%);
  border-color: rgba(186, 170, 99, 0.4);
}

.question-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15rem;
  font-weight: 900;
  color: rgba(186, 170, 99, 0.1);
  font-family: 'Georgia', serif;
  transition: all 0.5s ease;
}

.story-card-2:hover .question-mark {
  transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
  color: rgba(186, 170, 99, 0.15);
}

.story-card-quote {
  position: relative;
  z-index: 2;
}

.quote-icon {
  font-size: 4rem;
  color: #baaa63;
  font-family: 'Georgia', serif;
  line-height: 0;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.story-card-2:hover .quote-icon {
  opacity: 1;
  transform: scale(1.1);
}

.quote-text {
  font-size: 2rem;
  font-weight: 700;
  color: #0A2342;
  line-height: 1.5;
  font-style: italic;
  transition: all 0.3s ease;
}

.story-card-2:hover .quote-text {
  color: #baaa63;
  transform: translateX(5px);
}

/* Card 3: Problem Statement */
.story-card-3 {
  grid-column: 7 / -1;
  min-height: 250px;
}

/* Card 4: Solution Highlight - Full Width */
.story-card-4 {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(186, 170, 99, 0.08) 0%, rgba(108, 130, 153, 0.08) 100%);
  border: 2px solid rgba(186, 170, 99, 0.3);
  min-height: 350px;
}

.solution-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
}

.solution-icon {
  font-size: 5rem;
  opacity: 0.1;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}

.story-card-4:hover .solution-icon {
  opacity: 0.2;
  transform: scale(1.2) translateY(-10px);
}

.story-card-4:hover .solution-icon:nth-child(1) {
  animation: bounce 1s ease infinite;
}

.story-card-4:hover .solution-icon:nth-child(2) {
  animation: bounce 1s ease infinite 0.2s;
}

.story-card-4:hover .solution-icon:nth-child(3) {
  animation: bounce 1s ease infinite 0.4s;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1.2) translateY(-10px);
  }
  50% {
    transform: scale(1.3) translateY(-20px);
  }
}

.story-card-solution-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.solution-item {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0A2342;
  line-height: 1.3;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-left: 2rem;
}

.solution-item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #baaa63;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s ease;
}

.story-card-4:hover .solution-item {
  color: #baaa63;
  transform: translateX(10px);
}

.story-card-4:hover .solution-item::before {
  opacity: 1;
  transform: translateX(0);
}

/* Card 5: Call to Action */
.story-card-5 {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #0A2342 0%, #2c3e50 100%);
  color: #ffffff;
  min-height: 200px;
  border: none;
}

.story-card-5:hover {
  background: linear-gradient(135deg, #0A2342 0%, #1a2a3a 100%);
  box-shadow: 0 20px 60px rgba(10, 35, 66, 0.3);
}

.story-card-cta-text {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.story-card-5:hover .story-card-cta-text {
  color: #baaa63;
  transform: translateX(10px);
}

.story-card-arrow {
  font-size: 3rem;
  color: #baaa63;
  opacity: 0.7;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.story-card-5:hover .story-card-arrow {
  opacity: 1;
  transform: translateX(20px) scale(1.2);
}

.story-card-5 .story-card-accent {
  background: linear-gradient(180deg, #baaa63 0%, rgba(186, 170, 99, 0.5) 100%);
}

/* Additional Interactive Effects */
.story-card {
  will-change: transform;
}

.story-card:hover .story-card-background {
  opacity: 0.08;
}

/* Staggered animation delays for cards */
.story-card-1 {
  animation-delay: 0.1s;
}

.story-card-2 {
  animation-delay: 0.2s;
}

.story-card-3 {
  animation-delay: 0.3s;
}

.story-card-4 {
  animation-delay: 0.4s;
}

.story-card-5 {
  animation-delay: 0.5s;
}

/* Smooth transitions for all interactive elements */
.story-card * {
  transition: inherit;
}

/* Enhanced hover state for solution icons */
.story-card-4 .solution-icon[data-icon="market"] {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.story-card-4:hover .solution-icon[data-icon="market"] {
  filter: grayscale(0%);
}

.story-card-4 .solution-icon[data-icon="decision"] {
  filter: grayscale(100%);
  transition: filter 0.5s ease 0.1s;
}

.story-card-4:hover .solution-icon[data-icon="decision"] {
  filter: grayscale(0%);
}

.story-card-4 .solution-icon[data-icon="competition"] {
  filter: grayscale(100%);
  transition: filter 0.5s ease 0.2s;
}

.story-card-4:hover .solution-icon[data-icon="competition"] {
  filter: grayscale(0%);
}

/* Legacy styles for backward compatibility */
.navy-text {
  color: #0A2342;
}

.story-paragraph {
  font-size: 1.3rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.story-highlight {
  font-size: 1.5rem;
  line-height: 2;
  margin: 4rem 0;
  font-weight: 700;
  color: #8e824b;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}


.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}


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

/* 영어일 때 Hero Section 글자 분리 문제 해결 */
[lang="en"] #theoryToRealityHero .theory-reality-title .char-1,
[lang="en"] #theoryToRealityHero .theory-reality-title .char-4,
[lang="en"] #theoryToRealityHero .theory-reality-title .char-5 {
  white-space: nowrap; /* 단어가 분리되지 않도록 */
  display: inline-block; /* 인라인 블록으로 표시 */
}

/* 영어일 때 letter-spacing 조정 */
[lang="en"] #theoryToRealityHero .theory-reality-title .fade-in {
  letter-spacing: 0.05em; /* 영어는 letter-spacing을 줄임 */
}

[lang="en"] .mission-title {
  font-size: 3rem; /* 영어 제목 크기 조정 */
}

[lang="en"] .mission-description {
  font-size: 1.4rem; /* 영어 본문 크기 조정 */
  line-height: 1.8;
}

[lang="en"] .team-title {
  font-size: 2.8rem; /* 영어 팀 제목 크기 조정 */
}

[lang="en"] .team-subtitle {
  font-size: 1.3rem; /* 영어 팀 부제목 크기 조정 */
}

[lang="en"] .member-name {
  font-size: 2.2rem; /* 영어 이름 크기 조정 */
}

[lang="en"] .member-role {
  font-size: 1.1rem; /* 영어 역할 크기 조정 */
}

[lang="en"] .quote-text {
  font-size: 1.2rem; /* 영어 인용구 크기 조정 */
  line-height: 1.6;
}

[lang="en"] .detail-label {
  font-size: 0.9rem; /* 영어 라벨 크기 조정 */
}

[lang="en"] .detail-value {
  font-size: 1rem; /* 영어 값 크기 조정 */
  line-height: 1.5;
}

[lang="en"] .experience-item {
  font-size: 0.95rem; /* 영어 경험 항목 크기 조정 */
  line-height: 1.4;
}

[lang="en"] .timeline-title {
  font-size: 2.8rem; /* 영어 타임라인 제목 크기 조정 */
}

[lang="en"] .timeline-subtitle {
  font-size: 1.3rem; /* 영어 타임라인 부제목 크기 조정 */
}

[lang="en"] .timeline-event-title {
  font-size: 1.4rem; /* 영어 타임라인 이벤트 제목 크기 조정 */
}

[lang="en"] .timeline-description p {
  font-size: 1.1rem; /* 영어 타임라인 설명 크기 조정 */
  line-height: 1.6;
}

[lang="en"] .timeline-description li {
  font-size: 1rem; /* 영어 타임라인 리스트 항목 크기 조정 */
  line-height: 1.5;
}

[lang="en"] .our-story-section h2 {
  font-size: 2.8rem; /* 영어 스토리 제목 크기 조정 */
}

[lang="en"] .story-paragraph {
  font-size: 1.2rem; /* 영어 스토리 문단 크기 조정 */
  line-height: 1.7;
}

[lang="en"] .story-highlight {
  font-size: 1.4rem; /* 영어 스토리 강조 크기 조정 */
  line-height: 1.8;
}

/* 모바일에서 영어 텍스트 레이아웃 조정 */
@media (max-width: 768px) {
  [lang="en"] .hero-section1 h1 {
    font-size: 3.5rem;
    line-height: 1.4;
  }
  
  [lang="en"] .mission-title {
    font-size: 2rem;
  }
  
  [lang="en"] .mission-description {
    font-size: 1.1rem;
    line-height: 1.7;
  }
  
  [lang="en"] .team-title {
    font-size: 2.2rem;
  }
  
  [lang="en"] .our-story-section h2 {
    font-size: 2.2rem;
  }
  
  [lang="en"] .story-paragraph {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  [lang="en"] .story-highlight {
    font-size: 1.3rem;
    line-height: 1.7;
  }
}