/* =========================================================================
   JNC Holdings — Component primitives
   Requires colors_and_type.css. Reusable across preview cards + UI kits.
   ========================================================================= */

/* GLOBAL RESET — the `hidden` attribute must always win, even over components
   that set their own `display` (scrim=grid, toolbar/nav/sheet/toast=flex). Without
   this, [hidden] silently fails on those and overlays stay on screen. (시스템 차원
   수정: 다이얼로그/시트/메뉴 토글의 근본 버그 클래스 제거.) */
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
/* BASE — centered content + consistent 8px icon↔label gap is the safe default
   (a label-only button reads balanced). Carbon's trailing/space-between layout
   is opt-in via `.spread` (used for fluid footer buttons w/ trailing icon). */
.jbtn {
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--control-gap); border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.jbtn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jbtn .ico { display: inline-flex; align-items: center; }
.jbtn.icon-only { gap: 0; justify-content: center; }
.jbtn.spread { justify-content: space-between; }   /* opt-in trailing layout */

/* sizes (fixed heights for cross-control pixel alignment) */
.jbtn.sm  { height: var(--control-h-sm); font-size: 14px; padding: 0 12px; gap: 6px; }
.jbtn.md  { height: var(--control-h-md); font-size: 14px; padding: 0 16px; }
.jbtn.lg  { height: var(--control-h-lg); font-size: 15px; padding: 0 20px; }
.jbtn.xl  { height: var(--control-h-xl); font-size: 16px; padding: 0 24px; }
.jbtn.icon-only.md { width: 40px; padding: 0; }
.jbtn.icon-only.lg { width: 48px; padding: 0; }

/* 규칙 1.7 — 적응형 터치 타깃. "데스크톱/모바일"의 본질은 화면 크기가 아니라
   포인터 정밀도(Fitts 법칙)다. 정밀 포인터(마우스)=조밀 밀도 허용,
   coarse 포인터(터치)=손가락 평균 접촉폭 때문에 더 큰 타깃 필요.
   기준: WCAG 2.5.5(AAA) 44px / Apple HIG 44pt / Material 48dp / Fluent 40epx /
   WCAG 2.5.8(AA, 2.2) 24px 하한. 비파괴적(데스크톱 무영향). */
@media (pointer: coarse) {
  .jbtn.sm, .jbtn.md { min-height: 44px; }
  .jbtn.icon-only.md { min-width: 44px; }
}
/* 명시적 터치 밀도 — 디바이스 감지에 의존하지 않고 모바일 레이아웃에서 강제할 때 사용.
   .touch = 44px(Apple 하한), .touch.comfortable = 48px(Material 권장). */
.jbtn.touch { min-height: 44px; }
.jbtn.touch.comfortable { min-height: 48px; }
/* 모바일 리스트/내비 행 — 최소 48px 탭 영역(Material). 행 전체가 단일 탭 타깃. */
.jrow-touch { min-height: 48px; display: flex; align-items: center; gap: var(--sp-3); }

/* variants */
.jbtn.primary   { background: var(--brand); color: var(--brand-contrast); }
.jbtn.primary:hover   { background: var(--brand-strong); }
.jbtn.primary:active  { background: var(--brand-stronger); }

.jbtn.secondary { background: var(--secondary); color: var(--on-secondary); }
.jbtn.secondary:hover { background: var(--secondary-hover); }
.jbtn.secondary:active{ background: var(--secondary-pressed); }

/* TERTIARY = outlined. Hover/press stay outlined (tint wash), never full invert
   — keeps the emphasis ladder monotonic (outlined < tonal < filled). */
.jbtn.tertiary  { background: transparent; color: var(--brand-stronger); border-color: var(--brand); }
.jbtn.tertiary:hover  { background: var(--brand-tint); border-color: var(--brand-strong); }
.jbtn.tertiary:active { background: var(--brand-soft); }

.jbtn.ghost     { background: transparent; color: var(--fg1); }
.jbtn.ghost:hover     { background: var(--state-hover-surface); }
.jbtn.ghost:active    { background: var(--state-pressed-surface); }

.jbtn.danger    { background: var(--error); color: var(--on-error); }
.jbtn.danger:hover    { background: var(--error-hover); }
.jbtn.danger:active   { background: var(--error-pressed); }

.jbtn:disabled, .jbtn[aria-disabled="true"] {
  background: var(--state-disabled-surface); color: var(--state-disabled-content);
  border-color: var(--state-disabled-outline); cursor: not-allowed; pointer-events: none;
}

/* ---------- Fields ---------- */
.jfield { display: flex; flex-direction: column; gap: 6px; }
.jfield > label { font-size: 12px; font-weight: 600; color: var(--fg2); }
.jinput {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg1);
  height: 40px; padding: 0 12px; background: var(--bg-sunken);
  border: 1px solid transparent; border-bottom: 1px solid var(--border-field);
  border-radius: var(--r-xs) var(--r-xs) 0 0; transition: border-color .14s, box-shadow .14s;
}
.jinput::placeholder { color: var(--fg3); }
.jinput:focus { outline: none; border-bottom-color: var(--brand); box-shadow: 0 1px 0 0 var(--brand); }
.jinput.invalid { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.jhelp { font-size: 12px; color: var(--fg3); }
.jhelp.err { color: var(--error); }

/* ---------- Tags / badges ---------- */
.jtag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1;
  background: var(--neutral-container); color: var(--on-neutral-container);
}
.jtag.brand { background: var(--brand-soft); color: var(--brand-stronger); }
.jtag.pos   { background: var(--positive-soft); color: var(--on-positive-container); }
.jtag.neg   { background: var(--negative-soft); color: var(--on-negative-container); }
.jtag.warn  { background: var(--warning-soft); color: var(--warning); }
.jtag.info  { background: var(--info-soft); color: var(--info); }
.jtag .dot  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Dismissible (removable) tag — the ONLY interactive element is the close button.
   Never also make the whole tag clickable (no nested interactive controls). */
.jtag.removable { padding-inline-end: 4px; }
.jtag .jtag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-inline-start: 2px; padding: 0; border: 0; flex: none;
  background: transparent; color: currentColor; border-radius: var(--r-pill);
  cursor: pointer; position: relative;
}
.jtag .jtag-x::after { content: ""; position: absolute; inset: -6px; }  /* enlarges hit target (~28px) */
.jtag .jtag-x svg { width: 12px; height: 12px; }
.jtag .jtag-x:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.jtag .jtag-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }

/* Selectable / filter chip — the WHOLE chip is a single button (one interactive target).
   Bordered to signal interactivity (Carbon convention); ink when selected (matches segmented). */
.jtag.selectable {
  font-family: var(--font-sans); background: var(--bg-raised);
  border: 1px solid var(--border-strong); color: var(--fg2); cursor: pointer;
  transition: background-color .14s, color .14s, border-color .14s;
}
.jtag.selectable:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--fg1); }
.jtag.selectable:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jtag.selectable[aria-pressed="true"] { background: var(--state-selected); border-color: var(--state-selected); color: var(--on-state-selected); }
.jtag.selectable[aria-pressed="true"]:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); }

/* ---------- Card / tile ---------- */
.jcard {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.jcard.flat { box-shadow: none; }
.jtile {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-5);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.jtile.interactive { cursor: pointer; }
.jtile.interactive:hover { border-color: var(--brand); box-shadow: var(--sh-md); }

/* ---------- Data table ---------- */
.jtable { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.jtable thead th {
  text-align: start; font-size: 13px; font-weight: 600; color: var(--fg2);
  background: var(--bg-sunken); padding: 11px 16px; border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em; white-space: nowrap;
}
.jtable tbody td { font-size: 14px; color: var(--fg1); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.jtable tbody tr:hover { background: var(--brand-tint); }
.jtable td.num, .jtable th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* =========================================================================
   FORCED-COLORS (Windows 고대비 모드) 안전망 — 감사 보완(L0/접근성).
   WHCM은 저작자 색을 시스템 팔레트로 강제 치환한다. 이때 ① border가 사라진
   컨트롤(채움만으로 구분되던 칩·토글·선택 행)의 경계와 ② 커스텀 box-shadow
   포커스 링이 소실될 수 있다. 시스템 키워드 색으로 경계·포커스를 복원한다.
   기준: WCAG 1.4.1(색만으로 정보 전달 금지)·Fluent 2 high-contrast 가이드.
   비파괴적 — 일반 렌더에는 전혀 영향 없음(forced-colors: active일 때만).
   ========================================================================= */
@media (forced-colors: active) {
  /* 포커스 가시성 복원: box-shadow 링은 WHCM에서 무시되므로 실제 outline 부여 */
  .jbtn:focus-visible, .jicon-btn:focus-visible, .jtag.selectable:focus-visible,
  .jcheck > input:focus-visible ~ .box, .jradio > input:focus-visible ~ .dot,
  .jswitch > input:focus-visible ~ .track, .jinput:focus, .jlink:focus-visible {
    outline: 2px solid Highlight; outline-offset: 2px;
  }
  /* 선택/현재 상태를 색이 아닌 시스템 강조로 이중 표시 */
  .jtag.selectable[aria-pressed="true"], [aria-current="page"], [aria-selected="true"] {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  /* 채움만으로 구분되던 표면에 경계 강제(버튼·칩·필드) */
  .jbtn, .jtag, .jinput, .jcard, .jtile { border: 1px solid CanvasText; }
  /* disabled는 시스템 GrayText로 */
  .jbtn:disabled, [aria-disabled="true"] { color: GrayText; }
}