/* =========================================================================
   JNC Holdings — Data display (avatar / list / accordion / divider /
                                KPI stat / allocation bar / definition list)
   Requires colors_and_type.css + semantic-roles.css.
   인지·UX 근거:
   · 작업기억 한계(규칙 1.3): 리스트/정의목록은 3~5 청크 단위로 묶고, 데이터
     밀집면은 여백·위계로 부하를 흡수(규칙 1.4).
   · 금융 방향성(규칙 1.7 / README KRX): 상승=red·하락=blue는 항상 부호·화살표
     동반. 방향 없는 보조값(비중·기준)은 중립색·화살표 없음으로 거짓 신호를 막음.
   · 게슈탈트 근접/유사(규칙 1.6): 카드·구분선으로 관련 정보를 묶는다.
   ========================================================================= */

/* =========================================================================
   DIVIDER  .jdivider
   ========================================================================= */
.jdivider { border: 0; height: 1px; background: var(--outline); margin: var(--sp-5) 0; }
.jdivider.strong { background: var(--outline-strong); }
.jdivider.vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--sp-4); }
.jdivider.labeled { display: flex; align-items: center; gap: var(--sp-3); background: none; height: auto; }
.jdivider.labeled::before, .jdivider.labeled::after { content: ""; flex: 1; height: 1px; background: var(--outline); }
.jdivider.labeled > span { font: var(--w-semibold) var(--fs-label)/1 var(--font-sans);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg3); }

/* =========================================================================
   AVATAR  .javatar
   ========================================================================= */
.javatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-sunken); color: var(--fg2);
  font: var(--w-semibold) var(--fs-body-sm)/1 var(--font-sans);
}
.javatar > img { width: 100%; height: 100%; object-fit: cover; }
.javatar.xs { width: 24px; height: 24px; font-size: 10px; }
.javatar.sm { width: 32px; height: 32px; font-size: 12px; }
.javatar.lg { width: 56px; height: 56px; font-size: 18px; }
.javatar.xl { width: 72px; height: 72px; font-size: 24px; }
.javatar.brand { background: var(--brand-soft); color: var(--brand-stronger); }
.javatar.square { border-radius: var(--r-md); }
/* stacked group */
.javatar-group { display: inline-flex; }
.javatar-group > .javatar { box-shadow: 0 0 0 2px var(--surface); }
.javatar-group > .javatar:not(:first-child) { margin-left: -10px; }

/* =========================================================================
   LIST  .jlist  /  .jlist-item
   ========================================================================= */
.jlist { display: flex; flex-direction: column; }
.jlist-item {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--outline);
  text-align: left; background: transparent; min-height: var(--touch-comfortable);
}
.jlist-item:last-child { border-bottom: 0; }
a.jlist-item, button.jlist-item { border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
  text-decoration: none; color: inherit; transition: background var(--transition-base); }
a.jlist-item:hover, button.jlist-item:hover { background: var(--state-hover-surface); }
.jlist-item:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jlist-item .lead { flex: none; display: inline-flex; color: var(--fg2); }
.jlist-item .lead svg { width: var(--icon-md); height: var(--icon-md); }
.jlist-item .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jlist-item .primary { font: var(--w-medium) var(--fs-body-sm)/1.3 var(--font-sans); color: var(--fg1); }
.jlist-item .secondary { font-size: var(--fs-caption); color: var(--fg2); margin-top: 1px; }
.jlist-item .trail { flex: none; margin-left: auto; color: var(--fg2); font-variant-numeric: tabular-nums; }

/* =========================================================================
   ACCORDION  .jaccordion  (점진 공개 — 규칙 1.2/1.3 작업기억·선택지 절제)
   <details class="jaccordion"><summary>…</summary><div class="jacc-body">…</div></details>
   ========================================================================= */
.jaccordion { border-bottom: 1px solid var(--outline); }
.jaccordion > summary {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none;
  padding: var(--sp-4) var(--sp-1); font: var(--w-semibold) var(--fs-body)/1.4 var(--font-sans);
  color: var(--fg1); transition: color var(--transition-base);
}
.jaccordion > summary::-webkit-details-marker { display: none; }
.jaccordion > summary:hover { color: var(--brand-stronger); }
.jaccordion > summary:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-xs); }
.jaccordion > summary .chev { margin-left: auto; flex: none; color: var(--fg2);
  transition: transform var(--dur-base) var(--ease-standard); }
.jaccordion > summary .chev svg { width: var(--icon-sm); height: var(--icon-sm); }
.jaccordion[open] > summary .chev { transform: rotate(180deg); }
.jacc-body { padding: 0 var(--sp-1) var(--sp-5); color: var(--fg2);
  font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }

/* =========================================================================
   KPI / STAT TILE  .jstat  (방향성 vs 중립 보조값 분리 — README 현행화 준수)
   ========================================================================= */
.jstat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-md); }
.jstat .jstat-label { font: var(--w-semibold) var(--fs-label)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg2); }
.jstat .jstat-value { font: var(--w-bold) var(--fs-h2)/1.1 var(--font-num);
  letter-spacing: -0.01em; color: var(--fg1); font-variant-numeric: tabular-nums; }
.jstat .jstat-value.sm { font-size: var(--fs-h3); }
/* directional delta — ALWAYS sign + arrow + market color (규칙 1.7) */
.jstat-delta { display: inline-flex; align-items: center; gap: 4px;
  font: var(--w-semibold) var(--fs-body-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; }
.jstat-delta .arw { display: inline-flex; } .jstat-delta .arw svg { width: 14px; height: 14px; }
.jstat-delta.up   { color: var(--positive); }   /* 상승 = red (KRX) */
.jstat-delta.down { color: var(--negative); }    /* 하락 = blue (KRX) */
/* NON-directional caption — neutral, NO arrow, NO market color (거짓 신호 방지) */
.jstat-meta { font-size: var(--fs-caption); color: var(--fg2); font-variant-numeric: tabular-nums; }

/* =========================================================================
   ALLOCATION BAR  .jalloc  (portfolio weight — finance-specific)
   비중 표현은 방향이 아니므로 중립 팔레트(브랜드 + stone 단계). 시장색 미사용.
   ========================================================================= */
.jalloc { display: flex; width: 100%; height: 12px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--surface-inset); }
.jalloc > span { height: 100%; display: block; }
.jalloc-legend { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.jalloc-legend .row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); }
.jalloc-legend .swatch { width: 10px; height: 10px; border-radius: var(--r-xs); flex: none; }
.jalloc-legend .name { color: var(--fg1); }
.jalloc-legend .pct { margin-left: auto; color: var(--fg2); font-variant-numeric: tabular-nums; }
/* neutral allocation palette tokens — warm, non-directional (avoid red/blue) */
.jalloc .seg-1 { background: var(--brand); }
.jalloc .seg-2 { background: var(--orange-300); }
.jalloc .seg-3 { background: var(--gold); }
.jalloc .seg-4 { background: var(--stone-400); }
.jalloc .seg-5 { background: var(--stone-300); }

/* =========================================================================
   DEFINITION LIST  .jdl  (key → value pairs; account details, terms)
   ========================================================================= */
.jdl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-6); margin: 0; }
.jdl > dt { font-size: var(--fs-body-sm); color: var(--fg2); }
.jdl > dd { margin: 0; font-size: var(--fs-body-sm); color: var(--fg1); font-weight: 500;
  text-align: right; font-variant-numeric: tabular-nums; }
.jdl.stacked { grid-template-columns: 1fr; gap: var(--sp-1); }
.jdl.stacked > dd { text-align: left; }
.jdl.ruled > dt, .jdl.ruled > dd { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--outline); }