/* =========================================================================
   JNC Holdings — Containment (deep data table + tile variants)
   Requires colors_and_type.css + semantic-roles.css + jnc-components.css(.jtable/.jtile/.jcard base).
   근거: Carbon data table — density(행 높이), sortable, selectable rows, batch actions,
   expandable rows, sticky, zebra [carbondesignsystem.com/components/data-table].
   인지: 데이터 밀집면은 여백·위계·정렬로 인지부하 흡수(규칙 1.4), 등락은 부호+색(규칙 1.7).
   ========================================================================= */

/* =========================================================================
   DATA TABLE WRAPPER  —  .jtable-wrap  (border, radius, sticky scroll container)
   ========================================================================= */
.jtable-wrap { border: 1px solid var(--outline); border-radius: var(--r-md); overflow: auto; background: var(--surface); }
.jtable-wrap > .jtable { border-collapse: separate; border-spacing: 0; }
.jtable-wrap > .jtable thead th { position: sticky; top: 0; z-index: var(--z-sticky); }

/* =========================================================================
   TABLE TOOLBAR  —  .jtable-toolbar  (title, search, actions; + batch bar)
   ========================================================================= */
.jtable-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--outline); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); }
.jtable-toolbar .title { font: var(--w-semibold) var(--fs-body)/1.2 var(--font-sans); color: var(--fg1); margin-right: auto; }
.jtable-toolbar + .jtable-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
/* toolbar action icon-buttons harmonize with the search field — 20px glyphs (not 24),
   40px hit target, so the filter/density buttons sit in scale with the search icon. */
.jtable-toolbar .jicon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.jtable-toolbar .jicon-btn.is-active { background: var(--state-selected-subtle); color: var(--brand-stronger); }
.jtable-toolbar .jsearch { max-width: 280px; width: auto; }
/* batch-action bar (appears when rows selected) — ink bar, Carbon pattern */
.jtable-batch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4);
  background: var(--ink); color: #fff; border-radius: var(--r-md) var(--r-md) 0 0; }
.jtable-batch .count { font-weight: 600; margin-right: auto; font-variant-numeric: tabular-nums; }
.jtable-batch .jbtn.ghost { color: #fff; } .jtable-batch .jbtn.ghost:hover { background: rgba(255,255,255,0.12); }

/* =========================================================================
   DENSITY — row heights (Carbon: xs/sm/md/lg/xl). Default = md.
   ========================================================================= */
.jtable.density-xs tbody td, .jtable.density-xs thead th { padding: 4px 12px; }
.jtable.density-sm tbody td, .jtable.density-sm thead th { padding: 7px 14px; }
.jtable.density-lg tbody td { padding: 16px; }
.jtable.density-xl tbody td { padding: 22px 16px; }
.jtable.density-xs tbody td, .jtable.density-sm tbody td { font-size: 13px; }

/* =========================================================================
   ZEBRA + selectable + expandable + sticky-first-col
   ========================================================================= */
.jtable.zebra tbody tr:nth-child(even) { background: var(--surface-sunken); }
.jtable.zebra tbody tr:hover { background: var(--brand-tint); }

/* sortable header */
.jtable th.sortable { cursor: pointer; user-select: none; }
.jtable th.sortable .th-in { display: inline-flex; align-items: center; gap: 6px; }
.jtable th.sortable .sort { display: inline-flex; opacity: .4; transition: opacity var(--transition-base); }
.jtable th.sortable:hover .sort { opacity: .8; }
.jtable th.sortable .sort svg { width: 14px; height: 14px; }
.jtable th[aria-sort="ascending"] .sort, .jtable th[aria-sort="descending"] .sort { opacity: 1; color: var(--brand); }
.jtable th[aria-sort="ascending"] .sort { transform: rotate(180deg); }

/* selection column */
.jtable td.sel, .jtable th.sel { width: 44px; text-align: center; padding-left: 12px; padding-right: 0; }
.jtable tbody tr.is-selected { background: var(--state-hover-brand); }
.jtable tbody tr.is-selected:hover { background: var(--brand-soft); }

/* expandable rows */
.jtable td.expand, .jtable th.expand { width: 40px; text-align: center; padding: 0; }
.jtable .row-toggle { border: 0; background: transparent; cursor: pointer; color: var(--fg2); width: 32px; height: 32px;
  display: inline-grid; place-items: center; border-radius: var(--r-xs); }
.jtable .row-toggle:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jtable .row-toggle svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-base) var(--ease-standard); }
.jtable tr[aria-expanded="true"] .row-toggle svg { transform: rotate(90deg); }
.jtable tr.detail-row > td { background: var(--surface-sunken); padding: var(--sp-4) var(--sp-6); }

/* sticky first column (account/name) */
.jtable.sticky-col td:first-child, .jtable.sticky-col th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.jtable.sticky-col thead th:first-child { z-index: calc(var(--z-sticky) + 1); }

/* cell helpers */
.jtable td.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jtable td .cell-status { display: inline-flex; align-items: center; gap: 6px; }
.jtable td .cell-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* empty / loading states */
.jtable-empty { padding: var(--sp-12) var(--sp-6); text-align: center; }
.jtable-skeleton td { padding: 14px 16px; }
.jtable-skeleton .jskeleton.text { height: 12px; }

/* =========================================================================
   TILE VARIANTS  —  clickable / selectable / radio / expandable
   (.jtile base in jnc-components.css)
   ========================================================================= */
/* selectable (multi — checkbox semantics). Whole tile is the target. */
.jtile.selectable, .jtile.radio { position: relative; cursor: pointer; }
.jtile.selectable .mark, .jtile.radio .mark { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: var(--r-xs);
  border: var(--bw-strong) solid var(--border-field); display: grid; place-items: center; transition: background var(--transition-base), border-color var(--transition-base); }
.jtile.selectable .mark::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--on-brand); border-bottom: 2px solid var(--on-brand); transform: rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.jtile.selectable:hover, .jtile.radio:hover { border-color: var(--brand); }
.jtile.selectable[aria-pressed="true"], .jtile.selectable.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.jtile.selectable[aria-pressed="true"] .mark, .jtile.selectable.is-selected .mark { background: var(--brand); border-color: var(--brand); }
.jtile.selectable[aria-pressed="true"] .mark::after, .jtile.selectable.is-selected .mark::after { transform: rotate(-45deg) scale(1); }

/* radio tile (single choice in a group) — mark is a ring */
.jtile.radio .mark { border-radius: var(--r-pill); }
.jtile.radio .mark::after { content: ""; width: 9px; height: 9px; margin: 0; border: 0; border-radius: var(--r-pill); background: var(--brand); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.jtile.radio.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.jtile.radio.is-selected .mark { background: transparent; border-color: var(--brand); }
.jtile.radio.is-selected .mark::after { transform: scale(1); }

/* expandable tile */
.jtile.expandable { cursor: pointer; }
.jtile.expandable .jtile-more { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-standard); }
.jtile.expandable[aria-expanded="true"] .jtile-more { max-height: 320px; }
.jtile.expandable .jtile-chev { transition: transform var(--dur-base) var(--ease-standard); }
.jtile.expandable[aria-expanded="true"] .jtile-chev { transform: rotate(180deg); }

/* tile group grid */
.jtile-group { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* =========================================================================
   LAYOUT UTILITIES  —  grid + container (Foundation: Grid tokens)
   ========================================================================= */
.jcontainer { max-width: var(--container); margin-inline: auto; padding-inline: var(--grid-margin); }
.jcontainer.narrow { max-width: var(--container-narrow); }
.jcontainer.wide   { max-width: var(--container-wide); }
.jgrid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gutter); }
.jgrid.wide { grid-template-columns: repeat(var(--grid-cols-wide), 1fr); }
/* span helpers (1–12) */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width: 820px) {
  .jgrid, .jgrid.wide { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter-sm); }
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6 { grid-column: span 2; }
  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { grid-column: span 4; }
}
@media (max-width: 480px) {
  .jgrid, .jgrid.wide { grid-template-columns: repeat(2, 1fr); }
  [class*="col-"] { grid-column: span 2; }
}

/* =========================================================================
   SPOTLIGHT / 조용한 표현성  —  .jspotlight  (방향성 고찰 O-02)
   Material 3 Expressive(구글 머티리얼 3 익스프레시브)가 46개 연구로 입증한 인지
   기제만 차용한다 — 공통영역(common region·게슈탈트 영역 묶음)으로 핵심 1요소를
   대비된 컨테이너에 고립 → 핵심 액션·지표 응시를 빠르게, 클릭 주저↓. 표피(장난스런
   형태·과채도)는 배제하고 절제 톤을 유지한다. "어디에나 있는 강조는 신호가 아니다"
   (규칙 1.6 Von Restorff[고립효과])의 실현.
   운용 규칙: 한 화면당 1–2개로 제한(과용 시 고립효과 소멸 — M3E도 무절제 적용을 경고).
   근거: uxdesign.cc M3E/common-region · Palmer 1992(지각 조직화).
   ========================================================================= */
.jspotlight { position: relative;
  padding: var(--sp-5); padding-inline-start: calc(var(--sp-5) + 3px);
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: var(--r-lg); box-shadow: var(--elevation-raised); }
.jspotlight::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--brand); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.jspotlight > .jspotlight-eyebrow { display: block; font: var(--w-semibold) var(--fs-label)/1.3 var(--font-sans);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand-stronger); margin-bottom: var(--sp-2); }
/* 중립 변형 — 강조가 브랜드 의미를 띠지 않아야 할 때(예: 약관·요약) */
.jspotlight.neutral { background: var(--surface-sunken); border-color: var(--outline); }
.jspotlight.neutral::before { background: var(--outline-strong); }
.jspotlight.neutral > .jspotlight-eyebrow { color: var(--fg2); }
@media (forced-colors: active) {
  .jspotlight { border: 1px solid CanvasText; }
  .jspotlight::before { background: Highlight; forced-color-adjust: none; }
}