/* =============================================================
   grid_parts.css - 데이터 그리드에서 화면이 설정으로 켜는 부품의 모양 - 펼친 상세 안의 작은 표
   (`detail`) · 1가지 종류만 표시하는 세그먼트(`tabs`) · 구분선(`actions` 의 `sep`) · 셀 안에서 찾아
   선택하는 편집기(`find` 컬럼) · 필터 묶음(`AZone/web/js/grid_filter.js`)
   (`AZone/web/styles/grid.css` 에서 나눔 · 2026-09-24 단위 57 · `AGENTS.md` 「5. 파일 크기」).

   나눈 기준은 답하는 질문임 - `grid.css` 는 「모든 표에 늘 있는 표 상자와 칸의 모양」이고 이 파일은
      「화면이 설정으로 켜는 부품의 모양」임. 규칙 · 선택자 · 주석은 나누기 전 그대로(이동만).
   연결 차례는 `grid_foot.css` 바로 뒤(`AZone/web/html/index.html`) - 나누기 전 규칙의 차례 그대로임.
      차례 변경 금지 → 같은 우선순위의 규칙이 뒤집힘.
   `.grid-c` 를 붙이지 않은 선택자(`.g-tabs` · `.g-tab` · `.g-sep` · 필터 묶음 `.gf` 계열)의 근거는 `grid.css`
      의 머리와 아래 소제목마다의 주석.
   ============================================================= */

/* ---- 펼친 상세 안의 작은 표 ----
   `dgrid` 는 항목을 가로로 이어 배치하므로 수량 · 금액의 자릿수가 세로로 맞지 않는다.
   행이 여러 개인 전표처럼 표로 표시해야 하는 펼친 상세에 이 표를 사용한다.
   숫자 컬럼(`.n`)은 오른쪽 맞춤이고 자릿수 폭이 일정한 글꼴을 사용한다.
   마디 배치(`.dgrid`)와 구분선(`.bdt-sep`)은 공용 1곳이다
   (`AZone/web/styles/atoms.css`) - 전표 창의 [자세히]도 같은 문단을 표시한다.
   머리 여백(`.bdt-head`)은 `AZone/web/styles/buy.css` 의 규칙 1개가 이미 정한다. */
/* 펼친 상세의 표는 폭을 100% 로 확장 금지 (2026-08-06 결정). 컬럼 5~6개가 넓은
   그리드의 폭을 나눠 가지면 컬럼 사이가 지나치게 벌어져 1행을 따라 읽기 어려워진다.
   글이 차지하는 만큼만 폭을 사용하고, 넘치면 가로로 스크롤한다. */
.grid-c tr.detail .dtable {
  width: auto; max-width: 100%; border-collapse: collapse; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
/* 숫자 컬럼에 최소 폭을 지정한다 - 자릿수가 달라져도 값이 컬럼명에 붙지 않는다. */
.grid-c tr.detail .dtable .n { min-width: 76px; }
.grid-c tr.detail .dtable th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 3px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.grid-c tr.detail .dtable td {
  padding: 4px 8px; border-bottom: 1px solid var(--line);
  background: transparent; height: auto; color: var(--text);
}
.grid-c tr.detail .dtable .n { text-align: right; }
.grid-c tr.detail .dtable .b { font-weight: 600; }
.grid-c tr.detail .dtable .sub { color: var(--faint); }
.grid-c tr.detail .dtable tfoot td {
  border-bottom: 0; border-top: 1px solid var(--border); padding-top: 6px;
}
.grid-c tr.detail .dtable tfoot .b { font-size: 12.5px; }

/* ---- 1가지 종류만 표시하는 세그먼트 (cfg.tabs) ----
   툴바 오른쪽 끝(개수 옆)에서 「어느 종류를 표시할 것인가」를 정함 - 전표 창 머리의 종류 토글과 같은 형태라 조작
   방법이 1가지 · 선택한 항목만 밝은 바탕. 탭이 없는 표는 빈 상자를 그리지 않음(아래 `:empty` · 단위 52 보완 2 후속 1)
   - 빈 상자도 여백 · 테두리 · 배경이 남아 오른쪽 끝에 6px 점으로 보임(`grid.css` 의 `.g-acts:has(> .spring) ~ :empty` 와 같은 뜻). */
.g-tabs {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.g-tabs:empty { display: none; }
.g-tab {
  height: 28px; padding: 0 12px; border: 0; border-radius: 7px;
  background: none; color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.g-tab:hover { color: var(--text); }
.g-tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); cursor: default; }

/* 성격이 다른 버튼 사이의 구분선이다(`actions` 의 `{ sep: true }`).
   버튼이 나란히 붙으면 1개 묶음으로 보인다 - 앞쪽은 새로 만드는 버튼이고 뒤쪽은
   선택한 행에 실행하는 버튼이라 목적이 다르다(2026-08-01 결정). */
.g-sep {
  width: 1px; height: 24px; flex: none;
  background: var(--muted); opacity: .55;
  /* 구분선 1개만으로는 경계가 드러나지 않는다 - 양옆 여백을 12px 로 두어 묶음
     2개로 읽히게 한다. */
  margin: 0 12px;
}

/* ---- 셀 안에서 찾아 선택하는 편집기 (2026-08-06 결정) ----
   `<select>` 는 목록이 길어지면 원하는 값을 찾을 수 없다
   (`reference/docs/데이터그리드_명세.md` 「3. 기능」의 「찾아 선택하는 컬럼」).
   컬럼에 `find: true` 를 지정하면 편집기가 이 형태로 열린다.
   이 파일이 정하는 것은 셀 안에 들어가는 입력란의 치수뿐이다 - 목록이 셀 폭에 잘리지
   않게 하는 최소 폭은 공용 펼침 목록이 정한다(`AZone/web/styles/dropdown.css` 의
   `.dd-pop.inline`). */
.grid-c td .dd.g-find { width: 100%; }
.grid-c td .dd.g-find .dd-head { height: 26px; }
.grid-c td .dd.g-find input.dd-q { height: 26px; font-size: 12px; padding-left: 22px; }
.grid-c td .dd.g-find .dd-ic { left: 5px; }

/* ---- 여러 줄 글자 칸의 입력란 (2026-10-09 사용자 지시 · `reference/docs/데이터그리드_명세.md` 1번의 「여러 줄 글자 칸」 ·
   `AZone/web/js/grid_editor.js` 의 `multi`) ----
   칸 안에 두고 `position: fixed` 와 좌표만 지정함(좌표 · 폭은 편집기가 정함 - 칸의 왼쪽 위 · 칸 폭과 320px 가운데 큰 값) → 표 본체의
   `overflow` 에 잘리지 않음(`reference/docs/화면 규칙.md` 「떠 있는 목록의 위치」). 창(전표 창 950 · 서류 960) 위에도 서게 펼침 목록과 같은
   층(`AZone/web/js/dropdown.js` 의 980). 가로 크기 조절 금지 - 폭은 편집기가 정함. */
.grid-c td.editing textarea.g-multi {
  position: fixed; z-index: 980; box-sizing: border-box; min-height: 92px; resize: vertical;
  padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; outline: 0;
  background: var(--surface); color: var(--text); font: inherit; line-height: 1.5;
  box-shadow: var(--shadow);
}

/* ---- 필터 묶음 (2026-09-21 단위 42 · `reference/docs/데이터그리드_명세.md`
   「필터 묶음」 · `AZone/web/js/grid_filter.js`) ----
   버튼과 펼침 목록은 공용 부품이라 이 파일이 정하는 것은 묶음의 배치뿐이다 - 버튼 서식은
   공용 버튼(`btn small`)과 켜진 버튼(`btn.on` · `AZone/web/styles/atoms.css`)이고 목록은
   `AZone/web/styles/dropdown.css` 다. 여기에 버튼 서식을 다시 적기 금지.
   좁으면 줄을 넘긴다 - 도구 행에 버튼이 이미 여러 개다. 묶음은 「필터」 글자와 함께
   붙어 넘어간다(상자 1개라 저절로 그렇다). */
.gf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gf-t { font-size: 12px; color: var(--muted); margin-right: 2px; }
/* 버튼 글자는 줄을 넘기지 않는다 - 「거래처 3」이 2줄로 나뉘면 버튼 높이가 항목마다
   달라져 묶음이 들쭉날쭉해진다. 넘겨야 할 때는 버튼 자체가 다음 줄로 간다(위 `.gf`). */
.gf-b { white-space: nowrap; }
/* [필터 해제]는 버튼 모양을 빼고 글자만 남긴다 - 필터 버튼과 같은 모양이면 그것도
   켜고 끄는 필터로 읽힌다. */
.gf-off { border: none; background: none; color: var(--muted); text-decoration: underline; }
.gf-off:hover { color: var(--text); }
/* 좁힌 필터가 없으면 감춘다 - 공용 버튼이 `display` 를 지정하므로 `hidden` 만으로는
   사라지지 않는다(`AZone/web/styles/atoms.css` 의 `.btn`). */
.gf-off[hidden] { display: none; }
/* 좁은 화면에서는 「해제」다 - 앞 글자 「필터 」를 감춘다(같은 글자가 묶음 이름과 겹친다). */
@media (max-width: 720px) {
  .gf-w { display: none; }
}