/* SoyTwo 메인 상품 그리드/카드 스타일 — 벤치마크(COS) section4/5 정밀 실측 기반(11_템플릿/SoyTwo.md §1-2).
   COS는 Swiper 캐러셀이지만 최초 1차 범위는 "그리드"라 CSS Grid로 구현했다("캐러셀화는 후속 과제"로
   미뤄뒀던 부분). 2026-08-09: MD CHOICE(section3)는 후속 과제가 실행돼 캐러셀로 전환됨
   (css/md-choice-carousel.css) — section5(.st-grid-4, 탭 4열 그리드)는 이번 범위 밖이라 CSS Grid 그대로. */

/* ---------- 와이어프레임 이미지 자리(placeholder) — 전 섹션 공용 ----------
   사용자 지시(2026-08-07): "완성도 높은 소스 말고 자리를 만들라고" — 실제 사진을 채우지 않고
   이미지가 들어갈 위치·비율만 명확히 표시한다. 레이아웃 치수(aspect-ratio 등)는 실제 이미지가
   들어갔을 때와 동일하게 유지해, 나중에 real src만 꽂으면 되는 구조로 남긴다. */
.st-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  background: repeating-linear-gradient(45deg, #e9e9e9, #e9e9e9 12px, #f4f4f4 12px, #f4f4f4 24px);
  border: 1px dashed #bbb;
  color: #999;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}

.st-img-placeholder svg { width: 28px; height: 28px; opacity: 0.5; }

/* 풀블리드 배경 자리(히어로/MD추천/타임세일/회사소개/더블배너/유튜브) — 어두운 오버레이 대신
   중립 회색 해치 패턴만 깔아 "이미지가 여기 들어갈 자리"임을 명확히 한다. */
.st-bg-placeholder {
  background: repeating-linear-gradient(45deg, #3a3a3a, #3a3a3a 14px, #2c2c2c 14px, #2c2c2c 28px) !important;
  border-top: 1px dashed #666;
  border-bottom: 1px dashed #666;
}

.st-bg-placeholder-label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- 공통 상품 카드 ---------- */
.st-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.st-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f2ef;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* [2026-08-09] 사용자 지시: 이미지 최대 사이즈를 제한 — object-fit:cover로 카드를 꽉 채워
   원본 비율이 제각각인 상품 사진(세로로 긴 튜브/가로로 넓은 팔레트 등)을 전부 동일하게
   "꽉 찬 정사각형"으로 잘라내다 보니 실제 제품 크기감이 사라지고 카드마다 똑같은 느낌으로
   보였다. contain + 비율 상한(max-width/height)으로 제품 실루엣이 잘리지 않게 바꾼다. */
.st-card-thumb img {
  max-width: 74%;
  max-height: 74%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* [2026-08-09] 사용자 지시: "좌우 양옆에 동일하게 나오지 않게" — 같은 행의 카드들이 이미지
   크기까지 판박이로 보이지 않도록 짝/홀 카드마다 살짝 다른 크기를 준다(그리드 자체(정사각형
   셀)는 그대로 유지, 셀 안 이미지 크기만 리듬을 준다).
   🔴→✅ [2026-08-09 정정] 처음엔 짝수 카드에 align-items:flex-end(하단 정렬)도 같이 줬는데,
   실제 화면에서 이미지 위로 빈 여백이 크게 남아 "치우쳐 보인다"는 사용자 지적(전달.md)을
   받아 정렬은 중앙(.st-card-thumb 기본값)으로 되돌리고 크기 차이만 남긴다.
   [2026-08-09] MD CHOICE가 캐러셀로 바뀌며 .st-grid-2는 더 이상 안 쓰여 이 선택자에서 제거
   (.st-grid-4=section5 탭 그리드는 그대로 유지). */
.st-grid-4 li:nth-child(even) .st-card-thumb img {
  max-width: 60%;
  max-height: 60%;
}

.st-card-name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ml-fg, #151515);
}

.st-card-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ml-muted, #888888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-card-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ml-fg, #151515);
}

.st-card-badges {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

.st-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

.st-badge--new { background: #eef6ff; color: #0b6bcb; }
.st-badge--best { background: #fff2e8; color: #c2540a; }
.st-badge--sale { background: #ffecec; color: #d02020; }

/* ---------- section1 히어로 — 실제 배경 영상(2026-08-08, sorce/동영상/soytwo_hero_combined_10s.mp4) ----------
   .st-split-banner와 동일하게 어두운 그라디언트 오버레이로 흰 텍스트 가독성을 확보한다. 텍스트 위치·
   위계(제목→설명→해시태그→버튼)는 기존 와이어프레임 그대로 유지, 배경만 해치 placeholder에서 실제
   <video>로 교체했다. */
.st-hero-video { overflow: hidden; color: #fff; }

.st-hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.st-hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
}

.st-hero-mute-btn {
  position: absolute;
  right: 24px;
  bottom: 40px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.st-hero-mute-btn .icon-unmuted { display: none; }
.st-hero-mute-btn.is-unmuted .icon-muted { display: none; }
.st-hero-mute-btn.is-unmuted .icon-unmuted { display: block; }

/* [2026-08-09 재조정, 전달.md] "가장 큰 텍스트 40px로 변경하고 나머지도 그거에 맞춰" — 히어로
   30px·프로모 34px·MD CHOICE 36px로 섹션마다 흩어져 있던 고유값을 없애고 .st-split-title
   기본값(아래, 40px/700) 하나로 통일했다. 이름표/설명은 이미 .st-scale-eyebrow·.st-scale-desc
   공용 클래스로 통일돼 있었다(css/home-sections.css) — MD CHOICE에도 이번에 동일하게 적용.
   좌측 여백(150px)도 아래 .st-split-banner-inner 기본값으로 승격했다(§ 아래 참고). */

/* [2026-08-09] 순차 등장 애니메이션은 css/home-sections.css의 범용 .st-reveal로 통합됨(과거엔
   여기 히어로 전용으로 따로 있었고 §28에서 MD CHOICE에도 거의 동일한 블록을 또 만들었었다) —
   index.html의 .st-split-banner-inner가 .st-reveal 클래스를 갖고, js/section-reveal.js
   (IntersectionObserver)가 트리거를 담당한다. 히어로는 기존 js/hero-video.js의 1회성
   .is-loaded 트리거를 제거하고 이 범용 시스템으로 흡수됨(재진입 시에도 재생되도록 통일). */

/* ---------- 섹션 A: MD CHOICE(좌 캐러셀 + 우 배너). 2026-08-09 이전엔 "이달의 베스트"(COS
   section4) 대응이던 정적 2열 그리드였으나, section4 삭제 후 이 레이아웃(.st-split 등)만 MD CHOICE가
   이어받았다. 캐러셀 자체 스타일은 css/md-choice-carousel.css 참고. ---------- */
.st-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* [2026-08-09, 전달.md] 좌측 padding을 0으로 비움 — 가로 위치는 이제 .st-split-banner-inner
   자신의 padding-left(150px, 히어로 기준 통일값)로만 결정된다. 상/하/우 60px는 유지. */
.st-split-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 60px 60px 60px 0;
  color: #fff;
}

.st-split-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
}

/* [2026-08-09, 전달.md] "타이포 div자체를 하나의 서식으로 통일" — 히어로(동영상 섹션) 기준
   max-width 420→500px, 좌측 150px 여백을 여기 기본값으로 승격해 히어로/프로모/MD CHOICE
   세 섹션이 전부 이 하나의 규칙만 공유한다(과거엔 섹션마다 #id로 값이 흩어져 있었음). */
.st-split-banner-inner { position: relative; z-index: 1; max-width: 500px; padding-left: 150px; }
.st-split-eyebrow { font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; }
/* [2026-08-09 재조정, 전달.md] "가장 큰 텍스트 40px로 변경하고 나머지도 그거에 맞춰" — 히어로
   30px·프로모 34px·MD CHOICE 36px 세 갈래였던 걸 이 기본값 하나로 통일(더 이상 #id 오버라이드 없음). */
.st-split-title { margin: 12px 0; font-size: 40px; font-weight: 700; letter-spacing: normal; line-height: 1.25; }
.st-split-desc { font-size: 15px; opacity: 0.9; }

/* [2026-08-09] MD CHOICE 이름표/설명도 이제 다른 섹션과 동일하게 .st-scale-eyebrow·.st-scale-desc
   공용 클래스를 index.html에서 직접 붙여 통일한다(css/home-sections.css) — 여기 전용 #id 규칙은
   제거. max-width 640px 확장(82px 타이틀 대응용)도 40px로 통일되며 더 이상 필요 없어 제거. */

/* [2026-08-09] 텍스트 입장 애니메이션은 css/home-sections.css의 범용 .st-reveal로 통합됨(과거엔
   여기 전용으로 있었다) — index.html의 .st-split-banner-inner가 .st-reveal 클래스를 갖고,
   js/section-reveal.js(IntersectionObserver, 전 섹션 공용)가 트리거를 담당한다. */

.st-split-products {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* [2026-08-09] MD CHOICE 캐러셀 도입 후 발견: 이 요소가 .st-split(display:grid)의 그리드 아이템
     본인이라, 자동 트랙 최소너비가 이 요소의 min-content(내부 캐러셀의 카드 6장 분, 넓음)를 그대로
     반영해 트랙 자체가 늘어나며 모바일에서 섹션이 가로로 넘쳤다(자식인 .pl-module-wrap에 min-width:0을
     줘도 무효 — 그리드 자동 최소크기는 그리드 아이템 "본인"만 본다). 그리드 아이템 자체에 걸어야 한다. */
  min-width: 0;
}

.st-split-heading { font-size: 26px; font-weight: 700; margin-bottom: 32px; }

/* ---------- 섹션 B: 프로덕트(탭 + 4열 그리드, COS section5 대응) ---------- */
.st-tabbed {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  max-width: var(--ml-max-width, 1440px);
  margin: 0 auto;
  width: 100%;
}

/* [2026-08-09] 폰트 크기/굵기/자간은 .st-scale-section-title 공용 클래스(css/home-sections.css,
   상품후기·이벤트뉴스와 완전히 같은 31px/300 값)로 이동, 레이아웃 속성만 여기 유지. */
.st-tabbed-heading { margin-bottom: 24px; text-align: center; }

.st-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
}

.st-tab-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--ml-border, #eeeeee);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ml-muted, #888888);
  cursor: pointer;
}

.st-tab-btn.is-active {
  background: var(--ml-fg, #151515);
  border-color: var(--ml-fg, #151515);
  color: #fff;
}

/* [2026-08-09] "신상품/베스트/세일 이동 시 페이드 효과" — 탭 전환을 순간 전환 대신
   페이드아웃→전환→페이드인으로, 전환 타이밍은 js/grid-tabs.js가 담당. */
.st-tab-panel { display: none; width: 100%; opacity: 1; transition: opacity 0.25s ease; }
.st-tab-panel.is-active { display: block; }

.st-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.st-tabbed-more {
  margin-top: 40px;
  padding: 12px 32px;
  border-radius: 999px;
  border: 1px solid var(--ml-fg, #151515);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ml-fg, #151515);
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* [2026-08-09] "more랑 모두보기" 지시에 맞춘 대응 hover — 이 버튼은 흰 배경 위에 이미
   어두운 테두리/텍스트라 그대로 흰 배경으로 채우면 변화가 안 보인다. .st-btn-outline(어두운
   배경 위 흰 텍스트→흰 배경/검은 텍스트)과 대칭이 되도록 반대로 채워 hover가 뚜렷이 보이게 한다. */
.st-tabbed-more:hover {
  background-color: var(--ml-fg, #151515);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .st-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  /* [2026-08-09, 전달.md] 좌측 150px 여백도 모바일에선 이 20px 하나로 통일 — 히어로/프로모/
     MD CHOICE 세 섹션이 전부 공유(과거엔 #st-hero 전용이었음). */
  .st-split-banner-inner { padding-left: 20px; }
  .st-split { grid-template-columns: 1fr; min-height: 0; }
  .st-split-banner { padding: 32px 20px 32px 0; min-height: 60vh; }
  .st-split-products { padding: 32px 20px; min-height: 60vh; }
  /* [2026-08-09, 전달.md] 타이틀 모바일 크기도 .st-scale-display 모바일값(28px)과 맞춰 하나로
     통일 — 히어로22/프로모20/MD CHOICE24로 흩어져 있던 #id 오버라이드 제거. */
  .st-split-title { font-size: 28px; }
  .st-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .st-tabbed { min-height: 0; padding: 40px 20px; }
  .st-card-name { font-size: 13px; }
  .st-card-price { font-size: 13px; }
}