@charset "utf-8";
/* 메인(index.php) 전용 */
/* ============================================================
   히어로
   ============================================================ */
.hero {position: relative; min-height: 68rem; overflow: hidden; background: linear-gradient(90deg, #e8f4ff 0%, #d0ebff 50%, #c5e8f5 100%);}
.hero .deco {position: absolute; pointer-events: none;}
.hero .deco-1 {top: -8rem; left: -8rem; width: 40rem; height: 40rem;}
.hero .deco-2 {top: 30rem; right: -16rem; width: 50rem; height: 50rem;}
.hero .inner {position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 68rem; gap: 4rem;}
.hero-l {flex: 0 1 60rem;}
.hero-tt {margin-top: 2rem; font-size: 5.4rem; font-weight: 800; line-height: 1.3; letter-spacing: -.2rem; color: var(--navy);}
.hero-tx {margin-top: 2.2rem; font-size: 1.9rem; line-height: 1.7; color: var(--body);}
.hero-stats {display: flex; align-items: center; gap: 3.2rem; margin-top: 4rem;}
.hero-stats li {display: flex; flex-direction: column;}
.hero-stats b {font-size: 2rem; font-weight: 800; color: var(--navy);}
.hero-stats span {font-size: 1.3rem; color: var(--sub);}
.hero-stats .vl {width: 1px; height: 4rem; background: #c5d8e8;}
.hero-r {position: relative; flex: 0 0 62rem; height: 52rem;}
.hero-photo {position: absolute; top: 0; left: 6rem; width: 48rem; height: 42rem; overflow: hidden; border-radius: 3rem; box-shadow: 0 2.4rem 2.5rem rgba(26, 74, 107, .19);}
.hero-photo img {width: 100%; height: 100%; object-fit: cover;}
.chip {position: absolute; padding: 1rem 1.8rem; border-radius: 4rem; font-size: 1.4rem; font-weight: 700; white-space: nowrap; animation: floaty 5s ease-in-out infinite;}
.chip-1 {top: 5rem; left: -3rem; color: var(--yellow-ink); background: var(--yellow); box-shadow: 0 .8rem .8rem rgba(255, 201, 60, .31); --r: -6deg;}
.chip-2 {top: 12rem; left: 44rem; color: var(--navy); background: #fff; box-shadow: 0 .8rem .9rem rgba(26, 74, 107, .16); --r: 5deg; animation-delay: -1.6s;}
.chip-3 {top: 33.3rem; left: 44rem; color: #fff; background: var(--purple); box-shadow: 0 .8rem .9rem rgba(143, 124, 242, .31); --r: -4deg; animation-delay: -3.2s;}
@keyframes floaty {0%, 100% {transform: translateY(0) rotate(var(--r));} 50% {transform: translateY(-.8rem) rotate(var(--r));}}
.mission {position: absolute; top: 35rem; left: -5rem; width: 24rem; padding: 1.6rem 1.8rem; border-radius: 2rem; background: #fff; box-shadow: 0 1.2rem 1.4rem rgba(26, 74, 107, .15);}
.mission-top {display: flex; justify-content: space-between; font-size: 1.4rem; font-weight: 700; color: var(--navy);}
.mission-top em {font-style: normal; color: var(--green);}
.mission .bar {margin-top: 1rem; background: var(--green-soft);}
.mission .bar i {background: linear-gradient(90deg, var(--green), var(--yellow));}


/* ============================================================
   바로가기 카드
   ============================================================ */
.quick {background: #fff;}
.quick ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 4rem;}
.q-card {position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; height: 100%; padding: 2.6rem 2.4rem; border: 1px solid #eaf2fb; border-radius: 2rem; background: #fff; box-shadow: 0 .8rem 1.4rem rgba(26, 74, 107, .09); transition: transform .3s var(--ease), box-shadow .3s;}
.q-card:hover, .q-card:focus-visible {transform: translateY(-.8rem); box-shadow: 0 1.8rem 3rem rgba(26, 74, 107, .16);}
.q-ic {display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 1.6rem; transition: transform .3s var(--ease);}
.q-ic img {width: 2.6rem; height: 2.6rem;}
.q-card:hover .q-ic {transform: scale(1.1) rotate(-6deg);}
.q-card .tx b {display: block; font-size: 1.7rem; font-weight: 700;}
.q-card .tx span {display: block; font-size: 1.3rem; color: var(--sub);}
.q-card .tag {position: absolute; top: -1.1rem; right: 1.6rem;}
.bg-sky {background: #e3f2ff;}
.bg-lilac {background: #f0ebff;}
.bg-mint {background: var(--green-soft);}
.bg-cream {background: #fff5d6;}
.bg-rose {background: #ffe9ef;}


/* ============================================================
   성과 (ACHIEVEMENTS)
   ============================================================ */
.achv {padding-block: 8rem; color: #fff; text-align: center; background: var(--navy);}
.achv .label {color: #8fb3d0;}
.achv .title {color: #fff;}
.a-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 5rem;}
.a-card {display: flex; flex-direction: column; align-items: center;}
.a-ic {display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; transition: transform .35s var(--ease);}
.a-ic img {width: 2.8rem; height: 2.8rem;}
.a-card:hover .a-ic {transform: scale(1.12) rotate(-8deg);}
.a-num {margin-top: 1.8rem; font-size: 2.8rem; font-weight: 800; color: var(--yellow);}
.a-lb {margin-top: .4rem; font-size: 1.4rem; color: #8fb3d0;}

/* ============================================================
   반응형 (메인 전용 규칙: 기본 규칙 뒤에 와야 적용됩니다)
   ============================================================ */
@media (max-width: 79.999em) {
  .hero-tt {font-size: 4.6rem;}
  .hero-r {flex-basis: 54rem; transform: scale(.9); transform-origin: right center;}
  .q-card {padding-inline: 2rem;}
}
@media (max-width: 68.75em) {
  .hero .inner {flex-direction: column; align-items: flex-start; padding-block: 6rem 8rem;}
  .hero-l {flex: none; width: 100%;}
  .hero-r {flex: none; width: 100%; max-width: 54rem; height: 48rem; margin: 2rem auto 0; transform: none;}
  .hero-photo {left: 4rem; width: calc(100% - 8rem); max-width: 44rem;}
  .chip-2 {left: auto; right: 0;}
  .chip-3 {left: auto; right: 0;}
}
@media (max-width: 63.999em) {
  .quick ul, .a-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .a-grid {gap: 4rem 2rem;}
}
@media (max-width: 47.999em) {
  .hero-tt {font-size: 3.6rem; letter-spacing: -.1rem;}
  .hero-tx {font-size: 1.7rem;}
  .hero-btns .pill {flex: 1 1 100%;}
  .hero-stats {flex-wrap: wrap; gap: 2rem;}
  .hero-stats .vl {display: none;}
  .hero-r {height: 40rem;}
  .hero-photo {height: 34rem;}
  .chip-1 {left: 0;}
  .mission {top: 28rem; left: 0; width: 20rem;}
  .quick ul {gap: 1.6rem 1.2rem; padding-block: 3.2rem;}
  .q-card {padding: 2.2rem 1.6rem;}
  .achv {padding-block: 6rem;}
}

/* 인터랙션: 히어로 마우스 시차 (JS 가 --mx, --my 를 -1 ~ 1 로 지정) */
.hero-photo {translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px); transition: translate .5s var(--ease);}
.chip-1 {translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 14px); transition: translate .5s var(--ease);}
.chip-2 {translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * 16px); transition: translate .5s var(--ease);}
.chip-3 {translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -14px); transition: translate .5s var(--ease);}
.mission {translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * -12px); transition: translate .5s var(--ease);}
.hero .deco-1 {translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 12px); transition: translate .8s var(--ease);}
.hero .deco-2 {translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); transition: translate .8s var(--ease);}
@media (max-width: 68.75em), (hover: none) {
  .hero-photo, .chip, .mission, .hero .deco {translate: none;}
}