/* ============================================================
   Forms — Input / Checkbox / Radio / Switch
   ============================================================ */

/* ---- Text field ---- */
.ws-field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.ws-field__label { font-size: 14px; font-weight: var(--weight-semibold); color: var(--label-normal); }
.ws-field__box {
  display: flex; align-items: center; gap: 8px;
  background: var(--background-normal);
  border: 1px solid var(--line-normal);
  border-radius: var(--radius-12);
  padding: 0 16px;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ws-field--large .ws-field__box  { height: 52px; }
.ws-field--medium .ws-field__box { height: 44px; border-radius: var(--radius-10); }
.ws-field--small .ws-field__box  { height: 38px; border-radius: var(--radius-8); padding: 0 12px; }
.ws-field__icon { color: var(--label-assistive); }
.ws-field__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: var(--weight-medium);
  color: var(--label-normal);
}
.ws-field--medium .ws-field__input, .ws-field--small .ws-field__input { font-size: 15px; }
.ws-field__input::placeholder { color: var(--label-assistive); }
.ws-field__box:focus-within { border-color: var(--primary-normal); box-shadow: 0 0 0 3px var(--primary-assistive); }
.ws-field__box:focus-within .ws-field__icon { color: var(--label-neutral); }
.ws-field--error .ws-field__box { border-color: var(--status-negative); }
.ws-field--error .ws-field__box:focus-within { box-shadow: 0 0 0 3px var(--red-95); }
.ws-field--disabled .ws-field__box { background: var(--fill-normal); border-color: transparent; }
.ws-field--disabled .ws-field__input { color: var(--label-disable); }
.ws-field__msg { margin: 0; font-size: 13px; color: var(--label-alternative); }
.ws-field__msg--error { color: var(--status-negative); }

/* ---- Checkbox ---- */
.ws-check, .ws-radio, .ws-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; color: var(--label-normal);
  cursor: pointer; user-select: none;
}
.ws-check__input, .ws-radio__input, .ws-switch__input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.ws-check__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-6);
  background: var(--background-normal); color: transparent;
  transition: all var(--duration-fast) var(--ease-standard);
}
.ws-check__input:checked + .ws-check__box {
  background: var(--primary-normal); border-color: var(--primary-normal); color: var(--static-white);
}
.ws-check__input:focus-visible + .ws-check__box { box-shadow: 0 0 0 3px var(--primary-assistive); }
.ws-check.is-disabled, .ws-radio.is-disabled, .ws-switch.is-disabled { cursor: not-allowed; color: var(--label-disable); }
.ws-check.is-disabled .ws-check__box { border-color: var(--line-neutral); background: var(--fill-normal); }

/* ---- Radio ---- */
.ws-radio__dot {
  position: relative; width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-full);
  background: var(--background-normal);
  transition: all var(--duration-fast) var(--ease-standard);
}
.ws-radio__dot::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--static-white); transform: scale(0); transition: transform var(--duration-fast) var(--ease-standard);
}
.ws-radio__input:checked + .ws-radio__dot { background: var(--primary-normal); border-color: var(--primary-normal); }
.ws-radio__input:checked + .ws-radio__dot::after { transform: scale(1); }
.ws-radio__input:focus-visible + .ws-radio__dot { box-shadow: 0 0 0 3px var(--primary-assistive); }

/* ---- Switch ---- */
.ws-switch__track {
  position: relative; width: 52px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-full); background: var(--cool-neutral-90);
  transition: background var(--duration-normal) var(--ease-standard);
}
.ws-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: var(--radius-full); background: var(--static-white);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) var(--ease-emphasized);
}
.ws-switch__input:checked + .ws-switch__track { background: var(--primary-normal); }
.ws-switch__input:checked + .ws-switch__track .ws-switch__thumb { transform: translateX(20px); }
.ws-switch__input:focus-visible + .ws-switch__track { box-shadow: 0 0 0 3px var(--primary-assistive); }
.ws-switch.is-disabled .ws-switch__track { background: var(--fill-strong); }