/* 카드 - 규칙은 claude_common/ui/card.md
   목록 카드(.list-card) · 칸(.detail-panel) · 라벨-값(.detail-list) · 숫자 요약 줄(.detail-stats)
   · 통계 카드(.stat-card, 상태 색 data-tone · .is-alert · .is-wide · .stat-cards.is-compact) · 나란히 보기(.split-view) · 등록·수정 묶음(.form-card 모양 없음 > .form-grid > .form-panel, .form-actions)
   카드 면 + 모서리 16px + 그림자로 뜬다(테두리 없음). 색·그림자·모서리는 테마 파일(themes/*.css)의 --uk-* 만 쓴다. */
:root {
  --card-radius: var(--uk-r-sm);       /* 카드 - 8px(2026-10-05 "라운드가 너무 강하다, 반절로" 16→8) */
  --card-radius-in: var(--uk-r-xs);    /* 카드 안 패널·아이콘 받침 - 카드보다 작게(12→4) */
  --card-gap: 18px;          /* 카드 사이 - 이것 하나만 */
}

/* ── 카드 공통 ───────────────────────────────────────────────────────── */
.list-card,
.detail-panel,
.form-panel,
.detail-stats,
.stat-card {
  background: var(--uk-surface);
  color: var(--uk-fg);
  border-radius: var(--card-radius);
  box-shadow: var(--uk-up);
}
/* 카드 안 마지막 요소의 아래 여백은 지운다 - 카드 밑이 들쭉날쭉해지지 않게 */
.detail-panel > :last-child,
.form-panel > :last-child { margin-bottom: 0; }

/* 목록 카드 - 검색줄 · 건수·동작 줄 · 목록 표 · 쪽 번호 줄을 한 장에. 줄 모양은 table.css */
.list-card { margin-bottom: var(--card-gap); overflow: clip; }
/* overflow: clip - 모서리 밖으로 삐져나온 것만 자른다. hidden이면 카드가 스크롤 상자가 되어 표 머리글(table.css sticky)이
   상단바 아래가 아니라 카드 위끝 + --tb-sticky-top에 붙어 첫 줄을 가렸다(2026-10-05, phperpapi에서 발견) */

/* ── 칸 ──────────────────────────────────────────────────────────────── */
.detail-grid,
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 칸은 한 줄에 하나씩 전체 폭(2026-09-23) */
  gap: var(--card-gap);
}
.detail-grid { margin-bottom: var(--card-gap); }
.detail-grid:last-child { margin-bottom: 0; }
/* 예외: 짧고 짝인 두 칸만 반반. 나머지 칸은 .is-full */
.form-grid.is-halves,
.detail-grid.is-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.form-grid, .detail-grid) > .is-full { grid-column: 1 / -1; }
/* 격자 안 칸 사이는 gap 하나만 - form.css의 `.form-panel + .form-panel { margin-top }`(격자 밖 쌓기용)이 겹치면
   반반 칸(.is-halves)의 오른쪽 칸이 내려앉고, 한 줄 쌓기는 사이가 두 배가 된다(2026-10-05 ERP 견적서·계산서) */
.form-grid > .form-panel + .form-panel { margin-top: 0; }

.detail-panel,
.form-panel { padding: .85rem 1rem; }
.detail-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.detail-panel-title,
.form-panel-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--uk-fg); }
.form-panel-title { margin-bottom: .7rem; }
.detail-panel-head .is-right { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: 13px; }
.detail-panel-head form { display: inline; }   /* 머리 동작 버튼을 감싼 폼(POST)도 버튼 옆에 선다 */
.detail-panel-hint { margin: -.4rem 0 .7rem; font-size: 13px; color: var(--uk-muted); word-break: keep-all; }

/* 표를 담은 칸 - 머리만 안쪽 여백, 표는 칸 좌우에서 조금 떨어져 붙는다 */
.detail-panel.has-table { padding: .85rem 0 .4rem; }
.detail-panel.has-table > .detail-panel-head,
.detail-panel.has-table > .detail-panel-hint { padding: 0 1rem; }

/* 등록·수정 - 바깥 묶음은 모양이 없다(2026-10-03). 칸이 바탕 위에 바로 놓인다 */
.form-card { display: block; background: none; box-shadow: none; padding: 0; }
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: var(--card-gap);
  padding-top: var(--card-gap);
  border-top: 1px solid var(--uk-border);
}
.form-actions .is-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.form-actions form { display: inline; }

/* ── 라벨-값 ─────────────────────────────────────────────────────────── */
.detail-list { display: grid; grid-template-columns: var(--detail-label-w, 7rem) minmax(0, 1fr); margin: 0; }   /* 라벨이 긴 칸만 style="--detail-label-w: 9rem" */
.detail-list > dt,
.detail-list > dd { min-width: 0; margin: 0; padding: .4rem 0; border-bottom: 1px solid var(--uk-line); }
.detail-list > dt { padding-right: .6rem; font-size: 13px; color: var(--uk-muted); }
.detail-list > dd { font-size: 14px; color: var(--uk-fg); overflow-wrap: anywhere; }
.detail-list > dt:last-of-type,
.detail-list > dd:last-of-type { border-bottom: 0; }
.detail-list a { color: var(--uk-brand); text-decoration: none; }
.detail-list a:hover { text-decoration: underline; }
.detail-list > dd.is-num { text-align: right; font-variant-numeric: tabular-nums; }   /* 숫자 값만 모은 칸 - 오른쪽 정렬 */
.detail-list > dd.is-empty { color: var(--uk-muted); opacity: .7; }    /* 빈 값은 흐린 - 한 가지 */
/* 긴 글 - 줄바꿈은 살리고 300px을 넘으면 칸 안에서 스크롤 */
.detail-list > dd.detail-long { white-space: pre-line; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }

/* ── 숫자 요약 줄 ────────────────────────────────────────────────────── */
.detail-stats { display: flex; flex-wrap: wrap; margin-bottom: var(--card-gap); }   /* 같은 폭 칸 */
.detail-stats > div { flex: 1 1 0; min-width: 0; padding: .8rem 1rem; text-align: center; border-left: 1px solid var(--uk-line); }
.detail-stats > div:first-child { border-left: 0; }
.detail-stats .ds-label { font-size: 13px; color: var(--uk-muted); }
.detail-stats .ds-value { margin-top: .15rem; font-size: 20px; font-weight: 700; line-height: 1.3; }
.detail-stats .ds-value.is-lead { font-size: 24px; }
.detail-stats .ds-value.is-zero { color: var(--uk-muted); font-weight: 600; }
.detail-stats .ds-sub { margin-top: .15rem; font-size: 12px; color: var(--uk-muted); }
.detail-stats > .ds-hint { flex-basis: 100%; padding: .45rem 1rem; border-left: 0; border-top: 1px solid var(--uk-line); font-size: 13px; color: var(--uk-muted); text-align: left; }

/* ── 통계 카드 ───────────────────────────────────────────────────────── */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--card-gap); margin-bottom: var(--card-gap); }
.stat-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .12s;
}
a.stat-card:hover { box-shadow: var(--uk-up-lg); }
a.stat-card:active { box-shadow: var(--uk-down); }
.stat-card:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.stat-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.stat-card-label { font-size: 13px; color: var(--uk-muted); }
.stat-card-value { margin-top: .15rem; font-size: 24px; font-weight: 700; line-height: 1.25; }
.stat-card-hint { font-size: 12px; color: var(--uk-muted); word-break: keep-all; }
.stat-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--card-radius-in);
  background: var(--tone-light, var(--uk-brand-light));
  color: var(--tone, var(--uk-brand));
  box-shadow: var(--uk-up-sm);
}
.stat-card-icon svg { display: block; width: 20px; height: 20px; }
/* 아이콘 색 - 카드의 data-tone을 따르거나 아이콘에 is-ok · is-warn · is-danger(예전 is-success · is-warning도 받는다) */
.stat-card-icon.is-danger { --tone: var(--uk-danger); --tone-light: var(--uk-danger-light); }
.stat-card-icon.is-ok, .stat-card-icon.is-success { --tone: var(--uk-ok); --tone-light: var(--uk-ok-light); }
.stat-card-icon.is-warn, .stat-card-icon.is-warning { --tone: var(--uk-warn); --tone-light: var(--uk-warn-light); }
/* 상태 색 카드 - data-tone(tone.css)이면 숫자가 뜻 색. 안에 .progress를 넣으면 막대도 같은 색 */
.stat-card[data-tone] .stat-card-value { color: var(--tone); }
.stat-card[data-tone="muted"] .stat-card-value { color: var(--uk-muted); }
.stat-card .progress { margin: .45rem 0 .3rem; }
/* 손봐야 할 숫자 - 옅은 빨강 면 + 빨간 테(실패·막힘이 0이 아닐 때) */
.stat-card.is-alert { background: var(--uk-danger-light); box-shadow: var(--uk-up), inset 0 0 0 1px var(--uk-danger); }
.stat-card.is-alert .stat-card-value { color: var(--uk-danger); }
/* 넓은 카드 - 이름·값이 길면 두 칸을 쓴다(줄을 꺾지 않는다) */
.stat-card.is-wide { grid-column: span 2; }
.stat-card.is-wide :is(.stat-card-label, .stat-card-value) { white-space: nowrap; }
/* 작은 카드 묶음 - 숫자가 많은 현황판. 한 장 최소 140px, 아이콘 없이 */
.stat-cards.is-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.stat-cards.is-compact .stat-card { padding: .75rem .9rem; }
.stat-cards.is-compact .stat-card-value { font-size: 20px; }
/* 0이면 아이콘 색을 빼고 숫자를 흐리게 - 0을 강조하지 않는다 */
.stat-card.is-zero .stat-card-icon { background: var(--uk-sunk); color: var(--uk-muted); box-shadow: none; }
.stat-card.is-zero .stat-card-value { color: var(--uk-muted); font-weight: 600; }

/* ── 나란히 보기 - 왼쪽 편집 + 오른쪽 따라오는 미리보기 ─────────────────── */
.split-view { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
.split-view.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-view > * { min-width: 0; }
.split-view-aside { position: sticky; top: calc(var(--tb-sticky-top, 0px) + 10px); }   /* 상단바 높이(table.css 변수)만큼 비켜 붙는다 */

/* ── 좁은 화면 ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .split-view, .split-view.is-even { grid-template-columns: minmax(0, 1fr); }
  .split-view-aside { position: static; }
}
@media (max-width: 1023px) {
  .stat-cards:not(.is-compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cards:not(.is-compact) > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* 홀수면 마지막 한 장이 줄을 통째로 */
}
@media (max-width: 899px) {
  .form-grid.is-halves,
  .detail-grid.is-halves { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .detail-stats { flex-direction: column; }
  .detail-stats > div { flex: none; }
  .detail-stats > div { border-left: 0; border-top: 1px solid var(--uk-line); }
  .detail-stats > div:first-child { border-top: 0; }
  .detail-list { grid-template-columns: min(var(--detail-label-w, 7rem), 5.5rem) minmax(0, 1fr); }   /* 라벨은 왼쪽에 둔 채 칸만 줄인다(2026-10-03) */
  .stat-cards { gap: 12px; }
  .stat-card { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .85rem; }  /* 아이콘을 글자 위로 */
}