/* ==========================================================================
   01about — 유로링크 소개 전용 스타일 (원본 css/01about.css 이식, 변경 없음)
   ========================================================================== */

/* ==========================================================================
   Core Values
   ========================================================================== */
.values{ position:relative; overflow:hidden; padding:clamp(80px, 12vh, 140px) 0; border-top:1px solid var(--line); }
.values .wrap{ position:relative; z-index:1; }

.values-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.vdb{ position:absolute; border-radius:50%; filter:blur(60px); }
.vdb-1{
  width:420px; height:420px;
  right:-90px; top:8%;
  background:radial-gradient(circle at 35% 30%, rgba(18,59,122,.5), rgba(18,59,122,0) 70%);
  animation:ahd-float 22s ease-in-out infinite;
}
.vdb-2{
  width:280px; height:280px;
  right:260px; top:22%;
  background:radial-gradient(circle at 40% 40%, rgba(46,143,239,.45), rgba(46,143,239,0) 70%);
  animation:ahd-float 18s ease-in-out infinite reverse;
  animation-delay:2s;
}
.vdb-3{
  width:170px; height:170px;
  right:320px; top:14%;
  background:radial-gradient(circle at 50% 50%, rgba(18,59,122,.35), rgba(18,59,122,0) 70%);
  animation:ahd-float 16s ease-in-out infinite;
  animation-delay:4s;
}
@media (max-width: 900px){
  .values-deco{ display:none; }
}

.values-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.2vw, 36px);
}
.values-col{
  position:relative;
  padding:clamp(32px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  transition:border-color .3s ease;
}
.values-col:hover{ border-color:var(--blue); }
.vc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.vc-num{
  display:block;
  font-family:'ONE-Mobile-Title', 'Pretendard', sans-serif;
  font-size:15px;
  font-weight:800;
  color:var(--line);
}
.vc-icon{ width:26px; height:26px; color:var(--blue); flex:none; }
.vc-label{
  display:block;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}
.values-col h3{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.4;
  margin:0 0 14px;
  color:var(--ink);
}
.values-col p{ font-size:14.5px; line-height:1.7; color:var(--mist); margin:0; }
@media (min-width: 901px){
  .values .section-head .eyebrow,
  .values .section-head h2,
  .values .section-head p{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  }
  .values .section-head .eyebrow{ transition-delay:0s; }
  .values .section-head h2{ transition-delay:.1s; }
  .values .section-head p{ transition-delay:.3s; }
  .values.is-revealed .section-head .eyebrow,
  .values.is-revealed .section-head h2,
  .values.is-revealed .section-head p{ opacity:1; transform:translateY(0); }
  .values-col{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), border-color .3s ease;
  }
  .values-col:nth-child(1){ transition-delay:.15s, .15s, 0s; }
  .values-col:nth-child(2){ transition-delay:.3s, .3s, 0s; }
  .values-col:nth-child(3){ transition-delay:.45s, .45s, 0s; }
  .values.is-revealed .values-col{ opacity:1; transform:translateY(0); }
}

@media (max-width: 900px){
  .eyebrow{ font-size:11px; }
  .values{ padding:clamp(50px, 8vh, 90px) 0; }
  .values-cols{ grid-template-columns:1fr; gap:20px; }
  .values-col p{ letter-spacing:-0.02em; }
  .vc-num{ display:none; }
  .values-col{ display:grid; grid-template-columns:1fr auto; column-gap:12px; padding:24px 20px; }
  .vc-top{ display:contents; }
  .vc-icon{ grid-column:2; grid-row:1; align-self:center; margin-bottom:0; }
  .vc-label{ grid-column:1; grid-row:1; align-self:center; margin-bottom:0; font-size:11px; }
  .values-col h3{ grid-column:1 / -1; margin-top:6px; font-size:18px; }
  .values-col p{ grid-column:1 / -1; }
}