/* 해외 증권 뉴스 페이지 — overseas_market.css 와 같은 문법, 색상은 슬레이트/앰버. */
.overseas-news-page {
  --on-primary: #b45309;
  --on-primary-soft: rgba(180, 83, 9, 0.1);
  --on-card: #ffffff;
  --on-border: #e8e4dc;
  --on-text: #1f2230;
  --on-muted: #7a8096;
  color: var(--on-text);
}

/* Hero */
.on-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26px 28px;
  background: linear-gradient(135deg, #78350f, #d97706);
  border-radius: 18px;
  color: #fff;
  margin-bottom: 26px;
}
.on-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin: 0 0 6px;
}
.on-hero h1 {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.on-hero-text {
  font-size: 0.92rem;
  opacity: 0.9;
  margin: 0;
  max-width: 560px;
}
.on-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.on-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  margin: 0;
}
.on-auto-toggle input { cursor: pointer; }

/* Buttons */
.on-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.15s ease;
}
.on-btn:active { transform: translateY(1px); }
.on-btn i { margin-right: 5px; }
.on-btn-ghost-light {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.on-btn-ghost-light:hover { background: rgba(255, 255, 255, 0.25); }
/* 아이콘 단독 버튼 (a 태그 — 네이버 증권 새 창) */
.on-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 14px;
}
.on-btn-icon i { margin-right: 0; }
.on-btn-icon:hover { color: #fff; }
.on-btn-outline {
  background: #fff;
  color: var(--on-primary);
  border: 1px solid var(--on-primary);
}
.on-btn-outline:hover { background: var(--on-primary-soft); }

/* 파일 폴더형 탭: 활성 탭은 본문과 같은 배경 + 아래 경계선 제거로 이어져 보이고,
   비활성 탭 사이에는 경계선이 남는다. (overseas_market.css 와 동일 패턴) */
.on-folder { margin-bottom: 26px; }
.on-tabs {
  display: flex;
  gap: 0;
  position: relative;
  z-index: 2;
  margin-bottom: -1px; /* 본문 상단 테두리와 1px 겹쳐 활성 탭이 연속되게 */
  overflow-x: auto;
  scrollbar-width: none;
}
.on-tabs::-webkit-scrollbar { display: none; }
.on-tab {
  flex: 0 0 auto;
  border: 1px solid var(--on-border);
  border-radius: 10px 10px 0 0;
  background: #f3efe7;
  color: var(--on-muted);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.on-tab + .on-tab { margin-left: -1px; } /* 탭 사이 경계선은 한 줄만 */
.on-tab.active {
  background: var(--on-card);
  color: var(--on-primary);
  border-bottom-color: var(--on-card); /* 본문과 경계선 없이 연속 */
  position: relative;
  z-index: 3;
}

/* 폴더 본문: 탭 아래 큰 카드. 필터/리스트가 담긴다. */
.on-folder-body {
  background: var(--on-card);
  border: 1px solid var(--on-border);
  border-radius: 0 12px 12px 12px;
  padding: 16px 18px 18px;
}

/* 필터 바 */
.on-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.on-nation-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.on-chip {
  border: 1px solid var(--on-border);
  background: #fff;
  color: var(--on-muted);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.on-chip.active {
  background: var(--on-primary);
  border-color: var(--on-primary);
  color: #fff;
}
.on-class-select { width: auto; min-width: 130px; font-size: 0.85rem; }
.on-search-input { width: auto; min-width: 200px; flex: 1; max-width: 320px; font-size: 0.85rem; }

/* 뉴스 리스트 */
.on-list {
  background: var(--on-card);
  border: 1px solid var(--on-border);
  border-radius: 14px;
  overflow: hidden;
}
.on-date-sep {
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-muted);
  background: #faf8f4;
  border-bottom: 1px solid var(--on-border);
}
.on-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--on-border);
  font-size: 0.9rem;
}
.on-row:last-child { border-bottom: none; }
.on-row:hover { background: #fdfaf5; }
.on-time {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--on-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.on-badges { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.on-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--on-primary-soft);
  border-radius: 5px;
  padding: 1px 7px;
  white-space: nowrap;
}
.on-title { flex: 1 1 auto; min-width: 0; word-break: break-all; }
.on-symbol {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2f6fed;
  background: rgba(47, 111, 237, 0.08);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.on-source {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--on-muted);
  white-space: nowrap;
}
.on-empty {
  margin: 0;
  padding: 36px 18px;
  text-align: center;
  color: var(--on-muted);
  font-size: 0.88rem;
}

.on-status {
  margin: 10px 4px 0;
  font-size: 0.76rem;
  color: var(--on-muted);
}
.on-more { text-align: center; margin-top: 14px; }

@media (max-width: 576px) {
  .on-hero { padding: 20px; }
  .on-row { flex-wrap: wrap; gap: 4px 10px; }
  .on-title { flex-basis: 100%; order: 3; }
}