/* ── gf-text — v1 텍스트 넘침 규격 ──────────────────────────────────────────────────────────────────────
   원칙: 글·데이터 값은 세로로 깨지지 않는다. 칸에 안 들어가면 아래 순서로 처리한다.
     1 한 줄 고정(값·이름·버튼·탭·머리글)  2 … + 전체 글 툴팁  3 버튼은 아이콘만 + 이름표  4 배치 바꾸기(쌓기)
     5 탭·필터 줄·넓은 표는 그 안에서만 가로 스크롤  6 문장은 단어 단위 줄바꿈
   금지: word-break: break-all · overflow-wrap: anywhere(긴 URL·토큰·해시 칸만 .gf-break-any) · 글 칸을 고정 폭으로 좁히기 ·
         상태 배지 자르기 · 화면 밖 좌표로 숨긴 서랍(페이지 가로 스크롤 원인).
   "…" 로 잘린 글의 전체 툴팁은 gf-tip.js 가 잘렸을 때만 자동으로 띄운다(마크업에 문구를 따로 적지 않는다).
   모두 gf- 옵트인. 색 선언 없음(테마 무관).
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* C1 한 줄 + … — flex·grid 자식이면 부모가 줄 수 있게 min-width:0 */
.gf-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* C2 설명은 두 줄까지 + … */
.gf-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* C3 데이터 값(날짜·시각·IP·MAC·버전·숫자) — 줄바꿈 없음 */
.gf-num {
    white-space: nowrap !important; /* !important: 1 단일 목적 유틸리티 — 화면 표 규칙(td white-space: normal)이 이기면 안 됨 */
    font-variant-numeric: tabular-nums;
}

/* C3 표의 값 열 — 내용 폭만 차지하고 남는 폭은 글 열로 */
.gf-col-fit {
    width: 1%;
    white-space: nowrap;
}

/* C4 버튼·체크박스·칩 묶음 — 항목 안은 한 줄, 모자라면 항목째 다음 줄로 */
.gf-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gf-seg > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* C5 좁으면 아이콘만 — 담은 칸(.gf-collapse) 폭 300px 아래에서 글(.gf-label)을 숨긴다. 버튼에 aria-label 을 둔다.
   container-type 은 칸 폭을 내용으로 정하지 않으므로 .gf-collapse 는 부모 폭을 받는 블록·flex:1 칸에만 단다 */
.gf-collapse { container-type: inline-size; }

@container (max-width: 300px) {
    .gf-collapse .gf-label { display: none; }
}

/* C6 배치 바꾸기 (.gf-stack 은 service_info_v2 의 표 쌓기 클래스라 다른 이름) — 두 칸(.gf-reflow__in)이 담은 칸 폭 420px 아래에서 한 칸으로. 열은 --gf-reflow-cols */
.gf-reflow { container-type: inline-size; }

.gf-reflow__in {
    display: grid;
    grid-template-columns: var(--gf-reflow-cols, 140px minmax(0, 1fr));
    gap: var(--gf-reflow-gap, 12px);
}

@container (max-width: 420px) {
    .gf-reflow__in { grid-template-columns: minmax(0, 1fr); }
}

/* C7 그 안에서만 가로 스크롤 */
.gf-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.gf-tabs-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.gf-tabs-scroll::-webkit-scrollbar { display: none; }

.gf-tabs-scroll > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* C8 칩은 한 줄 + 최대 폭 + … / 상태 배지는 줄지 않음(옆 제목이 양보) */
.gf-chip {
    display: inline-block;
    max-width: var(--gf-chip-max, 12em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.gf-keep {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* C9 문장은 단어 단위 / 긴 URL·토큰·해시 칸만 아무 데서나 */
.gf-prose {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.gf-break-any { overflow-wrap: anywhere; }

/* 공용 페이지네이션(layout/pagination 이 늘 .gf-pager 를 단다) — 페이지 번호는 항목째 줄바꿈(C4).
   예전엔 번호 줄이 휴대폰 폭보다 넓어 페이지 전체가 가로로 밀렸다. 폰에서 이전·현재·다음만 보이게 하려면 compact 옵션 */
.gf-pager .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
}