/* ── 모바일 반응형 (max-width: 768px) ──────────────────────────────────── */
@media (max-width: 768px) {
  /* 헤더: 세로 배치 + 네비 가로 스크롤 */
  header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 12px 16px !important;
  }
  header h1 {
    font-size: 16px !important;
  }
  .nav-links {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* 컨테이너 패딩 축소 */
  .container {
    padding: 12px !important;
  }

  /* 상단 설명 접기 — 모바일에서만. /compare는 뱃지 범례가 6줄이라 첫 화면의 절반을 먹었다.
     접는 대상은 **범례**이고 첫 문장(무엇을 보는 화면인가 · 숫자를 어떻게 읽어야 하는가)은
     항상 보인다 — 그 문장을 감추면 값을 잘못 읽게 되므로 접으면 안 되는 부분이다.
     범례를 감춰도 뜻을 잃지 않도록 뱃지 자체에 title(길게 눌러 확인)을 달아뒀다.
     데스크톱은 손대지 않는다(넓어서 문제가 없고, 건드리면 없던 회귀만 생긴다). */
  .info-box .info-more { display: none; }
  .info-box.open .info-more { display: block; margin-top: 8px; }
  .info-toggle {
    display: inline-block !important;
    margin-top: 8px;
    background: none;
    border: 1px solid #30363d;
    color: #8b949e;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
  }

  /* 표↔카드 전환을 CSS가 확정한다 — 목록 5화면(공시목록·배당증가·배당률순위·자사주소각·
     기업상세)이 모두 #data-table / #m-cards 한 쌍을 쓴다.
     예전엔 전환이 renderTable() 안에만 있어서 **fetch가 끝나야** 실행됐다 → 모바일에서
     min-width:700px 데스크톱 표가 잠깐 보였다가 카드로 바뀌며 레이아웃이 튀었다(운영 제보).
     JS는 인라인 style로 전환하므로 CSS가 이기려면 !important가 필요하다. JS 쪽 전환은
     그대로 둔다(데스크톱 폭에서의 전환은 여전히 JS 담당이라 지우면 안 된다). */
  #data-table { display: none !important; }
  #m-cards { display: flex !important; }

  /* 테이블 수평 스크롤 — 카드뷰 미지원 시 폴백 */
  .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  /* ⚠️ 셀렉터를 좁게 유지할 것 — 맨 `table`로 두면 **모든 화면의 모든 표**에 걸린다.
     이 min-width는 위 카드 폴백용(= 목록 5화면의 #data-table)인데, 전역이던 시절
     카드가 없는 표들(/compare 요약·연도별, /company 배당성향)까지 700/600px로 부풀려
     필요 없는 가로 스크롤을 만들었다(380px 실측: 배당성향 초과 286px → 스코프 후 50px,
     /compare 연도별 278px → 6px = compare.html이 주석으로 적어둔 "2곳은 스크롤 없이"가
     비로소 성립). 기업 4곳 비교는 내용 자체가 734px이라 이 규칙과 무관하게 스크롤한다. */
  #data-table {
    min-width: 700px;
  }
  /* 여백도 카드 폴백 표(#data-table)용이다 — 전역이던 시절 `!important`라
     페이지가 자기 표 여백을 조정할 방법이 아예 없었다(/company 배당성향을
     360px에 들여놓으려면 좌우 6px이 필요한데 이 규칙이 10px로 고정해 버렸다).
     글자 크기는 전역으로 남긴다 — 좁은 화면 공통 축소라 표마다 다를 이유가 없다. */
  #data-table th, #data-table td {
    padding: 8px 10px !important;
  }
  th, td {
    font-size: 12px !important;
  }
  /* 같은 이유로 이것도 #data-table 안으로 — 전역이던 시절 /company 배당성향의
     마지막 열(배당성향)에 필요 없는 80px 하한을 걸어 16px을 더 밀어냈다. */
  #data-table td:last-child, #data-table th:last-child {
    min-width: 80px;
  }

  /* ── 모바일 카드 레이아웃 ──────────────────────────────────────────── */
  .m-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .m-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .m-card:active { border-color: #58a6ff; }
  .m-card.row-watched { border-left: 3px solid #1f6feb; }
  .m-card.row-amendment { background: #2d2000; border-color: #6e4c00; }
  .m-card.row-amended { opacity: 0.4; }

  .m-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .m-card-corp {
    font-size: 15px;
    font-weight: 600;
    color: #f0f6fc;
  }
  .m-card-corp a { color: #f0f6fc; }
  .m-card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }

  /* 2열 그리드로 고정한다. flex-wrap이던 시절엔 **내용 길이에 따라 줄 수가 달라져**
     카드마다 높이가 들쭉날쭉했다(운영 실측: /yield 36·37·80·81px가 섞임,
     /buyback은 4항목이 3+1로 갈려 '이사회결의일'만 혼자 둘째 줄).
     그리드면 줄 수가 **항목 개수로만** 정해져 같은 화면의 카드가 모두 같은 높이가 된다
     — 4항목 2×2 · 3항목 2줄 · 2항목 1줄. 값이 길어져도 자기 칸 안에서만 늘어난다. */
  .m-card-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 8px;
  }
  /* 3열 예외 — 항목이 5개인 화면(/yield)만. 2열이면 5항목이 3줄이 되는데(실측 카드 197px)
     3열이면 정확히 2줄(152px)이라 한 화면에 한 장이 더 들어온다. 라벨을 줄일 필요도 없다
     — 380px에서 칸 폭 101px, 가장 긴 '예상수익률(현재가)'가 88px로 그대로 들어간다.
     ⚠️ 320px대에선 칸이 81px이라 라벨이 칸을 넘는다 → 이 모드에서만 nowrap을 풀어 두 줄로
     접히게 둔다(모든 카드의 라벨이 같아 접혀도 카드 높이는 여전히 균일하다).
     항목이 4개 이하인 나머지 화면은 2열이 맞다 — 전역으로 바꾸지 말 것. */
  .m-cards.cols-3 .m-card-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-cards.cols-3 .m-card-label { white-space: normal; }

  .m-card-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .m-card-label {
    font-size: 11px;
    color: #8b949e;
    margin-bottom: 2px;
    white-space: nowrap;
  }
  .m-card-value {
    font-size: 14px;
    color: #c9d1d9;
    font-weight: 500;
  }
  .m-card-value.highlight {
    color: #f0f6fc;
    font-weight: 600;
  }

  /* 공시구분(report_nm)은 값이 길다(`현금ㆍ현물배당결정              (분기배당)`).
     두 줄로 접히면 카드마다 높이가 갈려 **그리드로 줄 수를 고정한 목적이 깨진다**
     → 반드시 한 줄 말줄임. 뜻은 뱃지(정정)와 겹치지 않는 별개 정보라 항상 보인다. */
  .m-card-report {
    font-size: 12px;
    color: #8b949e;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 카드에서 가장 덜 중요한 값(수집시간)은 하단 우측 보조 줄로 뺀다.
     ⚠️ 라벨을 반드시 붙일 것 — 카드 안에 이미 날짜가 둘(기준일·지급예정일)이라
     맨 날짜만 두면 무엇의 날짜인지 안 읽힌다(`/company` 헤더에서 조회시각이
     '최근 배당금의 기준일'로 읽혔던 것과 같은 함정). */
  .m-card-foot {
    font-size: 11px;
    color: #6e7681;
    text-align: right;
    margin-top: 2px;
  }

  /* 마커(뱃지)는 값 옆이 아니라 **아랫줄**에 둔다 — 3열 칸 폭(380px에서 약 101px)에
     값과 뱃지가 나란히 들어가지 않아 줄이 접히고 그 카드만 높이가 달라진다.
     `/company` 배당성향 표에서 마커를 아랫줄로 내려 표 폭을 지킨 것과 같은 처리다. */
  .m-card-mark { margin-top: 3px; }

  /* 값을 설명하는 보조 줄은 **그 값 바로 아래**에 둔다. 카드 하단에 한 줄로 몰면
     어느 값의 것인지 위치가 답해주지 못한다 — `/growth`의 기준일은 전년·금년 배당금
     **각각의 것**이라 특히 그렇다(하단에 `기준일 A → B`로 뒀더니 "배당금과 떨어져 있어
     애매하다"는 제보). `/company` 헤더에서 주가 조회시각이 항목 밖에 있어 '최근 배당금의
     기준일'로 읽혔던 것과 같은 규칙이다. 열 안에 있으면 위 라벨(`전년 배당금`)이 맥락을
     주므로 보조 줄에 라벨을 또 붙일 필요가 없다 — 헤더로 빼면 그 맥락이 사라진다. */
  .m-card-sub {
    font-size: 11px;
    color: #6e7681;
    margin-top: 2px;
    white-space: nowrap;
  }

  .m-card-detail {
    display: none;
    border-top: 1px solid #21262d;
    padding-top: 10px;
    margin-top: 4px;
  }
  .m-card-detail.open { display: block; }
  .m-card-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .m-card-toggle {
    display: flex;
    justify-content: center;
    padding-top: 6px;
  }
  .m-card-toggle-btn {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 12px;
  }
  .m-card-toggle-btn:hover { color: #c9d1d9; }

  /* 순위 뱃지 */
  .m-rank {
    background: #1f6feb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 28px;
    text-align: center;
  }
  .m-rank.top { background: #da3633; }

  /* 증감률 표시 */
  .m-growth-up { color: #3fb950; font-weight: 600; }
  .m-growth-down { color: #f85149; font-weight: 600; }

  /* 검색 입력 반응형 */
  .search-input, input[type="text"], input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  /* 필터/버튼 영역 */
  .controls, .filter-bar {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .filter-btn, .controls button {
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  /* 검색창이 한 줄을 통째로 먹어 필터 버튼이 통째로 밀려 내려갔다(/·/buyback 실측).
     아래 input 규칙의 width:100%는 로그인·알림설정 폼에는 맞지만 필터 줄에서는 틀리다
     → 필터 줄 안에서만 남는 폭을 나눠 갖게 한다(하한 160px). */
  .controls .search-input { width: auto !important; flex: 1 1 160px; }
  /* 필터 버튼의 좌우 패딩만 조금 줄인다(12→9px). /growth의 버튼 5개가 337px인데 가용 폭이
     356px라 gap까지 더하면 29px 모자라 '관심종목만'만 고아로 떨어졌다 — 버튼당 6px씩
     5개면 30px가 빠져 한 줄에 들어간다. 세로(min-height:40px)는 터치 타깃이라 건드리지 않는다. */
  .controls .filter-btn { padding-left: 9px !important; padding-right: 9px !important; }
  /* 건수는 컨트롤이 아니라 상태 표시다. 버튼과 같은 줄에 어정쩡하게 얹히면
     '관심종목만 + 1,494건'처럼 마지막 줄이 지저분해진다 → 자기 줄에서 우측 정렬.
     ⚠️ 버튼 패딩을 더 줄여 한 줄에 밀어 넣는 방법은 쓰지 않았다 — 위 min-height:40px는
     터치 타깃 확보용이고, 패딩을 줄여도 /growth는 20px 절약에 29px 부족해 못 맞춘다. */
  .controls #row-count { width: 100%; text-align: right; margin-left: 0 !important; }

  /* 카드/섹션 패딩 축소 */
  .section, .company-header, .chart-section {
    padding: 14px 16px !important;
  }

  /* 주가 정보 세로 배치 */
  .stock-info {
    flex-wrap: wrap;
    gap: 12px !important;
  }
  .stock-info-item {
    min-width: 45%;
  }

  /* 통계 카드 */
  .stat-card {
    min-width: 120px !important;
  }

  /* 관심종목 항목 터치 영역 확대 */
  .remove-btn {
    min-height: 36px;
    min-width: 48px;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .watchlist-item {
    padding: 12px 0 !important;
  }

  /* 알림 설정 입력 */
  .notify-config input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 캘린더: 그리드 숨기고 리스트 표시 */
  .month-label {
    font-size: 16px !important;
    min-width: 120px !important;
  }
  .legend {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .cal-nav {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cal-nav button, .cal-nav a {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* 캘린더 리스트 뷰 */
  .cal-list-day {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .cal-list-day.cal-list-today {
    border-color: #58a6ff;
  }
  .cal-list-date {
    background: #1c2128;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #f0f6fc;
    border-bottom: 1px solid #30363d;
  }
  .cal-list-today .cal-list-date {
    background: #1a2332;
    color: #58a6ff;
  }
  .cal-list-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #21262d;
    cursor: pointer;
  }
  .cal-list-event:last-child { border-bottom: none; }
  .cal-list-event:active { background: #1c2128; }
  .cal-list-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
  }
  .cal-list-dot.ex-dividend { background: #d2a8ff; }
  .cal-list-dot.record { background: #7ee787; }
  .cal-list-dot.payment { background: #e3b341; }
  .cal-list-info { flex: 1; min-width: 0; }
  .cal-list-corp {
    font-size: 14px;
    font-weight: 500;
    color: #f0f6fc;
    margin-bottom: 2px;
  }
  .cal-list-meta {
    font-size: 12px;
    color: #8b949e;
  }
  .cal-list-label {
    font-weight: 600;
  }
  .cal-list-label.ex-dividend { color: #d2a8ff; }
  .cal-list-label.record { color: #7ee787; }
  .cal-list-label.payment { color: #e3b341; }
  .cal-list-amt {
    color: #c9d1d9;
    font-weight: 500;
  }

  /* 차트 높이 조정 */
  .bar-chart {
    height: 140px !important;
  }
  /* ⚠️ .bar-label은 두 화면이 이름만 같고 구조가 정반대다:
     /company는 .bar-group 안(세로 막대 아래, 가운데 정렬 nowrap),
     /stats는 .bar-row 안(가로 막대 왼쪽, width 고정 우측 정렬).
     이 축소는 /company 차트용이므로 반드시 .bar-group으로 좁혀야 한다
     — 안 좁히면 /stats 배당구분 라벨까지 9px로 찌그러진다. */
  .bar-group .bar-label {
    font-size: 9px !important;
  }

  /* 자사주 소각 요약 카드: 주식수가 10자리를 넘어(2,797,402,484주) 카드 가용폭 136px을
     19px 폰트로 넘겨 '주' 한 글자가 다음 줄로 떨어졌다. 값 표기는 그대로 두고 폭만 맞춘다. */
  .summary .stat-value { font-size: 15px; white-space: nowrap; }

  /* 페이지네이션 — 두 줄로 고정한다(버튼 줄 + 건수·페이지크기 줄).
     예전엔 버튼 11개(« ‹ + 숫자 7 + › »)가 한 줄에 440px를 요구해 380px 화면에서
     "버튼 6개 / 나머지 버튼+건수 / 선택박스"로 세 줄이 됐다(운영 제보).
     숫자 버튼은 JS가 모바일에서 3개로 줄이고, 나머지는 .page-meta가 둘째 줄을 차지한다. */
  .pagination {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .pagination button {
    min-height: 36px;
    min-width: 36px;
  }
  .page-meta {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  /* 묶음 안에서는 좌우 여백을 CSS gap이 맡는다 — 개별 margin이 남아 있으면 가운데 정렬이 틀어진다 */
  .page-meta .page-info { margin: 0 !important; }
  .page-meta .size-select { margin-left: 0 !important; }

  /* 팝업 */
  .popup {
    width: 95% !important;
    max-width: none !important;
  }
}

/* ── 초소형 화면 (max-width: 380px) ──────────────────────────────────── */
@media (max-width: 380px) {
  header h1 {
    font-size: 14px !important;
  }
  .nav-link {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  .company-name {
    font-size: 18px !important;
  }
  #data-table {
    min-width: 600px;
  }
  .m-card-main { gap: 10px; }
  .m-card-value { font-size: 13px; }
}