/* main / Sec_3 — KOWON Signature
   실크 배경(사진 + 핑크 70% 오버레이) → 흰 알약 탭바 4개 → 좌 이미지 / 우 텍스트 카드.
   시안 1920 기준 좌표: 섹션 1240 높이, 상하 여백 140, 타이틀 140, 탭 380, 카드 520. */

.main-sec_3{
  /* 시안 상하 여백 140px = --sp-section(120) + 20 */
  padding-block:calc(var(--sp-section) + 20px);
  background-color:var(--brand-tint-2);
  background-image:
    linear-gradient(rgba(255,243,248,.7),rgba(255,243,248,.7)),
    url("https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/575d47409c28e136-w1920.webp");
  background-size:100% 100%,cover;
  background-position:0 0,center;
  background-repeat:no-repeat,no-repeat;
}

/* Figma 텍스트 박스는 잉크 기준이라 CSS 라인 박스보다 리드가 3px 위로 올라온다.
   시안의 탭 y=380 / 카드 y=520 을 맞추려고 두 군데만 보정한다. */
.main-sec_3 .sec-lead{margin-top:calc(var(--sp-tight) + 3px)}

/* ── 탭바 ──────────────────────────────────────────────────
   시안: 1280×80 흰 알약, 안쪽 여백 14/20, 탭 4개 각 300, 사이 13. */
.main-sec_3__tabs{
  margin-top:calc(var(--sp-block) + 1px);
  gap:13px;
  padding:14px 20px;
  background:var(--surface);
  border-radius:var(--radius-pill);
}
.main-sec_3__tabs .tab{
  flex:1 1 0;
  min-height:52px;
  padding-inline:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--line-mid);
}
.main-sec_3__tabs .tab[aria-selected="true"]{
  font-weight:600;
  color:var(--brand);
  background:var(--surface-muted);
}

/* ── 카드 ──────────────────────────────────────────────────
   시안: 1016 폭(436 이미지 + 80 간격 + 500 텍스트), 높이 580, 세로 가운데 정렬. */
.main-sec_3__panels{margin-top:var(--sp-block)}

.main-sec_3__panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--sp-stack) * 2);   /* 시안 80px */
  max-width:1016px;
  margin-inline:auto;
}
.main-sec_3__panel[hidden]{display:none}

.main-sec_3__media{
  position:relative;
  flex:0 1 436px;
  margin:0;
  aspect-ratio:436 / 580;
  border-radius:var(--radius-card);
  overflow:hidden;
}
/* 시안은 원본(558×722)을 1.134배로 키워 글로우 여백을 잘라낸다. */
.main-sec_3__media img{
  position:absolute;
  left:-6.3%;
  top:-4.58%;
  width:113.41%;
  max-width:none;
  height:auto;
}

.main-sec_3__body{flex:0 1 500px}

/* 시안 배지는 56×56 / 24px (공용 .badge-num 은 44×44 / 18px) */
.main-sec_3__num{
  width:56px;
  height:56px;
  font-size:var(--fs-24);
  line-height:1.5;
}

.main-sec_3__title{
  margin-top:var(--sp-gap);
  font-weight:700;
  font-size:var(--fs-32);
  line-height:1.5;
  letter-spacing:var(--ls-tight);
  color:var(--text-primary);
  word-break:keep-all;
}
.main-sec_3__sub{
  margin-top:2px;
  font-weight:600;
  font-size:var(--fs-20);
  line-height:1.6;
  letter-spacing:var(--ls-tight);
  color:var(--brand);
  word-break:keep-all;
}
.main-sec_3__text{
  margin-top:var(--sp-gap);
  font-weight:400;
  font-size:var(--fs-18);
  line-height:1.6;
  letter-spacing:var(--ls-tight);
  color:var(--text-secondary);
  word-break:keep-all;
}
.main-sec_3__cta{margin-top:calc(var(--sp-stack) * 2)}   /* 시안 80px */

/* ── 탭바 접기 ──────────────────────────────────────────────
   탭 4개의 최소폭 합(295+227+237+210 + gap 39 + padding 40 = 1048)이
   컨테이너 안폭을 넘는 건 뷰포트 1128 아래다. 그 밑에서는 공용 .tabs 의
   overflow-x:auto 때문에 3·4번 탭이 알약 밖으로 잘려 보이므로
   규약대로 2열(태블릿) → 1열(모바일)로 접는다. */
@media (max-width:1127px){
  .main-sec_3__tabs{
    flex-wrap:wrap;
    border-radius:var(--radius-card);
  }
  .main-sec_3__tabs .tab{flex:1 1 calc(50% - 7px)}
}
/* 320 같은 최소폭에서는 1열이어도 라벨(최소 275px)이 알약 안폭을 넘는다.
   공용 .tab 의 white-space:nowrap 을 풀어 2줄로 접히게 한다(min-height 52 안에 들어간다). */
@media (max-width:767px){
  .main-sec_3__tabs .tab{
    flex:1 1 100%;
    white-space:normal;
    text-align:center;
  }
}

/* ── 모바일: 이미지 위 / 텍스트 아래 ───────────────────────── */
@media (max-width:767px){
  .main-sec_3__panel{
    flex-direction:column;
    align-items:stretch;
  }
  .main-sec_3__media,
  .main-sec_3__body{flex:0 0 auto;width:100%}
}

/* 시안의 강제 줄바꿈은 1280 컬럼에서만 맞는다. 그 아래에서 유지하면
   본문은 3줄로 깨지면서 'and shaped —' 가 한 줄에 남고,
   리드는 'RIBFIT™,' 만 있는 줄이 생긴다. 각각 폭이 모자라는 지점에서 푼다. */
@media (max-width:1279px){
  .main-sec_3__br{display:none}
}
@media (max-width:767px){
  .main-sec_3__br-lead{display:none}
}

/* 시안(≥1280) 본문은 2줄. 같은 문장이 브라우저에서 506.6px 로 잡혀 500px
   칼럼을 넘치므로, 시안 그대로 재현하는 폭에서만 라인 박스를 10px 넓힌다. */
@media (min-width:1280px){
  .main-sec_3__text{width:calc(100% + 10px)}
}

/* ── 탭 1~4 ────────────────────────────────────────────────
   네 탭 모두 같은 계열의 렌더(main-sec_3-2~5)로 맞추고 마크업도 동일하게 쓴다.
   미디어가 580 보다 작아지는 768~1279 구간에서만 패널 높이를 맞춰 탭 전환 시 레이아웃이 튀지 않게 한다. */
.main-sec_3__panel{min-height:580px}

@media (max-width:767px){
  .main-sec_3__panel{min-height:0}
}

@media (max-width:767px){.main-sec_3{background-image:linear-gradient(rgba(255,243,248,.7),rgba(255,243,248,.7)),url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/575d47409c28e136-w1080.webp')}}