/* ─────────────────────────────────────────────
   mobile.css · 주식인포 반응형 레이아웃
   (nav/테마/헤더 탭은 common.css 담당)
   ───────────────────────────────────────────── */

/* ─────────────────────────────
   768px 이하
   ───────────────────────────── */
@media (max-width: 768px) {

  /* ── 가로 넘침 방지 ── */
  html, body   { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ── 페이지 레이아웃 ── */
  .hero        { padding: 12px 12px 16px !important; }
  .hero h1     { font-size: 20px !important; }
  .hero p      { font-size: 13px; }
  .page-header { padding: 20px 16px !important; }
  .page-header h1 { font-size: 20px !important; }
  .main        { padding: 12px !important; grid-template-columns: 1fr !important; }
  .breadcrumb  { padding: 10px 16px; }

  /* ── 테이블 ── */
  .table-wrap  { overflow-x: auto; }
  tbody td     { padding: 9px 10px !important; font-size: 12px; }
  thead th     { padding: 8px 10px !important; font-size: 11px; }

  /* ── 모바일 컬럼 숨김 ── */
  .col-mob-hide { display: none !important; }

  /* ── 인덱스 순위 테이블 (index.html) ── */
  .idx-rank-table             { overflow-x: hidden !important; }
  .idx-rank-table table       { table-layout: auto !important; width: 100% !important; }
  .idx-rank-table thead th    { width: auto !important; min-width: 0 !important; }

  /* ── 인덱스 카드 ── */
  .idx-card           { min-width: 160px !important; padding: 10px 12px !important; }
  .idx-spark-labels   { display: none !important; }
  .sparkline          { width: 60px !important; height: 26px !important; }

  /* ── 그리드 ── */
  .grid2, .grid3          { grid-template-columns: 1fr !important; }
  .calc-grid              { grid-template-columns: 1fr !important; }
  .compare-header         { grid-template-columns: 1fr !important; }
  .selector-row           { grid-template-columns: 1fr 40px 1fr !important; }
  .category-grid          { grid-template-columns: 1fr 1fr !important; }
  .detail-grid            { grid-template-columns: 1fr 1fr !important; }
  .popular-grid           { grid-template-columns: 1fr 1fr !important; }
  .broker-grid            { grid-template-columns: 1fr !important; }
  .input-row              { grid-template-columns: 1fr !important; }
  .input-grid             { grid-template-columns: 1fr 1fr !important; }
  .indicator-row          { grid-template-columns: 1fr 1fr !important; }

  /* ── 카드 ── */
  .card        { padding: 16px; }
  .card-title  { font-size: 13px; margin-bottom: 14px; }
  .broker-header { padding: 14px; }
  .broker-body   { padding: 14px; }

  /* ── 히어로 통계 ── */
  .hero-stats          { gap: 10px; }
  .hero-stat           { min-width: 140px; padding: 12px 14px; }
  .hero-stat .value    { font-size: 16px !important; }

  /* ── 종목 상세 ── */
  .stock-header { flex-direction: column; gap: 16px; }
  .stock-stats  {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border, #e0e2e8);
    padding-top: 14px;
    flex-wrap: wrap;
  }
  .stat-item       { min-width: 120px; }
  .stock-name-big  { font-size: 20px !important; }
  .price-big       { font-size: 28px !important; }
  .chart-wrap      { height: 180px !important; }

  /* ── 검색/필터 ── */
  .search-row         { flex-direction: column; }
  .search-row select  { width: 100%; }
  .stats-row          { gap: 8px; }
  .stat-pill          { padding: 6px 12px; font-size: 12px; }

  /* ── 계산기 ── */
  .goal-row     { flex-direction: column; align-items: flex-start; }
  .goal-input   { width: 100% !important; }
  .result-val   { font-size: 18px !important; }
  .result-big .value { font-size: 24px !important; }
  .result-grid  { grid-template-columns: 1fr 1fr !important; }

  /* ── 기타 ── */
  .good-bad     { flex-direction: column; }
  .tabs, .tab-row { overflow-x: auto; }
  .tab, .tab-btn  { white-space: nowrap; }
  .filter-row     { gap: 6px; }
  .filter-btn     { padding: 6px 12px; font-size: 11px; }
  .theme-tabs     { gap: 6px; }
  .theme-tab      { padding: 6px 12px; font-size: 12px; }
  .cat-tabs       { gap: 6px; }
  .cat-tab        { padding: 6px 12px; font-size: 12px; }
  .section-title  { font-size: 14px; }
  .term-header    { flex-wrap: wrap; gap: 8px; }
  .term-short     { margin-left: 0 !important; text-align: left !important; }
  .full-width     { grid-column: 1 !important; }
  .ind-val        { font-size: 14px !important; }
  .pagination     { flex-wrap: wrap; }
  .dart-title     { white-space: normal; }
  .featured-img   { height: 120px; }
}

/* ─────────────────────────────
   480px 이하
   ───────────────────────────── */
@media (max-width: 480px) {
  .hero h1         { font-size: 18px !important; }
  .hero-stats      { flex-direction: column; }
  .hero-stat       { min-width: unset; width: 100%; }
  .result-grid     { grid-template-columns: 1fr !important; }
  .stock-grid      { grid-template-columns: 1fr 1fr !important; }
  .category-grid   { grid-template-columns: 1fr 1fr !important; }
  .col-mob-hide, .col-div-hide { display: none !important; }
  .news-thumb      { display: none; }
  .input-grid      { grid-template-columns: 1fr !important; }
  .indicator-row   { grid-template-columns: 1fr !important; }

  /* ── 인덱스 카드 3열 그리드 ── */
  .index-row   { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; overflow: visible !important; gap: 8px !important; }
  .idx-card    { min-width: 0 !important; padding: 8px !important; }
  .idx-spark   { display: none !important; }
  .idx-value   { font-size: 13px !important; }
  .idx-change  { font-size: 10px !important; }
  .idx-label   { font-size: 10px !important; }

  /* ── 종목명 말줄임 ── */
  .stock-name  { max-width: 90px !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* ── 패딩 최소화 ── */
  .main        { padding: 10px !important; }
  .hero        { padding: 10px 10px 14px !important; }
}