/* hall6 landing 페이지 */
.has-header {
  padding-top: var(--header-h);
}
.sr-hub {
  --sr-accent: var(--sh-green);
  --sr-accent-08: rgba(98, 187, 70, 0.08);
  --sr-accent-32: rgba(98, 187, 70, 0.32);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(245, 251, 242, 0.5), rgba(239, 250, 244, 0.5)),
    #fff;
}
/* 배경 장식 블러 그린 원 (Figma Ellipse34/35: r240 + 대형 가우시안 블러) */
.sr-hub::before,
.sr-hub::after {
  content: "";
  position: absolute;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
/* 우상단 — Ellipse34 #B5E5CB (Figma처럼 은은하게) */
.sr-hub::before {
  top: -480px;
  right: -460px;
  background: radial-gradient(
    circle,
    rgba(181, 229, 203, 0.45) 0%,
    rgba(181, 229, 203, 0) 62%
  );
}
/* 좌하단 — Ellipse35 #7BC464 (은은하게) */
.sr-hub::after {
  bottom: -560px;
  left: -360px;
  background: radial-gradient(
    circle,
    rgba(123, 196, 100, 0.32) 0%,
    rgba(123, 196, 100, 0) 62%
  );
}
.sr-hub > .section {
  position: relative;
  z-index: 1;
  max-width: 1280px; /* 1352 = 콘텐츠 1280 + 거터 36 */
  /* has-header(64) + 96 = 160 → Figma PC 콘텐츠 y=160 정합 (header 높이 중복 금지) */
  padding-top: 96px;
  padding-bottom: 96px;
}
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px 36px; /* Figma px-36 (콘텐츠 1280 정렬) */
}
.sr-hub-head {
  text-align: left;
  margin-bottom: 48px;
}
.sr-hub-head .eyebrow {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #72756f;
  letter-spacing: 0.04em;
}
.sr-hub-head h1 {
  margin-top: 8px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #62bb46 0%, #2b976b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
/* 피처 리스트 컨테이너 — PC: 1열 스택(gap 48) / 태블릿: 2열(gap 36) / 모바일: 1열(gap 36) */
.sr-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
/* 지그재그 피처 행 — 각 행을 흰 카드로 감쌈 */
.sr-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* 텍스트 칼럼이 미디어 고정높이(327)에 맞춰 늘어남 → CTA 하단 정렬 */
  gap: 60px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}
/* 제목+칩 묶음 — PC: 칩이 제목 위(세로) / Ta·Mo: 칩이 제목 우측(가로) */
.sr-title-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 12px;
}
.sr-feature.child {
  --sr-accent: #36b07d;
  --sr-accent-08: rgba(54, 176, 125, 0.08);
  --sr-accent-32: rgba(54, 176, 125, 0.32);
}
.sr-feature .sr-feature-text {
  order: 1;
}
.sr-feature.reverse .sr-media {
  order: 1;
}
.sr-feature.reverse .sr-feature-text {
  order: 0;
}
.sr-media {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: start;
  border-radius: 8px;
  overflow: hidden;
  background: #e9ebe7;
  min-width: 0;
}
.sr-media iframe,
.sr-media video,
.sr-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}
/* 비메오 facade: 포스터 + 재생 버튼만 먼저 노출 → 클릭 시 autoplay iframe 로드(플레이어 바 표시) */
.sr-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #0b0f0e;
}
.sr-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sr-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(
    0,
    0,
    0,
    0
  ); /* default: 오버레이 없음 (Figma Thumnail default) */
  transition: background var(--t);
}
.sr-video-facade:hover::after {
  background: rgba(0, 0, 0, 0.3); /* hover: 다크 오버레이 */
}
.sr-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: 80px; /* Figma default 80 → hover 96(scale 1.2) */
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--t),
    background var(--t);
}
.sr-video-facade:hover .sr-play-btn {
  /* Figma hover: 80→96 확대 + 테마색(고령 #62bb46 / 양육 #36b07d), 삼각형 흰색 유지 */
  background: var(--sr-accent);
  transform: scale(1.2);
}
.sr-play-btn img {
  width: 40%;
  height: 40%;
  object-fit: contain;
  color: #fff;
}

/* 텍스트 측 — 칩+제목+설명(상단) / 버튼(하단) 양끝 정렬 */
.sr-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px; /* 정보블록↔CTA 최소 gap 8 (실제 간격은 space-between으로 썸네일 높이에 따라 가변) */
  min-width: 0; /* grid 칼럼 축소 허용 */
}
.sr-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--sr-accent-08);
  color: var(--sr-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.sr-feature-text h2 {
  margin-top: 0; /* 칩과의 간격은 .sr-title-row gap 으로 처리 */
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0b0b0a;
}
.sr-feature-text p {
  margin-top: 8px; /* Figma PC: 제목+칩 블록 → 설명 gap 8 */
  font-size: 16px;
  line-height: 24px;
  color: var(--text-muted);
}
.sr-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px; /* Figma PC: 설명 → 태그 gap 16 */
}
.sr-feature-tags span {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--sr-accent);
  color: var(--sr-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
/* 풀폭 그린 CTA */
.sr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background: var(--sr-accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  box-shadow: 0 8px 10px var(--sr-accent-32);
  transition:
    filter var(--t),
    transform var(--t);
}
.sr-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.sr-cta svg {
  width: 24px;
  height: 24px;
}

/* =========================================================================
   특화 쇼룸 허브 — Ta/Mo 반응형 (Figma 8731:2687 모바일 / 8739:4159 태블릿)
   · 카드 내부 레이아웃: ≥1025 가로(미디어|텍스트) → ≤1024 세로(텍스트→썸네일→풀폭CTA)
   · 리스트 칼럼: ≥1025 1열 스택 / 709–1024 2열 / ≤708 1열
   ========================================================================= */
@media (max-width: 1024px) {
  .sr-hub > .section {
    /* has-header(64) + 44 = 108 → Figma Ta/Mo 콘텐츠 y=108 정합 */
    /* padding-top: 44px;
    padding-bottom: 48px; */
    padding: 44px 24px 48px;
  }
  /* Ta/Mo: 배경 장식 글로우를 더 약하게(요청) + 크기 축소 */
  .sr-hub::before,
  .sr-hub::after {
    width: 620px;
    height: 620px;
  }
  .sr-hub::before {
    background: radial-gradient(
      circle,
      rgba(181, 229, 203, 0.22) 0%,
      rgba(181, 229, 203, 0) 62%
    );
  }
  .sr-hub::after {
    background: radial-gradient(
      circle,
      rgba(123, 196, 100, 0.16) 0%,
      rgba(123, 196, 100, 0) 62%
    );
  }
  .sr-hub-head {
    margin-bottom: 36px;
  }
  .sr-hub-head h1 {
    font-size: 32px; /* Figma Ta/Mo head 타이틀 32/40 */
    line-height: 40px;
  }
  .sr-hub-head .eyebrow {
    font-size: 14px;
    line-height: 20px;
  }

  /* 709–1024: 카드 2열(각 폭 균등, gap 36) */
  .sr-features {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
  }

  /* 카드 내부 = 세로. 풀폭 CTA를 위해 패딩 0 + overflow:hidden(라운드 클립) */
  .sr-feature,
  .sr-feature.reverse {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  /* sr-feature-text 를 풀어 자식(본문 div / CTA)을 카드 flex 직속 아이템으로 */
  .sr-feature .sr-feature-text,
  .sr-feature.reverse .sr-feature-text {
    display: contents;
  }
  /* 본문(제목+칩 / 설명 / 태그) — 순서 1, 패딩 20 (하단 0) */
  .sr-feature .sr-feature-text > div {
    order: 1;
    display: block;
    padding: 20px 20px 0;
    min-width: 0;
  }
  /* 제목 줄 — 칩을 제목 우측으로 (가로 배치) */
  .sr-title-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  /* 썸네일 — 순서 2, 좌우/상단 20 여백, 16:9 유지 */
  .sr-feature .sr-media,
  .sr-feature.reverse .sr-media {
    order: 2;
    width: auto;
    height: auto; /* Ta/Mo: PC 고정높이 해제 → 16:9 비율 */
    aspect-ratio: 16 / 9;
    align-self: stretch;
    margin: 20px 20px 0;
  }
  /* CTA — 순서 3, 풀폭(카드 가장자리까지), 라운드/섀도 제거 → 카드에 클립 */
  .sr-feature .sr-cta,
  .sr-feature.reverse .sr-cta {
    order: 3;
    margin-top: 20px;
    height: 60px;
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
  }

  /* 타이포 — Figma Ta/Mo 카드 */
  .sr-feature-text h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .sr-feature-text p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
  }
  .sr-feature-tags {
    margin-top: 12px;
    gap: 8px;
  }
  .sr-chip {
    padding: 4px 10px;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ≤708: 카드 1열 (세로 스택) — Figma 모바일 376 */
@media (max-width: 708px) {
  .sr-features {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}