/* elastic-lab-tech (08_elastic lab tech, Figma node 11:8425) — 원본 시안 통이미지(flat).
   visible 노드 08 1. 배경 연출 씬/복잡 다이어그램/아이콘은 라벨 placeholder, 텍스트·패널·불릿은
   실 HTML. 포인트 컬러 = 브랜드 오렌지 #F26521. 색상 픽셀 추출. */

.tech-page { background: #fff; color: #1a1a1a; --tech-orange: #f26521; }
/* ===== 공통 이미지 자리표시 ===== */
.bg-image-placeholder { position: relative; display: flex; align-items: center; justify-content: center;  background-size: 26px 26px; background-position: 0 0, 13px 13px; }
.bg-image-placeholder__label { position: absolute; right: 16px; bottom: 14px; z-index: 1; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.9); color: #6a7682; font-family: var(--font-latin, "Poppins", sans-serif); font-size: 13px; font-weight: 500; text-align: center; }
.tech-eyebrow { margin: 0 0 14px; color: var(--tech-orange); font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(15px, 1.2vw, 17px); font-weight: 600; }
.tech-h2 { margin: 0; font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
.tech-br { display: inline; }
/* ===== HERO ===== */
.tech-hero { position: relative; display: flex; align-items: center; min-height: 100vh; padding: clamp(56px, 7vw, 110px) clamp(24px, 6.25vw, 120px); overflow: hidden; }
.tech-hero__bg { position: absolute; inset: 0; border: 0; }
.tech-hero__copy { position: relative; z-index: 2; }
.tech-hero__title { margin: 0; color: #fff; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(40px, 5.4vw, 84px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.02; }
.tech-hero__desc { margin: 18px 0 0; color: #fff; font-size: clamp(14px, 1.1vw, 17px); }
/* ===== 엘라스틴이 무엇인가요? (배경 통이미지 + 하단 투명 패널) ===== */
.tech-what { position: relative; padding: clamp(120px, 13vh, 160px) 0 0; overflow: hidden; }
.tech-what__bg { position: absolute; inset: 0; border: 0; }
/* 헤딩: 우측 텍스트 정렬선(--tech-rpad)에 맞춰 아래 3컬럼과 열 일치. 아래 간격 = 연구원 사진 영역 */
/* 헤딩 우측끝 = col3 제목 우측끝 = Core Tech 우측끝(시안 88%)에 정렬 */
.tech-what__title { position: relative; z-index: 2; margin: 0 0 clamp(150px, 18vw, 270px); padding: 0 clamp(28px, 8.5vw, 125px); text-align: right; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(28px, 3vw, 46px); font-weight: 800; line-height: 1.2; color: #1a1a1a; }
/* 배경 통이미지 위 하단 패널: 흰색 반투명 그라데이션(상단=사진 비침 → 하단=거의 흰색).
   컬럼을 넓게 벌려 col3(중앙정렬) 제목 우측끝이 88% 정렬선에 오도록 좌우 패딩 축소 */
/* 3컬럼 묶음은 좌우 대칭 패딩으로 가운데 정렬(우측 쏠림 방지) */
.tech-what__panel { position: relative; z-index: 2; padding: clamp(64px, 7vw, 120px) clamp(24px, 5.5vw, 80px) clamp(56px, 6vw, 90px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 16%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0.96) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tech-feat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tech-feat__icon { width: 56px; height: 56px; border-radius: 10px; margin-bottom: 18px; }
.tech-feat__title { margin: 0 0 14px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; color: #1a1a1a; }
.tech-feat__desc { margin: 0; font-size: clamp(12px, 1vw, 14px); line-height: 1.7; color: #666; word-break: keep-all; }
/* ===== CORE TECH (배경 통이미지 + 텍스트) ===== */
/* 우측 텍스트 정렬선을 섹션2와 동일하게(--tech-rpad). 글자 블록을 좁혀 우측으로 붙임 */
.tech-core { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 100vh; padding: clamp(56px, 7vw, 110px) clamp(28px, 8.5vw, 125px); overflow: hidden; }
.tech-core__bg { position: absolute; inset: 0; border: 0; background-color: #f1f9fc; }
/* 제목·본문 모두 우측 정렬 → 본문이 "Core Tech :" 앞으로 튀어나오지 않고 우측끝 일치 */
.tech-core__copy { position: relative; z-index: 2; width: min(34%, 360px); text-align: right; }
.tech-core__title { margin: 0 0 22px; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(28px, 3vw, 46px); font-weight: 700; color: #1a1a1a; }
.tech-core__desc { margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.8; color: #555; word-break: keep-all; }
.tech-core__note { margin: 26px 0 0; font-family: var(--font-latin, "Poppins", sans-serif); font-size: 12px; line-height: 1.6; color: #9aa6ad; }
/* ===== 공통: 번호 스텝 / 오렌지 콜아웃 ===== */
.tech-steps { list-style: none; counter-reset: step; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; }
.tech-steps li { position: relative; counter-increment: step; padding-left: 30px; margin-bottom: 12px; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; color: #333; word-break: keep-all; }
.tech-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--tech-orange); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.tech-callout { margin-top: clamp(28px, 3vw, 40px); padding: 22px 28px; border-radius: 10px; background: var(--tech-orange); color: #fff; }
.tech-callout p { margin: 0; font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; line-height: 1.6; }
.tech-callout p + p { margin-top: 6px; }
/* ===== 4·5섹션: 풀블리드 2x2 바둑판 — 동일 50/50 컬럼 + 동일 높이로 비율 일치 ===== */
.tech-synth { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 620px; }
.tech-synth img {object-fit: contain!important; width: 100%; height: 100%; }
.tech-synth__copy { background: #f1f1f1;  display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 6vw, 110px) clamp(32px, 5vw, 90px);  }
.tech-synth__note { margin: 26px 0 0; font-family: var(--font-latin, "Poppins", sans-serif); font-size: 12px; line-height: 1.6; color: #a7a7a7; }
.tech-synth__figure { position: relative; border: 0; min-height: 100%; overflow: hidden; }
.tech-synth__figure::before {
  content: "";
  position: absolute;
  left: 21%;
  top: 14%;
  z-index: 2;
  width: 55%;
  height: 52%;
  border: 1px solid rgba(242, 101, 33, 0.24);
  border-radius: 50%;
  background: rgba(242, 101, 33, 0.055);
  pointer-events: none;
}
.tech-synth__figure img { position: relative; z-index: 1; }
/* ===== ECM Regeneration Mechanism (다이어그램 + 회색 텍스트 패널) ===== */
.tech-ecm { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 620px; }
.tech-ecm img {object-fit: contain!important; width: 100%; height: 100%; }
.tech-ecm__figure { border: 0; min-height: 100%; }
.tech-ecm__panel { background: #f1f1f1; display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 6vw, 110px) clamp(32px, 5vw, 90px);   }
/* ===== Responsive ===== */
@media (max-width:960px) {
  .tech-synth { grid-template-columns: 1fr; min-height: 0; }
  .tech-synth__figure { order: -1; min-height: 300px; }
  .tech-ecm { grid-template-columns: 1fr; min-height: 0; }
  .tech-ecm__figure { min-height: 300px; }
  .tech-core__copy { width: min(58%, 420px); }
}
@media (max-width:700px) {
  .tech-hero { min-height: 460px; }
  .tech-what { padding-top: clamp(96px, 13vh, 130px); }
  .tech-what__title { text-align: left; margin-bottom: clamp(120px, 26vw, 220px); }
  .tech-what__panel { grid-template-columns: 1fr; gap: 36px; }
  .tech-core { justify-content: flex-start; padding-left: clamp(24px, 6vw, 40px); padding-right: clamp(24px, 6vw, 40px); }
  .tech-core__copy { width: 100%; text-align: left; }
  .tech-br { display: none; }
}



/* ===== 4. YOUNG / OLD SKIN ===== */
.cd-h2--center { text-align: center; }
.cd-skin { max-width: 1200px; margin: 0 auto; padding: clamp(72px, 8vw, 130px) clamp(24px, 5vw, 60px); }
.cd-skin__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: clamp(20px, 3vw, 48px); }
.cd-skin__col { margin: 0; text-align: center; }
.cd-skin__img { width: clamp(140px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; overflow: hidden; }
.cd-skin__img .bg-image-placeholder__label { font-size: 12px; right: auto; bottom: auto; position: static; background: rgba(255,255,255,0.85); }
.cd-skin__name { margin: clamp(20px, 2.4vw, 32px) 0 14px; font-family: var(--font-latin, "Poppins", sans-serif); font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; }
.cd-skin__desc { margin: 0; font-size: clamp(12px, 1vw, 14px); line-height: 1.7; color: #888; word-break: keep-all; }
/* 시안: 두 원형 이미지 사이 가운데에 긴 세로 직선 + 아래방향 화살촉 */
.cd-skin__arrow { justify-self: center; align-self: stretch; width: 1.5px; min-height: 160px; margin: 10px 0; background: #b3b3b3; position: relative; }
.cd-skin__arrow::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 8px; height: 8px; border-right: 1.5px solid #b3b3b3; border-bottom: 1.5px solid #b3b3b3; transform: translate(-50%, 0) rotate(45deg); }
/* ===== 5. 탄력 구조 차이 ===== */
.cd-age { text-align: center; padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 60px) clamp(72px, 8vw, 120px); }
.cd-age__desc { max-width: 760px; margin: 0 auto clamp(40px, 4.5vw, 64px); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.7; color: #888; }
.cd-age__img { max-width: 980px; margin: 0 auto; --ba-aspect: 21 / 9; aspect-ratio: 21 / 9; border-radius: 6px; overflow: hidden; }
.cd-age__img .ba-slider__image { background-color: #f7f3f1; }
.cd-age__img .bal-before img, .cd-age__img .bal-after img { filter: none; }
/* ===== 6. 피부 탄력 (Elastogenesis) ===== */
.cd-elasto { background: #f26521; color: #fff; text-align: center; padding: clamp(72px, 8vw, 130px) clamp(24px, 5vw, 60px); }
.cd-elasto__title { margin: 0 0 22px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.4; }
.cd-elasto__title b { font-weight: 800; }
.cd-elasto__desc { max-width: 820px; margin: 0 auto clamp(48px, 5vw, 80px); color: rgba(255,255,255,0.92); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.7; }
.cd-elasto__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 1200px; margin: 0 auto; }
.cd-card { background: #fff; border-radius: 12px; padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px); text-align: center; }
.cd-card__icon { width: 72px; height: 56px; margin: 0 auto 22px; border-radius: 8px; }
.cd-card__icon.bg-image-placeholder { background-image: linear-gradient(45deg, rgba(242,101,33,0.08) 25%, transparent 25%, transparent 75%, rgba(242,101,33,0.08) 75%), linear-gradient(45deg, rgba(242,101,33,0.08) 25%, transparent 25%, transparent 75%, rgba(242,101,33,0.08) 75%); }
.cd-card__title { margin: 0 0 14px; color: var(--cd-orange); font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; }
.cd-card__desc { margin: 0; font-size: clamp(12px, 0.95vw, 13px); text-align: center; line-height: 1.7; color: #777; word-break: keep-all; }
/* ===== Responsive ===== */
@media (max-width:960px) {
  /* 모바일: 1열, DOM 순서(문구1·차트1·문구2·차트2) → 각 문구가 각 차트 위 */
  .cd-bio__data { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: 16px; }
  .cd-bio__phrase + .cd-chart { margin-bottom: 8px; }
  .cd-chart + .cd-bio__phrase { margin-top: 24px; }
  .cd-elasto__cards { grid-template-columns: 1fr; max-width: 480px; }
  .cd-density { grid-template-columns: 1fr; }
}
@media (max-width:860px) {
  /* R&D 파이프라인: 연결 순서대로 위→아래 세로 배치 */
  .cd-pipe { height: auto; display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
  .cd-pipe__lines, .cd-pipe__tag { display: none; }
  .cd-node { position: relative; left: auto; top: auto; transform: none; }
  /* :first-child는 부모 첫 자식(SVG)을 가리키므로 :first-of-type 사용 → 첫 원 위엔 선 없음 */
  .cd-node:not(:first-of-type) { margin-top: 52px; }
  .cd-node:not(:first-of-type)::before { content: ""; position: absolute; top: -52px; left: 50%; width: 2px; height: 52px; background: rgba(255,255,255,0.65); transform: translateX(-50%); }
}
@media (max-width:700px) {
  .cd-hero { min-height: 440px; }
  .cd-skin__grid { grid-template-columns: 1fr; gap: 40px; }
  .cd-skin__arrow { align-self: center; min-height: 48px; margin: 0; }
  .cd-density__shots { grid-template-columns: 1fr; }
  .cd-br { display: none; }
}