/* technology.css - Auto-merged from 6 section files */
/* Do not edit directly - regenerate with merge_section_css.py */

/* ========== 01-hero-section ========== */
/* ===== Technology - Hero Section ===== */
.tech-hero {
  position: relative; /* brighten-in 오버레이 기준 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 33.75rem; /* 540px */
  padding: 3.75rem 0; /* 60px 0 — 좌우 거터 제거(콘텐츠 1280px + auto 마진) */
  background-image: url("../assets/images/technology/hero-section-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 히어로 배경: 진입 즉시 서서히 밝아짐 (어두운 오버레이 페이드아웃) — 1.md Section 1 */
.tech-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 배경 위, 타이틀(z-index:2) 아래 */
  background-color: #0d0f0e;
  pointer-events: none;
  animation: tech-hero-brighten 1.5s ease both;
}
@keyframes tech-hero-brighten {
  from { opacity: 0.85; }
  to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-hero::after { animation: none; opacity: 0; }
}

.tech-hero__content {
  position: relative;
  z-index: 2; /* 오버레이 위로 타이틀 노출 */
  display: flex;
  flex-direction: column;
  width: 80rem; /* 1280px 고정 */
  min-width: 80rem; /* 브라우저가 줄어도 1280px 유지(좌우 마진만 사라짐) */
  margin-inline: auto; /* 좌우 마진 auto → 가운데 정렬 */
}

.tech-hero__title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
  width: 100%;
}

.tech-hero__heading {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 4.375rem; /* 70px */
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

.tech-hero__line-dark {
  color: #222222;
}

.tech-hero__line-light {
  color: #ffffff;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .tech-hero {
    padding-inline: 6%;
    height: auto;
    min-height: 33.75rem;
  }

  .tech-hero__content {
    width: 100%;
    min-width: 0; /* 태블릿 이하: 고정폭 해제 → 유동형 */
    margin-inline: 0;
  }

  .tech-hero__heading {
    font-size: clamp(2.25rem, 6vw, 4.375rem);
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  /* Figma 모바일 히어로: 402x540 세로 배경, 하단 좌측 정렬, 타이틀 48px */
  .tech-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 402 / 540;
    padding: 2rem 0.9375rem; /* 32px 15px */
    background-image: url("../assets/images/technology/hero-bg-mobile.jpg");
    background-position: center;
  }

  .tech-hero__content {
    width: 100%;
  }

  .tech-hero__heading {
    font-size: clamp(2.5rem, 12vw, 3rem); /* 48px @402 */
    line-height: 1.19;
  }

  .tech-hero__title {
    gap: 1rem;
  }
}

/* ========== 02-section-1 ========== */
/* ============================================
   Technology - Section_1 (High-Purity Platform)
   Figma: 1920px / inner 1280px
   ============================================ */

.tech-platform {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 6.25rem; /* 100px */
  background-color: #ffffff;
}

.tech-platform__content {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* 48px */
}

/* ---- Indexing (breadcrumb + title) ---- */
.tech-platform__indexing {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem; /* 10px */
}

.tech-platform__breadcrumb {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: #0e1b2b;
}

.tech-platform__title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
}

.tech-platform__title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #222222;
}

.tech-platform__title-light {
  font-weight: 300;
  color: #222222;
}

/* ---- Contents card ---- */
.tech-platform__card {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem; /* 48px */
  padding: 3.75rem 0; /* 60px 0 */
  border-radius: 3.75rem; /* 60px */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.tech-platform__image {
  flex: 0 0 auto;
  width: 36.125rem; /* 578px */
  height: 30.5rem; /* 488px */
  border-radius: 32.5rem; /* 520px */
  overflow: hidden;
}

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

/* ---- Container (right column) ---- */
.tech-platform__container {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
}

/* ---- Heading ---- */
.tech-platform__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

.tech-platform__eyebrow {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  color: #e33345;
}

.tech-platform__headline {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #222222;
}

.tech-platform__desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #222222;
}

/* ---- List ---- */
.tech-platform__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.tech-platform__item {
  display: flex;
  flex-direction: row;
  align-items: center; /* Figma: icon · title · desc vertically centered */
  gap: 1rem; /* 16px */
}

.tech-platform__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  padding-top: 0.25rem; /* 4px Margin */
  box-sizing: content-box;
}

.tech-platform__icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.tech-platform__item-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row; /* Figma: title beside desc, not stacked */
  align-items: center;
  gap: 1rem; /* 16px between title and desc */
}

.tech-platform__item-title {
  flex: 0 0 auto; /* natural width (191/161/110px in Figma) */
  white-space: nowrap;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.5;
  color: #454545;
}

.tech-platform__item-desc {
  flex: 1 1 0; /* fills the rest beside the title */
  min-width: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 1199px) {
  .tech-platform__content {
    padding-inline: 5%;
  }

  .tech-platform__card {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    padding: 2.5rem 0;
  }

  .tech-platform__image {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 488;
    border-radius: 2rem;
    align-self: center;
    max-width: 36.125rem;
  }

  .tech-platform__container {
    width: 100%;
  }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
  .tech-platform {
    padding-top: 4rem;
  }

  .tech-platform__content {
    gap: 2rem;
  }

  .tech-platform__title,
  .tech-platform__headline {
    font-size: 2.375rem; /* 38px (Figma) */
  }

  .tech-platform__eyebrow,
  .tech-platform__item-title {
    font-size: 1.5rem; /* 24px (Figma) */
  }

  /* stack title over desc on narrow screens */
  .tech-platform__item-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem; /* 6px (Figma Item gap) */
  }
  .tech-platform__item-title {
    white-space: normal;
  }

  .tech-platform__desc,
  .tech-platform__item-desc {
    font-size: 1.125rem; /* 18px (Figma) */
  }

  .tech-platform__container {
    gap: 3.75rem; /* 60px (Figma Container gap) */
  }

  /* Figma: 상단 이미지 = 타원 (r520, 372x314) 풀폭 */
  .tech-platform__image {
    width: 100%;
    max-width: none;
    aspect-ratio: 372 / 314;
    border-radius: 50%;
  }
}

/* ========== 03-section-2 ========== */
/* ============================================
   Technology - Section 2 (선별 프로세스)
   ============================================ */

.tech-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6.25rem 0 10rem;
  gap: 5rem;
}

.tech-process__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  width: 100%;
  max-width: 80rem; /* 1280px */
}

/* ---------- 텍스트 콘텐츠 ---------- */
.tech-process__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  width: 100%;
}

.tech-process__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.tech-process__title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  line-height: 1.3;
  letter-spacing: -0.05rem; /* -2% of 40px */
  color: #222222;
  text-align: left;
}

.tech-process__desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
  text-align: left;
  order: 1; /* 데스크탑: 제목 다음, 인포그래픽 위 */
}

/* ---------- 인포그래픽 ---------- */
.tech-process__infographic {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5rem;
  width: 100%;
  padding-bottom: 5rem;
  background-color: #ffffff;
  order: 2;
}

.tech-process__steps {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 모바일 전용 세로 인포그래픽 이미지 (데스크탑 숨김) */
.tech-process__mobile-img {
  display: none;
}

.tech-process__step {
  margin: 0;
  flex: 0 0 auto;
}

.tech-process__step img {
  display: block;
  width: 100%;
  height: auto;
}

/* 피그마 원본 스테이지 폭 비율 유지 (모든 스테이지 높이 391px 동일) */
.tech-process__step--1 { width: 15.1875rem; }  /* 243px */
.tech-process__step--2 { width: 14.1875rem; }  /* 227px */
.tech-process__step--3 { width: 14.6875rem; }  /* 235px */
.tech-process__step--4 { width: 19.75rem; }    /* 316px */

.tech-process__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tech-process__arrow img {
  display: block;
  width: 1.758125rem; /* 28.13px */
  height: auto;
}

/* ============================================
   Tablet
   ============================================ */
@media (max-width: 1199px) {
  .tech-process {
    padding: 5rem 0 6rem;
  }

  .tech-process__inner {
    padding-inline: 5%;
  }

  .tech-process__title {
    font-size: 2rem;
  }
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 768px) {
  .tech-process {
    padding: 3.5rem 0 4rem;
    gap: 3rem;
  }

  .tech-process__inner {
    gap: 3rem;
  }

  .tech-process__title {
    font-size: 2rem; /* 32px (Figma) */
    line-height: 1.3;
    letter-spacing: -0.03rem;
  }

  .tech-process__desc {
    font-size: 1.125rem; /* 18px (Figma) */
    order: 2; /* 모바일: 인포그래픽 박스 아래 */
  }

  .tech-process__infographic {
    order: 1;
    padding-bottom: 0;
  }

  /* 모바일: 개별 스텝 박스 숨기고 Figma 세로 인포그래픽 한 장으로 표시 */
  .tech-process__steps {
    display: none;
  }

  .tech-process__mobile-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 화살표를 아래 방향으로 회전 */
  .tech-process__arrow img {
    width: 1.5rem;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .tech-process__step {
    max-width: 85%;
  }

  .tech-process__step--4 {
    max-width: 100%;
  }
}

/* ========== 04-section-3 ========== */
/* ===== Technology - Section 3 (Advanced Delivery) ===== */
.tech-section3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  padding: 6.25rem 0;
  background-color: #f5f5f5;
}

.tech-section3__content {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  border-radius: 3.75rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Left column ----------------------------------------- */
.tech-section3__container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3.75rem;
}

.tech-section3__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tech-section3__eyebrow {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  color: #e33345;
}

.tech-section3__title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #222222;
}

.tech-section3__desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #222222;
}

/* List ------------------------------------------------ */
.tech-section3__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tech-section3__item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tech-section3__icon {
  flex-shrink: 0;
  display: flex;
  padding-top: 0.25rem; /* Margin frame: 4px top */
}

.tech-section3__icon img {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  display: block;
}

.tech-section3__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.tech-section3__item-title {
  flex-shrink: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  color: #454545;
}

.tech-section3__item-desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
}

/* Image ----------------------------------------------- */
.tech-section3__image {
  flex-shrink: 0;
  width: 33.75rem; /* 540px */
  height: 33.75rem;
  border-radius: 31.25rem; /* 500px (pill) */
  overflow: hidden;
}

.tech-section3__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .tech-section3 {
    padding: 5rem 0;
    gap: 3rem;
  }

  .tech-section3__content {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
    padding-inline: 5%;
    box-sizing: border-box;
  }

  .tech-section3__container {
    order: 1;
  }

  .tech-section3__image {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 33.75rem;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 2rem;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .tech-section3 {
    padding: 3.5rem 0;
  }

  .tech-section3__container {
    gap: 2.5rem;
  }

  .tech-section3__heading {
    gap: 1rem;
  }

  .tech-section3__eyebrow {
    font-size: 1.5rem; /* 24px (Figma) */
  }

  .tech-section3__title {
    font-size: 2.375rem; /* 38px (Figma) */
  }

  .tech-section3__desc {
    font-size: 1.125rem; /* 18px (Figma) */
  }

  .tech-section3__desc br {
    display: none;
  }

  .tech-section3__item-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem; /* 6px */
  }

  .tech-section3__item-title {
    font-size: 1.5rem; /* 24px (Figma) */
  }

  .tech-section3__item-desc {
    font-size: 1.125rem; /* 18px (Figma) */
  }

  /* Figma: 하단 이미지 = 원형 (r500, 372x372) 풀폭 */
  .tech-section3__image {
    max-width: none;
    border-radius: 50%;
  }
}

/* ========== 05-section-4 ========== */
/* ===== Technology - Section 4 (Eco-Production) ===== */
.tech-eco {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 10rem 0 15rem;
}

.tech-eco__inner {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80px */
}

/* ---- Container (heading + list) ---- */
.tech-eco__container {
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
}

.tech-eco__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

.tech-eco__label {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.2;
  color: #e33345;
}

.tech-eco__title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #222222;
}

.tech-eco__desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #222222;
}

/* ---- List of 3 features ---- */
.tech-eco__list {
  display: flex;
  flex-direction: row;
  gap: 3rem; /* 48px */
  padding: 2.5rem 0; /* 40px 0 */
  list-style: none;
}

.tech-eco__item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem; /* 16px */
}

.tech-eco__icon {
  flex-shrink: 0;
  width: 7.5rem; /* 120px */
  height: 7.5rem;
  border-radius: 50%;
  background-color: #7cc743;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-eco__icon img {
  width: 3.75rem; /* ~60px icon glyph */
  height: 3.75rem;
  object-fit: contain;
}

.tech-eco__item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem; /* 6px */
}

.tech-eco__item-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.2;
  color: #454545;
}

.tech-eco__item-desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
  word-break: keep-all;
}

/* ---- Infographic ---- */
.tech-eco__infographic {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80px */
}

.tech-eco__info-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #222222;
}

.tech-eco__info-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
}

.tech-eco__diagram {
  width: 100%;
}

.tech-eco__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* 데스크탑 가로형 기본 노출, 모바일 세로형 숨김
   (.tech-eco__diagram img 규칙보다 특이도를 높여 확실히 숨김) */
.tech-eco__diagram img.tech-eco__diagram-mobile {
  display: none;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .tech-eco {
    padding: 6rem 5% 8rem;
  }

  .tech-eco__inner {
    max-width: 100%;
  }

  .tech-eco__list {
    flex-direction: column;
    gap: 2rem;
  }

  .tech-eco__item {
    flex: initial;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .tech-eco {
    padding: 4rem 5% 5rem;
  }

  .tech-eco__inner {
    gap: 3rem;
  }

  .tech-eco__container {
    gap: 2.5rem;
  }

  .tech-eco__title {
    font-size: 2.375rem; /* 38px (Figma) */
  }

  .tech-eco__info-title {
    font-size: 2rem; /* 32px (Figma) */
  }

  .tech-eco__infographic {
    gap: 2.5rem;
  }

  .tech-eco__icon {
    width: 5rem;
    height: 5rem;
  }

  .tech-eco__icon img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .tech-eco__item-title {
    font-size: 1.5rem; /* 24px (Figma) */
  }

  /* Figma 모바일: 세로형 인포그래픽 풀폭 표시 (가로 스크롤 불필요) */
  .tech-eco__diagram {
    overflow-x: visible;
  }

  .tech-eco__diagram img {
    min-width: 0;
  }

  /* 모바일: 데스크탑 가로형 숨기고 세로형 노출 */
  .tech-eco__diagram img.tech-eco__diagram-desktop {
    display: none;
  }

  .tech-eco__diagram img.tech-eco__diagram-mobile {
    display: block;
  }
}