:root{
  --primary: #475938; /* Dark Olive Green */
  --accent: #e0d7b3;  /* Light Cream/Tan */
  --bg: #ffffff;
  --text: #222;
  --muted: #6b6b6b;
  --radius: 12px;
  --container: 1100px;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  overflow-x: hidden;  
}

/* Layout Container */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:60;
  transition: background 300ms ease, box-shadow 300ms ease, padding 200ms ease;
  background: rgba(255, 255, 255, 0.95); 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
  padding:14px 0; 
}

/* header-inner는 헤더의 내용을 가운데로 모으는 역할 */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  max-width:var(--container); 
  margin:0 auto; 
  padding:0 20px; 
}

/* 로고 컨테이너 */
.logo{
  display: flex; 
  align-items: center;
  font-weight:900;
  color:var(--primary); 
  text-decoration:none;
  font-size:1.1rem;
  letter-spacing:1px;
}

/* 스크롤 전 로고 이미지 (영문로고_01.png) */
.logo-img-default {
    height: 50px; 
    width: auto;  
    display: block; 
    transition: opacity 300ms ease; 
}

/* 스크롤 시 나타날 로고 이미지 (영문로고_03.png) */
.logo-img-scrolled {
    height: 25px; 
    width: auto;  
    display: none; 
    transition: opacity 300ms ease; 
}

/* Desktop nav */
.main-nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a{
  color:var(--primary); 
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
}

/* Mobile toggle */
.mobile-toggle{
  display:none;
  width:36px;height:36px;
  background:none;border:0;cursor:pointer;
}
.mobile-toggle span{
  background:var(--primary);
  margin:6px 0;border-radius:2px;
  display: block; 
  height: 4px;
  width: 100%;
}

/* Mobile nav */
.mobile-nav{display:none}
.mobile-nav ul{list-style:none;padding:10px 20px;margin:0;background:rgba(255,255,255,0.98)}
.mobile-nav a{display:block;padding:10px 0;color:var(--primary);text-decoration:none;font-weight:700}

/* Sections */
.section{
  padding:100px 0;
}

.welcome-section{
  padding-top:120px; 
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  background: linear-gradient(to bottom, #fbf8f0, #f5f0e1 50%, #fbf8f0); 
}

/* Solution & Trust 섹션 배경 그라데이션 */
.pattern-section {
    /* Solution과 Trust 섹션 배경색 통일 */
    background: linear-gradient(to bottom, var(--primary), #3b4a2e); 
}

/* Solution 섹션 제목 색상 */
#solution .section-eyebrow span:first-child {
    color: rgba(255, 255, 255, 0.7); /* MATE, 부분은 연한 흰색 */
}
#solution .section-eyebrow .eyebrow-highlight {
    color: var(--accent); /* Solution 텍스트는 accent 색상으로 강조 */
}
#solution .section-main-title {
    color: #fff; /* 메인 제목은 흰색 유지 */
}

/* Trust 섹션 제목/텍스트 색상 오버라이드 (Solution과 동일한 밝은 톤으로) */
#trust .section-eyebrow span:first-child {
    color: rgba(255, 255, 255, 0.7); /* MATE, 부분은 연한 흰색 */
}
#trust .section-eyebrow .eyebrow-highlight {
    color: var(--accent); /* Trust 텍스트는 accent 색상으로 강조 */
}
#trust .section-main-title {
    color: #fff; /* 메인 제목은 흰색 유지 */
}


/* Solution 섹션 카드 디자인 (배경 흰색으로 변경) */
#solution .card {
    background: #fff; /* 배경을 순수 흰색으로 변경 */
    box-shadow: 0 8px 20px rgba(17,17,17,0.1); /* 일반 카드와 유사하게 그림자 조정 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 연한 테두리 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 모션 트랜지션 */
}
#solution .card:hover {
    transform: translateY(-5px); /* 호버 시 약간 위로 이동 */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 더 진하게 */
}

/* Solution 섹션 카드 내부 텍스트 색상 조정 (흰색 배경에 맞춰 어둡게) */
#solution .card .card-main-desc {
    color: var(--text); /* 메인 설명 텍스트를 어둡게 변경 */
}
#solution .card .card-sub-title {
    color: var(--primary); /* 서브 제목을 Primary 색상으로 강조 (올리브색) */
}
#solution .card .card-extra-info {
    color: var(--muted); /* 추가 정보 텍스트를 muted 색상으로 변경 */
    font-size: 0.95rem;   
}


.welcome-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}

/* Welcome copy (메인 슬로건) */
.slogan{
  font-size:2.7rem; 
  margin:10px 0 18px; 
  color:var(--primary);
  line-height:1.15;
  font-weight: 900; 
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1); 
}
.lead{
  color:var(--muted);
  font-size:1.15rem; 
  max-width:550px; 
}
.eyebrow{
  font-size:1.2rem; 
  color:var(--muted);
  margin:0 0 6px
}

/* ------------------------------------------- */
/* 섹션 제목 스타일 (좌측 상단, 작게) */
/* ------------------------------------------- */
.section-eyebrow {
  font-size: 1.2rem; 
  font-weight: 700;
  margin-bottom: 8px; /* 메인 제목과의 간격 */
  text-align: left;
}

.section-eyebrow span:first-child {
  color: #5d744c; 
}

/* 섹션 메인 제목 스타일 (좌측 정렬, 크게) */
.section-main-title {
  font-size: 2.8rem; 
  line-height: 1.2;
  font-weight: 900; 
  color: var(--text); 
  margin-top: 0;
  margin-bottom: 40px; 
  text-align: left;
}


/* Buttons */
.btn{
  display:inline-block;
  padding:12px 20px; 
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  margin-right:10px;
  transition:transform .12s ease, box-shadow .12s ease;
  border:2px solid transparent;
}
.btn:active{transform:translateY(1px)}

/* Primary Button with Gradient - '비대면계좌 개설하기' 버튼 */
.btn.primary{
  background: var(--primary); 
  background: linear-gradient(to bottom, #5d744c, #475938); 
  color:#fff;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

.btn.primary:hover {
  background: linear-gradient(to bottom, #475938, #5d744c); 
}

.btn.accent{background:var(--accent);color:var(--primary);font-weight:800}
.cta-row {
    margin-top: 25px; 
}

/* 메인 비주얼 이미지 스타일 조정 */
.main-art-img {
    width: 100%; 
    max-width: 100%; 
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0; 
}

/* Cards grid */
.cards-grid{
  display:grid;
  gap:20px;
  margin-top:26px; 
}
.cards-2{ /* Vision 상단: 2열 그리드 */
  grid-template-columns:repeat(2,1fr); 
}
.cards-1{ /* Vision 하단: 1열 그리드 */
  grid-template-columns:repeat(1,1fr);
}
.cards-4{
  grid-template-columns:repeat(2,1fr); /* Solution 섹션: 2x2 그리드 */
}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-3 .card, .cards-3 .value-card, .cards-3 .testimonial-card{min-height:150px}

/* Card base (solution 섹션 카드 외 일반 카드들) */
.card, .edu-card, .value-card, .testimonial-card{
  /* Academy 섹션에서 .edu-card를 별도로 정의하므로, 여기서는 일반 카드만 해당 */
  background:#fff;
  border-radius:12px;
  padding:20px; 
  box-shadow:0 8px 20px rgba(17,17,17,0.04);
  
  display: flex; 
  flex-direction: column; 
  min-height: 220px; 
}


/* 일반 카드 내부 스타일 (solution 섹션 외) */
.card .card-icon {
  width: 40px; 
  height: 40px;
  margin-bottom: 12px; 
  background-color: transparent; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Solution 섹션 아이콘 이미지 스타일 */
.card .card-icon .solution-icon {
    width: 100%; /* 부모 컨테이너 (.card-icon) 크기에 맞춤 */
    height: 100%;
    object-fit: contain; /* 이미지 비율 유지 */
    display: block;
}


.card .card-main-desc {
  font-size: 1.3rem; 
  font-weight: 700; 
  color: var(--text); 
  line-height: 1.4;
  margin: 0 0 8px 0; 
}

.card .card-sub-title {
  font-size: 1.1rem; 
  font-weight: 800; 
  color: var(--primary); 
  margin: 0 0 4px 0; 
}

.card .card-extra-info {
  font-size: 0.85rem; 
  color: var(--muted); 
  line-height: 1.5;
  margin: auto 0 0 0; 
}


/* ------------------------------------------- */
/* Academy Section Styles */
/* ------------------------------------------- */

.academy-section{
  background: var(--accent); /* 전체 섹션 배경색 */
  padding:80px 0;
  border-radius:0;
  overflow: hidden; /* 애니메이션을 위해 추가 */
}
.academy-section .container{max-width:var(--container)}

/* Academy 섹션 제목 색상 오버라이드 */
#academy .section-eyebrow span:first-child {
    color: #8c8672; /* MATE, 부분은 어두운 accent 색상 */
}
#academy .section-eyebrow .eyebrow-highlight {
    color: var(--primary); /* Academy 텍스트는 primary 색상으로 강조 */
}

#academy .section-main-title {
    color: var(--text); /* 메인 제목은 기본 텍스트 색상 */
    margin-bottom: 50px; /* 카드 그리드와의 간격 조정 */
}

/* Academy 카드 그리드 */
.academy-cards-grid {
    gap: 30px; /* 카드 간격 조정 */
}

/* Academy 카드 기본 스타일 */
.edu-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(17,17,17,0.06);
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    height: 100%; /* 그리드 내에서 높이 맞추기 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.edu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(17,17,17,0.12);
}

/* 카드 상단 이미지 영역 */
.edu-card-header {
    width: 100%;
    height: 180px; /* 이미지 영역 높이 */
    background-size: cover;
    background-position: center;
    position: relative;
    /* 이미지 위에 텍스트가 잘 보이도록 오버레이 추가 */
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; /* 내용을 하단으로 정렬 */
    padding: 15px; /* 내부 여백 */
    background-color: rgba(0,0,0,0.2); /* 기본 배경이 어두워지도록 */
    background-blend-mode: multiply; /* 이미지와 배경색이 잘 섞이도록 */
}

/* 이미지 위에 올라간 제목 스타일 */
.edu-card-title-on-image {
    font-size: 1.3rem; /* 크기 조정 */
    font-weight: 700;
    color: #fff; /* 흰색으로 변경하여 이미지 위에서 잘 보이도록 */
    line-height: 1.3;
    margin: 0 0 10px 0; /* 아래 여백 추가 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* 그림자 추가로 가독성 높임 */
}
.edu-card-title-on-image strong {
    font-weight: 900;
    color: #fff; /* 강조 텍스트도 흰색으로 유지 */
}


/* 태그 스타일 (기초반, 실전반, 심화반) */
.edu-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0,0,0,0.6); /* 어두운 배경 */
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.edu-tag.basic-tag { background: #3498db; } /* 기초반 파란색 */
.edu-tag.practical-tag { background: #f39c12; } /* 실전반 주황색 */
.edu-tag.advanced-tag { background: #9b59b6; } /* 심화반 보라색 */


/* 카드 본문 (내용) 영역 */
.edu-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 남은 공간을 채우도록 */
}

/* 이전에 본문에 있던 제목 스타일은 더 이상 사용되지 않음. */
.edu-card-title {
    display: none; /* 본문 제목 숨김 */
}

.edu-card-desc {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 0; 
    flex-grow: 1; /* 설명이 남은 공간을 채우도록 */
}

/* ------------------------------------------- */
/* Market YT thumbs */
/* ------------------------------------------- */
.yt-thumb .thumb-img{
  /* 텍스트를 제거했으므로 썸네일 높이를 180px로 설정 */
  height: 180px; 
  background:#f0f0f0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.02);
  overflow: hidden;
}

.yt-thumb .thumb-img img { /* 썸네일 이미지 스타일 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 박스를 채우면서 비율 유지 */
  display: block;
}

.center-cta{
    text-align:center;
    /* 버튼과 비디오 간 간격을 80px로 넓힘 */
    margin-top:80px; 
}


/* ------------------------------------------- */
/* 섹션별 세련된 등장 애니메이션 */
/* ------------------------------------------- */

/* 모든 fade-up 요소의 기본 초기 상태 (기본은 단순 슬라이드-업) */
.fade-up{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 600ms cubic-bezier(.22,.9,.27,1), transform 600ms cubic-bezier(.22,.9,.27,1);
}
.fade-up.in-view{
  opacity:1;
  transform:none;
}

/* ------------------------------------------- */
/* Solution Section: Staggered Slide Left/Right (4 Cards) */
/* ------------------------------------------- */
#solution .card.fade-up {
    opacity: 0;
    /* 기본(홀수)는 왼쪽에서 슬라이드 */
    transform: translateX(-30px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}

/* 짝수 번째 카드 (2, 4)는 오른쪽에서 슬라이드 */
#solution .card.fade-up:nth-child(2n) {
    transform: translateX(30px);
}

/* 딜레이 (계단식 효과) */
#solution .card.fade-up:nth-child(1) { transition-delay: 0.1s; }
#solution .card.fade-up:nth-child(2) { transition-delay: 0.2s; }
#solution .card.fade-up:nth-child(3) { transition-delay: 0.3s; }
#solution .card.fade-up:nth-child(4) { transition-delay: 0.4s; }

#solution .card.fade-up.in-view {
    opacity: 1;
    transform: none;
}


/* ------------------------------------------- */
/* Market Section: Zoom-in/Fade (3 Thumbnails) */
/* ------------------------------------------- */
#market .yt-thumb.fade-up {
    opacity: 0;
    transform: scale(0.9); /* 작게 시작 */
    /* 부드러운 확대/축소를 위한 cubic-bezier 함수 적용 */
    transition: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 딜레이 (계단식 효과) */
#market .yt-thumb.fade-up:nth-child(1) { transition-delay: 0.1s; }
#market .yt-thumb.fade-up:nth-child(2) { transition-delay: 0.25s; }
#market .yt-thumb.fade-up:nth-child(3) { transition-delay: 0.4s; }

#market .yt-thumb.fade-up.in-view {
    opacity: 1;
    transform: scale(1);
}


/* ------------------------------------------- */
/* Academy Section: Staggered Slide-up (3 Edu Cards) - 최종 화려한 버전 */
/* ------------------------------------------- */

/* 모든 Academy 카드의 기본 숨김 상태 */
.academy-cards-grid .edu-card.fade-up {
    opacity: 0;
    /* 수정: 시작점을 훨씬 더 깊은 곳(200px)으로 설정하여 Parallax 느낌 극대화 */
    transform: translateY(200px) scale(0.92); 
    
    /* 수정: 트랜지션 시간을 1초로 늘리고 부드러운 가속도/감속도 설정 (역동성 증가) */
    transition: opacity 1000ms cubic-bezier(.25, .8, .3, 1), transform 1000ms cubic-bezier(.25, .8, .3, 1);
    
    /* 계단식 등장 효과를 위해 기본 딜레이는 유지 (JS가 in-view 클래스 추가 시 작동) */
    transition-delay: 0s; 
}

/* 계단식 딜레이 (시각적 순서 강조) */
.academy-cards-grid .edu-card.fade-up:nth-child(1) { transition-delay: 0.1s; }
.academy-cards-grid .edu-card.fade-up:nth-child(2) { transition-delay: 0.3s; }
.academy-cards-grid .edu-card.fade-up:nth-child(3) { transition-delay: 0.5s; }

/* 최종 등장 상태 (in-view) */
.academy-cards-grid .edu-card.fade-up.in-view {
    opacity: 1;
    transform: none; /* 최종적으로 제자리 (translateY(0), scale(1))로 이동 */
}


/* ------------------------------------------- */
/* Vision Section: Pop-in/Scale (3 Value Cards) */
/* ------------------------------------------- */
/* Vision 카드 기본 스타일 (value-card) - 배경색은 HTML에서 인라인으로 지정 */
.value-card {
    border-radius: 12px;
    padding: 30px; /* 패딩 증가 */
    box-shadow: 0 6px 15px rgba(0,0,0,0.06); /* 그림자 조정 */
    display: flex;
    flex-direction: column; /* 카드의 전체 내용이 세로로 정렬되도록 */
    min-height: 200px; /* 최소 높이 설정 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    text-align: left; /* 전체 카드의 텍스트는 기본적으로 왼쪽 정렬 */
    
    width: 100%;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 아이콘과 제목 그룹을 가로로 배치하기 위한 Wrapper */
.card-header-group {
    display: flex; /* Flexbox 활성화 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-bottom: 15px; /* 헤더 그룹과 설명 텍스트 사이 간격 */
}

/* 아이콘 스타일 */
.value-card .card-icon {
    width: 50px; /* 아이콘 크기 키움 */
    height: 50px;
    margin-right: 12px; /* 아이콘과 텍스트 그룹 사이 간격 */
    flex-shrink: 0; /* 아이콘 크기가 줄어들지 않도록 */
    /* 아이콘 배경색과 테두리 추가 (이미지 예시와 같이) */
    background-color: #fff; /* 흰색 배경 */
    border-radius: 50%; /* 원형 */
    border: 1px solid rgba(0,0,0,0.05); /* 연한 테두리 */
    display: flex; /* 아이콘 이미지 중앙 정렬을 위해 flex 유지 */
    align-items: center;
    justify-content: center;
}

/* 아이콘 이미지 스타일 (기존과 동일) */
.value-card .card-icon .solution-icon {
    width: 70%; /* 아이콘 이미지 크기를 줄여 원형 배경 안에 여백 주기 */
    height: 70%;
    object-fit: contain; 
    display: block; 
}

/* 한글 제목과 영어 제목을 묶는 그룹 */
.card-text-group {
    display: flex;
    flex-direction: column; /* 한글 제목과 영어 제목이 세로로 쌓이도록 */
    justify-content: center; /* 세로 중앙 정렬 */
}

/* 카드 메인 제목 (한글 - 아이콘 옆) */
.value-card .card-main-desc {
    font-size: 1.4rem; 
    font-weight: 900; 
    margin: 0; /* Flexbox 내에서 마진 재설정 */
    line-height: 1.3;
    color: var(--text); /* 텍스트 색상 명시 */
}

/* 카드 서브 제목 (영문 - 한글 제목 바로 아래) */
.value-card .card-sub-title {
    font-size: 1rem; 
    font-weight: 700; 
    margin: 0; /* 상단 마진을 0으로 조정하여 한글 제목에 바로 붙도록 함 */
    color: var(--primary); /* 텍스트 색상 명시 */
}

/* 카드 설명 텍스트 */
.value-card .card-extra-info {
    font-size: 0.95rem; 
    line-height: 1.6;
    margin-top: auto; /* 설명을 하단에 붙이도록 */
    color: var(--muted); /* 텍스트 색상 명시 */
}

/* Vision Animation (Pop-in/Scale) */
#vision .value-card.fade-up {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
    transition: opacity 500ms ease-in-out, transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* 딜레이 (계단식 효과) */
/* HTML에 .cards-2와 .cards-1이 분리되어 있으므로 각 컨테이너별로 nth-child 적용 */
#vision .cards-grid:nth-child(2) .value-card.fade-up:nth-child(1) { transition-delay: 0.1s; } /* 운영 */
#vision .cards-grid:nth-child(2) .value-card.fade-up:nth-child(2) { transition-delay: 0.3s; } /* 미션 */
#vision .cards-grid:nth-child(3) .value-card.fade-up:nth-child(1) { transition-delay: 0.5s; } /* 핵심 가치 */

#vision .value-card.fade-up.in-view {
    opacity: 1;
    transform: scale(1);
}


/* ------------------------------------------- */
/* Trust Section: Staggered Slide-up (3 Testimonials) */
/* ------------------------------------------- */
#trust .testimonial-card {
    background: #fff; /* 카드 배경색은 흰색으로 유지 */
    border-radius: 12px;
    padding: 0; /* 헤더와 본문 분리를 위해 패딩을 0으로 설정 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    /* border-left: 5px solid var(--accent); 기존 포인트 선 제거 (이미지에는 없음) */
    display: flex;
    flex-direction: column;
    min-height: 280px; /* 카드 최소 높이 조정 */
    margin: 0; 
    overflow: hidden; 
}

/* Trust 카드 상단 헤더 (아이콘 + 제목 그룹) */
#trust .trust-card-header {
    background-color: var(--accent); /* 연한 베이지/크림색으로 변경하여 --accent와 어울리게 */
    padding: 25px 20px 15px; /* 상단 여백 조정 */
    display: flex;
    align-items: center; /* 아이콘과 제목 세로 중앙 정렬 */
    gap: 15px; /* 아이콘과 제목 사이 간격 */
}

/* Trust 카드 아이콘 박스 */
#trust .trust-icon-box {
width: 45px; /* 아이콘 박스의 너비 */
    height: 45px; /* 아이콘 박스의 높이 */
    background-color: rgba(71, 89, 56, 0.1); /* 연한 올리브 계열 배경색 */
    border-radius: 50%; /* 원형으로 만듦 */
    border: 1px solid rgba(71, 89, 56, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* Trust 카드 아이콘 이미지 */
#trust .trust-icon {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* 이미지가 박스를 완전히 채우되, 비율을 유지하며 넘치는 부분은 잘라냄 */
    display: block;
}

/* Trust 카드 제목 (저자 이름/기관) */
#trust .trust-card-title {
    font-size: 1.25rem; 
    font-weight: 800;
    color: var(--primary); /* 기본 올리브색 (강조) */
    margin: 0;
    line-height: 1.3;
}

/* Trust 카드 내용 텍스트 (본문) */
#trust .trust-card-text {
    padding: 20px; 
    font-size: 0.95rem;
    color: var(--text); /* ✨ 수정: 본문은 어두운 텍스트로 명확하게 표시 */
    line-height: 1.6;
    margin-bottom: 0; 
    flex-grow: 1; 
}

/* 딜레이 (계단식 효과) - 수정된 규칙을 사용 */
#trust .testimonial-card.fade-up {
    opacity: 0;
    transform: translateY(40px); /* 조금 더 위에서 슬라이드-업 */
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}

/* 개별 카드 딜레이 설정 */
#trust .testimonial-card.fade-up:nth-child(1) { transition-delay: 0.3s; } 
#trust .testimonial-card.fade-up:nth-child(2) { transition-delay: 0.45s; } 
#trust .testimonial-card.fade-up:nth-child(3) { transition-delay: 0.6s; } 

/* 최종 상태 */
#trust .testimonial-card.fade-up.in-view {
    opacity: 1;
    transform: none;
}


/* Footer */
.site-footer{
    background: linear-gradient(to bottom, #fbf8f0, #f5f0e1 50%, #fbf8f0); /* Welcome과 동일한 배경 */
    color:var(--text); /* 텍스트 색상 변경 */
    padding: 40px 0 20px; 
    margin-top: 0; /* Trust 섹션과의 공백 제거 */
}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:start}
.footer-brand h4{margin:0 0 8px}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links a{color:var(--text);text-decoration:none}
.footer-bottom{
    color:var(--muted); /* 텍스트 색상 변경 */
    text-align:center;
    padding:20px 0 0;
    margin-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1); 
    font-size: 0.85rem;
}

/* ------------------------------------------- */
/* Responsive Design */
/* ------------------------------------------- */

@media (max-width:980px){
  /* Grid Class Definitions */
  .cards-2{ grid-template-columns:repeat(1,1fr); }
  .cards-3{ grid-template-columns:repeat(2,1fr); }
  .cards-4{ grid-template-columns:repeat(1,1fr); }
  .cards-1{ grid-template-columns:repeat(1,1fr); } /* Vision 하단 카드 */

  /* General Layout */
  .welcome-grid{grid-template-columns:1fr;row-gap:28px;padding-bottom:10px}
  .academy-cards-grid { grid-template-columns: repeat(1, 1fr); }
  
  /* Animation Delay Adjustment for 1 column layout */
  .academy-cards-grid .edu-card.fade-up:nth-child(2) { transition-delay: 0.3s; }
  .academy-cards-grid .edu-card.fade-up:nth-child(3) { transition-delay: 0.4s; }
  
  /* Vision Animation Adjustment for mobile/tablet */
  #vision .cards-grid:nth-child(2) .value-card.fade-up:nth-child(1) { transition-delay: 0.1s; }
  #vision .cards-grid:nth-child(2) .value-card.fade-up:nth-child(2) { transition-delay: 0.2s; } 
  #vision .cards-grid:nth-child(3) .value-card.fade-up:nth-child(1) { transition-delay: 0.3s; } 

  .footer-grid{grid-template-columns:1fr}
  .mobile-toggle{display:block}
  .main-nav{display:none}
  .visual-frame{max-width:100%}
}

@media (max-width: 768px) {
    /* 섹션 제목 */
    .slogan {
        font-size: 2.4rem; 
    }
    .section-eyebrow {
        font-size: 1rem;
    }
    .section-main-title {
        font-size: 2.2rem;
        white-space: normal;
        word-break: keep-all;        
    }

    .lead {
        font-size: 1.05rem; 
    }
    
    /* 카드 텍스트 */
    .card .card-main-desc {
        font-size: 1.15rem;
    }
    .card .card-sub-title {
        font-size: 1rem;
    }
    .card .card-extra-info {
        font-size: 0.8rem;
    }

    /* [수정] Solution 카드 텍스트만 따로 조정 (768px 이하) */
    #solution .card .card-main-desc {
        font-size: 1.3rem; 
    }
    #solution .card .card-sub-title {
        font-size: 1.1rem; /* 원하는 크기로 조정 */
    }
    #solution .card .card-extra-info {
        font-size: 0.92rem;  /* 원하는 크기로 조정 */
    }

    /* Academy 카드 모바일 조정 */
    .edu-card-header {
        height: 150px; 
    }
    .edu-card-body {
        padding: 20px;
    }
    .edu-card-title-on-image {
        font-size: 1.15rem; 
    }
    .edu-card-desc {
        font-size: 0.9rem;
    }

    /* "비대면 계좌 개설하기" 버튼 가운데 정렬 (768px 이하) */
    .cta-row {
        text-align: center; /* 버튼을 감싸는 .cta-row에 적용 */
    }

  .welcome-section{padding-top:84px}
  .coin--large{display:none}
  .coin--mid{display:none}
}

@media (max-width:560px){
  /* 섹션 제목 */
  .slogan{font-size:1.7rem} 
  
  .section-eyebrow {
    font-size: 0.9rem;
  }
  .section-main-title {
    font-size: 1.8rem;
    white-space: normal;
    word-break: keep-all;    
  }

  /* 카드 텍스트 및 레이아웃 */
  .cards-4, .cards-3{
    grid-template-columns:repeat(1,1fr); 
  }
  .card .card-main-desc {
        font-size: 1.1rem;
    }
    .card .card-sub-title {
        font-size: 0.95rem;
    }
    .card .card-extra-info {
        font-size: 0.80rem;
    }
 
    /* [수정] Solution 카드 텍스트만 따로 조정 (560px 이하) */
    #solution .card .card-main-desc {
        font-size: 1.3rem;
    }
    #solution .card .card-sub-title {
        font-size: 1rem;
    }
    #solution .card .card-extra-info {
        font-size: 0.9rem;
    }


    /* Academy 카드 모바일 조정 */
    .edu-card-header {
        height: 150px; 
    }
    .edu-card-body {
        padding: 20px;
    }
    .edu-card-title-on-image {
        font-size: 1.1rem;
    }
    .edu-card-desc {
        font-size: 0.9rem;
    }
    
    /* "비대면 계좌 개설하기" 버튼 가운데 정렬 (560px 이하) */
    .cta-row {
        text-align: center; /* 버튼을 감싸는 .cta-row에 적용 */
    }
  .welcome-section{padding-top:84px}
  .coin--large{display:none}
  .coin--mid{display:none}
}