/* main / Sec_2 — RIBFIT™ 인트로
   시안 1920×860: 좌 텍스트 컬럼(580) + 우 풀블리드 사진(900×580, 왼쪽 모서리만 80px),
   섹션 바닥에 흐린 KOWON 워드마크. 절대좌표는 flex 2단으로 옮겼다. */

/* 시안 섹션 상하 여백 140px (--sp-section 120 + 20).
   860 = 140 + 사진 580 + 140 이라 사진이 섹션 높이를 정한다. */
.main-sec_2{
  padding-block:calc(var(--sp-section) + 20px);
  background:var(--surface);
  overflow:hidden;
}

/* 좌우 2단.
   왼쪽 안쪽 여백만 1280 컨테이너의 좌측 가장자리(1920 에서 320px)에 맞추고
   오른쪽은 패딩을 두지 않아 사진이 화면 끝까지 풀블리드로 나간다. */
.main-sec_2__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  gap:calc(var(--sp-block) * 2);   /* 시안 120 = 텍스트 우단 900 → 사진 좌단 1020 */
  padding-left:max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* 시안 텍스트 컬럼 폭 580. 시안은 텍스트 덩어리를 사진 중심선보다 11px 위에
   놓았다(Figma 프레임 중심 420 vs 사진 중심 430) — 아래 여백 22 로 그만큼 올린다. */
.main-sec_2__text{flex:0 1 580px;margin-bottom:22px}
.main-sec_2__media{flex:1 1 0;min-width:0;margin:0}

/* 시안 본문은 제목과 22px 떨어져 있다. Figma 의 제목 텍스트박스 높이(130)가
   CSS 행상자(50 × 1.2 × 2 = 120)보다 10px 크기 때문이며, 그 차이를 여기서 더한다. */
.main-sec_2__lead{margin-top:calc(var(--sp-tight) + 6px)}

/* 사진 — 시안(1:1130)의 프레임을 그대로 따라 다시 잘랐다. 집도의 눈이 프레임 위에서 0.32,
   머리 윗부분은 시안과 같이 상단 모서리에서 잘리고 천장은 화면 밖으로 내보냈다.
   파일이 이미 1800×1160(시안 900×580 의 2배)이라 1920 이하에선 더 잘리는 곳이 없다.
   1920 초과에서만 max-height 때문에 세로가 넘치므로 위(집도의 머리)를 기준으로 잘라낸다. */
.main-sec_2__photo{
  width:100%;
  aspect-ratio:900 / 580;
  max-height:580px;           /* 1920 초과 화면에서 섹션이 부풀지 않게 시안 높이로 고정 */
  border-radius:80px 0 0 80px;
  object-fit:cover;
  object-position:0 0;
}

/* KOWON 워드마크 — 섹션 바닥에 붙고 우측 120px 안쪽. 사진보다 아래 레이어라
   우상단 모서리가 사진에 가려진다(시안과 같은 겹침 순서). */
.main-sec_2__wordmark{
  position:absolute;z-index:0;
  right:min(120px, 8%);bottom:0;
  width:min(985px, 55%);height:auto;
  /* Figma export 가 레이어 불투명도를 빠뜨렸다. 시안 PNG 역산 242/255 → 0.05 */
  opacity:.05;
  pointer-events:none;
}

/* 1024–1279 : 컨테이너가 유동이라 580 컬럼을 유지할 폭이 없다.
   시안 비율(텍스트 58 : 사진 90)로 나누고 강제 줄바꿈을 푼다. */
@media (max-width:1279px){
  .main-sec_2__inner{gap:var(--sp-block)}
  .main-sec_2__text{flex:58 1 0}
  .main-sec_2__media{flex:90 1 0}
  .main-sec_2__br{display:none}
}

/* 태블릿 768–1023 : 2단 유지, 좌우 균등 */
@media (max-width:1023px){
  .main-sec_2__inner{gap:var(--sp-gap)}
  .main-sec_2__text{flex:1 1 0}
  .main-sec_2__media{flex:1 1 0}
  .main-sec_2__photo{border-radius:48px 0 0 48px}
}

/* 모바일 <768 : 세로로 쌓는다. 사진은 왼쪽 여백만 두고 오른쪽으로 계속 흘려보낸다. */
@media (max-width:767px){
  .main-sec_2__inner{display:block;padding-left:0}
  .main-sec_2__text{padding-inline:var(--gutter)}
  .main-sec_2__media{margin-top:var(--sp-stack);margin-left:var(--gutter)}
  .main-sec_2__photo{border-radius:32px 0 0 32px}
}