/* SoyTwo 홈 나머지 섹션(2/3/6/7/8/9/10/11/12) — 벤치마크(COS) §1-1 구조 실측 기반, 자체완결 .st- 네임스페이스.
   그리드 섹션(grid-sections.css)과 동일한 스크롤스냅 틀(.ss-section) 안에서 쓰인다. */

.st-section-inner {
  width: 100%;
  max-width: var(--ml-max-width, 1440px);
  margin: 0 auto;
  padding: 60px 40px;
}

.st-eyebrow { font-size: 13px; letter-spacing: 0.08em; color: var(--ml-muted, #888888); }
.st-heading { font-size: 26px; font-weight: 700; margin: 10px 0 8px; }
.st-subtext { font-size: 15px; color: var(--ml-muted, #888888); }

/* ---------- 공용 타이포 스케일(2026-08-09 리팩터) ----------
   사용자 지적: "같은 타이포는 하나의 서식으로 잡아야 나중에 수정이 쉽지" — §33에서 벤치마크
   실측치를 섹션마다 #id 스코프로 따로따로 박아뒀던 걸(특히 값이 실제로 겹치거나 1~2px 오차
   범위인 것들), 하나의 공용 클래스로 묶어 나중엔 여기 한 곳만 고치면 되게 정리했다. 값이
   뚜렷이 다른 것(MD CHOICE 82px, 프로모 72px/400굵기, 히어로 56px)까지 억지로 합치진
   않는다 — "실측상 사실상 같은 값"만 통합 대상. 적용은 index.html에서 기존
   .st-heading/.st-eyebrow/.st-subtext에 이 클래스를 추가로 붙이는 방식(HTML의 의미 클래스는
   유지, 크기만 이 스케일이 오버라이드). */
/* [2026-08-09 재조정] "텍스트 더 줄여, 큰 타이포가 40이 되게" — 벤치마크 실측 스케일(§33)이
   전반적으로 너무 크다는 지적으로 전체 스케일을 축소, 최대값(.st-scale-display)을 40px로 캡.
   공용 클래스 리팩터(§35) 덕분에 여기 숫자만 고치면 전 섹션에 일괄 반영된다. */
.st-scale-display { font-size: 40px; font-weight: 700; letter-spacing: normal; line-height: 1.25; }
.st-scale-title-lg { font-size: 32px; font-weight: 700; letter-spacing: normal; }
.st-scale-section-title { font-size: 22px; font-weight: 300; letter-spacing: 0.05em; }
.st-scale-eyebrow { font-size: 14px; font-weight: 300; letter-spacing: 0.02em; opacity: 1; }
.st-scale-desc { font-size: 16px; font-weight: 300; letter-spacing: 0.02em; line-height: 1.6; opacity: 1; }

/* ---------- 섹션 입장/이탈 애니메이션(범용, 2026-08-09) ----------
   전달.md: "이 섹션(MD CHOICE) 말고 전체 섹션들 타이포와 애니메이션 적용, 벤치사이트 확인해서
   적용해" — §28~30에서 MD CHOICE 하나에만 만들었던 순차 fade-up 패턴(히어로 .st-hero-video와도
   중복 구현돼 있었음)을 .st-reveal 하나로 통합해 전 섹션이 공유한다. js/section-reveal.js가
   IntersectionObserver로 .st-reveal 요소가 화면에 50% 이상 보일 때 .is-active를 붙이고, 벗어나면
   뗀다(스크롤스냅으로 반복 진입해도 매번 리셋·재생) — section2(프로모 슬라이더)만 예외로
   js/promo-slider.js가 슬라이드 전환 시점에 직접 토글한다(이미 화면에 계속 보이는 상태라
   IntersectionObserver로는 전환을 감지할 수 없기 때문). */
.st-reveal > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.st-reveal > *:nth-child(1) { transition-delay: 0.1s; }
.st-reveal > *:nth-child(2) { transition-delay: 0.25s; }
.st-reveal > *:nth-child(3) { transition-delay: 0.4s; }
.st-reveal > *:nth-child(4) { transition-delay: 0.55s; }
.st-reveal > *:nth-child(5) { transition-delay: 0.7s; }
.st-reveal.is-active > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- section2: 풀블리드 페이드 슬라이더(5장) — 2026-08-08 재실측(swiper-container-fade),
   2026-08-09 와이어프레임(.st-bg-placeholder) 해치 대신 실제 이미지(SD 생성, "신상품 시즌 아이템")로
   교체하며 5장으로 확장. background-size/position과 어두운 그라디언트 오버레이(흰 텍스트 가독성용,
   .st-split-banner::before와 동일한 패턴)를 이때 함께 추가했다 — 이전엔 .st-bg-placeholder의 해치
   패턴이 어두운 배경 역할까지 겸했어서 별도 오버레이가 없어도 텍스트가 보였다. ---------- */
/* [2026-08-09] min-height:100vh 추가 — 실제 배경이미지 도입 전엔 안 드러났던 잠재 버그를 발견:
   .st-slide는 전부 position:absolute(내용 없이 인셋만)라 .st-slider 자신의 auto-height 계산에
   전혀 기여하지 못하고, 유일하게 높이를 만들던 건 .is-active가 position:relative로 바뀌며 참여하던
   "텍스트 콘텐츠 자체의 높이"(패딩+글자, 배경이미지는 박스 크기에 영향 없음)뿐이었다 — 와이어프레임
   해치 시절엔 그 좁은 밴드가 크게 티 안 났지만, 실사진을 넣자 위아래 여백과 함께 사진이 잘려 보이는
   문제로 명확히 드러났다. 컨테이너에 명시적 높이를 줘 근본 해결. */
.st-slider { position: relative; overflow: hidden; min-height: 100vh; }

/* [2026-08-09, 전달.md] 좌측 padding을 0으로 비움 — 가로 위치는 .st-split-banner-inner 자신의
   padding-left(150px, 히어로 기준 통일값, css/grid-sections.css)로만 결정된다. */
.st-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 60px 60px 60px 0;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background-size: cover;
  background-position: center;
}

.st-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
}

.st-slide.is-active { opacity: 1; pointer-events: auto; }

/* [2026-08-09, 전달.md] "타이포 div자체를 하나의 서식으로 통일" — 벤치마크 실측 고유값(타이틀
   34px/400, 설명 17px)을 버리고 .st-split-title 기본값(40px/700, css/grid-sections.css)과
   .st-scale-desc(css/home-sections.css 상단) 공용 클래스로 히어로·MD CHOICE와 통일한다.
   이름표/설명은 index.html에서 .st-scale-eyebrow/.st-scale-desc 클래스를 직접 붙여 처리. */

/* [2026-08-09, 전달.md] "화살표는 이 모양에 투명50% 적용하고 그라데이션 적용해서 좌우 버튼으로
   넣어" — 원형+텍스트문자(‹›) 대신 참조 이미지와 동일한 둥근 사각형+SVG 셰브런 아이콘으로 교체,
   배경은 그라데이션에 50% 불투명도. "지금 좌우 화살표 마우스 오버에만 나오게" — 호버 가능한
   포인터 환경(hover:hover, 데스크톱)에서만 기본 숨김 처리하고 .st-slider:hover 시에만 노출한다
   (터치 기기는 hover 자체가 없어 그 매체쿼리 밖에 있으므로 원래대로 항상 보임 — 안 그러면 모바일
   에서 화살표를 아예 못 쓰게 됨). */
.st-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.85), rgba(20, 20, 20, 0.35));
  opacity: 0.5;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.st-slide-arrow:hover { opacity: 0.85; }
.st-slide-arrow svg { width: 20px; height: 20px; }

/* [2026-08-09] "화살표를 좀더 안쪽으로" — 가장자리(24px)에서 더 안쪽(64px)으로 이동. */
.st-slide-prev { left: 64px; }
.st-slide-prev svg { transform: rotate(-90deg); }
.st-slide-next { right: 64px; }
.st-slide-next svg { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) {
  .st-slide-arrow { opacity: 0; }
  .st-slider:hover .st-slide-arrow { opacity: 0.5; }
  .st-slider:hover .st-slide-arrow:hover { opacity: 0.85; }
}

/* [2026-08-09, 전달.md] "섹션2 캐러셀은 이런 형태로 만들어 도트 말고" — 참조 이미지(1/5 ‹ ❚❚ ›)
   대로 점 대신 카운터+미니 컨트롤(이전/일시정지·재생/다음)로 교체. */
.st-slide-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.st-slide-counter { font-variant-numeric: tabular-nums; opacity: 0.9; }

.st-slide-ctrl {
  border: none;
  background: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
}

.st-slide-ctrl:hover { opacity: 1; }
.st-slide-ctrl-toggle { font-size: 10px; }

/* ---------- section3: MD추천(이미지 + 해시태그 캡션) ---------- */
.st-md-choice {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 60px;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.st-md-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 60%);
}

.st-md-choice-inner { position: relative; z-index: 1; }
.st-md-choice .st-eyebrow { color: rgba(255, 255, 255, 0.85); }
.st-md-choice .st-heading { color: #fff; }

/* [2026-08-09] section6·7 제목 타이포는 .st-scale-section-title 공용 클래스(위)로 이동 —
   product-tabs(§below)와 완전히 같은 31px/300 값이라 index.html에서 클래스만 추가. */

/* ---------- section6: 상품후기(4카드) / section7: 이벤트뉴스(3카드) 공용 카드형 그리드 ---------- */
.st-feature-grid { margin-top: 32px; display: grid; gap: 24px; }
.st-feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.st-feature-grid--3 { grid-template-columns: repeat(3, 1fr); }

.st-feature-card { display: block; text-decoration: none; color: inherit; }
.st-feature-thumb { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #f4f2ef; }
.st-feature-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-feature-title { margin-top: 14px; font-size: 15px; font-weight: 600; }
.st-feature-desc { margin-top: 4px; font-size: 13px; color: var(--ml-muted, #888888); }
.st-feature-stars { margin-top: 8px; color: #e8a33d; font-size: 13px; letter-spacing: 1px; }
.st-feature-stars img { height: 13px; width: auto; }
/* section6(상품후기) board_list_4 위젯 전용 — 썸네일 래퍼 없이 이미지 자체에 비율을 주고,
   제목은 이미지 아래 별도 텍스트로 노출한다(2026-08-12 재실측: div+data-ez-role 조합이
   문제였고 순수 span은 정상 치환됨, [[카페24-프레임워크]] G70 정정 예정). */
#st-reviews .st-feature-card { display: block; }
#st-reviews .st-feature-card img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; display: block; background: #f4f2ef; }
#st-reviews .st-feature-title { display: block; margin-top: 14px; font-size: 15px; font-weight: 600; }

/* ---------- section8: 인스타그램(2x3 그리드 + 좌측 텍스트) ---------- */
.st-insta {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}

.st-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.st-insta-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
.st-insta-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* [2026-08-09] "인스타그램" 제목은 .st-scale-title-lg 공용 클래스(위, 더블배너와 공유 —
   실측 64px/66px가 2px 오차라 65px 하나로 통합)로 이동. @handle은 색상이 브랜드 포인트컬러라
   고유 역할이라 여기 유지, 크기만 실측(28px/300, 기존 16px/600보다 훨씬 컸다)으로 갱신. */
.st-insta-handle { margin-top: 10px; font-size: 18px; font-weight: 300; color: var(--ml-accent, #b63535); }

/* ---------- section9: 타임세일 카운트다운 ---------- */
/* [2026-08-09, 전달.md] 실사진 배경(index.html 인라인 style) 적용 — 어두운 그라디언트는
   이미지 로드 실패 시 폴백 색상으로 유지. .st-hero-video/.st-split-banner와 동일하게
   ::before 다크 오버레이로 흰 텍스트 가독성을 보강한다. */
.st-timesale {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px;
  color: #fff;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}

.st-timesale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%);
}

.st-timesale .st-section-inner { position: relative; z-index: 1; }

.st-timesale-countdown { font-size: 40px; font-weight: 700; margin: 14px 0; font-variant-numeric: tabular-nums; }
/* [2026-08-09] 이름표는 .st-scale-eyebrow 공용 클래스로 이동(18px, 다른 섹션들과 완전히 동일).
   설명(25px)은 다른 섹션들의 desc(30px)보다 뚜렷이 작아 — 어두운 카운트다운 배경의 좁은 여백에
   맞춘 의도적 축소로 보고 통합하지 않음, 고유값 유지. */
#st-timesale .st-subtext { font-size: 15px; font-weight: 300; line-height: 1.6; }

/* ---------- section10: 회사소개(단일 배너) ---------- */
.st-company-banner {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #3d3d3d, #1a1a1a);
  padding: 60px;
}
/* [2026-08-09] 제목/이름표/설명 전부 .st-scale-display·.st-scale-eyebrow·.st-scale-desc 공용
   클래스로 이동(유튜브 배너와 완전히 같은 값 — 90/19≈18/30). */

/* ---------- section11: 더블배너(문의/생산, 좌우 반반) ---------- */
.st-double-banner { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.st-double-banner-half {
  display: flex;
  align-items: flex-end;
  padding: 56px;
  color: #fff;
  background-size: cover;
  background-position: center;
  position: relative;
}
.st-double-banner-half::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.st-double-banner-half > * { position: relative; z-index: 1; }
/* [2026-08-09] 제목/이름표/설명 전부 공용 클래스로 이동(제목=.st-scale-title-lg, 인스타와 공유
   /이름표=.st-scale-eyebrow, 17px 실측이었으나 1px 오차라 통합/설명=.st-scale-desc, 29px 실측이나
   1px 오차라 통합). */

/* ---------- section12: 유튜브 배너 ---------- */
.st-youtube-banner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #fff;
  background: linear-gradient(135deg, #24312b, #4c6357);
  text-align: center;
  padding: 60px;
}
/* [2026-08-09] 제목/이름표/설명 전부 공용 클래스로 이동(회사소개와 완전히 같은 값). */

.st-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
}

.st-btn-outline {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* [2026-08-09] "more랑 모두보기를 마우스오버하면 텍스트에만 롤오버(공용 a:hover 밑줄, common.css)
   걸리는데 박스 배경이 흰색으로, MORE가 검은색 텍스트로 변경되게해" — 대부분 인스턴스가
   `style="color:#fff"` 인라인을 갖고 있어(index.html) hover 색상 변경이 특이도에서 밀리므로
   !important로 확실히 이긴다. */
/* [2026-08-11, 전달.md] "배너... 모바일에서 기본 마우스 오버상태 해제" — 모바일 탭 시
   hover가 안 풀려 흰 배경/검정 글자로 뒤집힌 채 고정되던 문제, hover 가능한 환경으로 한정. */
@media (hover: hover) and (pointer: fine) {
  .st-btn-outline:hover {
    background-color: #fff !important;
    color: #151515 !important;
    text-decoration: none;
  }
}

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

@media (max-width: 767px) {
  .st-section-inner { padding: 32px 20px; }
  .st-slider { min-height: 70vh; }
  .st-slide { padding: 32px 20px 32px 0; }
  .st-slide-arrow { width: 36px; height: 36px; }
  .st-feature-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .st-feature-grid--3 { grid-template-columns: 1fr; gap: 14px; }
  .st-insta-grid { grid-template-columns: repeat(3, 1fr); }
  .st-double-banner { grid-template-columns: 1fr; min-height: 0; }
  .st-double-banner-half { min-height: 60vh; padding: 32px 20px; }
  .st-md-choice, .st-timesale, .st-company-banner, .st-youtube-banner { min-height: 0; padding: 48px 20px; }
  .st-timesale-countdown { font-size: 28px; }

  /* [2026-08-09] 데스크톱 실측 타이포(위 공용 스케일 클래스 + 섹션별 고유값)를 모바일에도
     그대로 두면 390px 폭에서 줄바꿈이 심하게 깨진다 — MD CHOICE(§30, 82px→45px, 약 55% 축소)에서
     검증된 비율을 동일하게 적용(개별 벤치마크 모바일 재실측은 비용 대비 이득이 낮다고 판단).
     공용 스케일 클래스는 여기 한 번만 축소하면 그 클래스를 쓰는 모든 섹션에 일괄 반영된다. */
  .st-scale-display { font-size: 28px; }
  .st-scale-title-lg { font-size: 24px; }
  .st-scale-section-title { font-size: 18px; }
  .st-scale-eyebrow { font-size: 12px; }
  .st-scale-desc { font-size: 14px; }

  /* [2026-08-09, 전달.md] 히어로/프로모 타이틀은 이제 .st-split-title 공용 모바일값(28px,
     css/grid-sections.css)으로 통일 — #id 개별 축소 불필요. */
  .st-insta-handle { font-size: 14px; }
  #st-timesale .st-subtext { font-size: 13px; }
}