@charset "utf-8";

/* ============================================================
 * intro.css — 메인 인트로(Technology / Materials) 패널 전용
 *  main.css 에서 분리. base + 반응형 포함.
 * ============================================================ */

/* 인트로 전용 폰트 — 로컬 self-host (사이트 기본은 SUIT, 여기만 Pretendard) */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/pretendard/PretendardVariable.woff2") format("woff2-variations");
}

/* ============================================================
 * Section - intro PRIONE Technology & Materials
 * ============================================================ */
.intro-pin {
  height: calc(100vh - 65px + 600px);
}

.intro {
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow: hidden;
  color: #ffffff;
  background-color: #000000;
}

.intro article {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: clip-path 0.8s ease;
}

.technology {
  background-image: url(/assets/img/main/intro-bg-technology.jpg);
  background-position: left center;
  clip-path: inset(0 50% 0 0);
  z-index: 2;
}

.materials {
  background-image: url(/assets/img/main/intro-bg-materials.jpg);
  background-position: right center;
  clip-path: inset(0 0 0 50%);
  z-index: 1;
}

.intro.tech-active .technology {
  clip-path: inset(0 0 0 0);
  z-index: 2;
}

.intro.tech-active .materials {
  clip-path: inset(0 0 0 100%);
}

.intro.mat-active .materials {
  clip-path: inset(0 0 0 0);
  z-index: 2;
}

.intro.mat-active .technology {
  clip-path: inset(0 100% 0 0);
  z-index: 1;
}

/* ---- 1뎁스: 더보기 박스 ---- */
.intro-box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity 0.5s ease;
  z-index: 4;
  width: 100%;
}

.technology .intro-box {
  left: 25%;
}

.materials .intro-box {
  left: 75%;
}

.intro-box__title {
  font-size: 3.75rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.intro-box__desc {
  font-size: 1.375rem;
  margin-bottom: 40px;
}

.intro-more {
  font-size: 1.25rem;
  font-weight: 500;
  background: transparent;
  padding: 12px 40px;
  border: 1px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.intro-more:hover {
  background: rgba(255, 255, 255, 0.3);
}

.intro.tech-active .intro-box,
.intro.mat-active .intro-box {
  opacity: 0;
  pointer-events: none;
}

/* ---- 2~4뎁스: 레이어 스택 ---- */
.panel-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* 패널이 열렸을 때만 안쪽 뎁스 노출 */
.intro.tech-active .technology .panel-inner,
.intro.mat-active .materials .panel-inner {
  opacity: 1;
  pointer-events: auto;
}

/* .depth.is-active 에 pointer-events:auto 를 그냥 주면,
   닫혀 있는 패널(opacity:0)의 뎁스까지 클릭을 가로챈다.
   CSS 는 부모가 none 이어도 자식이 다시 켤 수 있기 때문이다.
   그래서 '열린 패널 안'일 때만 켠다. */
.intro.tech-active .technology .panel-inner .depth.is-active,
.intro.mat-active .materials .panel-inner .depth.is-active {
  pointer-events: auto;
}

.depth {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.depth.is-active {
  opacity: 1;
  transform: none;
}

/* technology 2 depth
  ─────────────────────────────────────────── */
.technology .tech-list,
.materials .mat-list {
  display: flex;
}

.technology .tech-list li,
.materials .mat-list li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;

  border-right: 1px solid rgba(255, 255, 255, 0);

  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);

  transition: backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease,
    background-color 0.4s ease, border-color 0.6s ease 0.8s;
}

.intro.tech-active .technology .tech-list li,
.intro.mat-active .materials .mat-list li {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-right-color: rgba(255, 255, 255, 0.5);
}

.technology .tech-list li:last-child,
.materials .mat-list li:last-child {
  border-right: none;
}

.intro.tech-active .technology .tech-list li:hover,
.intro.mat-active .materials .mat-list li:hover {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background-color: transparent;
}

.technology .tech-list li div,
.materials .mat-list li div {
  font-size: 3.25rem;
  font-weight: 800;
}

.technology .tech-list li p,
.materials .mat-list li p {
  font-size: 1.75rem;
  font-weight: 300;
}

/* technology 3 depth common
  ─────────────────────────────────────────── */
.depth-3-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 100%;
}

/* 성능: 블러(backdrop-filter)는 GPU 비용이 커서 opacity:0 로 숨긴 패널까지
   상시 합성하면 버벅인다. 실제로 보이는(팝업 열림 + 활성) 3뎁스 패널에만 건다. */
.intro.tech-active .technology .depth-3-wrap.is-active,
.intro.mat-active .materials .depth-3-wrap.is-active {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── TECHNOLOGY 3뎁스 제목 ── */
.technology .depth-3-title {
  min-height: 150px;
  padding-top: 120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.technology .depth-3-title div {
  font-size: 3.75rem;
  font-weight: 800;
}

.technology .depth-3-title p {
  font-size: 1.5rem;
}

/* ── MATERIALS 3뎁스 제목 ── */
.materials .depth-3-title {
  min-height: 100px;
  padding-top: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.materials .depth-3-title div {
  font-size: 3.75rem;
  font-weight: 800;
}

.materials .depth-3-title p {
  font-size: 1.5rem;
}

.depth-3-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* technology 3 depth - PLP
  ─────────────────────────────────────────── */
.tech-plp-list-wrap {
  position: relative;
}

.tech-plp-list-bg {
  pointer-events: none;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
}

.tech-plp-list-bg img {
  width: 100%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* PLP 패널이 활성화(보일)될 때마다 이미지 등장 애니메이션 */
.depth-3-wrap.is-active .tech-plp-list-bg img {
  opacity: 1;
  transform: scale(1);
}

.tech-plp-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tech-plp-list li {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  min-height: 90px;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.3s;
}

.tech-plp-list li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* technology 3 depth - Battery
  ─────────────────────────────────────────── */
.tech-bat-list-wrap {
  max-width: 900px;
  gap: 20px;
  margin-top: -50px;
}

.tech-bat-list-img img {
  width: 100%;
}

.tech-bat-list {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tech-bat-list li {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  min-height: 90px;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.3s;
}

.tech-bat-list li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* technology 3 depth - TMI
  ─────────────────────────────────────────── */
.tech-tmi-list-wrap {
  max-width: 1200px;
  gap: 50px;
  margin-top: -50px;
}

.tech-tmi-list-img img {
  width: 100%;
}

.tech-tmi-list {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tech-tmi-list li {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  min-height: 90px;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.3s;
}

.tech-tmi-list li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.tech-tmi-list li span {
  font-size: 1.125rem;
  font-weight: 300;
}

/* technology 4 depth - Title common
  ─────────────────────────────────────────── */
.depth-in-last {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.depth-in-tit {
  min-height: 200px;
  padding-top: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 26px;
}

.depth-mini {}

.depth-title {
  font-size: 3rem;
  font-weight: 700;
}

.depth-desc {
  font-size: 1.2rem;
}

.depth-in-content {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* technology 4 depth - TMI 4종 공통
   시안 : 아이콘(약 50px) 아래 가운데정렬 본문 22px, 한 줄에 2~3칸
  ─────────────────────────────────────────── */
.depth-eyebrow {
  font-size: 1.5rem;
  font-weight: 300;
  /* .depth-in-tit 의 gap(26px)이 시안보다 넓어 여기서 당겨 붙인다 */
  margin-bottom: -16px;
}

.tmi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 70px;
  padding: 0 40px 60px;
}

.tmi__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 시안(1920)에서 실측한 칸 사이 간격이 130px 안팎이다.
     화면이 좁아지면 같이 줄어든다 */
  gap: clamp(40px, 7vw, 135px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tmi__row > li {
  /* 시안은 칸 너비를 고정하지 않고 글 길이대로 둔다.
     폭을 묶어두면 <br> 이 아닌 엉뚱한 곳에서 줄이 접힌다.
     (시안 실측 254~490px) */
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* 아이콘은 시안에서 뽑은 SVG 라 크기가 제각각이다(가로로 넓은 배터리,
   세로로 긴 플라스크 등). 시안도 그대로 두고 가운데만 맞춰 놨으므로
   높이를 강제로 통일하지 않고, 같은 높이의 칸 안에서 가운데 정렬만 한다. */
.tmi__ico {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tmi__ico img {
  display: block;
  /* 색은 SVG 안에서 currentColor 로 그려 두었다 */
  color: #fff;
}

/* 아이콘 대신 글자가 들어가는 칸 (촉매 불순물 0 ppm)
   아이콘과 같은 높이를 차지해야 옆 칸과 줄이 맞는다 */
.tmi__badge {
  height: 64px;
  line-height: 64px;
  font-size: 2rem;
  font-weight: 700;
}

.tmi__txt {
  width: max-content;
  max-width: 100%;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.4;
}

.tmi__txt b {
  font-weight: 700;
}

/* materials 3 depth - 슬라이드 무대 */
/* 시안은 제목 바로 아래에서 내용이 시작한다.
   가운데 정렬로 두면 짧은 슬라이드에서 제목과 내용 사이가 200px 넘게 벌어진다. */
.mat-stage {
  justify-content: flex-start;
  position: relative;
  overflow: visible;
  /* 화살표가 잘리지 않게 */

  /* 부모(.depth-3-wrap)가 align-items:center 라 폭을 안 늘려준다.
     그대로 두면 슬라이드 개수만큼 가로로 늘어나 화살표가 화면 밖으로 나간다. */
  width: 100%;
  max-width: 1180px;
}

.mat-slide {
  width: 100%;
  min-width: 0;
}

/* 시안은 어느 슬라이드든 소제목이 같은 높이에서 시작한다.
   가운데 정렬로 두면 내용이 짧은 슬라이드는 소제목이 아래로 내려가 버린다. */
.mat-stage .swiper-slide {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 슬라이드 내용 준비 중 */
.mat-ready {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-ready {
  flex-direction: column;
  gap: 14px;
}

.mat-ready__tit {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}

.mat-ready p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.25rem;
}

/* 임시 이미지 — 실제 내용으로 교체할 것 */
.mat-ready__img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* technology 4 depth - 해수전지 - 파우치셀 (3장 슬라이드)
   1장 분해도 이미지 / 2장 카드 3개 / 3장 아이콘 4개
  ─────────────────────────────────────────── */
.bat-pouch {
  position: relative;
  overflow: visible;
  /* .depth-in-content 의 overflow:hidden 때문에 화살표가 잘린다 */

  /* 폭을 안 잡으면 화면 전체로 퍼져서 화살표가 화면 밖으로 나간다 */
  width: 100%;
  max-width: 1100px;
  margin: 50px auto 0;
}

.bat-pouch .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 슬라이드마다 내용 높이가 달라(분해도 440 / 카드 163 / 아이콘 260)
     넘길 때 무대가 출렁인다. 가장 큰 것에 맞춰 고정한다. */
  min-height: 440px;
  box-sizing: border-box;
}

/* 1장 : 분해도 */
.bat-pouch__fig {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}

.bat-pouch__fig img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2장 : 카드 3개 (시안 335x138, 간격 25px) */
.bat-pouch__cards {
  display: grid;
  grid-template-columns: repeat(3, 335px);
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bat-pouch__cards > li {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

/* 3장 : 아이콘 + 글 (2열) */
.bat-pouch__feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 480px));
  gap: 60px 80px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bat-pouch__feats > li {
  display: flex;
  align-items: center;
  gap: 22px;
}

.bat-pouch__feats img {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
}

.bat-pouch__feats .bat-pouch__tit,
.bat-pouch__feats .bat-pouch__desc {
  text-align: left;
}

/* 제목과 설명 사이를 벌리고, 설명은 한 줄에 들어가게 조금 줄인다 */
.bat-pouch__feats .bat-pouch__desc {
  margin-top: 12px;
  font-size: 1rem;
}

.bat-pouch__tit {
  font-size: 1.4375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.bat-pouch__desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* materials 슬라이드 공통 부품
   시안(가로 1920)의 치수를 그대로 px 로 옮겼다. 슬라이드 무대가 1180px 이라
   시안에서 제일 넓은 내용(1048px)도 그대로 들어간다.
  ─────────────────────────────────────────── */
.mat-sl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
  padding: 4px 0 10px;
}

/* "Materials" 아래 붙는 슬라이드별 작은 제목 */
.mat-sub {
  font-size: 1.75rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
}

/* ============================================================
 * Materials 3뎁스 — 슬라이드별 내용 (자리만 잡음, 내용은 새로 채운다)
 *   .mat-sl > .mat-sub + [아래 클래스 중 하나]
 * ============================================================ */

/* ── 분리막 (Membrane) ── */
.mem-nasicon-limit {
  border-radius: 20px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 40px 20px;
}

.mem-nasicon-limit .list {
  display: flex;
}

.mem-nasicon-limit .list li {
  border-right: 1px dotted rgba(255, 255, 255, 0.7);
  padding: 0 20px;
}

.mem-nasicon-limit .list li:last-child {
  border: 0;
}

.mem-nasicon-limit .list div {
  position: relative;
  padding-left: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.mem-nasicon-limit .list div::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #e50012;
  border-radius: 50%;
}

.mem-nasicon-limit .list p {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
}

.mem-nasicon-limit .list p::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}

.mem-nasicon-limit .list span {
  display: block;
  padding-left: 20px;
  margin-top: 6px;
}

.mem-nasicon-limit .list span i {
  font-family: "Pretendard Variable", sans-serif;
  font-style: normal;
}

.mem-nasicon-limit .img {
  display: flex;
  gap: 50px;
  justify-content: center;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 40px auto 0;
}

.mem-nasicon-limit .img p {
  margin-top: 10px;
}

.mem-flexibility .text-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 80px;
  font-size: 1rem;
}

.mem-flexibility .text-list li {
  position: relative;
  padding-left: 10px;
}

.mem-flexibility .text-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #e50012;
  border-radius: 50%;
}

.mem-flexibility .content-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.mem-flexibility .content-list li {
  border-radius: 20px;
  border: 1px solid #fff;
  max-width: 350px;
  background-color: rgba(0, 0, 0, 0.3);
}

.mem-flexibility .content-list .title {
  text-align: center;
  font-weight: 600;
  margin-top: 12px;
}

.mem-flexibility .content-list .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: 0.875rem;
  margin-top: 10px;
  margin-bottom: 16px;
}

.mem-flexibility .content-list .flex p {
  margin-top: 10px;
}

.mem-flexibility .content-list .flex .arrow {
  padding-bottom: 20px;
}

.mem-flexibility .content-list .flex .bold {
  font-weight: 600;
}

.mem-flexibility .content-list .only-img {
  overflow: hidden;
}

.mem-flexibility .content-list .only-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mem-flexibility .desc {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
}

.mem-mea-roll {
  border-radius: 20px;
  border: 1px solid #fff;
  padding: 30px 40px;
  background-color: rgba(0, 0, 0, 0.3);
}

.mem-mea-roll .content {
  display: flex;
  gap: 20px;
}

.mem-mea-roll .content .left img {
  display: block;
  margin-bottom: 20px;
}

.mem-mea-roll .content .list {
  margin-top: 60px;
}

.mem-mea-roll .content .list li {
  position: relative;
  padding-left: 10px;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.mem-mea-roll .content .list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.mem-cell-structure {
  border-radius: 20px;
  border: 1px solid #fff;
  padding: 10px 50px 40px;
  background-color: rgba(0, 0, 0, 0.3);
}

.mem-cell-structure .text {
  display: flex;
  gap: 30px;
  text-align: center;
  margin-top: 30px;
}

.mem-cell-structure .text div {
  flex: 1;
}

.mem-cell-structure .text p {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.mem-pba-surface {
  text-align: center;
  font-size: 1.5rem;
}

.mem-pba-surface p {
  margin: 20px 0;
}

.mem-pba-compare {
  min-width: 1000px;
}

.mem-pba-compare .img-wrap {
  display: flex;
  justify-content: center;
  gap: 100px;
  text-align: center;
  font-size: 1.375rem;
}

.mem-pba-compare .img-wrap p {
  margin: 10px 0;
}

.mem-pba-compare .list {
  margin-top: 30px;
  display: flex;
  text-align: center;
}

.mem-pba-compare .list li {
  flex: 1;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  font-size: 1.5rem;
  padding: 10px 0;
}

.mem-pba-compare .list li:last-child {
  border-right: 0;
}

.mem-perf-compare .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.4;
}

.mem-perf-compare .list li {
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 10px;
}

.mem-perf-compare .list li p {
  margin-top: 16px;
}

.mem-perf-compare .desc {
  margin-top: 24px;
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 24px 16px;
}

.mem-perf-compare .desc li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}

.mem-perf-compare .desc li:last-child {
  margin-bottom: 0;
}

.mem-perf-compare .desc li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #e50012;
}

.mem-perf-compare .desc li span {
  color: #e50012;
}

/* ── SIB Anode ── */
.sib-advantages .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 40px;
}

.sib-advantages .list li {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sib-advantages .list li div {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.sib-advantages .list li p {
  font-size: 1.25rem;
  line-height: 1.4;
}

.sib-hc-series {
  position: relative;
}

.sib-hc-series .img {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -170px;
  max-width: 450px;
}

.sib-hc-series .grid {
  display: flex;
  gap: 30px;
  margin-top: 80px;
  min-width: 1000px;
}

.sib-hc-series .title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: right;
}

.sib-hc-series .content {
  flex: 1;
  font-size: 1.375rem;
}

.sib-hc-series .content p {
  line-height: 1.6;
}

.sib-hc-series .content ul {
  margin-top: 26px;
}

.sib-hc-series .content li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.sib-hc-series .content li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.sib-hc380-series .grid {
  display: flex;
  gap: 30px;
  margin-top: 180px;
  min-width: 1000px;
}

.sib-hc380-series .title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: right;
}

.sib-hc380-series .content {
  flex: 1;
  font-size: 1.375rem;
}

.sib-hc380-series .content p {
  line-height: 1.6;
}

.sib-hc380-series .content ul {
  margin-top: 26px;
}

.sib-hc380-series .content li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.sib-hc380-series .content li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.sib-analysis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sib-perf-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sib-perf-compare > div {
  padding: 20px;
  word-break: keep-all;
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.sib-perf-compare .left p {
  font-size: 1.25rem;
  padding: 0 20px;
}

.sib-perf-compare .left p span {
  color: #e50012;
  font-weight: 600;
}

.sib-energy-density {
  padding: 30px 80px;
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 50px;
}

.sib-energy-density .content {
  display: flex;
  align-items: center;
  gap: 70px;
}

.sib-energy-density .left p {
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.6;
  margin-top: 30px;
}

.sib-energy-density .right li {
  padding-left: 12px;
  position: relative;
  font-size: 1.25rem;
  margin: 30px 0;
}

.sib-energy-density .right li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.sib-energy-density .right li p {
  font-size: 1rem;
  position: relative;
  padding-left: 8px;
  margin: 6px 0;
}

.sib-energy-density .right li p::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #ffffff;
}

/* ── CNT (Carbon Nano Tube) ── */
.cnt-spec div {
  margin-top: 50px;
}

.cnt-intro .grid {
  display: flex;
  gap: 60px;
  margin-top: 150px;
  min-width: 1000px;
}

.cnt-intro .title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: right;
}

.cnt-intro .content {
  flex: 1;
  font-size: 1.375rem;
}

.cnt-intro .content li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.cnt-intro .content li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.cnt-process div {
  margin-top: 50px;
}

.cnt-tech-compare .title {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 500;
}

.cnt-tech-compare .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.cnt-tech-compare .box {
  padding: 20px 40px;
  border-radius: 14px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
}

.cnt-tech-compare .box .tit {
  border-bottom: 1px solid #fff;
  padding: 20px 10px;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}

.cnt-tech-compare .box .list {
  counter-reset: cnt;
  font-size: 1rem;
  line-height: 1.4;
}

.cnt-tech-compare .box .list li {
  position: relative;
  counter-increment: cnt;
  padding-left: 24px;
  margin-bottom: 26px;
}

.cnt-tech-compare .box .list li::before {
  content: counter(cnt, decimal-leading-zero);
  /* 01, 02, 03 … */
  position: absolute;
  left: 0;
  top: 2px;

  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #002a71;
  /* 파란 동그라미 */
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}

.cnt-tech-compare .box .list li p {
  position: relative;
  padding-left: 18px;
  margin-top: 4px;
}

.cnt-tech-compare .box .list li p::before {
  content: "→ ";
  font-family: "Pretendard Variable", sans-serif;
  position: absolute;
  left: 0;
  top: 0;
  color: #002a71;
}

.cnt-tech-compare .box .list li p span {
  color: #e50012;
}

.cnt-tech-target .grid {
  display: flex;
  gap: 60px;
  margin-top: 120px;
  min-width: 1000px;
}

.cnt-tech-target .title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: right;
}

.cnt-tech-target .title div {
  margin-top: 30px;
}

.cnt-tech-target .content {
  flex: 1;
  font-size: 1.375rem;
  line-height: 1.6;
}

.cnt-tech-target .content li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.cnt-tech-target .content li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.cnt-effect .grid {
  display: flex;
  align-items: end;
  gap: 40px;
  margin-top: 50px;
  min-width: 1000px;
}

.cnt-effect .text {
  flex: 1;
  font-size: 1.375rem;
  line-height: 1.6;
  padding-bottom: 20px;
}

.cnt-effect .text li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.cnt-effect .text li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.cnt-effect i {
  font-family: "Pretendard Variable", sans-serif;
  font-style: normal;
}

/* ── Nano Silicon ── */
.si-analysis .content {
  display: flex;
  gap: 120px;
  margin-top: 50px;
}

.si-analysis .content p {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.si-performance .grid {
  display: flex;
  align-items: end;
  gap: 60px;
  margin-top: 100px;
}

.si-performance .content {
  flex: 1;
  font-size: 1.375rem;
  line-height: 1.6;
}

.si-performance .content li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}

.si-performance .content li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.mat-prev,
.mat-next,
.pouch-prev,
.pouch-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -45px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}

/* 파우치셀은 무대를 50px 내렸고 아래 점도 있어서
   정중앙(-45px)이면 낮아 보인다. 100px 더 올린다. */
.pouch-prev,
.pouch-next {
  margin-top: -115px;
}

/* Materials 슬라이더 높이 통일:
   슬라이드마다 내용 높이가 달라 박스가 흔들리던 것을,
   가장 큰 슬라이드 기준으로 높이를 맞추고(짧은 슬라이드는 세로 가운데 정렬)
   화살표가 튀지 않게 한다.
   ※ JS 에서 autoHeight:false 로 두어야 스와이퍼가 높이를 덮어쓰지 않는다. */
.mat-slide .swiper-wrapper,
.platform-slide .swiper-wrapper,
.pouch-slide .swiper-wrapper {
  align-items: stretch;
}
.mat-slide .swiper-slide,
.platform-slide .swiper-slide,
.pouch-slide .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pouch-prev,
.mat-prev {
  left: -34px;
}

.pouch-next,
.mat-next {
  right: -34px;
}

.pouch-prev::before,
.pouch-next::before,
.mat-prev::before,
.mat-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.pouch-prev::before,
.mat-prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.pouch-next::before,
.mat-next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

.pouch-prev:hover,
.pouch-next:hover,
.mat-prev:hover,
.mat-next:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.pouch-dots,
.mat-dots {
  /* Swiper 가 .swiper-pagination-bullets.swiper-pagination-horizontal 로
     bottom: var(--swiper-pagination-bottom, 8px) 을 걸어둔다.
     클래스 2개라 우선순위가 높아서 bottom 을 그냥 쓰면 무시된다.
     그래서 값을 이 변수로 지정한다. */
  --swiper-pagination-bottom: 8px;

  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1px;
}

/* 무대를 50px 내리면서 점이 패널 밖으로 밀려났다. 위로 올린다. */
.pouch-dots {
  /* 파우치셀 dots : 바닥에서 80px 올림 */
  --swiper-pagination-bottom: 80px;
}

.mat-dots {
  /* materials dots : 파우치와 같은 결(낮고 안정적)로 두되, 분리막처럼 내용이
     긴 슬라이드에서 dots 와 겹치지 않게 60px 로 살짝 더 내린다 */
  --swiper-pagination-bottom: 60px;
}

.pouch-dots .swiper-pagination-bullet,
.mat-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.25s;
}

.pouch-dots .swiper-pagination-bullet.swiper-pagination-bullet-active,
.mat-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}

/* technology 4 depth - 해수전지 - KEY ADVANTAGES
   시안 치수 : 카드 335x128, 가로 간격 36px, 세로 간격 35px, 2열
  ─────────────────────────────────────────── */
.bat-adv {
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 100px;
}

.bat-adv__list {
  display: grid;
  grid-template-columns: repeat(2, 335px);
  gap: 35px 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bat-adv__list > li {
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  text-align: center;
}

.bat-adv__tit {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.bat-adv__desc {
  font-size: 1.375rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

/* technology 4 depth - 해수전지 - CHARGING / DISCHARGING
   시안 치수 : 카드 463x465, 간격 22px, 헤더 92px(흰 배경 + 네이비 글자)
  ─────────────────────────────────────────── */
.bat-cd {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
}

.bat-cd__card {
  margin-top: 30px;
  flex: 0 1 483px;
  max-width: 483px;
  min-height: 465px;
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
}

/* 흰 배경 + 브랜드 네이비 글자 */
.bat-cd__head {
  flex: 0 0 auto;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #002a71;
  font-size: 1.625rem;
  font-weight: 700;
}

.bat-cd__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bat-cd__list > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  text-align: center;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: #fff;
}

/* 긴 점선 구분선.
   border-style: dashed 는 점 길이를 정할 수 없어서
   가로로 반복되는 그라데이션으로 그린다.
   ─ 선 16px, 빈칸 10px. 길이를 바꾸려면 이 두 숫자만 고치면 된다. */
.bat-cd__list > li + li {
  background-image: repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.28) 0 10px,
      transparent 10px 13px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}

/* technology 4 depth - PLP - detail
  ─────────────────────────────────────────── */
.tech-plp-plasma {
  text-align: center;
}

.tech-plp-plasma img {
  max-width: 1500px;
  width: 100%;
}

.tech-plp-config {
  text-align: center;
  margin-top: -300px;
  pointer-events: none;
}

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

.tech-plp-synth {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tech-plp-synth ul {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 200px;
}

.tech-plp-synth ul li {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #fff;
  font-size: 1.125rem;
  line-height: 1.5;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tech-plp-platform {
  max-width: 1100px;
  margin: 50px auto;
}

.tech-plp-platform img {
  width: 100%;
}

/* ── Platform 공정 — 슬라이드별 내용 (자리만 잡음, 내용은 새로 채운다) ──
   .platform-slide .swiper-slide > [아래 클래스 중 하나] */
.platform-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  max-width: 1050px;
  margin: 0 auto;
}

.platform-grid .text p {
  font-size: 2.25rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.platform-grid .text li {
  position: relative;
  padding-left: 14px;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.platform-grid .text li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e50012;
}

.platform-carbon-nano {
  margin-top: 50px;
}

.platform-metal-nano {
  margin-top: 50px;
}

.platform-carbon-metal {
  margin-top: 100px;
}

.platform-surface {
  margin-top: 100px;
}

/* ── Platform 공정 슬라이드 : 좌우 이동 / 페이지 표시 ──────────
   시안 기준 — 화살표는 지름 40px 흰 테두리 원, 안은 비어 있다.
   점은 지름 10px, 현재 것만 흰색으로 채우고 나머지는 테두리만. */
.tech-plp-platform {
  position: relative;
  /* .depth-in-content 의 overflow:hidden 때문에 화살표가 잘린다.
     슬라이드 자체는 .swiper 가 따로 잘라주므로 여기선 풀어도 안전하다. */
  overflow: visible;
}

.platform-prev,
.platform-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -45px;
  /* 아래에 점이 깔려 있어 -20px(정중앙)이면 낮아 보인다. 25px 올린다. */
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}

/* 시안 기준 — 슬라이드 영역보다 34px 바깥 */
.platform-prev {
  left: -34px;
}

.platform-next {
  right: -34px;
}

/* 가운데 꺾쇠 — 얇은 선 두 개를 돌려서 만든다 */
.platform-prev::before,
.platform-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.platform-prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.platform-next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

.platform-prev:hover,
.platform-next:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* ── 페이지 표시 ─────────────────────────────────────── */
/* 부모(.depth-in-content)에 overflow:hidden 이 걸려 있어 흐름에 두면 잘린다.
   영역 아래쪽에 겹쳐 놓는다. */
.platform-dots {
  position: absolute;
  left: 0;
  right: 0;
  --swiper-pagination-bottom: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1px;
}

.platform-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.25s;
}

/* 두 클래스를 붙여 써서 위 규칙(background:none)보다 확실히 우선하게 한다 */
.platform-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}

.depth-menu,
.depth-opts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.depth-menu li {
  padding: 40px 60px;
  border-radius: 20px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transition: background 0.3s ease;
}

.materials .depth-menu li {
  background: rgba(0, 0, 0, 0.06);
}

.depth-menu li:hover {
  background: rgba(255, 255, 255, 0.25);
}

.depth-menu li b {
  font-size: 2rem;
}

.depth-menu li span {
  font-size: 1rem;
  opacity: 0.8;
}

.depth-opts li {
  padding: 14px 30px;
  border: 1px solid currentColor;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.depth-opts li:hover {
  background: currentColor;
}

.materials .depth-opts li:hover {
  color: #fff;
}

.technology .depth-opts li:hover {
  color: #000;
}

/* ---- 뒤로/닫기 꺽쇠 ---- */
.intro-back {
  position: absolute;
  left: 130px;
  top: 100px;
  width: 56px;
  height: 56px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.intro.tech-active .intro-back,
.intro.mat-active .intro-back {
  opacity: 1;
  pointer-events: auto;
}

.intro-back:hover {
  transform: translateX(-10px);
}

.intro-back::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ============================================================
 * intro 반응형 — 공통 뼈대
 *  1280·1024 : 데스크톱 좌/우 분할 유지, 폰트·여백만 단계 축소
 *  768 이하  : 핀 해제 → 두 패널(테크놀로지/메테리얼) 세로 1열 스택.
 *              활성 뎁스만 문서 흐름으로 깔아 내용이 길면 페이지가 정상 스크롤.
 *              2뎁스 메뉴 가로칸 → 세로 1열.
 *  ※ 슬라이드 '내부' 다단→1열은 그룹별로 따로 처리(여기선 셸만).
 * ============================================================ */

/* ── 1280 이하: 공통 폰트 축소 ── */
@media (max-width: 1280px) {
  .intro-box__title { font-size: 3rem; }
  .technology .tech-list li div,
  .materials .mat-list li div { font-size: 2.6rem; }
  .technology .tech-list li p,
  .materials .mat-list li p { font-size: 1.4rem; }
  .technology .depth-3-title div,
  .materials .depth-3-title div { font-size: 3rem; }
  .depth-title { font-size: 2.5rem; }
}

/* ── 1024 이하: 더 축소 + 제목 상단여백/back 정리 ── */
@media (max-width: 1024px) {
  .intro-box__title { font-size: 2.5rem; }
  .intro-box__desc { font-size: 1.2rem; }
  .technology .tech-list li div,
  .materials .mat-list li div { font-size: 2.1rem; }
  .technology .tech-list li p,
  .materials .mat-list li p { font-size: 1.2rem; }
  .technology .depth-3-title,
  .materials .depth-3-title { min-height: auto; padding-top: 70px; }
  .technology .depth-3-title div,
  .materials .depth-3-title div { font-size: 2.4rem; }
  .depth-in-tit { min-height: auto; padding-top: 70px; gap: 16px; }
  .depth-title { font-size: 2.1rem; }
  .depth-desc { font-size: 1.1rem; }
  .intro-back { left: 24px; top: 40px; width: 44px; height: 44px; }
}

/* ── 768 이하: 핀 해제 + 상/하 50:50 분할 (한 화면 유지) ── */
@media (max-width: 768px) {
  /* 핀(스크롤 홀드)만 해제 — 인트로는 한 화면(100vh) 고정 스테이지 유지 */
  .intro-pin { height: auto; }
  .intro {
    position: relative;   /* back 버튼 앵커 (sticky 고정만 해제) */
    top: auto;
    height: 100vh;
    overflow: hidden;
  }

  /* 두 패널: 좌/우 분할 → 상/하 50:50 (둘 다 한 화면 안) */
  .intro article {
    bottom: auto;
    height: 50%;
    clip-path: none;
    transition: height .6s ease, top .6s ease;
  }
  /* base '.intro article { inset:0 }'(0,1,1) 을 이기려고 '.intro' 를 붙여 0,2,0 로 */
  .intro .technology { top: 0; }
  .intro .materials  { top: 50%; }

  /* 닫힘 MORE 박스: 좌/우(25·75%) → 각 반쪽 가로 중앙 */
  .technology .intro-box,
  .materials  .intro-box { left: 50%; }

  /* 열림: 활성 패널이 화면 전체(100%)로, 다른 쪽은 접힘(0) — 상/하 리빌 연출 */
  .intro.tech-active .technology,
  .intro.mat-active .materials {
    top: 0;
    height: 100%;
    z-index: 3;
  }
  .intro.tech-active .materials,
  .intro.mat-active .technology { height: 0; }

  /* 2뎁스 메뉴: 가로 3~4칸 → 세로 3~4등분(화면 가득, li 는 flex:1 유지) */
  .technology .tech-list,
  .materials .mat-list { flex-direction: column; }
  .technology .tech-list li,
  .materials .mat-list li {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
  }
  .technology .tech-list li:last-child,
  .materials .mat-list li:last-child { border-bottom: none; }

  /* 3·4뎁스 제목: 이제 내용과 한 덩어리로 가운데 정렬되므로 상단 과여백 제거 */
  .technology .depth-3-title,
  .materials .depth-3-title,
  .depth-in-tit {
    min-height: auto;
    padding-top: 0;
  }

  /* 3뎁스 리스트 wrap 의 데스크톱 크롭용 음수 margin 제거(제목-이미지 겹침 방지) */
  .tech-plp-list-wrap,
  .tech-bat-list-wrap,
  .tech-tmi-list-wrap { margin-top: 0; }

  /* 제목+내용을 '한 덩어리'로 뎁스(100vh) 세로 가운데 정렬.
     내용(flex:1)이 남는 공간을 다 먹으면 제목이 위로 밀리므로 flex:0 로 풀어준다.
     넘치면 뎁스가 내부 스크롤 (safe = 위 안 잘림) */
  .depth-3-wrap,
  .depth-in-last {
    justify-content: safe center;
    overflow: hidden auto;   /* 세로는 스크롤, 가로로 넘치는 데코는 잘라냄 */
    gap: 36px;               /* 제목 ↔ 내용 사이 여백 */
    padding-left: 16px;      /* 내용이 화면 양옆에 딱 붙지 않게 */
    padding-right: 16px;
  }
  .depth-3-content,
  .depth-in-content {
    flex: 0 1 auto;
  }

  /* back / 화살표 위치 */
  .intro-back { left: 16px; top: 20px; }
  .mat-prev, .pouch-prev, .platform-prev { left: 4px; }
  .mat-next, .pouch-next, .platform-next { right: 4px; }

  /* 페이지네이션(dots): 데스크톱 오프셋(60~80px)이 모바일선 너무 높아 뜬다.
     슬라이드 위에 겹치지 않게 슬라이드 '아래'로 흐르게 내린다. */
  .mat-dots, .pouch-dots, .platform-dots {
    position: static;
    margin-top: 18px;
  }
}

/* ── 480 이하: 폰트·여백 추가 축소 ── */
@media (max-width: 480px) {
  .intro-box__title { font-size: 2rem; }
  .intro-box__desc { font-size: 1.05rem; }
  .technology .tech-list li div,
  .materials .mat-list li div { font-size: 1.8rem; }
  .technology .tech-list li p,
  .materials .mat-list li p { font-size: 1.05rem; }
  .technology .depth-3-title div,
  .materials .depth-3-title div { font-size: 2rem; }
  .depth-title { font-size: 1.8rem; }
  .depth-desc { font-size: 1rem; }
}

/* ============================================================
 * intro 반응형 — 슬라이드 '내부' 다단 → 1열 (그룹별)
 * ============================================================ */

/* ===== [그룹①] 테크놀로지 PLP 4뎁스 ===== */
@media (max-width: 768px) {
  /* 3뎁스 PLP 리스트: 2열 그리드 → 1열 */
  .tech-plp-list { grid-template-columns: 1fr; }
  /* 진주 데코 이미지 크기는 그대로 두고, 넘치는 가로만 컨테이너에서 잘라냄(아래 셸 규칙) */

  /* 장치 구성: 데스크톱 크롭용 -300px 여백 제거, 이미지 자연 높이 */
  .tech-plp-config { margin-top: 0; }
  .tech-plp-config img { height: auto; object-fit: contain; }

  /* 합성: 3열 그리드 → 1열, 하단 과여백 축소 */
  .tech-plp-synth ul {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 40px;
  }
  .tech-plp-synth ul li { padding: 16px; }

  /* Platform 공정 스와이퍼: 좌우(이미지+텍스트) → 세로(이미지 위, 텍스트 아래) */
  .tech-plp-platform { margin: 20px auto; }
  /* 각 슬라이드 내용을 슬라이드 영역 세로 가운데로 */
  .platform-slide .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .platform-grid {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .platform-grid .img { max-width: 320px; margin: 0 auto; }
  .platform-grid .text p { font-size: 1.5rem; margin-bottom: 16px; }
  .platform-grid .text p br { display: none; }   /* 제목 줄바꿈 해제(좁은 화면만) */
  .platform-grid .text li { text-align: left; }
  /* 슬라이드별 상단 여백(50/100px) 제거 */
  .platform-carbon-nano,
  .platform-metal-nano,
  .platform-carbon-metal,
  .platform-surface { margin-top: 0; }
}

@media (max-width: 480px) {
  .tech-plp-synth ul li { font-size: 1.05rem; }
  .platform-grid .text p { font-size: 1.3rem; }
  .platform-grid .text li { font-size: 1.05rem; }
}

/* ===== [그룹②] 테크놀로지 해수전지 4뎁스 ===== */
@media (max-width: 768px) {
  /* 3뎁스 리스트: 3열 → 1열 (데코 이미지는 width:100% 라 문제 없음) */
  .tech-bat-list { grid-template-columns: 1fr; }

  /* CHARGING / DISCHARGING: 카드 2개 가로 → 세로 스택 + 전체 축소 */
  .bat-cd { flex-direction: column; align-items: center; gap: 16px; }
  .bat-cd__card {
    flex: 0 1 auto;
    width: 100%;
    max-width: 320px;
    min-height: 0;
    margin-top: 0;
  }
  .bat-cd__head { height: 50px; font-size: 1.15rem; }
  .bat-cd__list > li { font-size: 0.9rem; padding: 8px 16px; line-height: 1.4; }

  /* KEY ADVANTAGES: 2열(335px 고정) → 1열 */
  .bat-adv { padding-top: 0; }
  .bat-adv__list { grid-template-columns: 1fr; gap: 16px; }
  .bat-adv__list > li { height: auto; min-height: 100px; padding: 16px; }

  /* 파우치셀 스와이퍼: 각 슬라이드 다단 → 1열 */
  .bat-pouch { margin-top: 20px; }
  .bat-pouch .swiper-slide { min-height: 0; }        /* 고정 440 해제 */
  .bat-pouch__cards { grid-template-columns: 1fr; gap: 14px; }
  .bat-pouch__feats { grid-template-columns: 1fr; gap: 24px; }
  .bat-pouch__feats > li { gap: 16px; }
  .bat-pouch__feats img { width: 72px; height: 72px; }
}

@media (max-width: 480px) {
  .bat-adv__tit { font-size: 1.6rem; }
  .bat-adv__desc { font-size: 1.1rem; }
  .bat-cd__head { font-size: 1.05rem; height: 44px; }
  .bat-cd__list > li { font-size: 0.85rem; padding: 6px 12px; }
  .bat-pouch__tit { font-size: 1.25rem; }
  .bat-pouch__desc { font-size: 1rem; }
}

/* ===== [그룹③] 테크놀로지 TMI 4뎁스 ===== */
@media (max-width: 768px) {
  /* 3뎁스 리스트: 4열 → 1열 (데코 이미지는 width:100% 라 문제 없음) */
  .tech-tmi-list { grid-template-columns: 1fr; }

  /* 4뎁스 TMI: 한 행(2~4칸 가로) → 세로 1열, 여백 축소 */
  .tmi { gap: 32px; padding: 0 0 20px; }        /* 좌우 40px 패딩 제거(셸 16px 사용) */
  /* 세로로 쌓을 때 base 의 align-items:flex-start 가 왼쪽정렬 → 가운데로 */
  .tmi__row { flex-direction: column; gap: 32px; align-items: center; }
  .tmi__txt {
    width: auto;             /* max-content → 좁은 화면서 넘치지 않게 */
    max-width: 100%;
    font-size: 1.05rem;
  }
  .tmi__badge { height: 52px; line-height: 52px; font-size: 1.6rem; }
  .tmi__ico { height: 52px; }
}

@media (max-width: 480px) {
  .tmi { gap: 24px; }
  .tmi__row { gap: 24px; }
  .tmi__txt { font-size: 1rem; }
  .tmi__badge { font-size: 1.4rem; }
}

/* ===== [그룹④] 메테리얼 분리막 (7 슬라이드) — 컴팩트 ===== */
@media (max-width: 768px) {
  /* 공통: 이미지 넘침 방지 + 소제목/본문 톤다운 */
  .materials .swiper-slide img { max-width: 100%; }
  .materials .mat-sub { font-size: 1.25rem; }
  .materials .mat-sl { font-size: 0.95rem; }

  /* 1. NASICON 한계: 4칸 → 2열 그리드, 이미지 2장 나란히 축소 */
  .mem-nasicon-limit { padding: 18px 14px; }
  .mem-nasicon-limit .list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .mem-nasicon-limit .list li { border-right: 0; padding: 0; }
  .mem-nasicon-limit .list div { font-size: 1rem; }
  .mem-nasicon-limit .img { gap: 14px; margin-top: 18px; font-size: 0.95rem; }
  .mem-nasicon-limit .img img { max-width: 130px; }

  /* 2. 유연성 이점: 텍스트 세로, 카드 6개 → 2열, 내부 이미지 축소 */
  .mem-flexibility .text-list { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mem-flexibility .content-list { grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
  .mem-flexibility .content-list li { max-width: none; }
  .mem-flexibility .content-list .flex { gap: 8px; }
  .mem-flexibility .content-list .flex img { max-width: 56px; }
  .mem-flexibility .desc { font-size: 1.05rem; }

  /* 3. MEA 롤투롤: 좌우 → 세로, 이미지 축소 */
  .mem-mea-roll { padding: 16px 14px; }
  .mem-mea-roll .content { flex-direction: column; gap: 16px; align-items: center; }
  .mem-mea-roll .content .left img { max-width: 260px; margin: 0 auto 10px; }
  .mem-mea-roll .content .list { margin-top: 0; }
  .mem-mea-roll .content .list li { font-size: 1rem; margin-bottom: 6px; }

  /* 4. 셀 구조: 설명 2칸 유지(짧음), 폰트/여백↓ */
  .mem-cell-structure { padding: 12px 14px 18px; }
  .mem-cell-structure .text { gap: 14px; margin-top: 14px; }
  .mem-cell-structure .text p { font-size: 1.05rem; }

  /* 5. PBA 표면개질: 폰트/여백↓ */
  .mem-pba-surface { font-size: 1rem; }
  .mem-pba-surface p { margin: 12px 0; }

  /* 6. PBA 비교: min-width 해제, 이미지 나란히 축소, 태그 가로 유지 */
  .mem-pba-compare { min-width: 0; }
  .mem-pba-compare .img-wrap { gap: 16px; font-size: 0.95rem; }
  .mem-pba-compare .img-wrap img { max-width: 150px; }
  .mem-pba-compare .list { font-size: 0.95rem; }
  .mem-pba-compare .list li { padding: 6px 4px; }

  /* 7. 성능 비교: 카드 3개 세로, 각 카드 [이미지 | 글] 가로로 컴팩트 */
  .mem-perf-compare .list { grid-template-columns: 1fr; gap: 10px; }
  .mem-perf-compare .list li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px; }
  .mem-perf-compare .list li img { max-width: 110px; flex: 0 0 auto; }
  .mem-perf-compare .list li p { margin-top: 0; }
  .mem-perf-compare .desc { padding: 16px 14px; }
}

@media (max-width: 480px) {
  .mem-cell-structure .text p { font-size: 1rem; }
  .mem-perf-compare .list li img { max-width: 92px; }
  .mem-nasicon-limit .img img { max-width: 110px; }
}

/* ===== [그룹⑤] 메테리얼 SIB Anode (6 슬라이드) — 컴팩트 ===== */
@media (max-width: 768px) {
  /* 1. 성능 장점: 2열 유지, 폰트/패딩↓ */
  .sib-advantages .list { gap: 12px; padding-top: 20px; }
  .sib-advantages .list li { padding: 16px 12px; }
  .sib-advantages .list li div { font-size: 1.15rem; margin-bottom: 8px; }
  .sib-advantages .list li p { font-size: 1rem; }

  /* 2. HC 시리즈: min-width:1000px 해제, 좌우 → 세로, 데코 이미지 흐름 배치 */
  .sib-hc-series .grid { flex-direction: column; gap: 14px; margin-top: 0; min-width: 0; }
  .sib-hc-series .title { text-align: left; font-size: 1.6rem; }
  .sib-hc-series .content { font-size: 1rem; }
  .sib-hc-series .img {
    position: static;
    max-width: 220px;
    margin: 16px auto 0;
    display: block;
  }

  /* 3. HC-380 시리즈: min-width:1000px 해제, 좌우 → 세로, 상단 과여백 제거 */
  .sib-hc380-series .grid { flex-direction: column; gap: 14px; margin-top: 0; min-width: 0; }
  .sib-hc380-series .title { text-align: left; font-size: 1.6rem; }
  .sib-hc380-series .content { font-size: 1rem; }

  /* 4. 소재 분석: 이미지 6개 2열 그대로 유지 (그리드 gap 만 축소) */
  .sib-analysis { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .sib-analysis img { max-width: 220px; }

  /* 5. 성능 비교 1: 2열(글 | 그래프) → 세로 */
  .sib-perf-compare { grid-template-columns: 1fr; }
  .sib-perf-compare > div { padding: 16px; }
  .sib-perf-compare .left p { font-size: 1rem; padding: 0; }

  /* 6. 에너지 밀도: 좌우 → 세로, 과한 좌우 패딩(80px)↓ */
  .sib-energy-density { padding: 20px 14px; margin-top: 0; }
  .sib-energy-density .content { flex-direction: column; gap: 20px; }
  .sib-energy-density .left p { font-size: 1rem; margin-top: 12px; }
  .sib-energy-density .right li { font-size: 1.05rem; margin: 14px 0; }
}

/* ===== [그룹⑥] 메테리얼 CNT (6 슬라이드) — 컴팩트 ===== */
@media (max-width: 768px) {
  /* 1. 사양: 이미지 상단 여백↓ */
  .cnt-spec div { margin-top: 20px; }

  /* 2. 소개: min-width:1000px 해제, 좌우 → 세로 */
  .cnt-intro .grid { flex-direction: column; gap: 14px; margin-top: 0; min-width: 0; }
  .cnt-intro .title { text-align: left; font-size: 1.6rem; }
  .cnt-intro .content { font-size: 1rem; }

  /* 3. 제조공정: 이미지 상단 여백↓ */
  .cnt-process div { margin-top: 20px; }

  /* 4. 기술비교: 2박스 → 세로, 박스 좌우 패딩↓ */
  .cnt-tech-compare .title { font-size: 1.15rem; }
  .cnt-tech-compare .content { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .cnt-tech-compare .box { padding: 16px; }
  .cnt-tech-compare .box .tit { font-size: 1.35rem; padding: 12px 8px; margin-bottom: 18px; }
  .cnt-tech-compare .box .list li { margin-bottom: 16px; }

  /* 5. 대상기술: min-width:1000px 해제, 좌우 → 세로 */
  .cnt-tech-target .grid { flex-direction: column; gap: 14px; margin-top: 0; min-width: 0; }
  .cnt-tech-target .title { text-align: left; font-size: 1.6rem; }
  .cnt-tech-target .title div { margin-top: 12px; }
  .cnt-tech-target .content { font-size: 1rem; }

  /* 6. 적용효과: min-width:1000px 해제, 좌우 → 세로 */
  .cnt-effect .grid { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 20px; min-width: 0; }
  .cnt-effect .text { font-size: 1rem; padding-bottom: 0; }
}

/* ===== [그룹⑦] 메테리얼 Nano Silicon (2 슬라이드) — 컴팩트 ===== */
@media (max-width: 768px) {
  /* 1. 소재 분석: 2단(TEM | EDS) → 세로 */
  .si-analysis .content { flex-direction: column; gap: 24px; margin-top: 20px; }
  .si-analysis .content p { font-size: 1.25rem; margin-bottom: 12px; }

  /* 2. 성능: 좌우(이미지 | 글) → 세로 */
  .si-performance .grid { flex-direction: column; align-items: center; gap: 18px; margin-top: 20px; }
  .si-performance .content { font-size: 1rem; }
}

/* ===== 메테리얼 슬라이드 공통: mat-sub 상단 고정 + 나머지 내용 세로 가운데 =====
   슬라이드(스와이퍼)는 가장 큰 슬라이드 높이로 통일되므로,
   짧은 슬라이드는 mat-sub 아래 남는 공간에서 내용이 세로 가운데로 놓인다. */
@media (max-width: 768px) {
  .materials .mat-stage .swiper-slide { align-items: stretch; }
  .materials .mat-sl {
    justify-content: flex-start;
    gap: 0;
  }
  .materials .mat-sub {
    flex: 0 0 auto;      /* 상단 고정 */
    margin-bottom: 20px;
  }
  /* mat-sub 를 제외한 내용 = 남는 세로 공간의 가운데로 (auto 마진) */
  .materials .mat-sl > *:not(.mat-sub) {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* ===== 각 카테고리 '가장 긴 슬라이드' 추가 압축 (전체 높이 결정하므로) ===== */
@media (max-width: 768px) {
  /* 분리막 유연성(740): 카드 이미지·사진·여백 축소 */
  .mem-flexibility .content-list { gap: 8px; }
  .mem-flexibility .content-list .title { margin-top: 8px; font-size: 0.9rem; }
  .mem-flexibility .content-list .flex { margin: 6px 0 10px; }
  .mem-flexibility .content-list .flex img { max-width: 44px; }
  .mem-flexibility .content-list .only-img img { max-height: 110px; }

  /* SIB 성능비교1(741): 그래프 이미지 축소 */
  .sib-perf-compare img { max-height: 150px; width: auto; }
  .sib-perf-compare .left p { font-size: 0.95rem; }

  /* CNT 기술비교(701): 박스 여백·리스트 간격·폰트 축소 */
  .cnt-tech-compare .box { padding: 14px; }
  .cnt-tech-compare .box .tit { font-size: 1.2rem; padding: 8px 6px; margin-bottom: 12px; }
  .cnt-tech-compare .box .list { font-size: 0.9rem; }
  .cnt-tech-compare .box .list li { margin-bottom: 12px; }

  /* Silicon 소재분석(728): TEM/EDS 이미지 축소 */
  .si-analysis .content { gap: 16px; }
  .si-analysis .content p { font-size: 1.1rem; margin-bottom: 8px; }
  .si-analysis .content img { max-height: 200px; width: auto; }
}