/* ============================================================
   Buy Invest - 해외선물이란? (overseas-intro.html) 전용 스타일
   주의: css/overseas.css는 해외선물 3형제 페이지가 공유하며 다른 담당자가
   동시에 수정 중이라 충돌이 발생하여, 이 페이지 전용 스타일은
   별도 파일로 분리함 (공통 규칙은 css/overseas.css를 그대로 사용).
   ============================================================ */

/* ===== 상단 리드 카피 + 이미지 섹션 ===== */
.oi-lead{padding:70px 0 60px;}
.oi-lead-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:48px;flex-wrap:wrap;
}
.oi-lead-text{flex:1 1 480px;min-width:0;}
.oi-lead-headline{
  font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.35;color:var(--text);
}
.oi-lead-headline .accent{color:var(--blue);font-weight:700;}
.oi-lead-desc{margin-top:28px;font-size:17px;line-height:1.8;color:var(--text-sub);}
.oi-lead-img{flex:0 0 460px;max-width:100%;border-radius:8px;overflow:hidden;}
.oi-lead-img img{width:100%;height:auto;display:block;}

/* ===== 표 가로 스크롤 래퍼 (common.css .table-basic 보강) ===== */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll .table-basic{min-width:560px;}

/* ===== Tablet ===== */
@media (max-width:1024px){
  .oi-lead-img{flex-basis:380px;}
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .oi-lead{padding:44px 0 40px;}
  .oi-lead-inner{gap:28px;}
  .oi-lead-img{flex:1 1 100%;order:-1;}
  .oi-lead-desc{margin-top:20px;font-size:15px;}
}