:root {
  /* 기본은 다크 모드 */
  --color-bg: #1a1a1a;
  --color-header: #1a1a1a;
  --color-accent: #1a1a1a;
  --color-header-line: #ffd800;
  --color-card-bg: #222222;
  --color-text-main: #f5f5f5;
  --color-text-muted: #a0a0a0;
  --radius-card: 16px;
  --color-rank-bg: #333333;
  --color-rank-text: #ffffff;
  /* 고스트 버튼 (자세히 보기) 기본값: 다크 모드 기준 */
  --color-ghost-bg: transparent;
  --color-ghost-border: rgba(255, 255, 255, 0.4);
  --color-ghost-text: #ffffff;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.45);

  /* 태그/라벨 공통 색상 (다크: 노란 배경 + 검정 글자) */
  --color-tag-bg: #ffd800;
  --color-tag-text: #1a1a1a;

  /* 디테일 영향분석 박스 */
  --color-impact-card-bg: #ffffff;
  --color-impact-card-text: #000000;
  --color-impact-label-bg: #000000;
  --color-impact-label-text: #ffffff;

  /* 헤더 전경색(아이콘/텍스트) */
  --header-fg: #ffffff;

  /* 공용 CTA 버튼 (impact 페이지 마지막 버튼용) */
  --color-cta-bg: #ffffff;
  --color-cta-text: #000000;

  /* 안드로이드/ios 상태바 safe-area */
  --sat: env(safe-area-inset-top, 0px);
}

/* 기준값(다크 모드) */
:root {
  --color-ghost-bg: transparent;
  --color-ghost-border: rgba(255, 255, 255, 0.4);
  --color-ghost-text: #ffffff;
}

/* 라이트 모드 */
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-header: #ffffff;
  --color-accent: #1a1a1a;
  --color-header-line: #1a1a1a;
  --color-card-bg: #f5f5f5;
  --color-text-main: #1a1a1a;
  --color-text-muted: #555555;
  --color-rank-bg: #e0e0e0;
  --color-rank-text: #000000;
  /* 라이트 모드용 고스트 버튼 */
  --color-ghost-bg: transparent;
  --color-ghost-border: rgba(0, 0, 0, 0.4);
  --color-ghost-text: #000000;
  --color-ghost-bg: transparent;
  --color-ghost-border: rgba(0, 0, 0, 0.4);
  --color-ghost-text: #000000;

  /* 라이트: 라벨 = 블랙 배경 + 흰 글자 */
  --color-tag-bg: #000000;
  --color-tag-text: #ffffff;

  /* 라이트 모드 영향분석 박스 (진한 배경 + 흰 글씨 유지) */
  --color-impact-card-bg: #1a1a1a;
  --color-impact-card-text: #ffffff;
  --color-impact-label-bg: #1a1a1a;
  --color-impact-label-text: #ffffff;

  /* 헤더 전경색(아이콘/텍스트) */
  --header-fg: #000000;

  /* CTA 반전 */
  --color-cta-bg: #000000;
  --color-cta-text: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100% !important;
}

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  /* 상단 safe-area 패딩은 헤더에서 처리 */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
}

button {
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  background: none;
}

/* 앱 전체 래퍼 */
.app {
  min-height: 100vh;
}

/* ========================
   헤더
======================== */

/* 헤더 쪽 색 정리 */
.nus-header {
  position: fixed;                 /* 상단 고정 */
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--sat) + 10px); /* 상태바 높이 + 여유 */
  height: auto;                     /* 자동 높이 */
  background-color: var(--color-header);
  z-index: 1000;
  display: flex;
  width: 100%;
  flex-direction: column;
  color: var(--header-fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); /* 살짝 그림자 */
}

/* 상단 바 (위로 접히는 영역) */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  max-height: 48px;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.25s ease;
}

.header-date {
  font-size: 16px; /* 13px → 16px */
  opacity: 0.8;
}

.header-logo {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 21px; /* 18px → 21px */
}

.header-logo span {
  color: var(--header-fg);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 35px; /* 32px → 35px */
  height: 35px; /* 32px → 35px */
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-fg);
  font-size: 17px; /* 14px → 17px */
}

/* 탭바 (항상 상단에 고정되도록 헤더 내부에 유지) */
.header-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid var(--color-header-line);
  background-color: var(--color-header);
}

.tab-nav {
  display: flex;
  overflow-x: auto;
  padding: 6px 8px;
  gap: 4px;
  justify-content: center; /* 웹 기본 중앙 정렬 */
}

.tab-nav::-webkit-scrollbar {
  height: 0;
}

/* 앱(WebView)에서는 좌측 정렬 유지 */
:is(html, body).is-app .tab-nav {
  justify-content: flex-start;
}

.tab-btn {
  position: relative;
  padding: 6px 12px 8px;
  font-size: 14px; /* 13px → 14px */
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.tab-btn.is-active {
  color: #ffffff;
  font-weight: 600;
}

.tab-btn.is-active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--color-header-line);
}

/* 헤더 스크롤 시 상단바 접힘 */
.nus-header.is-scrolled .header-top {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden; /* 내용 깔끔히 숨김 */
}

/* ========================
   메인
======================== */

.nus-main {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto 32px;
  /* 고정 헤더 높이만큼 여백 확보 (탭까지 포함) */
  padding-top: 120px;
}

/* 섹션 기본 */
.section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-title {
  margin: 0;
  font-size: 17px; /* 16px → 17px */
  font-weight: 700;
}

.section-more-btn {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
}

/* ========================
   공통 카드 컨테이너 & 아이템
======================== */

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.news-card {
  padding: 12px 16px;
  cursor: pointer;
}

.news-list .news-card + .news-card {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 속보 래퍼 */
.breaking-card-wrapper {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px;
  cursor: pointer;
}

.breaking-card-wrapper .news-card {
  padding: 0;
}

/* 공통 텍스트들 */

.news-title {
  font-size: 17px; /* 16px → 17px */
  font-weight: 700;
  line-height: 1.4;
}

.news-impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* 태그 박스 */
.impact-tag {
  font-size: 12px; /* 11px → 12px */
  padding: 3px 8px;
  border-radius: 999px;
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-weight: 600;
}

/* 헤더 검색 영역 */
.header-search {
  display: none;
  padding: 8px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background-color: var(--color-header);
}

.header-search.is-open {
  display: block;
}

:root[data-theme='light'] .header-search {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.header-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--color-card-bg);
}

/* 디테일 300x250 광고 박스 */
.ad-rect {
  width: 300px;
  height: 250px;
  margin: 8px auto 16px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-inner i {
  font-size: 15px; /* 14px → 15px */
  color: var(--color-text-muted);
}

.header-search-inner input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
  font-size: 14px; /* 13px → 14px */
}

/* 마지막 "다른 기사 보기" 버튼용 공통 스타일 */
.btn-more-articles {
  width: 100%;
  height: 40px;
  border-radius: 999px;
  border: none;
  outline: none;
  margin: 16px 0 24px;
  font-size: 15px; /* 14px → 15px */
  font-weight: 600;
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  cursor: pointer;
}

.news-meta {
  margin-top: 4px;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ========== 2. 추천 뉴스 리스트 ========== */

.news-card.horizontal {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 10px;
  align-items: stretch;
}

.news-card.horizontal .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-card.horizontal .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.news-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, #373737, #4e4e4e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

/* ✅ 인기 탭에서 사용하는 news-thumb 스타일 추가 */
.news-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, #373737, #4e4e4e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.news-source {
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

/* ========== 3. 광고 배너 ========== */

.section-ad {
  margin-top: 24px;
}

.ad-banner {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
}

.ad-label {
  font-size: 12px; /* 11px → 12px */
  padding: 3px 8px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #ffffff;
}

.ad-text {
  font-size: 14px; /* 13px → 14px */
  color: var(--color-text-main);
}

/* ========== 4. 태그 뉴스 ========== */

.section-tag-news .news-list {
  margin-top: 8px;
}

.small-cards .news-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.small-cards .news-title {
  font-size: 15px; /* 14px → 15px */
}

/* 관심 태그 영역 */
.tag-filter-wrapper {
  margin-top: 4px;
}

.tag-filter-label {
  font-size: 13px; /* 12px → 13px */
  margin-bottom: 4px;
  color: var(--color-text-muted);
}

/* 좌우 슬라이드 가능 */
.tag-filter-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 6px;
  -webkit-overflow-scrolling: touch;
}

.tag-filter-list::-webkit-scrollbar {
  height: 4px;
}

.tag-filter-list::-webkit-scrollbar-track {
  background: transparent;
}

.tag-filter-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

/* 태그 버튼 */
.tag-btn {
  font-size: 12px; /* 11px → 12px */
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-weight: 600;
  opacity: 0.65;
  white-space: nowrap;
}

.tag-btn.is-active {
  opacity: 1;
}

/* ========== 5. 실시간 이슈 리스트 (홈) ========== */

.trending-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ✅ 터치 영역 확대 */
.trending-item {
  padding: 14px 18px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px; /* 14px → 15px */
}

.trending-item + .trending-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trending-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.trending-rank {
  font-size: 13px; /* 12px → 13px */
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--color-rank-bg);
  color: var(--color-rank-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trending-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-icon {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
  flex-shrink: 0; /* 🔹 아이콘이 오른쪽에 고정되도록 */
  margin-left: 8px;
}

/* 탭 패널 */
.tab-panel {
  display: none;
}

.tab-panel.is-visible {
  display: block;
}

/* 플레이스홀더 */
.placeholder {
  margin-top: 40px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 15px; /* 14px → 15px */
}

/* ========================
   디테일 뷰 (전체 화면 모달)
======================== */

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.detail-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.detail-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  max-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  overflow-x: hidden;
}

.detail-main {
  padding: 12px 16px 24px;
}

/* 디테일 상단 바 */
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.detail-header-title {
  font-size: 14px; /* 13px → 14px */
  color: var(--color-text-muted);
}

/* 디테일 메인 */
.detail-image {
  width: 100%;
  height: 30vh;
  min-height: 180px;
  border-radius: 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #3a3a3a, #585858);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
}

.detail-title {
  font-size: 21px; /* 20px → 21px */
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 8px;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.detail-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.detail-meta-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-meta-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px; /* 13px → 14px */
}

.detail-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 10px 0;
}

.detail-excerpt {
  font-size: 15px; /* 14px → 15px */
  line-height: 1.6;
  color: var(--color-text-main);
  margin: 0 0 12px;
}

/* 공통 버튼 스타일 */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #111111;
  font-size: 14px; /* 13px → 14px */
  font-weight: 600;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-ghost-border);
  background: var(--color-ghost-bg);
  color: var(--color-ghost-text);
  font-size: 13px; /* 12px → 13px */
  cursor: pointer;
}

/* 선택이지만, 살짝 호버 효과도 넣고 싶으면 */
:root[data-theme="dark"] .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .ghost-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* 영향 분석 카드 */
.detail-impact-card {
  background-color: var(--color-impact-card-bg);
  color: var(--color-impact-card-text);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
}

.detail-impact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.detail-impact-label {
  font-size: 13px; /* 11px → 12px */
  padding: 3px 8px;
  border-radius: 999px;
  background-color: var(--color-impact-label-bg);
  color: var(--color-impact-label-text);
  width: 90px;
}

.detail-impact-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.detail-impact-text {
  font-size: 14px; /* 13px → 14px */
  line-height: 1.6;
  margin: 4px 0 10px;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 디테일 광고 */
.section-detail-ad {
  margin-bottom: 16px;
}

/* 디테일 추천 뉴스 */
.section-detail-recommend .news-list {
  margin-top: 6px;
}

/* 반응형 */
@media (min-width: 768px) {
  .nus-main {
    padding: 20px;
    padding-top: 120px;
  }

  .section-title {
    font-size: 18px; /* 17px → 18px */
  }

  .news-card.horizontal {
    grid-template-columns: 2fr 1.3fr;
  }

  .detail-container {
    border-radius: 24px;
    margin-top: 16px;
    overflow: hidden;
  }

  .detail-main {
    padding: 16px 20px 28px;
  }
}

/* ========== 실검 카드 레이아웃 (추가용) ========== */

.section-realtime {
  margin-bottom: 24px;
}

.realtime-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-card.realtime {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px 16px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.realtime-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.realtime-rank-badge {
  font-size: 12px; /* 11px → 12px */
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #333333;
  color: #ffffff;
  font-weight: 600;
}

.realtime-impact-tag {
  font-size: 12px; /* 11px → 12px */
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-weight: 600;
}

.realtime-body {
  margin-top: 4px;
  margin-bottom: 12px;
}

.realtime-title {
  font-size: 19px; /* 18px → 19px */
  line-height: 1.5;
  margin: 0 0 6px;
}

.realtime-excerpt {
  font-size: 14px; /* 13px → 14px */
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.realtime-thumb {
  width: 100%;
  height: 20vh;
  min-height: 140px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a3a3a, #585858);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.realtime-meta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px; /* 11px → 12px */
}

.realtime-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.realtime-meta-left .news-source {
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.realtime-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  font-size: 12px; /* 11px → 12px */
  font-weight: 500;
}

.realtime-action-btn .divider {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .news-card.realtime {
    min-height: 50vh;
  }

  .realtime-title {
    font-size: 21px; /* 20px → 21px */
  }
}

/* ========== 속보 탭 ========== */

.section-breaking-tab {
  margin-bottom: 24px;
}

.breaking-top-wrapper {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.breaking-top-wrapper .news-list .news-card {
  padding: 12px 16px;
}

.breaking-top-title {
  font-size: 17px; /* 16px → 17px */
  font-weight: 700;
  line-height: 1.4;
}

.breaking-bottom-row,
.breaking-feed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.breaking-bottom-row .news-impact-tags,
.breaking-feed-meta .news-impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
}

.breaking-bottom-row .news-meta,
.breaking-feed-meta .news-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.breaking-feed-list .news-card {
  padding: 10px 14px;
}

.breaking-feed-list .news-title {
  font-size: 15px; /* 14px → 15px */
}

.breaking-ad {
  margin-top: 20px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .breaking-feed-list .news-card {
    padding: 12px 16px;
  }
}

/* ========== 카테고리 탭 ========== */

.section-category {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.category-main-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px 18px;
  cursor: pointer;
}

.category-main-thumb {
  width: 100%;
  height: 28vh;
  min-height: 180px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3a3a3a, #585858);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.category-main-title {
  font-size: 19px; /* 18px → 19px */
  line-height: 1.5;
  margin: 0 0 6px;
}

.category-main-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.category-main-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; /* 11px → 12px */
  flex-wrap: wrap;
  color: var(--color-text-muted);
}

.category-main-meta-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.section-category-sub {
  margin-top: -4px;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.category-sub-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 10px 12px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-sub-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a3a3a, #585858);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.category-sub-title {
  font-size: 15px; /* 14px → 15px */
  line-height: 1.5;
  margin: 0;
}

.category-sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.category-sub-meta .news-impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
}

.category-sub-meta .news-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
}

.section-category-recommend {
  margin-top: 4px;
}

.section-category-trending {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .category-main-title {
    font-size: 21px; /* 20px → 21px */
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 이미지 썸네일 공통 스타일 */
.news-thumbnail img,
.news-thumb img,
.realtime-thumb img,
.category-main-thumb img,
.category-sub-thumb img,
.detail-image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* 카드 안 AI 영향 요약 */
.impact-preview {
  margin-top: 6px;
  font-size: 13px; /* 12px → 13px */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 실시간 이슈 리스트 큰 화면 여유 */
@media (min-width: 768px) {
  .trending-item {
    min-height: 56px;
  }
}

/* === THEME TOKEN / 인기 탭 레이아웃(하단부) 등
   (기존에 추가로 들어 있던 토큰/레이아웃 부분은
    기능상 문제 없어서 그대로 유지) ================= */

/* ... (이미 저장되어 있던 :root / header-fg / popular-wrap 등 토큰/레이아웃) ... */

.popular-wrap {
  display: grid;
  gap: 16px;
  width: 100%;          /* ✅ 부모 기준 100% */
  box-sizing: border-box;
}

/* 🔧 popular-wrap 직속 자식 그리드들은 내용이 커도 줄어들 수 있게 */
.popular-wrap > * {
  min-width: 0;          /* ✅ 텍스트 때문에 가로로 튀어나가는 것 방지 */
}

.popular-top3 {
  display: grid;
  gap: 12px;
}

.popular-top3 .news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;  /* ✅ 왼쪽 칼럼이 줄어들 수 있게 */
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}


.popular-next2 {
  display: grid;
  gap: 12px;
}

.popular-next2 .news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;  /* ✅ 동일하게 minmax 적용 */
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.popular-recommend {
  margin-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.popular-recommend .news-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;  /* ✅ 좌측 텍스트 칼럼 수축 허용 */
  align-items: center;
  min-width: 0;
}

.popular-recommend .news-mini .meta {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* 디테일 광고 래퍼 */
.ad-wrap {
  min-height: 100px;
  display: block;
  margin: 12px 0;
}

@media (min-width: 768px) {
  .ad-wrap {
    min-height: 90px;
  }
}

/* 추천 뉴스 박스 안 기사 구분선 */
.section-recommend-list .recommend-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 16px;
}

:root[data-theme="light"] .section-recommend-list .recommend-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* 라이트 모드에서 검색창 박스 톤 살짝 어둡게 */
:root[data-theme='light'] .header-search-inner {
  background-color: #e5e5e5;
}

:root[data-theme='light'] .tab-btn {
  color: rgba(0, 0, 0, 0.6);
}

:root[data-theme='light'] .tab-btn.is-active {
  color: #000000;
}

/* 라이트 모드에서 디테일 뷰 */
:root[data-theme="light"] .detail-overlay {
  background: rgba(0, 0, 0, 0.4); /* 오버레이는 살짝 어둡게 유지 */
}

:root[data-theme="light"] .detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .detail-icon-btn,
:root[data-theme="light"] .detail-meta-btn {
  color: #000000;
}

:root[data-theme="light"] .detail-divider {
  border-top-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .detail-image {
  background: #f5f5f5;
}

:root[data-theme="light"] .detail-excerpt {
  color: var(--color-text-main);
}

/* =========================
   검색 결과 섹션
========================= */

.section-search-results {
  padding: 16px 16px 8px;
}

.section-search-results[hidden] {
  display: none;
}

.search-result-meta {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
  margin: 4px 0 10px;
}

/* 검색 중일 때 탭 패널 숨기기 */
.tab-panel.is-hidden-by-search {
  display: none;
}

/* 라이트 모드에서 카드 본문은 어두운 글자 */
:root[data-theme="light"] .impact-preview {
  color: rgba(0, 0, 0, 0.75);
}

/* ============================
   #영향 탭 : 라벨별 / 인기 라벨
============================ */

/* #영향 탭 전체 기본 여백 */
.tab-panel[data-tab-panel="impact"] .section {
  margin-top: 12px;
}

/* 300x50 광고 배너 (가로 센터) */
.section-ad-small .ad-banner {
  max-width: 300px;
  margin: 12px auto 16px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--color-card-bg);
  display: block;
  align-items: center;
  justify-content: center;
}

.section-ad-small .ad-banner ins {
  display: inline-block;
  width: 300px;
  height: 50px;
}

/* ============================
   인기 라벨 아코디언
============================ */

.impact-popular-labels {
  margin-top: 8px;
}

.impact-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 한 줄(1위, 2위…) */
.impact-popular-item {
  background: var(--color-card-bg);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px; /* 13px → 14px */
  cursor: pointer;
}

/* 헤더 영역 (순위/라벨/기사수 + 아이콘) */
.impact-popular-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.impact-popular-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.impact-popular-rank {
  font-size: 13px; /* 12px → 13px */
  font-weight: 600;
  color: var(--color-text-muted);
}

.impact-popular-label {
  font-size: 14px; /* 13px → 14px */
  font-weight: 600;
  color: var(--color-text-main);
}

.impact-popular-count {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
}

/* 오른쪽 + 아이콘 */
.impact-popular-toggle {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; /* 12px → 13px */
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-main);
  flex-shrink: 0;
}

/* 펼쳤을 때 아이콘 회전 */
.impact-popular-item.is-open .impact-popular-toggle {
  transform: rotate(45deg); /* + → x 느낌 */
}

/* 접혀 있을 때는 기사 리스트 숨김 */
.impact-popular-articles {
  display: none;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 열렸을 때만 보여주기 */
.impact-popular-item.is-open .impact-popular-articles {
  display: block;
}

/* 인기 라벨 안에 들어가는 미니 기사 카드들 */
.impact-popular-articles .mini-article {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.impact-popular-articles .mini-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

.impact-popular-articles .mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.impact-popular-articles .mini-title {
  font-size: 13px; /* 12px → 13px */
  line-height: 1.35;
  color: var(--color-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 라이트 모드용 살짝 톤 조정 */
[data-theme="light"] .impact-popular-item {
  background: #ffffff;
}

[data-theme="light"] .impact-popular-articles {
  border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .impact-popular-toggle {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .impact-popular-rank {
  color: #777777;
}

/* ============================
   #영향 탭 : 라벨별 / 인기 라벨
============================ */

/* #영향 탭 전체 기본 여백 */
.tab-panel[data-tab-panel="impactLabel"] .section {
  margin-top: 12px;
}

/* 300x50 광고 배너 (가로 센터) – 필요시 사용 */
.section-ad-small .ad-banner {
  max-width: 300px;
  margin: 12px auto 16px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--color-card-bg);
  display: block;
  align-items: center;
  justify-content: center;
}

.section-ad-small .ad-banner ins {
  display: inline-block;
  width: 300px;
  height: 50px;
}

/* ========== 인기 라벨 아코디언 (새 구조) ========== */

.impact-labels-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 한 줄(1위, 2위…) */
.impact-label-row {
  background: var(--color-card-bg);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px; /* 13px → 14px */
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* 헤더 영역 (순위/라벨/기사수 + 아이콘) */
.impact-label-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.impact-label-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.impact-label-rank {
  font-size: 13px; /* 12px → 13px */
  font-weight: 600;
  color: var(--color-text-muted);
}

.impact-label-name {
  font-size: 14px; /* 13px → 14px */
  font-weight: 600;
  color: var(--color-text-main);
}

.impact-label-count {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
}

/* 오른쪽 + 아이콘 */
.impact-label-toggle {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; /* 12px → 13px */
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-main);
  flex-shrink: 0;
}

/* 펼쳤을 때 아이콘 회전 */
.impact-label-row.is-open .impact-label-toggle {
  transform: rotate(45deg); /* + → x 느낌 */
}

/* 접혀 있을 때는 기사 리스트 숨김 */
.impact-label-body {
  display: none;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 열렸을 때만 보여주기 */
.impact-label-row.is-open .impact-label-body {
  display: block;
}

/* 인기 라벨 안에 들어가는 미니 기사 카드들 */
.impact-label-article {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.impact-label-article-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

.impact-label-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nus-footer-links a{
  color:var(--color-text-main);
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  width: auto;
}
.impact-label-article-text .news-title {
  font-size: 13px; /* 12px → 13px */
  line-height: 1.35;
  color: var(--color-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 라이트 모드용 살짝 톤 조정 */
[data-theme="light"] .impact-label-row {
  background: #ffffff;
}

[data-theme="light"] .impact-label-body {
  border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .impact-label-toggle {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .impact-label-rank {
  color: #777777;
}

/* =========================
   검색 결과 섹션 (중복 정의 부분 유지)
========================= */

.section-search-results {
  padding: 16px 16px 8px;
}

.section-search-results[hidden] {
  display: none;
}

.search-result-meta {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
  margin: 4px 0 10px;
}

/* 검색 중일 때 탭 패널 숨기기 */
.tab-panel.is-hidden-by-search {
  display: none;
}

/* 라이트 모드에서 카드 본문은 어두운 글자 */
:root[data-theme="light"] .impact-preview {
  color: rgba(0, 0, 0, 0.75);
}

/* ===========================
   🔧 모바일 가로 스크롤 방지 패치
=========================== */

/* 1) 광고 배너 width 고정 방지 */
.ad-banner ins {
  width: 100% !important;
  max-width: 300px;
  height: 250px;
}

/* 2) 메인 컨테이너 패딩 최적화 (헤더 높이 포함) */
.nus-main {
  padding: 12px;
  max-width: 720px;
  margin: 0 auto 32px;
  padding-top: 160px;
}

/* 3) 푸터 텍스트 줄바꿈 & 오버플로우 방지 */
.nus-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  word-break: break-all;
}

/* =========================
   N:US 공통 푸터
========================= */

.nus-footer {
  width: 100%;
  margin-top: 24px;
  padding-bottom: 80px;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}

/* 상단 구분선 */
.nus-footer-divider {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

:root[data-theme='light'] .nus-footer-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* 안쪽 컨테이너 (본문 max-width와 통일) */
.nus-footer-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 0;
}

/* 로고 + 메타 정보 줄 */
.nus-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap; /* 🔹 좁은 화면에서 자연스럽게 줄바꿈 */
}

/* 로고 */
.nus-footer-logo {
  font-weight: 800;
  font-size: 17px; /* 16px → 17px */
  letter-spacing: 0.08em;
  color: var(--color-text-main);
}

.nus-footer-logo span {
  color: var(--color-tag-bg); /* 라벨과 톤 맞춰 하이라이트 */
}

/* Brand / 이메일 */
.nus-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px; /* 11px → 12px */
  color: var(--color-text-muted);
  text-align: right;
  word-break: break-all; /* 🔹 긴 이메일 주소 줄바꿈 */
}

.nus-footer-dot {
  opacity: 0.5;
}

/* 앱 설명 문구 */
.nus-footer-desc {
  margin: 8px 0 0;
  font-size: 13px; /* 12px → 13px */
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: left;
}

/* 작은 화면에서 중앙 정렬 느낌 살리기 */
@media (max-width: 480px) {
  .nus-footer-top {
    justify-content: center;
    text-align: center;
  }

  .nus-footer-meta {
    justify-content: center;
    text-align: center;
  }

  .nus-footer-desc {
    text-align: center;
  }
}

/* 모바일 안전 영역 패딩 (상단 상태바 / 하단 제스처바 대비) */

.web-ad-only {
  display: block;
}

.app-ad-only {
  display: none;
}

/* 앱(WebView)일 때는 반대로 */
:is(html, body).is-app .web-ad-only {
  display: none;
}

:is(html, body).is-app .app-ad-only {
  display: block;
}

/* 🔔 푸시 알림 동의 모달 */
/* 기본: 숨김 + 중앙 정렬 준비 */
#pushConsentLayer {
  position: fixed;
  inset: 0;
  display: none; /* 기본은 안 보이게 */
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

/* is-active 붙었을 때만 flex로 보여주기 (정중앙) */
#pushConsentLayer.is-active {
  display: flex;
}

/* 실제 모달 박스 */
.push-consent-box {
  width: 100%;
  max-width: 360px;
  border-radius: 18px;
  padding: 18px 18px 14px;
  background: var(--color-card-bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  color: var(--color-text-main);
  text-align: left;
  animation: push-modal-fade-up 0.22s ease-out;
}

.push-consent-title {
  font-size: 17px; /* 16px → 17px */
  font-weight: 700;
  margin: 0 0 6px;
}

.push-consent-desc {
  font-size: 14px; /* 13px → 14px */
  line-height: 1.5;
  margin: 0 0 10px;
}

.push-consent-highlight {
  font-size: 13px; /* 12px → 13px */
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.push-consent-actions {
  display: flex;
  gap: 8px;
}

/* 버튼들 공통 */
.push-consent-actions .primary-btn,
.push-consent-actions .ghost-btn {
  flex: 1;
  height: 40px;
  border-radius: 999px;
  font-size: 14px; /* 13px → 14px */
}

/* “다음에 할래요” 버튼 */
.push-consent-actions .ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--color-text-main);
}
#btnImpactMore{
  width: 100%;
}
/* 라이트 모드 보정 */
[data-theme="light"] .push-consent-box {
  background: #ffffff;
}

[data-theme="light"] .push-consent-actions .ghost-btn {
  border-color: rgba(0, 0, 0, 0.12);
}

/* 살짝 떠오르는 애니메이션 */
@keyframes push-modal-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 📱 모바일에서 탭은 좌측 정렬 + 스크롤 */
@media (max-width: 480px) {
  .header-tabs .tab-nav {
    justify-content: flex-start;
  }
}
/* 예시: 헤더 검색 영역 래퍼가 .header-search-panel 이라고 가정 */
.header-search-panel {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* search.js 에서 토글하는 "is-open" 클래스에 맞춰 애니메이션 */
.header-search-panel.is-open {
  max-height: 200px; /* 실제 높이에 맞게 조정 */
  opacity: 1;
  transform: translateY(0);
}
/* 아코디언 내용 기본 상태 */
.impact-label-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* 열려 있을 때 */
.impact-label-row.is-open .impact-label-body {
  max-height: 600px; /* 내용 최대 높이에 맞게 조정 */
  opacity: 1;
  transform: translateY(0);
}

/* 헤더 아이콘 회전 효과 ( + → x 같은 느낌 ) */
.impact-label-row .impact-label-toggle {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.impact-label-row.is-open .impact-label-toggle {
  transform: rotate(45deg);
  opacity: 0.7;
}
/* 탭 전환 애니메이션 */
@keyframes tabFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-panel.tab-animate {
  animation: tabFadeUp 0.28s ease-out;
}
.section-ad {
  width: 100%;
  padding: 10px 0;
}

.section-ad .ad-slot {
  width: 100%;
  display: block;
}

.section-ad ins.adsbygoogle {
  width: 100% !important;
  display: block !important;
}
.ad-slot {
  flex-shrink: 0 !important;
}
.section-ad,
.ad-slot,
.ad-slot ins.adsbygoogle {
  width: 100% !important;
  display: block !important;
  min-height: 50px; /* 50~90px 정도면 OK */
}
.section-popular .news-list {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.section-popular {
  width: 100% !important;
}