/* =========================================================
   company.css (FINAL REFINED)
   - 중앙 집중 레이아웃
   - 이미지 축소
   - 텍스트 강조
   - 모바일 UX 개선
   - 섹션 여백 확대
========================================================= */

.section{
  padding:110px 0;
}

.section--alt{
  background:#f6f7fb;
  background-image:radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px);
  background-size:18px 18px;
}

/* =========================================================
   CONTAINER
========================================================= */

.page--company .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* =========================================================
   INTRO
========================================================= */

.c-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}

.c-intro__media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 22px 55px rgba(2,6,23,.14);
  background:#fff;
}

.c-intro__copy{
  text-align:center;
}

.c-intro__title{
  margin:0 0 14px;
  font-size:36px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:#0f172a;
}

.c-intro__sub{
  margin:0 0 12px;
  font-size:22px;
  font-weight:900;
  color:#d71d1d;
  white-space:nowrap;
}

.c-intro__desc{
  margin:0;
  font-size:24px;
  font-weight:900;
  color:#0f172a;
  line-height:1.4;
}

/* =========================================================
   LEAD
========================================================= */

.company-lead{
  max-width:900px;
  margin:0 auto 64px;
  text-align:center;
}

.company-lead__title{
  margin:0;
  font-size:38px;
  line-height:1.45;
  color:#0f172a;
  font-weight:900;
  letter-spacing:-0.03em;
}

/* =========================================================
   ZIGZAG
========================================================= */

.zigzag{
  display:grid;
  gap:44px;
}

.z{
  display:grid;
  grid-template-columns:440px 1fr;
  gap:48px;
  align-items:center;
  padding-bottom:30px;
  position:relative;
}

.z--reverse{
  grid-template-columns:1fr 440px;
}

.z--reverse .z__media{
  order:2;
}

.z--reverse .z__content{
  order:1;
}

/* 구분선 */

.z::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(15,23,42,.08);
}

.z:last-child::after{
  display:none;
}

/* =========================================================
   IMAGE
========================================================= */

.z__media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 16px 44px rgba(2,6,23,.10);
  height:250px;
  background:#fff;
}

.z__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   TEXT
========================================================= */

.z__content{
  padding-top:6px;
}

.z__title{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 14px;
}

.z__num{
  font-size:76px;
  font-weight:900;
  color:rgba(15,23,42,.14);
  line-height:1;
}

.z__vline{
  width:2px;
  height:30px;
  background:rgba(15,23,42,.18);
}

.z__eng{
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(15,23,42,.55);
}

.z__kor{
  font-size:34px;
  font-weight:900;
  color:#0f172a;
}

.z__desc{
  margin:0;
  font-size:19px;
  line-height:1.9;
  color:#334155;
  max-width:700px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .c-intro{
    grid-template-columns:1fr;
    gap:18px;
  }

  .c-intro__copy{
    text-align:left;
  }

  .company-lead__title{
    font-size:32px;
  }

  .z,
  .z--reverse{
    grid-template-columns:1fr;
    gap:18px;
  }

  /* 모바일/태블릿에서는 전부 글 → 사진 순서 */
  .z__content{
    order:1;
  }

  .z__media{
    order:2;
    height:220px;
  }
}

@media(max-width:900px){

  .section{
    padding:60px 0;
  }

  .page--company .container{
    padding:0 20px;
  }

  .c-intro{
    gap:14px;
  }

  .c-intro__media{
    border-radius:14px;
  }

  /* 모바일 첫 화면 높이 줄이기 */
  .c-intro__media img{
    width:100%;
    height:200px;
    object-fit:cover;
  }

  /* 모바일에서는 글 정렬 다시 중앙 */
  .c-intro__copy{
    text-align:center;
  }

  .c-intro__title{
    margin:0 0 10px;
    font-size:24px;
    line-height:1.25;
    word-break:keep-all;
  }

  /* 줄바꿈 허용 */
  .c-intro__sub{
    margin:0 0 8px;
    font-size:16px;
    line-height:1.5;
    white-space:normal;
    word-break:keep-all;
  }

  .c-intro__desc{
    font-size:18px;
    line-height:1.45;
    word-break:keep-all;
  }

  .company-lead{
    margin:0 auto 28px;
  }

  .company-lead__title{
    font-size:24px;
    line-height:1.45;
    word-break:keep-all;
  }

  .z{
    gap:14px;
    padding-bottom:18px;
  }

  .z__title{
    gap:10px;
    margin:0 0 10px;
    flex-wrap:wrap;
  }

  .z__num{
    font-size:42px;
  }

  .z__vline{
    height:22px;
  }

  .z__eng{
    font-size:15px;
  }

  .z__kor{
    font-size:22px;
  }

  .z__desc{
    font-size:15px;
    line-height:1.7;
  }

  .z__media{
    height:190px;
    border-radius:14px;
  }
}