.breadcrumb a {
  color: #4d4d4d !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 15px;
  font-family: 'SUIT Variable', 'SUIT', sans-serif;
}

.breadcrumb {
  position: absolute;
  left: clamp(16px, 4vw, 120px);
  bottom: clamp(16px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 14px;
  /* border-radius: 999px; */
  /* background: rgba(0, 0, 0, 0.45); */
  /* backdrop-filter: blur(6px); */
  -webkit-backdrop-filter: blur(6px);
  color: #4d4d4d !important;
  line-height: 1;
  /* z-index: 5; */
  /* box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); */
  white-space: nowrap;
}

.breadcrumb__home svg {
  width: 18px;
  height: 18px;
  fill: #4d4d4d !important;
  flex: none;
}


:root {
  /* 조정 변수 */
  --img-right: -220px;
  /* 이미지 우측으로 밀기(절대값↑=더 오른쪽) */
  --img-bottom: -1px;
  /* 하단 딱 붙이기 보정 */
  --nav-shift-x: 180px;
  /* 네비 전체(문구+버튼) 오른쪽으로 더 이동 */
}

/* ===== SECTION BASE ===== */
.prod-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.prod-bg {
  position: absolute;
  inset: 0;
  background: url('/1x/s1/pro_01.png') no-repeat center/1700px auto;
  background-position: center -40px;
  pointer-events: none;
  z-index: 0;
}

/* ===== NAV STRIPES (4색) ===== */
.nav-stripes {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(290px, 34vw, 520px);
  border-radius: 0 56px 56px 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.nav-stripes span {
  position: absolute;
  top: 0;
  bottom: 0;
}

.nav-stripes .c1 {
  right: 82%;
  width: 16%;
  background: rgba(189, 226, 255, .55);
}

.nav-stripes .c2 {
  right: 66%;
  width: 18%;
  background: rgba(104, 179, 255, .70);
}

.nav-stripes .c3 {
  right: 34%;
  width: 32%;
  background: rgba(9, 61, 129, .92);
}

.nav-stripes .c4 {
  right: 0;
  width: 34%;
  background: rgba(10, 21, 48, .98);
}

/* ===== LAYOUT ===== */
.prod-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 620px) 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  width: min(1320px, 95vw);
  margin: 0 auto;
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: 0;
  /* 하단 여백 제거 → 이미지 바닥 밀착 */
  z-index: auto;
  /* 부모 z-index 제거 */
}

/* ===== TEXT ===== */
.prod-accent {
  display: block;
  width: 60px;
  height: 4px;
  background: #00E0DC;
  border-radius: 999px;
  margin-bottom: 14px;
}

.prod-kicker {
  margin: -2px 0 12px;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: .18em;
  font-weight: 800;
  color: #111;
}

.prod-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.prod-cart {
  width: 32px;
  height: auto;
}

.prod-copy h2 {
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 20px);
  line-height: 1.2;
}

.prod-name {
  font-weight: 600;
  margin-top: 12px;
  font-size: 16px;
}

.prod-sub {
  font-weight: 300;
  margin: 8px 0;
  font-size: 14px;
}

.prod-desc {
  color: #555;
  margin-bottom: 12px;
  white-space: normal;
  /* 줄바꿈 허용 */
  line-height: 1.5;
  /* 줄 간격 */
}

/* 그림자 전면 제거 */
.prod-copy h2,
.prod-name,
.prod-sub,
.prod-desc,
.prod-kicker,
#prodNavList .name {
  text-shadow: none !important;
}

/* ===== 리스트(민트 동그라미 불릿) ===== */
.prod-feats {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.prod-feats li {
  position: relative;
  padding-left: 18px;
  margin: 8px 0;
  line-height: 1.5;
}

.prod-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E0DC;
  transform: translateY(-50%);
}

/* ===== 태그(민트 버튼) ===== */
.prod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #00E0DC;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border: none;
}

/* ===== PRODUCT IMAGE : 하단 딱 붙이기 ===== */
.prod-visual {
  position: relative;
  min-height: 580px;
  z-index: 1;
}

.prod-slide {
  position: absolute;
  right: -350px;
  bottom: var(--img-bottom);
}

.prod-slide img {
  width: clamp(560px, 48vw, 780px);
  display: block;
}

/* 전환 애니메이션 */
.prod-slide.enter-left {
  opacity: 0;
  transform: translateX(80px) scale(.97);
  filter: blur(8px);
}

.prod-slide.enter-right {
  opacity: 0;
  transform: translateX(-80px) scale(.97);
  filter: blur(8px);
}

.prod-slide.show {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  transition: .8s ease;
}

/* ===== NAVIGATION : 전체 오른쪽으로, 문구/점 겹침 방지 ===== */
.prod-nav {
  position: relative;
  justify-self: end;
  width: clamp(180px, 19vw, 260px);
  z-index: 3;
  text-align: right;
  padding-right: 0;
  transform: translateX(var(--nav-shift-x));
  /* 문구+버튼 “싹 다” 오른쪽으로 */
}

#prodNavList {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
  justify-items: end;
}

#prodNavList li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}

#prodNavList .name {
  color: #fff;
  font-weight: 800;
}

#prodNavList .dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: .85;
}

p#prodDesc {
  font-size: 15px;
}

#prodNavList li.active .dot {
  box-shadow: 0 0 0 4px rgba(0, 224, 220, .35);
  opacity: 1;
}

.rq-btn {
  width: 75%;
  padding: 10px 12px;
  border: 5px solid #33E0DB;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  margin-top: 12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
  .nav-stripes {
    display: none;
  }

  .prod-inner {
    grid-template-columns: 1fr;
    padding-bottom: 16px;
  }

  .prod-visual {
    order: 2;
    min-height: 420px;
  }

  .prod-nav {
    text-align: left;
    transform: none;
    padding: 16px;
  }

  #prodNavList {
    justify-items: start;
  }
}