/* =====================================================
   About Page (v0.3.0)  –  home.css 의 무드 그대로
===================================================== */

/* ------- 1. Hero Layout ------- */
.about {
  background-color: var(--c-gray-100);
}
.about-hero{
  display:flex;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  padding-block:calc(var(--g-unit)*12) calc(var(--g-unit)*9);
  /* height: calc(100vh - 64px); */
  min-height:calc(100vh - 64px);   /* ✅ 최소 높이만 보장 */
}

/* 이미지(왼쪽) */
.about-hero__img{
  flex:0 0 45%;
  max-width:500px;
}
.about-hero__img img{
  display:block;
  width:100%;
  height:auto;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease-in-out;
}
.about-hero__img img:hover {
  transform: translateY(-15px);
}
/* 텍스트(오른쪽) */
.about-hero__text{
  flex:1 1 55%;
}
.about-hero__title{
  margin-bottom:30px;
  font-size:2.8rem;
  font-weight: 800;
  letter-spacing:-0.02em;
  line-height: 1.4;
  color:var(--c-gray-800);
}
.about-hero__title .accent{
  color:var(--c-yellow);
}
.lead{
  font-size:1.2rem;
  font-weight:400;
  letter-spacing:-0.02em;
  color:var(--c-gray-600);
  margin-bottom: 40px;
}
.philosophy{
  list-style:none;
  padding:0;
}
.philosophy li{
  margin-top:1rem;
  font-size:1.2rem;
  font-weight: 400;
  letter-spacing:-0.02em;
  line-height:1.6;
  color:var(--c-gray-600);
}
.philosophy strong{
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--c-gray-800);
}

/* 버튼은 components.css 의 .btn 그대로 사용 */

/* ------- 2. Responsive ------- */
@media (max-width:768px){
  .about-hero{
    flex-direction:column;
    text-align:center;
  }
  .about-hero__img{
    max-width:280px
  }
  .about-hero__img img{
    transition: none; /* 이미지 호버 효과 제거 */
  }
  .about-hero__img img:hover {
    transform: none; /* 이미지 호버 효과 제거 */
  }
  .about-hero__text{
    flex:none;
    text-align:left
  }
  .about-hero__title{
    font-size: 2.2rem;
    margin-top: 20px;
    text-align: center;
  }
  .lead{
    font-size: 1.1rem;
    margin-bottom: 60px;
  }
  .philosophy li{
    font-size: 1.1rem;
  }
}