/* =========================================================================
   JNC Holdings — Inputs (deep text-input system + advanced controls)
   Requires colors_and_type.css + semantic-roles.css + jnc-components.css(.jinput base)
              + jnc-forms.css(selection controls).
   근거(검증): Carbon text-input은 8개 상호작용 상태 — enabled·active·focus·error·
   warning·disabled·skeleton·read-only [carbondesignsystem.com/components/text-input].
   오류는 3중 표시(빨강 테두리 + 아이콘 + 메시지)[동]. 라벨은 상단정렬 기본[carbon forms].
   인지: 실시간 검증으로 데이터 정합↑(규칙 1.4), >5 옵션이면 select 계열 사용(규칙 1.2 Hick).
   ========================================================================= */

/* =========================================================================
   FORM FIELD SCAFFOLD  —  .jfield  (label · control · helper/error · counter)
   상단정렬 라벨(Carbon 기본). 필수/선택/도움말/오류/글자수 슬롯 일원화.
   ========================================================================= */
.jfield { display: flex; flex-direction: column; gap: 6px; }
.jfield > .jlabel { font: var(--w-semibold) var(--fs-label)/1.3 var(--font-sans); color: var(--fg2);
  display: flex; align-items: center; gap: 6px; }
.jfield > .jlabel .req { color: var(--error); }
.jfield > .jlabel .opt { color: var(--fg3); font-weight: 400; }
.jfield > .jlabel .info { color: var(--fg3); display: inline-flex; }   /* "i" toggletip trigger */
.jfield > .jlabel .info svg { width: 14px; height: 14px; }
.jfield-foot { display: flex; justify-content: space-between; gap: var(--sp-3); }
.jhelp  { font-size: var(--fs-label); color: var(--fg3); line-height: 1.4; }
.jhelp.err  { color: var(--error); display: flex; align-items: center; gap: 4px; }
.jhelp.err svg { width: 13px; height: 13px; flex: none; }
.jhelp.warn { color: var(--on-warning-container); display: flex; align-items: center; gap: 4px; }
.jhelp.warn svg { width: 13px; height: 13px; flex: none; }
.jcounter { font-size: var(--fs-label); color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jcounter.over { color: var(--error); }

/* =========================================================================
   TEXT INPUT — deepen .jinput: sizes, states, fluid
   (.jinput base lives in jnc-components.css — filled field, bottom-border focus)
   ========================================================================= */
.jinput { width: 100%; }
/* sizes */
.jinput.sm { height: var(--control-h-sm); font-size: 13px; padding: 0 10px; }
.jinput.lg { height: var(--control-h-lg); font-size: 15px; padding: 0 14px; }
/* states beyond default/invalid (base already has :focus + .invalid) */
.jinput.warn  { border-bottom-color: var(--warning); box-shadow: 0 1px 0 0 var(--warning); }
.jinput.success { border-bottom-color: var(--success); box-shadow: 0 1px 0 0 var(--success); }
.jinput:disabled, .jinput[disabled] { background: var(--state-disabled-surface); color: var(--state-disabled-content); cursor: not-allowed; }
/* read-only: no fill, hairline only — signals "view, not edit" (Carbon) */
.jinput[readonly] { background: transparent; border-bottom: 1px solid var(--border); box-shadow: none; cursor: default; color: var(--fg1); }
/* skeleton loading */
.jinput.skeleton { background: var(--surface-sunken); border-bottom-color: transparent; position: relative; overflow: hidden; pointer-events: none; }
.jinput.skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%); animation: jshimmer 1.3s var(--ease-in-out) infinite; }

/* =========================================================================
   AFFIX WRAPPER  —  .jinput-wrap  (prefix/suffix: ₩, %, units, icons, actions)
   금융 입력에 핵심: 통화기호·단위·검증아이콘·표시토글을 필드와 한 박스로.
   ========================================================================= */
.jinput-wrap {
  display: inline-flex; align-items: center; width: 100%; gap: 8px;
  height: var(--control-height); padding: 0 12px;
  background: var(--field-bg); border: 1px solid transparent;
  border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius) var(--field-radius) 0 0;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.jinput-wrap:focus-within { border-bottom-color: var(--field-border-focus); box-shadow: 0 1px 0 0 var(--field-border-focus); }
.jinput-wrap.invalid { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.jinput-wrap.warn    { border-bottom-color: var(--warning); box-shadow: 0 1px 0 0 var(--warning); }
.jinput-wrap.sm { height: var(--control-h-sm); }
.jinput-wrap.lg { height: var(--control-h-lg); }
.jinput-wrap > input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--fg1);
}
.jinput-wrap > input::placeholder { color: var(--fg3); }
.jinput-wrap > input.num { font-variant-numeric: tabular-nums; text-align: right; }
.jinput-wrap .affix { color: var(--fg2); font-size: var(--fs-body-sm); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.jinput-wrap .affix.unit { color: var(--fg3); }
.jinput-wrap .affix svg { width: var(--icon-sm); height: var(--icon-sm); display: block; }
.jinput-wrap .affix.valid { color: var(--success); }
.jinput-wrap .affix.error { color: var(--error); }
/* reveal button (password) */
.jinput-wrap .reveal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; background: transparent; color: var(--fg3); cursor: pointer; border-radius: var(--r-xs); flex: none; }
.jinput-wrap .reveal:hover { color: var(--fg1); background: var(--state-hover-surface); }

/* =========================================================================
   NUMBER INPUT (stepper)  —  .jstepper-input
   Carbon "bound entry" — restrict + step. 증감 버튼 + tabular 값.
   ========================================================================= */
.jstepper-input {
  display: inline-flex; align-items: stretch; width: 100%; height: var(--control-h-md);
  background: var(--field-bg); border: 1px solid transparent;
  border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius) var(--field-radius) 0 0; overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.jstepper-input:focus-within { border-bottom-color: var(--field-border-focus); box-shadow: 0 1px 0 0 var(--field-border-focus); }
.jstepper-input.invalid { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.jstepper-input > input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; padding: 0 8px;
  font-family: var(--font-num); font-size: var(--fs-body-sm);
  color: var(--fg1); font-variant-numeric: tabular-nums; text-align: center;
}
.jstepper-input > input::-webkit-outer-spin-button, .jstepper-input > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jstepper-input > input[type="number"] { -moz-appearance: textfield; }
/* +/- buttons: square, centered, equal — divider on the INNER edge only */
.jstepper-input .step {
  flex: none; width: var(--control-h-md); border: 0; padding: 0; background: transparent;
  color: var(--fg2); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.jstepper-input > .step:first-child { border-right: 1px solid var(--border); }
.jstepper-input > .step:last-child  { border-left: 1px solid var(--border); }
.jstepper-input .step:hover  { background: var(--state-hover-surface); color: var(--brand-stronger); }
.jstepper-input .step:active { background: var(--state-pressed-surface); }
.jstepper-input .step:focus-visible { outline: none; box-shadow: var(--sh-focus); z-index: 1; }
.jstepper-input .step:disabled { color: var(--state-disabled-content); cursor: not-allowed; background: transparent; }
.jstepper-input .step svg { width: var(--icon-sm); height: var(--icon-sm); display: block; }
/* sizes — buttons stay square to the field height */
.jstepper-input.sm { height: var(--control-h-sm); } .jstepper-input.sm .step { width: var(--control-h-sm); }
.jstepper-input.lg { height: var(--control-h-lg); } .jstepper-input.lg .step { width: var(--control-h-lg); }
.jstepper-input.disabled, .jstepper-input:has(> input:disabled) { background: var(--state-disabled-surface); }
.jstepper-input:has(> input:disabled) .step { color: var(--state-disabled-content); pointer-events: none; }

/* =========================================================================
   COMBOBOX / AUTOCOMPLETE  —  .jcombo  (input + filtered listbox)
   인지: >5 옵션은 select 계열(규칙 1.2). 타이핑으로 후보 좁힘 → 작업기억 부담↓.
   ========================================================================= */
.jcombo { position: relative; width: 100%; }
.jcombo > .jcombo-control {
  display: inline-flex; align-items: center; width: 100%; gap: 8px; height: var(--control-height); padding: 0 8px 0 12px;
  background: var(--field-bg); border: 1px solid transparent; border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius) var(--field-radius) 0 0;
}
.jcombo > .jcombo-control:focus-within { border-bottom-color: var(--field-border-focus); box-shadow: 0 1px 0 0 var(--field-border-focus); }
.jcombo > .jcombo-control > input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--fg1); }
.jcombo > .jcombo-control .caret { color: var(--fg2); display: inline-flex; flex: none; }
.jcombo > .jcombo-control .caret svg { width: var(--icon-sm); height: var(--icon-sm); }
.jcombo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  max-height: 248px; overflow-y: auto; padding: var(--sp-1);
  background: var(--surface-popover); border: 1px solid var(--outline);
  border-radius: var(--r-md); box-shadow: var(--elevation-overlay);
}
.jcombo-opt { display: flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-body-sm); color: var(--fg1); cursor: pointer; }
.jcombo-opt:hover, .jcombo-opt[aria-selected="true"] { background: var(--state-hover-surface); }
.jcombo-opt .match { color: var(--brand-stronger); font-weight: 700; }   /* highlighted query match */
.jcombo-opt.is-active { background: var(--state-hover-brand); }

/* =========================================================================
   MULTISELECT / TOKEN INPUT  —  .jtokens  (selected items as removable tags)
   ========================================================================= */
.jtokens {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: var(--control-height);
  padding: 6px 8px; background: var(--field-bg); border: 1px solid transparent; border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius) var(--field-radius) 0 0;
}
.jtokens:focus-within { border-bottom-color: var(--field-border-focus); box-shadow: 0 1px 0 0 var(--field-border-focus); }
.jtokens > input { flex: 1; min-width: 80px; border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--fg1); height: 24px; }
/* token reuses .jtag.removable from jnc-components.css; size-sm variant here */
.jtokens .jtag { height: 22px; font-size: 11px; }

/* =========================================================================
   FILE UPLOADER  —  .jupload  (drag-drop zone + file list)
   ========================================================================= */
.jupload {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center;
  padding: var(--sp-6); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-sunken); color: var(--fg2); cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.jupload:hover, .jupload.dragover { border-color: var(--brand); background: var(--brand-tint); }
.jupload .ico { color: var(--fg3); } .jupload .ico svg { width: var(--icon-lg); height: var(--icon-lg); }
.jupload .lead { font-size: var(--fs-body-sm); color: var(--fg1); font-weight: 500; }
.jupload .lead .link { color: var(--link); text-decoration: underline; }
.jupload .hint { font-size: var(--fs-label); color: var(--fg3); }
.jupload-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 10px 12px;
  border: 1px solid var(--outline); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-body-sm); }
.jupload-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg1); }
.jupload-item .size { color: var(--fg3); font-variant-numeric: tabular-nums; flex: none; }
.jupload-item .state { display: inline-flex; flex: none; }
.jupload-item .state.done { color: var(--success); } .jupload-item .state.err { color: var(--error); }
.jupload-item .state svg { width: var(--icon-sm); height: var(--icon-sm); }

/* =========================================================================
   DATE FIELD  —  .jdatefield  (segmented YYYY / MM / DD or calendar trigger)
   ========================================================================= */
.jdatefield {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; height: var(--control-height); padding: 0 12px;
  background: var(--field-bg); border: 1px solid transparent; border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius) var(--field-radius) 0 0;
}
.jdatefield:focus-within { border-bottom-color: var(--field-border-focus); box-shadow: 0 1px 0 0 var(--field-border-focus); }
.jdatefield > input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-num); font-size: var(--fs-body-sm); color: var(--fg1); font-variant-numeric: tabular-nums; }
.jdatefield .cal { color: var(--fg2); display: inline-flex; flex: none; } .jdatefield .cal svg { width: var(--icon-sm); height: var(--icon-sm); }

/* =========================================================================
   OTP / PIN  —  .jotp  (fixed-count single-char cells)
   ========================================================================= */
.jotp { display: inline-flex; gap: var(--sp-2); }
.jotp > input {
  width: 44px; height: 52px; text-align: center; font-family: var(--font-num); font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums; color: var(--fg1); background: var(--field-bg);
  border: 1px solid var(--border-field); border-radius: var(--r-sm); outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.jotp > input:focus { border-color: var(--brand); box-shadow: var(--sh-focus); }
.jotp > input.filled { border-color: var(--border-strong); }
.jotp.invalid > input { border-color: var(--error); }

/* =========================================================================
   SLIDER — deepen .jrange: value bubble, ticks, range (dual)
   ========================================================================= */
.jslider { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.jslider-head { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--fg2); font-variant-numeric: tabular-nums; }
.jslider-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg3); font-variant-numeric: tabular-nums; padding: 0 8px; }

/* =========================================================================
   COARSE-POINTER sizing (non-destructive)
   ========================================================================= */
@media (pointer: coarse) {
  .jinput-wrap, .jstepper-input, .jcombo > .jcombo-control, .jtokens, .jdatefield { min-height: var(--touch-min); }
}