/* ── App Header ── */
.app-header {
  height: var(--header-height);
  padding: 0 var(--space-xl);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header__logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.app-header__title { font-size: 1.1rem; font-weight: 700; color: var(--text-white); }
.app-header__sub   { font-size: .75rem; color: var(--text-dim); }

/* ── App Nav (module links in header) ── */
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: var(--space-xl);
}
.app-nav a {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
}
.app-nav a:hover { color: var(--text-secondary); background: var(--bg-hover); }
.app-nav a.active { color: var(--text-white); background: var(--bg-hover); }

/* 900px 이하(터치 디바이스) 전용 수정.
   원인: 헤더가 좁아지면 플렉스 아이템의 암묵적 min-width:auto(min-content)
   때문에 브랜드/nav 텍스트가 글자 단위로 줄바꿈됨(실측 확인, 스크린샷 첨부).
   901~1900px 데스크톱 구간의 동일 계열 버그는 아래 별도 미디어쿼리에서 처리
   (이 블록은 터치스크롤+44px 터치영역이 필요한 진짜 모바일 전용으로 유지).
   모바일 수정: 로고+브랜드+우측컨트롤(1행) / nav(2행, 가로 스크롤)로 분리.
   단순히 .app-nav만 overflow-x:auto로 주면, 좌우 고정폭이 이미 뷰포트
   대부분을 차지해 nav가 폭 0으로 눌려 스크롤은커녕 아예 안 보이는 문제가
   있었음(실측 확인) — 그래서 nav를 별도 행으로 강제 줄바꿈해 전체 폭을
   확보한 뒤 그 안에서 스크롤시킴. 모바일에서는 hover 자체가 의미 없으므로
   드롭다운 클리핑 트레이드오프도 발생하지 않음.
   선택자를 `.app-header .app-nav`(specificity 0-0-2-0)로 준 이유:
   nav.js가 런타임에 주입하는 NAV_CSS가 `.app-nav{overflow:visible}`을
   layout.css보다 나중에(DOM 삽입 시점) 선언해 동일 명시도면 그쪽이
   이기므로, 명시도를 한 단계 높여 미디어쿼리가 항상 우선하도록 함 */
@media (max-width: 900px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
    padding: 10px var(--space-md);
    row-gap: 8px;
  }
  .app-header__brand { flex-shrink: 0; white-space: nowrap; }
  .app-header__title { white-space: nowrap; }
  .app-header__sub   { white-space: nowrap; }
  .app-header__right { order: 2; flex-shrink: 0; white-space: nowrap; }
  .app-header .app-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-header .app-nav::-webkit-scrollbar { display: none; }
  /* 기존 5px 14px 패딩은 실측 높이 29.7px로 44px 터치 최소기준 미달 —
     모바일에서만 세로 패딩 확대 + nowrap + flex-shrink:0(줄바꿈 방지) */
  .app-header .app-nav a { padding: 13px 14px; white-space: nowrap; flex-shrink: 0; }
}

/* 901~1900px: 데스크톱이지만 좁은 창(예: 1600x900 사무실 모니터, 125%+ 배율)에서
   로고/브랜드/nav 텍스트가 글자 단위로 wrap되는 문제(실측 확인, 스크린샷 첨부).
   모바일과 달리 마우스 hover 드롭다운(.nav-dropdown)이 실사용되므로
   overflow-x:auto(스크롤)는 쓰지 않음 — 대신 nav를 전용 2번째 행으로 내려
   로고/우측컨트롤과 폭을 나눠쓰지 않게 하면 9개 항목이 스크롤 없이도
   한 줄에 들어갈 만큼 폭이 충분해짐(실측: nav 자체 필요폭 ~1350px).
   overflow는 건드리지 않으므로(NAV_CSS 기본값 visible 유지) 드롭다운 클리핑 없음.
   .app-header__right에는 order를 주지 않음 — screener.js 등 일부 페이지가
   #app-header에 "데이터 수집" 버튼을 order 없이(기본값 0) 직접 appendChild하는데,
   right에 order:2를 주면 그 버튼이 order 0인 이 버튼보다 먼저 정렬되어 버튼이
   중간에 붕 뜨는 회귀가 생김(실측 확인). order는 .app-nav 하나에만 줘서
   나머지는 원래 DOM 순서(브랜드→우측컨트롤→페이지별 주입 버튼)를 그대로 유지시킴 */
@media (min-width: 901px) and (max-width: 1900px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
    row-gap: 6px;
  }
  .app-header__brand { flex-shrink: 0; white-space: nowrap; }
  .app-header__title { white-space: nowrap; }
  .app-header__sub   { white-space: nowrap; }
  .app-header__right { flex-shrink: 0; white-space: nowrap; }
  .app-header .app-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .app-header .app-nav a { white-space: nowrap; flex-shrink: 0; }
}

.app-header__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; background: var(--signal-up); border-radius: 50%; box-shadow: 0 0 6px rgba(76,175,80,.6); }
.status-text { font-size: .78rem; color: var(--text-muted); }

/* ── Main layout (two-column: content + market sidebar) ── */
.page-body {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--space-xl) var(--space-2xl);
  gap: var(--space-lg);
}
.page-content { flex: 1; min-width: 0; }

/* ── Screener two-panel layout ── */
.main-layout { display: flex; height: calc(100vh - var(--header-height)); }
.left-panel {
  width: var(--sidebar-width);
  min-width: 260px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: var(--space-sm);
}
.right-panel { flex: 1; overflow-y: auto; padding: var(--space-lg) var(--space-xl); }

/* ── Screener tabs ── */
.tabs { display: flex; gap: 4px; padding: 12px var(--space-xl) 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.tab { padding: 8px 18px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: .85rem; font-weight: 600; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--text-muted); transition: all var(--transition); }
.tab.active { background: var(--bg-base); color: var(--text-white); border-color: var(--border); }
.tab:hover:not(.active) { color: var(--text-secondary); }

/* ── Hub card grid ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.grid-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: var(--space-md); }

/* ── Stats bar ── */
.stats-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 14px var(--space-xl);
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  flex-wrap: wrap;
}
.stat { font-size: .78rem; color: var(--text-dim); }
.stat strong { color: var(--text-secondary); }

/* ── Hero section (hub) ── */
.hero { padding: var(--space-2xl) var(--space-xl) var(--space-xl); text-align: center; }
.hero-eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.hero h2 { font-size: 2rem; font-weight: 700; color: var(--text-white); margin-bottom: 12px; line-height: 1.3; }
.hero h2 span { color: var(--accent); }
.hero p { font-size: .95rem; color: var(--text-muted); max-width: 480px; margin: 0 auto; line-height: 1.7; }