/* ============================================================
   mobile.css — 모바일/좁은 화면 최적화 (전 페이지 공통)
   stockclone.css 뒤에 로드. 768px 이하에서만 동작(데스크탑 무영향).
   "CSS 띠" 한 장으로 반응형을 모아 관리.
   ============================================================ */

/* 모바일 하단 탭바·더보기 시트 — 데스크탑에선 항상 숨김(미디어쿼리 밖) */
.m-tabbar, .m-sheet, .m-sheet-backdrop { display: none; }

@media (max-width: 768px) {

  /* ── 전역 ── */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  * { -webkit-tap-highlight-color: transparent; }

  /* ── 상단 네비·시세띠·테스트배너: 모바일에선 전부 숨김 ──
     (로고 없이 네비는 하단 탭바만. 사용자 요청) */
  .site-nav, .test-banner { display: none !important; }

  /* ── 레이아웃: 단일 컬럼 + 패딩 축소 ── */
  .layout {
    grid-template-columns: 1fr !important;
    gap: 16px; padding: 14px;
  }
  aside { width: 100%; }

  /* ── 카드 패딩 축소 ── */
  .card { padding: 16px !important; border-radius: 14px; }
  .side-card { padding: 16px 16px !important; }

  /* ── 헤더 타이포 ── */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }

  /* ── 홈: 좌우 2단(카테고리|콘텐츠) → 세로 1단 ── */
  .home-shell {
    display: block !important;            /* grid 해제 — 자식이 순서대로 세로 적층 */
    padding: 12px !important; max-width: 100% !important;
  }
  /* 그리드 자식이 콘텐츠 때문에 안 줄어드는 문제 방지 */
  .home-shell > * { min-width: 0; max-width: 100%; }
  .home-shell main { width: 100%; min-width: 0; }
  /* 카테고리 사이드: sticky 해제 + 가로 스크롤 칩 바 (앱 느낌) */
  .home-cat-side {
    position: static !important; height: auto !important;
    margin: 0 -12px 8px !important;          /* 화면 끝까지 */
  }
  .home-cat-side > div:first-child { display: none; }   /* '주식 골라보기 목록' 라벨 숨김 */
  #filterCategories {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #filterCategories::-webkit-scrollbar { display: none; }
  /* 그룹 헤더(AI추천/펀더멘털/수급/가격·모멘텀)는 가로 칩바에선 숨김 */
  #filterCategories .cat-group-label { display: none !important; }
  .cat-item {
    flex: none !important; white-space: nowrap; margin-bottom: 0 !important;
    padding: 9px 14px !important; border: 1px solid var(--line, #ececf2);
    border-radius: 100px !important; font-size: 13px !important;
    background: #fff;
  }
  .cat-item.active { border-color: #f97316; }
  .cat-item.active::before { display: none !important; }   /* 세로 막대 인디케이터 제거 */
  .cat-item .ci-ic { display: none; }       /* 칩에선 아이콘 생략(공간) */

  /* ── 홈 Hero: 폭 넘침 방지 + 패딩/타이포 축소 ── */
  .home-hero { padding: 20px 16px !important; overflow: hidden; max-width: 100%; }
  .home-hero * { max-width: 100%; box-sizing: border-box; }
  .home-hero .hh-title { font-size: 25px !important; word-break: keep-all; }
  .home-hero .hh-desc { font-size: 13.5px !important; word-break: keep-all; }
  .home-hero .hh-modes { grid-template-columns: 1fr !important; }
  .home-hero .hh-mode { padding: 15px !important; }
  .home-hero .hh-mode-title { flex-wrap: wrap; }
  .home-hero .hh-mode-desc { word-break: keep-all; }
  /* 파이프라인: 가로 넘치면 줄바꿈 */
  .home-hero .hh-pipeline { flex-wrap: wrap; gap: 7px !important; }
  .home-hero .hh-step { font-size: 11.5px !important; padding: 5px 9px !important; }
  .home-hero .hh-arrow { display: none; }   /* 줄바꿈 시 화살표 어색 → 숨김 */

  /* 모든 카드/콘텐츠 폭 넘침 방지 */
  main, .home-shell, .layout { max-width: 100%; overflow-x: hidden; }
  .pick-row, .section-header, .t-sm { max-width: 100%; }

  /* ── 그리드 류: 전부 1열로 ── */
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .kpi-card { padding: 14px !important; }
  .kpi-card .val { font-size: 20px !important; }
  .mh-summary { grid-template-columns: 1fr !important; }
  .mh-row { grid-template-columns: 1fr !important; }
  .screener-wrap { grid-template-columns: 1fr !important; }
  .status-board .sb-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── 차트 높이 축소 ── */
  .chart-wrap, #chartWrap { height: 260px !important; }

  /* ── 실적 등 와이드 테이블: 가로 스크롤 허용 ── */
  .trade-table, table.mh-tbl, #tradeTableWrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* ── 시장현황(8컬럼): 모바일은 핵심 5컬럼만, 뒤 3컬럼 숨김 ── */
  /* 순위·종목·현재가·등락률·거래대금만 → 가로 스크롤 없이 한 화면에.
     현재가는 백만원대(2,424,000원)까지 나오므로 고정폭이면 잘린다 →
     숫자 3컬럼은 auto(내용폭) + 우측정렬 + nowrap 으로 자연스럽게 붙인다. */
  .stock-header > div:nth-child(n+6),
  .stock-row > div:nth-child(n+6) { display: none !important; }
  .stock-header, .stock-row {
    grid-template-columns: 22px minmax(0,1fr) auto auto auto !important;
    min-width: 0 !important; gap: 8px !important; padding: 11px 12px !important;
    align-items: center !important;
  }
  .stock-row .name { font-size: 13px; }
  .stock-row .ticker { font-size: 10px; }
  /* 숫자 컬럼: 내용폭 유지 + 우측정렬 + 한 줄 (잘림 방지) */
  .stock-header > div:nth-child(3), .stock-header > div:nth-child(4), .stock-header > div:nth-child(5),
  .stock-row .price, .stock-row .change-cell, .stock-row .vol {
    text-align: right !important; white-space: nowrap !important;
  }
  .stock-row .price { font-size: 13px; }
  .stock-row .vol   { font-size: 11.5px; }
  .stock-header { font-size: 10px !important; letter-spacing: 0 !important; }

  /* ── 종목 상세 헤더 메타: 3열로 ── */
  .sh-meta-row { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
  .sh-price { font-size: 28px !important; }

  /* ── 호가창: 폭 여유 ── */
  .ob-row { grid-template-columns: 1fr 70px 1fr !important; }

  /* ── 하단 탭바 (앱 느낌) ── */
  .m-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid #ececf0;
    padding-bottom: env(safe-area-inset-bottom, 0);   /* 아이폰 홈바 여백 */
    box-shadow: 0 -2px 16px rgba(0,0,0,0.05);
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 0 7px; min-height: 54px;
    color: #9aa3af; text-decoration: none; background: none; border: 0;
    font-family: inherit; cursor: pointer; transition: color .12s;
  }
  .m-tab svg { width: 23px; height: 23px; }
  .m-tab span { font-size: 10.5px; font-weight: 600; letter-spacing: -0.02em; }
  .m-tab.active { color: var(--ink, #14161c); }
  .m-tab:active { background: #f3f4f6; }      /* 터치 피드백 */

  /* 콘텐츠가 탭바에 가리지 않게 하단 여백 */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

  /* ── 더보기 시트 (바텀시트) ── */
  .m-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 210;
    background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .m-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .m-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    background: #fff; border-radius: 18px 18px 0 0; padding: 8px 16px 20px;
    transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.16);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }
  .m-sheet.open { transform: translateY(0); }
  .m-sheet-grip { width: 38px; height: 4px; border-radius: 3px; background: #d8dbe0; margin: 8px auto 12px; }
  .m-sheet-title { font-size: 12px; font-weight: 700; color: #9aa3af; padding: 0 4px 6px; }
  .m-sheet-item {
    display: block; padding: 15px 6px; font-size: 15px; font-weight: 600;
    color: var(--ink, #14161c); text-decoration: none; border-top: 1px solid #f1f2f5;
  }
  .m-sheet-item:active { background: #f6f7f9; }

  /* ── 푸터: 모바일은 면책 문구만, 메뉴 컬럼·출처는 숨김 ── */
  .site-footer { padding: 20px 14px !important; }
  .site-footer .foot-col { display: none !important; }   /* 대시보드/데이터/출처 메뉴 숨김 */
  .site-footer .foot-inner { display: block !important; }
  .site-footer .foot-brand p { font-size: 11.5px; line-height: 1.6; }
  .site-footer .foot-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .site-footer .disclaimer { font-size: 10.5px; line-height: 1.5; }

  /* ── 상단 헤더가 사라졌으니 본문 최상단 여백(상태바 영역) ── */
  .layout { padding-top: 16px !important; }

  /* 가로 넘침 방지 — 긴 텍스트 줄바꿈 */
  .name, .pr-name, .mh-legend .lg .nm { word-break: break-all; }
}

/* 아주 좁은 화면(≤420px) 추가 보정 */
@media (max-width: 420px) {
  .kpi-row { grid-template-columns: 1fr !important; }
  .status-board .sb-grid { grid-template-columns: 1fr !important; }
  .nav-word { display: none; }            /* 로고 마크만 */
  h1 { font-size: 20px !important; }
  /* 종목 리스트: 초협폭에선 여백·폰트 더 축소해 3숫자+종목명이 한 줄에 들어가게 */
  .stock-header, .stock-row {
    gap: 6px !important; padding: 10px 10px !important;
  }
  .stock-row .name-cell { gap: 7px !important; }
  .stock-row .price { font-size: 12.5px !important; }
  .stock-row .vol   { font-size: 11px !important; }
}