/* =========================
   Extra shared styles
   ========================= */

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

input, select, textarea, button{
  font-family: inherit;
}

input:focus, select:focus, textarea:focus{
  outline:none;
}

/* 페이지 상단 헤더 간격 통일 */
.page-hero{
  margin-top: 4px;
}

/* 링크 버튼 느낌 */
a.pill{ text-decoration:none; }

/* 부드러운 구분선 느낌 */
.hr{
  height:1px;
  background: rgba(229,231,235,.9);
  border:0;
  margin: 16px 0;
}

/* =========================================
   PATCH: spacing + header/menu 안정화 (미세조정)
   - 기존 구조/클래스 유지
   - styles.css로만 제어
   ========================================= */

/* 1) 페이지 전체 상단 여백/히어로 간격 */
.section.hero { padding-top: 26px; }
.page-hero { margin-top: 10px !important; }

/* 2) 헤더 높이/정렬 안정화 */
header .container,
.topbar,
.topbar-inner {
  align-items: center;
}

/* 3) 네비 링크 줄바꿈 방지 */
.nav, nav { flex-wrap: nowrap; }
.nav-link, .navlink { white-space: nowrap; }

/* 4) 드롭다운 레이어 위로 */
.nav-dd-menu, .dropdown { z-index: 2000; }

/* 5) 히어로 버튼 간격 */
.hero-cta, .ctaRow { gap: 12px; }
.hero-cta a, .ctaRow a { text-decoration: none; }

/* 6) 카드 상단 여백 */
.hero-right .card,
.rightStack .card { margin-top: 0; }

/* 7) 모바일에서 상단 메뉴 영역 튐 완화 */
@media (max-width: 720px) {
  .section.hero { padding-top: 18px; }
}

/* =========================================
   ✅ 시장 요약: 2x2 타일을 "정사각형 + 동일비율"로
   - 핵심: 타일 자체를 flex column + aspect-ratio 1/1
   - 위젯 영역(tv-mini)이 남은 높이를 다 먹게 함
   ========================================= */

.twoByTwo{
  align-items: stretch;
}

.market-mini-tile{
  aspect-ratio: 1 / 1;   /* 정사각형 */
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
}

.market-mini-tile .miniTop{
  margin-bottom: 8px;
}

/* ✅ 위젯 컨테이너가 남은 높이를 전부 사용 */
.market-mini-tile .tv-mini{
  flex: 1;
  min-height: 160px; /* app.py 위젯 height 160과 매칭 */
}

/* TradingView iframe이 살짝 잘리는 케이스 방지 */
.tradingview-widget-container iframe,
.market-mini-tile iframe{
  display:block;
  width:100% !important;
}
/* ===== TradingView mini widget force-fit patch ===== */

/* 정사각형 강제 때문에 레이아웃 깨지면 일단 해제 */
.market-mini-tile{
  aspect-ratio: auto !important;
  display: flex;
  flex-direction: column;
}

/* 헤더(타이틀) + 위젯 높이를 안정적으로 확보 */
.market-mini-tile{
  min-height: 240px !important;
}

/* 위젯이 들어갈 영역을 "박스 안"으로 강제 */
.market-mini-tile .tv-mini{
  height: 160px !important;
  overflow: hidden !important;
  border-radius: 14px;
}

/* TradingView가 만드는 내부 div/iframe까지 높이 강제 */
.market-mini-tile .tv-mini > div,
.market-mini-tile .tv-mini iframe{
  height: 160px !important;
  width: 100% !important;
  display: block !important;
}