/* 표 공통 규칙 — 사이트의 모든 표가 같은 선·테두리·머리글·칸 여백을 쓴다(tg 3767 "일관된 룰을 정립하고 전체 수정").
   규칙 문서 = docs/wiki/conventions/table-style.md. 표 부품은 구조 때문에 갈라져 있을 뿐(목록 정렬 = .dg flex 격자,
   병합 칸 = table.dg-table, 칸 폭 자동 맞춤 = .dgrid CSS 격자, 대포 변형 = .cannon-variants-table, 관리 화면 = 부트스트랩 .table,
   폼 입력 표 = .item-edit-table, 내 정보 = table.datagrid) 모양은 여기 한 곳에서만 정한다 —
   다른 CSS·<style>·style="" 에서 표 선·바깥 테두리·머리글 바탕·칸 여백을 정하면 lint(table-style-*)가 막는다.
   규칙: ① 가로줄만 — 표 맨 위·맨 아래 진한 선, 좌우 테두리·둥근 모서리 없음(111회차 전 다수 38 템플릿 모양, tg 3772~3776)
   ② 머리글 = 옅은 바탕·보조 글자색·굵게, 아래 진한 선 ③ 행 사이 = 옅은 선 한 줄
   ④ 세로선 없음(병합 칸도) ⑤ 칸 여백 .45rem .6rem ⑥ 글자 --fs-sm ⑦ 모든 표 전체 폭 + 칸 폭 배분. */

:is(.dg, table.dg-table, .dgrid, table.table, .cannon-variants-table, table.item-edit-table, table.datagrid) {
  border: 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  font-size: var(--fs-sm);
}
/* 격자 표만 overflow 숨김 — 마지막 행 아랫줄(1px 내밂)을 표 아래 선 밑으로 숨긴다. <table> 에 주면 표가 스크롤 상자가 되어
   좁은 화면 첫 칸 고정(sticky)이 표 안에 갇혀 같이 밀려 버렸다(tg 3779 실측) */
:is(.dgrid, .cannon-variants-table) { overflow: hidden; }

/* ── <table> 부품 ── 행 사이 선은 '다음 행 윗줄'로 긋는다: 아랫줄로 그으면 병합 칸(rowspan)이 끝난 자리에서
   선이 겹치고, 마지막 행 아랫줄이 표 아래 선과 두 겹이 된다. */
table:is(.dg-table, .table, .item-edit-table, .datagrid) { border-collapse: separate; border-spacing: 0; }
table:is(.dg-table, .table, .item-edit-table, .datagrid) > :not(caption) > * > * {
  border: 0;
  padding: .45rem .6rem;
}
table:is(.dg-table, .table, .item-edit-table, .datagrid) > thead > tr > th {
  background-color: var(--c-bg-muted);
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
}
/* 머리글은 낱말 단위로만 꺾는다 — 좁은 수치 칸에서 '소/피/아' 처럼 글자 단위로 쪼개졌다(레거시 390, tg 3767 블라인드) */
table:is(.dg-table, .table, .item-edit-table, .datagrid) > thead > tr > th,
.dg .dg-head .dg-cell, .dgrid > .dgh, .cannon-variants-table > .cvt-head { word-break: keep-all; overflow-wrap: normal; }
table:is(.dg-table, .table, .item-edit-table, .datagrid) > thead > tr:last-child > * { border-bottom: 1px solid var(--c-border); }
table:is(.dg-table, .table, .item-edit-table, .datagrid) > tbody > tr + tr > *,
table:is(.dg-table, .table, .item-edit-table, .datagrid) > tbody + tbody > tr:first-child > * { border-top: 1px solid var(--c-border-soft); }

/* ── .dg flex 격자(목록·값 칸) ── 마지막 행 아랫줄은 표 아래 선과 겹치므로 지운다.
   높이 고정용 빈 행(role=presentation)은 선 없이 자리만(사용자 2026-07-03). */
.dg .dg-head {
  background-color: var(--c-bg-muted);
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--c-border);
}
.dg .dg-row { border-bottom: 1px solid var(--c-border-soft); }
.dg .dg-row:last-child,
.dg .dg-row[role="presentation"] { border-bottom-color: transparent; }
.dg .dg-cell { padding: .45rem .6rem; }

/* ── CSS 격자(.dgrid · 대포 변형 표) ── 칸마다 아랫줄. 칸을 1px 아래로 내밀어(margin-bottom:-1px) 마지막 행 아랫줄이
   표 아래 선 밑으로 숨게 한다(overflow:hidden) — 두 겹 선 방지, 행 높이는 그대로. */
:is(.dgrid > .dgh, .dgrid > .dgc, .cannon-variants-table > .cvt-cell) {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: -1px;
}
:is(.dgrid > .dgh, .cannon-variants-table > .cvt-head) {
  background-color: var(--c-bg-muted);
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--c-border);
}

/* ── 너비(tg 3798~3805) ── 모든 표 = 놓인 자리 전체 폭(목록·값 칸·탭·폼 같음) — 내용 폭이면 오른쪽이 텅 빈 채 칸이 몰렸다(tg 3798).
   남는 폭 = **모든 칸에 나눔**(tg 3805): 이름 칸에 몰면(tg 3802) 2칸 표에서 칸 사이가 700px 로 벌어지고, 짧은 칸만 내용 폭이면
   칸끼리 19px 로 붙었다(실측 scripts/measure-table-gaps.sh). <table> = 브라우저 auto 배분(내용 길이 비율), 격자(.dgrid·대포 변형)
   = 칸마다 auto(내용 + 남는 폭 균등), 값 칸 .dg = 모든 칸 flex-grow 1(내용 + 균등). 짧은 칸 줄바꿈 금지는 넓은 화면에서 유지.
   예외 1개: 레거시 상세 자식 표(.lg-fixed) = 화면 간 세로 비교용 고정 열 폭(tg 2840 ③). */
.detail-field-value :is(table.dg-table, .dg, .dgrid) { width: 100%; max-width: 100%; }
table.datagrid { width: 100%; }
.cannon-variants-table { width: auto; }   /* 카드 안 들여쓴 자리 채움 — 100% 면 들여쓰기만큼 카드 밖으로 넘쳤다(tg 3802) */
.detail-field-value table.dg-table:not(.lg-fixed) > * > tr > * { width: auto; }
/* 표를 감싼 래퍼도 값 칸 전체 폭 — 내용 폭 래퍼(쪽 넘김 묶음 .dg-fit-group·.dg-fit = max-content, 추가 버튼 줄 .value-with-action 의
   플렉스 자식)가 남아 있으면 표 100% 가 래퍼의 내용 폭에 갇혔다(해역 수집 아이템·렐릭/트레져 헌트 피스·유적 표 실측) */
.detail-field-value .dg-fit-group { width: 100%; }
.detail-field-value .value-with-action > .dg-scroll { flex: 1 1 auto; }
@media (min-width: 601px) {   /* 넓은 화면은 짧은 칸 줄바꿈 X — 좁은 화면은 화면 폭이 우선(머리글 낱말 꺾임 그대로) */
  .detail-field-value table.dg-table:not(.lg-fixed) > * > tr > :is(th, td):is(.dgt-w-sm, .dgt-num) { white-space: nowrap; }
}
/* 값 칸 안 flex 표(.dg): 모든 칸이 남는 폭을 균등하게 나눠 가짐(고정 폭 칸 = 기본 폭 + 몫, 신축 칸 dg-fill = 몫) */
.detail-field-value .dg .dg-cell { flex-grow: 1; }
/* 가로 스크롤 상자(.dg-scroll) 안 표는 최소 내용 폭 아래로 줄지 않는다 — max-width:100% 에 눌리면 줄바꿈 안 되는 칸(수정·삭제 버튼)이
   표 상자 밖으로 밀려 잘렸다(레거시 피스 표 390, tg 3767 블라인드). 넘치는 만큼은 상자가 가로 스크롤 */
.dg-scroll > table.dg-table { max-width: none; min-width: min-content; }

/* 좁은 화면(≤600px) 칸 좌우 여백 = .3rem — 모든 표 같은 값. .6rem 이면 칸 수 × 19px 가 글 칸·입력 칸 폭에서 빠져
   판매 NPC 폼 아이템 입력이 잘리고 육지 조사 항목이 한 낱말씩 꺾였다(tg 3767 블라인드 390) */
@media (max-width: 600px) {
  table:is(.dg-table, .table, .item-edit-table, .datagrid) > :not(caption) > * > *,
  .dg .dg-cell,
  :is(.dgrid > .dgh, .dgrid > .dgc, .cannon-variants-table > .cvt-cell) { padding-left: .3rem; padding-right: .3rem; }
}
/* 좁은 화면 가로 스크롤 표의 글 칸(소컬럼·수치 칸이 아닌 칸) 최소 5.5em — 최소 내용 폭까지 눌리면 '이 / 육지에서 / 채집' 처럼
   한 낱말씩 꺾였다(육지 조사 표 390, tg 3767 블라인드). 넘치는 만큼은 상자가 가로 스크롤 */
@media (max-width: 600px) {
  .dg-scroll > table.dg-table td:not(.dgt-w-sm):not(.dgt-num):not(:has(.btn)) { min-width: 5.5em; }  /* 버튼 칸은 글 칸 아님 */
}

/* 좁은 화면 가로 스크롤 표 — 첫 칸 고정·탭 격자 열 폭 = 내용(tg 3779). 첫 칸(.tbl-col1)은 js/table-col1.js 가 병합을 따라 구조로 표시한다.
   밀어도 이름·단계·NPC 같은 기준 칸이 남아 오른쪽 값이 어느 행 것인지 읽힌다(블라인드 3767·3776 반복 지적).
   고정 칸도 같은 가로줄(칸 자신의 선)·바탕(본문 흰 바탕 / 머리글 옅은 바탕) — 세로선은 그리지 않는다(규칙 4).
   탭 격자의 고정 rem 열(NPC 8rem 등)은 좁은 화면에서 내용 폭으로 — 가격·획득 완성도가 첫 화면 밖으로 밀렸다. */
@media (max-width: 600px) {
  .dg-scroll table.dg-table .tbl-col1,
  .detail-field-value.dg-scroll .dgrid > .tbl-col1 { position: sticky; left: 0; z-index: 1; background-color: var(--c-bg); }
  .dg-scroll table.dg-table th.tbl-col1,
  .detail-field-value.dg-scroll .dgrid > .dgh.tbl-col1 { background-color: var(--c-bg-muted); }
  .detail-field-value.dg-scroll .dgrid[style*="--cols"] { grid-template-columns: repeat(var(--cols), auto); }
  /* 머리글은 낱말 단위로 꺾임 허용 — 소컬럼 머리글('완성도 상한'·'획득 완성도')이 한 줄로 버티면 숫자 칸이 넓어져 마지막 칸이 첫 화면 밖으로 밀렸다 */
  .dg-scroll table.dg-table th { white-space: normal; }
}

/* 병합 칸(rowspan / grid-row span, 2줄 이상) = 묶음 첫 줄 높이에 위 정렬 — 세로 가운데면 숫자가 묶음 중간에 떠
   어느 줄들의 묶음인지·다음 묶음 시작이 안 보였다(tg 3782~3788). 선: 묶음 사이 = 병합 칸 위 선이라 표 전체 폭,
   묶음 안 줄 사이 = 병합 칸이 없는 줄의 선이라 병합 칸 오른쪽부터(규칙 3 의 '다음 행 윗줄' 그대로). */
table.dg-table td[rowspan]:not([rowspan="1"]) { vertical-align: top; }
.dgrid > .dgc-span:not([style$="span 1"]) { align-items: flex-start; }

/* 오른쪽 정렬 숫자 칸 뒤 간격 — 숫자는 칸 오른쪽 끝, 다음 칸 글은 왼쪽 끝에 붙어 칸 폭을 아무리 나눠도 둘 사이가 여백 두 개(19px)로
   붙어 보였다(실측 레벨|특징·층|유적 탐험도 등, tg 3805). 숫자 칸 오른쪽 여백만 넓혀 열 전체가 같이 물러난다(행마다 같은 칸이라 정렬 유지) */
@media (min-width: 601px) {
  table.dg-table :is(th, td).dgt-num, .dgrid > .dg-end, .dg .dg-cell.dg-num { padding-right: 1.5rem; }
}