/* 표 - 목록 표 · 건수·동작 줄 · 특수 칸(체크·번호·손잡이·관리) · 머리글 고정 · 행 끌기 · 열 폭 끌기.
   규칙: claude_common/ui/table.md
   색·그림자·모서리는 테마 파일(themes/*.css)의 --uk-* 만 쓴다. */
:root{
  --tb-row-hover:color-mix(in srgb,var(--uk-brand) 5%,transparent);
  --tb-sticky-top:0px;            /* 페이지에 붙는 머리글이 비켜설 상단바 높이 - 프로젝트가 덮어쓴다 */
}

/* ── 표 상자 - 표는 반드시 셋 중 하나로 바로 감싼다(사이에 다른 요소 없이) ─────────
   .list-table(목록 카드) · .table-container(상세·탭·폼 안) · .table-scroll(모달처럼 바깥이 키를 주는 곳)
   넘치면 이 상자 안에서 가로로 민다. 가로·세로 스크롤을 한 상자에 준다(상자를 겹치지 않는다). */
.list-table,.table-container,.table-scroll{overflow:auto}   /* 좌우 여백 없음 - 표가 카드 끝까지 닿는다(2026-10-06) */
.list-table{margin-top:.6rem}           /* 위 여백은 바깥에 - 안쪽 여백이면 붙은 머리글 위로 지나가는 줄이 비친다 */
.table-scroll{flex:1 1 auto;min-height:0}   /* 바깥이 flex로 키를 준다. min-height:0 이 없으면 줄지 않아 스크롤이 안 생긴다 */
:is(.list-table,.table-container).is-fit{overflow:visible}   /* table.js - 폭에 들어가면 페이지가 스크롤한다 */

/* ── 표 ─────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:separate;border-spacing:0;background:transparent;color:var(--uk-fg);font-size:14px}
.table th,.table td{padding:.45rem .6rem;text-align:left;vertical-align:middle;white-space:nowrap}
.table td{border-bottom:1px solid var(--uk-line)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover > td{background:var(--tb-row-hover)}
.table a{color:var(--uk-brand);text-decoration:none;font-weight:500}
.table a:hover{text-decoration:underline}

/* 머리글 = 면 색 띠 + 밑줄 한 줄(그림자 없음, 2026-10-06), 양 끝은 각지게(2026-10-03) */
.table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--uk-surface);color:var(--uk-muted);
  font-size:13px;font-weight:600;
  box-shadow:inset 0 -1px 0 var(--uk-border);
}
.table thead tr:not(:last-child) th{position:static;box-shadow:none}   /* 머리글 줄이 둘이면 열 이름 줄만 붙인다 */
:is(.list-table,.table-container).is-fit > .table thead tr:last-child th{top:var(--tb-sticky-top)}
.table thead + tbody tr:first-child td{padding-top:.6rem}
.table.is-narrow th,.table.is-narrow td{padding:.36rem .5rem}

/* 칸 값 */
.table .is-num{text-align:right;font-variant-numeric:tabular-nums}
.table .is-zero,.table .is-empty{color:var(--uk-muted);opacity:.6}
/* 줄을 바꾸는 칸 - 한 줄 고정의 예외(내용·메시지·오류 칸). 폭 범위는 칸마다 --cell-min / --cell-max */
.table td.is-wrap{white-space:normal;min-width:var(--cell-min,260px);max-width:var(--cell-max,480px);overflow-wrap:anywhere;word-break:keep-all}
.table .is-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal}
/* 칸 안 두 번째 줄 - 12px 흐리게(등록자·시각·출처 같은 꼬리) */
.cell-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--uk-muted);white-space:normal;overflow-wrap:anywhere}

/* ── 특수 칸 ─────────────────────────────────────────────────────────── */
.col-check{width:2.5rem;text-align:center}
.col-check input[type="checkbox"]{width:17px;height:17px;margin:0;vertical-align:middle;accent-color:var(--uk-brand)}
.col-no{width:4.5rem;color:var(--uk-muted);font-variant-numeric:tabular-nums}
.col-tone{width:1%}
.col-manage{width:8.5rem;text-align:right}
.col-manage.is-wide{width:12rem}
.col-manage form{display:inline}                 /* 줄 버튼을 감싼 폼(삭제 POST)도 버튼 옆에 선다 */
.col-manage > * + *{margin-left:.25rem}
.col-drag{width:2rem;padding-right:0 !important;text-align:center}
tbody .col-drag{cursor:grab;touch-action:none}
.drag-handle{color:var(--uk-muted);opacity:.6;letter-spacing:-2px;user-select:none}
tbody .col-drag:hover .drag-handle{opacity:1;color:var(--uk-fg)}

/* 열 폭 끌기(table.js, table[data-col-resize]) - 머리글 칸 오른쪽 끝 손잡이. 보이는 선 1px, 잡는 범위 10px(2026-10-06) */
.table[data-col-resize] thead th{overflow:hidden}
.col-resizer{position:absolute;top:0;bottom:0;right:0;width:10px;cursor:col-resize;touch-action:none;z-index:1}
.col-resizer::after{content:'';position:absolute;top:25%;bottom:25%;right:0;width:1px;background:var(--uk-border)}
.col-resizer:hover::after,th.is-resizing > .col-resizer::after{top:0;bottom:0;width:2px;background:var(--uk-brand)}
/* 굳힌 폭 - 열 폭은 머리글 칸이 정하고, 좁혀서 넘치는 값은 …로 자른다 */
.table.is-col-sized{table-layout:fixed}
.table.is-col-sized th,.table.is-col-sized td{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
.table.is-col-resizing,.table.is-col-resizing *{cursor:col-resize !important;user-select:none}

/* 행 끌기(table.js) - 행 자체가 세로로만 움직인다 */
.table tbody tr.is-dragging{position:relative;z-index:2;box-shadow:var(--uk-up)}
.table tbody tr.is-dragging > td{background:var(--uk-brand-light)}
body.is-row-dragging,body.is-row-dragging *{cursor:grabbing !important;user-select:none}
.table tbody.is-saving{opacity:.6;pointer-events:none}

/* 뱃지 - 뜻 색 진한 바탕 + 흰 글자 알약. 뜻 이름은 is-ok · is-warn(is-success · is-warning도 받는다), data-tone도 같다(tone.css) */
.tag{display:inline-flex;align-items:center;border-radius:var(--uk-r-pill);padding:.16rem .6rem;font-size:12px;font-weight:600;background:var(--tone,var(--uk-muted));color: var(--uk-on-strong);white-space:nowrap}
.tag:not([data-tone]){--tone:var(--uk-muted);--tone-light:var(--uk-sunk);--tone-fg:var(--uk-muted)}
.tag.is-brand{--tone:var(--uk-brand);--tone-light:var(--uk-brand-light);--tone-fg:var(--uk-brand-dark)}
.tag.is-ok,.tag.is-success{--tone:var(--uk-ok);--tone-light:var(--uk-ok-light);--tone-fg:var(--uk-ok-fg)}
.tag.is-warn,.tag.is-warning{--tone:var(--uk-warn);--tone-light:var(--uk-warn-light);--tone-fg:var(--uk-warn-fg)}
.tag.is-danger{--tone:var(--uk-danger);--tone-light:var(--uk-danger-light);--tone-fg:var(--uk-danger-fg)}
.tag.is-muted{--tone:var(--uk-muted);--tone-light:var(--uk-sunk);--tone-fg:var(--uk-muted)}
/* 옅은 꼬리표 - 상태가 아닌 분류·키워드 칩. 옅은 바탕 + 뜻 색 글자(.tag.is-ok.is-soft) */
.tag.is-soft{background:var(--tone-light,var(--uk-sunk));color:var(--tone-fg,var(--uk-muted))}

/* 행 칠하기 - 상태를 행 전체에 옅게. td에 칠한다(tr에 칠하면 hover가 안 바뀐다) */
.table tbody tr.is-row-ok > td{background:color-mix(in srgb,var(--uk-ok) 7%,transparent)}
.table tbody tr.is-row-warn > td{background:color-mix(in srgb,var(--uk-warn) 9%,transparent)}
.table tbody tr.is-row-off > td{background:color-mix(in srgb,var(--uk-muted) 9%,transparent)}

/* 관리 칸 줄 버튼 */
.btn-row{display:inline-flex;align-items:center;height:26px;padding:0 .6rem;border:0;border-radius:var(--uk-r-pill);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-row + .btn-row{margin-left:.25rem}
.btn-row.is-edit{background:var(--uk-brand-light);color:var(--uk-brand)}
.btn-row.is-delete{background:var(--uk-danger-light);color:var(--uk-danger)}
.btn-row.is-view{background:var(--uk-sunk);color:var(--uk-fg)}

/* ── 건수·동작 줄(표 위) ─────────────────────────────────────────────── */
.list-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.55rem 1.1rem;border-bottom:1px solid var(--uk-border)}
.list-count{font-size:13px;color:var(--uk-muted);white-space:nowrap}
.list-sort-note{font-size:13px;color:var(--uk-muted);padding-left:.5rem;border-left:1px solid var(--uk-border);word-break:keep-all}
.list-actions .is-right{margin-left:auto;display:flex;gap:.4rem}
.list-actions .is-right button,.list-actions .is-right .btn{height:30px;padding:0 .8rem;font-size:13px}

/* 빈 목록 - 표 자리에 안내 */
.list-empty{margin:1rem .75rem;padding:2rem 1rem;border:1px dashed var(--uk-border);border-radius:var(--uk-r-sm);text-align:center;color:var(--uk-muted);word-break:keep-all}