/* public/css/mainNews.css */

/* ✅ 페이지 전체 스크롤바로 레이아웃 폭 흔들림 방지(선택이지만 효과 큼) */
html { overflow-y: scroll; }

/* ✅ 메인배너 컬럼이 내용 길이에 끌려서 늘어나는 현상 방지 (핵심) */
.main-banner .row > [class*="col-"] {
  min-width: 0 !important; /* flex item 기본 min-width:auto 제거 */
}

/* 카드 */
.sa-news-card {
  /* ✅ 고정 사이즈 */
  height: 320px;

  /* ✅ 내부를 flex로: 헤더/탭은 고정, 리스트는 남은 높이 채움 */
  display: flex;
  flex-direction: column;

  /* ✅ 폭도 내용에 끌려가지 않게 고정 */
  width: 100%;
  max-width: 100%;
  min-width: 0;

  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

/* ✅ 메인배너 오른쪽 컬럼에서 카드가 늘어나는 문제 방지 */
.main-banner .col-lg-5,
.main-banner .col-md-5 {
  display: flex;
  min-width: 0 !important; /* 이거도 같이 박아야 확실함 */
}

#sa-news {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sa-news-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px 14px;
  min-width: 0;
}

.sa-news-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.92);
}

.sa-news-more {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sa-news-more:hover {
  border-color: rgba(94,168,255,0.35);
  background: rgba(94,168,255,0.10);
}

.sa-news-tabs {
  flex: 0 0 auto;
  display: flex;
  margin: 0 14px 12px 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  min-width: 0;
}

.sa-news-tab {
  flex: 1;
  height: 40px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}
.sa-news-tab + .sa-news-tab {
  border-left: 1px solid rgba(255,255,255,0.08);
}
.sa-news-tab.active {
  color: rgba(255,255,255,0.95);
  background: linear-gradient(135deg, rgba(94,168,255,0.22), rgba(139,92,255,0.16));
}

/* ✅ 리스트 영역: 남은 높이를 항상 채우고 스크롤 */
.sa-news-list {
  flex: 1 1 auto;
  min-height: 0; /* 중요: flex에서 overflow 스크롤 제대로 되게 */
  min-width: 0;  /* 중요: 내용 길이에 끌려서 폭 늘어나는거 방지 */
  padding: 0 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* ✅ 아이템 자체가 내용 때문에 폭을 키우지 못하게 막기(핵심) */
.sa-news-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);

  width: 100%;
  max-width: 100%;
  min-width: 0;      /* flex min-width:auto 제거 */
  overflow: hidden;  /* 긴 텍스트가 폭 밀어넣는거 차단 */
  box-sizing: border-box;
}

/* ✅ 한 줄 고정 + 말줄임 */
.sa-news-date {
  flex: 0 0 74px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

.sa-news-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: rgba(255,255,255,0.86);

  min-width: 0;              /* flex에서 ellipsis 필수 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-news-item:hover {
  border-color: rgba(94,168,255,0.30);
  background: rgba(94,168,255,0.08);
}

.sa-news-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 4px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* =========================
   SA뉴스 카드 크기 강제 고정
   ========================= */
#sa-news.sa-news-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;

  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

#sa-news .sa-news-head,
#sa-news .sa-news-tabs{
  flex: 0 0 auto !important;
}

#sa-news .sa-news-list{
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#sa-news .sa-news-item,
#sa-news .sa-news-text,
#sa-news .sa-news-date{
  white-space: nowrap !important;
}

/* ✅ SA뉴스 카드: 현재 보이는 크기로 완전 고정 */
#sa-news.sa-news-card{
  width: 557px !important;
  min-width: 557px !important;
  max-width: 557px !important;

  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;

  flex: 0 0 557px !important;   /* flex에서 늘어나거나 줄어드는거 방지 */
}

.main-banner .sa-news-col{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

/* 카드 자체도 오른쪽으로 밀어버림(보험) */
#sa-news.sa-news-card{
  margin-left: auto !important;
}

/* ✅ (핵심) 768px 이상에서 메인배너 row를 “양끝 정렬”로 강제 */
@media (min-width: 768px) {
  #main .main-banner .row{
    display: flex !important;
    justify-content: space-between !important;  /* 왼쪽/오른쪽 끝으로 */
    align-items: flex-start !important;
  }

  /* 오른쪽 컬럼 자체를 오른쪽 끝으로 */
  #main .main-banner .sa-news-col{
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* 카드도 한번 더 오른쪽으로 */
  #sa-news.sa-news-card{
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}


/* (선택) 모바일/작은 화면에서는 넘치니까 100%로만 */
@media (max-width: 640px){
  #sa-news.sa-news-card{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}


/* 모바일 */
@media (max-width: 991px) {
  .sa-news-card { height: 300px; }
  #sa-news.sa-news-card{
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}