/* ═══════════════════════════════════════════════════════════════════════════
   withContainerQuery 경량 반응형 (Phase 2.1 Step B)

   withContainerQuery HOC 의 `.v2-container-query-root` 루트 div 에는
   container-type: inline-size + container-name: <id> 가 부착되어 있다.
   이 파일은 경량 7개 v2-* 컴포넌트 각자의 container-name 에 대해
   wide/narrow 단순 모드 분기를 CSS 레벨에서 준다.

   원칙:
   - 내부 로직/DOM 은 건드리지 않는다
   - wrapper root 또는 보편적 태그 셀렉터 (button, input, label, svg 등) 만 사용
   - 애매한 경우 font-size / padding / flex-direction 정도만 적용
   - 완벽한 모드 분기는 Phase 2.2 에서 개별 컴포넌트 재작성 시 확장
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── v2-button-primary — narrow 에서 텍스트 숨기고 아이콘만 ── */
@container v2-button-primary (max-width: 120px) {
  .v2-container-query-root button {
    min-width: 32px;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    gap: 0 !important;
  }
  /* svg 아이콘은 살리고 텍스트 span 만 숨김 */
  .v2-container-query-root button > span:not(.v2-btn-icon-slot),
  .v2-container-query-root button > *:not(svg):not(.v2-btn-icon-slot) {
    display: none !important;
  }
}

/* (V2 입력/선택 container query — Phase D.2 에서 제거. canonical `input` 은
    자체 라벨 처리로 별도 container query 불필요) */

/* ── v2-text-display — narrow 에서 font-size 1단계 축소 ── */
@container v2-text-display (max-width: 300px) {
  .v2-container-query-root {
    font-size: 0.82em;
  }
  .v2-container-query-root > div {
    font-size: inherit !important;
  }
}

/* ── v2-aggregation-widget — narrow 에서 2열 그리드 ── */
@container v2-aggregation-widget (max-width: 480px) {
  .v2-container-query-root [style*="grid-template-columns"],
  .v2-container-query-root [style*="gridTemplateColumns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .v2-container-query-root {
    font-size: 0.9em;
  }
}

/* ── 공통: narrow 에서 padding 약간 축소 ── */
@container (max-width: 300px) {
  .v2-container-query-root {
    /* 극단적으로 좁을 때 여백 최소화 */
  }
}