/* ============================================================================
   mobile-fixes.css  —  LP 출자사업 트래커 모바일 화면 정리
   적용 대상: 화면 폭 600px 이하 (모바일)
   ※ 함께 제공되는 mobile-fixes.js 와 한 쌍으로 동작합니다.
      (막대 정렬·LP카드 정렬·분야필터 접기 등은 화면을 측정하는 JS가 필요)
   ※ 기존 css_styles.css / app.js 는 수정하지 않습니다.
   ============================================================================ */

/* ==========================================================================
   1) 써머리 — 막대 (분야별 모집 분포 · LP 기관별 출자 규모)
   라벨 안 잘리게 + 숫자 우측정렬 + 막대-숫자 사이 간격 (열 폭은 JS가 측정)
   ========================================================================== */
@media (max-width:600px){
  #rank-sectors .rank__val, #rank-lps .rank__val{ display:contents !important; }
  #rank-sectors .rank__amt, #rank-lps .rank__amt{ justify-self:end !important; text-align:right !important; flex:none !important; }
  #rank-sectors .rank__sub, #rank-lps .rank__sub{ justify-self:end !important; text-align:right !important; flex:none !important; }
  #rank-sectors .rank__label, #rank-lps .rank__label{ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }
  #rank-sectors .rank__track, #rank-lps .rank__track{ height:15px; margin-right:7px; }
  #rank-sectors .rank__no, #rank-lps .rank__no{ justify-self:start !important; }
}

/* ==========================================================================
   2) 써머리 — 강점·도전 칩을 2열로 + "외 N개" 태그 (우하단 작게)
   ========================================================================== */
@media (max-width:600px){
  .pos-row{ align-items:baseline !important; row-gap:9px !important; padding:12px 14px !important; }
  .pos-tag{ font-size:1rem !important; }
  .pos-chips{ flex:1 1 100% !important; width:100% !important; display:grid !important;
    grid-template-columns:1fr 1fr !important; gap:6px !important; margin-top:2px !important; }
  .pos-chip{ display:block !important; box-sizing:border-box !important; width:100% !important;
    text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    font-size:.8125rem !important; padding:6px 8px !important; margin:0 !important; }
  .pos-chip--more{ grid-column:1 / -1 !important; width:auto !important; justify-self:end !important;
    background:transparent !important; border:none !important; padding:3px 2px 0 0 !important; margin:0 !important;
    font-size:.75rem !important; color:var(--ink-mute) !important; white-space:nowrap !important; }
  .pos-chip--more::before{ content:"+ "; }
  .pos-chip--more::after{ content:"개  ›"; }
}

/* ==========================================================================
   3) 자사분석 페이지
   ========================================================================== */
@media (max-width:600px){

  /* ① 자금 성격별 구성: 막대 라벨 안 잘리게 + 하단 범례 제거 */
  .cap-stack{ height:30px !important; }
  .cap-stack__seg{ font-size:.6rem !important; padding:0 3px !important; line-height:30px !important; white-space:nowrap !important; }
  .cap-legend{ display:none !important; }

  /* ② 펀드 운용 트랙레코드: 세로 1열 → 가로 3분할 */
  .fstat{ grid-template-columns:repeat(3,1fr) !important; }
  .fstat__cell{ padding:9px 6px !important; }
  .fstat__k{ font-size:.68rem !important; margin-bottom:2px !important; }
  .fstat__v{ font-size:1.05rem !important; white-space:nowrap !important; }
  .fstat__v small{ font-size:.62rem !important; }
  .fstat__sub{ font-size:.64rem !important; }

  /* 누적약정 TOP10 LP 카드 — 컴팩트: 번호+이름 한 줄 정렬 · 이름 작게 · 값 3열 균등(좌측선 정렬) · 행높이 축소
     ※ 3열 균등은 CSS(1fr 1fr 1fr)가 담당 — mobile-fixes2.js의 폭 실측 주입은 비활성화함(균등배분·Safari 안정) */
  .lp-rank, .lp-rank tbody{ display:block !important; width:100% !important; }
  .lp-rank tr{ display:grid !important; grid-template-columns:1fr 1fr 1fr !important; width:100% !important;
    box-sizing:border-box !important; position:relative !important; column-gap:6px !important; row-gap:0 !important;
    padding:9px 8px 9px 25px !important; border-bottom:1px solid var(--line) !important; }
  .lp-rank td{ padding:0 !important; border:none !important; }
  /* ① 번호 — 좌측 gutter에 우측정렬(자릿수 무관 일정 간격), 이름과 같은 베이스라인 */
  .lp-rank td.rk{ display:block !important; position:absolute !important; left:0 !important; top:9px !important;
    width:18px !important; text-align:right !important;
    font-weight:700 !important; color:var(--ink-sub) !important; font-size:.82rem !important; line-height:1.3 !important; }
  /* ② 이름 — 폰트 축소, 값들과 같은 좌측선(22px) */
  .lp-rank td.t-main{ grid-column:1 / -1 !important; grid-row:1 !important; font-weight:700 !important;
    font-size:.85rem !important; color:var(--ink) !important; padding-right:70px !important; margin-bottom:6px !important; line-height:1.3 !important; }
  .lp-rank td:nth-child(3){ position:absolute !important; right:5px !important; top:8px !important; }   /* 분야 칩 */
  /* ③ 누적약정·점유율·참여펀드 — 3열 균등, 좌측선 정렬 */
  .lp-rank td.amt{ grid-row:2 !important; display:block !important; font-weight:700 !important;
    font-size:.9rem !important; color:var(--ink) !important; white-space:nowrap !important; line-height:1.2 !important; }
  .lp-rank td:nth-child(4){ grid-column:1 !important; }
  .lp-rank td:nth-child(5){ grid-column:2 !important; }
  .lp-rank td:nth-child(6){ grid-column:3 !important; }
  .lp-rank td.amt::before{ display:block !important; font-size:.66rem !important; font-weight:400 !important;
    color:var(--ink-mute) !important; margin-bottom:1px !important; line-height:1.2 !important; }
  .lp-rank td:nth-child(4)::before{ content:"누적약정" !important; }
  .lp-rank td:nth-child(5)::before{ content:"점유율" !important; }
  .lp-rank td:nth-child(6)::before{ content:"참여펀드" !important; }
  /* ④ 주요펀드 */
  .lp-rank td.lp-mf{ grid-column:1 / -1 !important; grid-row:3 !important; margin-top:7px !important;
    font-size:.74rem !important; color:var(--ink-mute) !important; white-space:normal !important;
    overflow:visible !important; text-overflow:clip !important; line-height:1.3 !important; }

  /* ③ 분야별 트랙레코드: 제목 1줄 + 설명 줄바꿈 정리 + 컨트롤 정렬 */
  .colhead{ display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:2px 8px !important; }
  .colhead > small{ flex:1 1 100% !important; display:block !important; margin-top:1px !important; line-height:1.35 !important; word-break:keep-all !important; }
  .trk-ctrl{ gap:7px 8px !important; margin:6px 0 8px !important; }
  .trk-range{ flex-wrap:wrap !important; }
  .trk-note{ flex:1 1 100% !important; line-height:1.35 !important; word-break:keep-all !important; }
  /* 정렬·기간 세그먼트를 한 줄 양 끝까지 채움(우측 빈 공간 제거) — 두 그룹이 행을 양분해 채우고, 안의 버튼도 균등 */
  #pf-sort, #pf-period{ flex:1 1 auto !important; }
  #pf-sort button, #pf-period button{ flex:1 1 0 !important; padding-left:4px !important; padding-right:4px !important; white-space:nowrap !important; }
  /* 막대: 분야명 전부 표시 + 배수·금액 정렬, 개사(rv-cnt) 제거. 열 폭은 JS가 측정 */
  #fund-sectortrack .rank__row{ display:grid !important; column-gap:8px !important; align-items:center !important; }
  #fund-sectortrack .rank__val{ display:contents !important; }
  #fund-sectortrack .rv{ justify-self:end !important; text-align:right !important; flex:none !important; }
  #fund-sectortrack .rv-cnt{ display:none !important; }
  #fund-sectortrack .rank__label{ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }

  /* ④ 시장 활발도 포지션(.quad 4분면): 칩 2열 배치 */
  .quad__items{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; align-content:start !important; }
  .quad__items .chip--sec{ display:block !important; box-sizing:border-box !important; width:100% !important; max-width:none !important; flex:none !important;
    text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    font-size:.8125rem !important; padding:6px 8px !important; margin:0 !important; }
  .quad{ min-height:0 !important; }
  .quad__items.is-collapsed .chip--sec.chip--extra{ display:none !important; }
  .quad__items .chip--more{ grid-column:1 / -1 !important; justify-self:start !important; max-width:none !important; width:auto !important;
    background:transparent !important; border:none !important; text-align:left !important; margin:2px 0 0 !important; padding:2px 4px !important;
    color:var(--ink-mute) !important; font-size:.78rem !important; }

  /* ⑤ 전략 시사점: 모바일 숨김 — 서술 prose뿐 아니라 '▸ 전략 시사점' 제목(.callout__label)까지 통째로 */
  .js-hide-strategy{ display:none !important; }
  #sec-strategy .callout{ display:none !important; }
}

/* ==========================================================================
   4) 출자사업 페이지
   ========================================================================== */
@media (max-width:600px){

  /* ⑥ 분야 필터 태그 접기/펼치기 (JS가 max-height·버튼 생성) */
  .sector-filter__chips.is-collapsed{ overflow:hidden; }
  .sector-filter__more{ display:inline-flex; align-items:center; gap:4px; margin-top:7px;
    padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg);
    font-family:inherit; font-size:.8125rem; line-height:1.2; color:var(--ink-sub); cursor:pointer; }
  .sector-filter__more:hover{ border-color:var(--ink-sub); color:var(--ink); }

  /* ⑦ 출자사업 목록 카드: 제목 먼저, 그 아래 '순번 · LP · 금액 · 날짜' 메타 한 줄 */
  .biz-table tr.biz-row{ display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; padding:11px 4px !important; }
  .biz-table .col-name{ order:0 !important; flex:1 1 100% !important; margin:0 0 5px !important; padding-right:64px !important; }
  .biz-table .biz-no{ order:1 !important; }
  .biz-table .col-lp{ order:2 !important; }
  .biz-table .amt{ order:3 !important; }
  .biz-table .col-date{ order:4 !important; }
  .biz-table .st{ top:11px !important; }
  .biz-table tr.biz-row .chev{ display:none !important; }
  /* ★ 자사 관심 행: 분홍 강조를 inline td(글자)만 말고 행 전체로 (PC와 동일) */
  .biz-table tr.biz-row.is-own{ background:var(--red-tint) !important; }
  .biz-table tr.biz-row.is-own td{ background:transparent !important; }

  /* ⑧ 출자사업 펼침(드릴다운): 모바일 우측 짤림 방지 — 행/셀 블록화로 화면폭에 맞추고, 내부 표만 가로스크롤 */
  .biz-table tr.drill.is-open{ display:block !important; }
  .biz-table tr.drill > td{ display:block !important; width:100% !important; padding:0 !important; }
  .drill__inner{ max-width:100% !important; overflow-x:hidden !important; box-sizing:border-box !important; }
  .drill__inner table{ display:block !important; width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  .drill__inner .att__name{ word-break:break-all !important; }
}

/* ==========================================================================
   5) 선정현황 페이지
   ========================================================================== */
@media (max-width:600px){

  /* 막대(운용사·분야경쟁강도 등) 공통 정렬: 라벨 안 잘리게 + 값 우측정렬.
     건수 제거 + 열 폭은 JS가 측정. (써머리/분야별트랙 막대는 위에서 별도 처리하므로 제외) */
  .rank:not(#rank-sectors):not(#rank-lps):not(#fund-sectortrack) .rank__row{ align-items:center !important; }
  .rank:not(#rank-sectors):not(#rank-lps):not(#fund-sectortrack) .rank__label{ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }
  .rank:not(#rank-sectors):not(#rank-lps):not(#fund-sectortrack) .rank__val{ justify-content:flex-end !important; }
  /* 분야경쟁강도 막대: 건수(rs-cnt) 숨기고 금액(rs-amt)만 표시 */
  .rank:not(#rank-sectors):not(#rank-lps):not(#fund-sectortrack) .rank__val .rs-cnt{ display:none !important; }

  /* 선정결과 카드: 제목 먼저(전체폭), 아래 'LP|개사' · '날짜|분야'.
     ※사파리는 <td> flex auto-flow를 안 흘려 세로로 쪼개짐 → 명시적 grid 배치(향후일정처럼 안전) */
  .sel-table, .sel-table tbody{ display:block !important; width:100% !important; }
  .sel-table tbody td{ border:none !important; padding:0 !important; line-height:1.3 !important; }   /* ★.ledger td 패딩 제거 — 셀 38px→18px(띄엄띄엄 해소) */
  .sel-table tr.sel-row{ display:grid !important; grid-template-columns:1fr auto !important; width:100% !important;
    row-gap:2px !important; column-gap:8px !important; align-items:center !important; padding:8px 2px !important;
    border-bottom:1px solid var(--line) !important; }
  .sel-table .c-name{ grid-column:1 / -1 !important; grid-row:1 !important; margin:0 0 3px !important;
    white-space:normal !important; font-weight:600 !important; font-size:.9rem !important; line-height:1.35 !important; }
  .sel-table .c-lp{ grid-column:1 !important; grid-row:2 !important; font-size:.8rem !important; color:var(--ink-sub) !important; }
  .sel-table .c-cnt{ grid-column:2 !important; grid-row:2 !important; justify-self:end !important; font-size:.78rem !important; }
  .sel-table .col-date{ grid-column:1 !important; grid-row:3 !important; justify-self:start !important; text-align:left !important; font-size:.76rem !important; color:var(--ink-mute) !important; }
  .sel-table .c-sector{ grid-column:2 !important; grid-row:3 !important; justify-self:end !important; font-size:.76rem !important; color:var(--ink-mute) !important; }
  .sel-table tr.sel-row .chev{ display:none !important; }

  /* 펼친 상세(sel-detail) — PC 표(분야 옆 운용사) → 모바일 세로카드: 분야 라벨 위 + 운용사 명단 아래, 헤더 숨김, 공고원문 좌측 */
  /* ★:not([hidden]) 필수 — 접힘은 hidden 속성으로 동작(click 시 det.hidden 토글). 이거 없으면 display:block이 [hidden]{display:none}을 덮어써 전부 펼쳐짐 */
  .sel-table tr.sel-detail:not([hidden]){ display:block !important; }
  .sel-table tr.sel-detail:not([hidden]) > td{ display:block !important; width:100% !important; padding:0 !important; }
  .sel-detail__in{ padding:11px 12px !important; box-sizing:border-box !important; }
  .sel-gp-table, .sel-gp-table tbody{ display:block !important; width:100% !important; }
  .sel-gp-table thead{ display:none !important; }
  .sel-gp-table tr{ display:block !important; margin-bottom:9px !important; }
  .sel-gp-table tr:last-child{ margin-bottom:0 !important; }
  .sel-gp-table td{ display:block !important; width:auto !important; min-width:0 !important; padding:0 !important; }
  .sel-gp-table td:first-child{ font-weight:700 !important; font-size:.78rem !important; color:var(--ink-sub) !important;
    margin-bottom:5px !important; white-space:normal !important; }
  .sel-gp-table .gp-list{ gap:6px 10px !important; }
  .sel-gp-table .gp{ font-size:.83rem !important; }
  .sel-detail .sel-src{ text-align:left !important; margin-top:9px !important; }
}

/* ==========================================================================
   6) 향후일정 페이지 — 카드
   D-day 박스(날짜 포함) 좌측 | 제목 / LP기관 / 분야칩 (모두 같은 왼쪽선)
   ========================================================================== */
@media (max-width:600px){
  .dl-table tbody tr{ display:grid !important; grid-template-columns:auto 1fr !important;
    column-gap:11px !important; row-gap:3px !important; padding:11px 6px !important; align-items:start !important; }
  .dl-table tbody td{ padding:0 !important; line-height:1.3 !important; border:none !important; }
  .dl-table .dbox-cell{ grid-row:1 / span 3 !important; grid-column:1 !important; align-self:start !important; }
  .dl-table .dbox{ padding:3px 9px !important; }
  .dl-table .dl-name{ grid-row:1 !important; grid-column:2 !important; font-size:.92rem !important; font-weight:600 !important;
    line-height:1.35 !important; color:var(--ink) !important;
    display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
  .dl-table .dl-lp{ grid-row:2 !important; grid-column:2 !important; font-size:.8rem !important; font-weight:500 !important; color:var(--ink) !important; margin-top:2px !important; }
  .dl-table .dl-secs{ grid-row:3 !important; grid-column:2 !important; display:flex !important; flex-wrap:wrap !important; gap:5px !important; margin-top:3px !important; }
  .dl-table .dl-secs .chip{ font-size:.68rem !important; padding:2px 7px !important; }
  .dl-table .dl-amt{ display:none !important; }
}

/* ==========================================================================
   7) 모바일: 가로 스크롤 표의 핵심(첫) 컬럼 고정
   모달 표(역대펀드·LP/GP 참여펀드·분야 트랙)·분야 인라인 상세(secd)는
   .ledger가 가로 스크롤(styles.css:355)되는데, 옆으로 넘기면 펀드명/기업명이
   화면 밖으로 사라져 "어느 행의 IRR·금액인지" 헷갈림 → 첫 컬럼을 sticky-left 고정.
   (메인페이지 표 sel-table·lp-rank·biz-table은 카드형이라 스크롤 안 함 → 대상 아님)
   ========================================================================== */
@media (max-width:600px){
  .modal .ledger th:first-child,
  .modal .ledger td:first-child,
  .secd__cotable th:first-child,
  .secd__cotable td:first-child{
    position:sticky !important; left:0 !important;
    background:#fff !important;                       /* 행 배경 — 뒤 컬럼 비침 방지 */
    z-index:2 !important;
    /* ★고정칸이 너무 넓어 데이터 컬럼을 가리는 문제 — 폭 제한 + 말줄임(…) */
    max-width:min(10rem, 44vw) !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  /* ★고정칸은 border-collapse+sticky 탓에 하단 테두리가 배경에 덮여 흐려짐 →
     box-shadow로 우측(고정선)+하단(헤더 진한선/본문 구분선)을 직접 그려 일반칸과 동일하게 */
  .modal .ledger tbody td:first-child,
  .secd__cotable tbody td:first-child{ box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line) !important; }
  .modal .ledger thead th:first-child,
  .secd__cotable thead th:first-child{ box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line-ink) !important; }
  /* 펀드명이 span(.t-main)/링크로 감싸진 경우도 말줄임 적용 */
  .modal .ledger td:first-child .t-main,
  .modal .ledger td:first-child a,
  .modal .ledger td:first-child .biz-link{
    display:inline-block !important; max-width:100% !important; overflow:hidden !important;
    text-overflow:ellipsis !important; white-space:nowrap !important; vertical-align:bottom !important; }
  /* 헤더 좌상단 코너는 top(기존)·left(신규) 둘 다 고정 → z-index 최상 */
  .modal .ledger thead th:first-child,
  .secd__cotable thead th:first-child{ z-index:3 !important; }
  /* 자사(빨강) 행은 고정칸 배경도 일치(비침 방지) */
  .modal .ledger tr.is-own td:first-child{ background:var(--red-tint) !important; }
  /* ★모달 표 셀 패딩 통일 — fundmodal(3px)·plain ledger(8px) 제각각이던 행높이/테두리 일관화 */
  .modal .ledger tbody td{ padding:7px 11px !important; }
  .modal .ledger thead th{ padding:0 11px 7px !important; }
}