/* compare-card.css — 비교 카드 안2(칩 헤더 + 열 배경 틴트) 컴포넌트 스타일. * * app.css는 Tailwind 빌드 산출물이라 직접 편집 금지 → 이 파일에서 컴포넌트 CSS를 관리. * index.html 에 로 로드. * * 핵심: 모바일 라벨 드롭을 뷰포트 미디어쿼리가 아니라 컨테이너 쿼리로 처리. * 카드가 그리드 셀 안에서 폭이 달라지므로(홈 3열 그리드 등) 뷰포트 기준은 부정확. * .cmp-matrix가 @container 컨텍스트 → 컨테이너 폭 < 360px면 밴드 텍스트(.cmp-cell-word) * 를 숨기고 5칸 세그먼트 막대만 노출 → 셀 폭이 세그먼트 고정폭으로 통일 → 완벽 정렬. */ /* 매트릭스 컨테이너 = 컨테이너 쿼리 기준점 */ .cmp-matrix { container-type: inline-size; container-name: cmpcard; } /* 그리드: [카테고리 라벨 열] + [단지 열 × N]. --cmp-n, --cmp-catcol 은 JS가 인라인 주입 */ .cmp-grid { display: grid; grid-template-columns: var(--cmp-catcol, 48px) repeat(var(--cmp-n, 3), minmax(0, 1fr)); gap: 0; border: 1px solid var(--cmp-line, #E5E7EB); border-radius: 10px; overflow: hidden; } /* 헤더 셀 (칩 + 단지명) */ .cmp-hcell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px 8px; min-width: 0; text-align: center; border-bottom: 1px solid var(--cmp-line, #E5E7EB); } .cmp-hcell--corner { background: #F2F4F4; /* surface-highlight */ } .cmp-chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; font-size: 11px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .cmp-hname { font-size: 10.5px; font-weight: 700; color: #1A1A1A; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 카테고리 라벨 셀 (좌측 열) */ .cmp-lcell { display: flex; align-items: center; padding: 0 8px; font-size: 10.5px; font-weight: 600; color: #5A6061; /* ink-soft */ background: #F2F4F4; white-space: nowrap; } /* 데이터 셀 (열 틴트 배경 = --cmp-tint 인라인 주입) */ .cmp-dcell { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 5px; min-height: 30px; min-width: 0; } .cmp-cell-word { font-size: 9.5px; font-weight: 700; white-space: nowrap; } /* 세그먼트 막대(5칸) — factor-lens bandSegs와 동일 규격(sm 6×9, 2026-07-14 램프 전역 교체). 인라인 style로 색 주입 */ .cmp-segs { display: inline-flex; align-items: center; gap: 2.5px; flex-shrink: 0; } .cmp-segs > i { width: 6px; height: 9px; border-radius: 2.5px; display: inline-block; } /* ── 컨테이너 쿼리: 좁은 폭에서 밴드 텍스트 드롭 → 세그먼트만 ── */ @container cmpcard (max-width: 360px) { .cmp-cell-word { display: none; } .cmp-dcell { gap: 0; } } /* 컨테이너 쿼리 미지원 폴백(구형 브라우저): 뷰포트 기준으로라도 라벨 드롭. 컨테이너 쿼리 지원 브라우저에선 위 규칙이 우선. */ @supports not (container-type: inline-size) { @media (max-width: 420px) { .cmp-cell-word { display: none; } .cmp-dcell { gap: 0; } } }