/* =========================================================
   FORMS
   ========================================================= */
label{
  display:block;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 600;
}
.input, select, textarea{
  width: 100%;
  min-height: var(--tap);
  padding: 12px 12px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--text);
  outline: none;
  box-shadow: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Canonical single-line control height.
   Buttons already consume --ui-control-height; standard input/select controls must
   use the same outer height so page-specific CSS does not need to keep fixing 2px gaps. */
input.input:not([type="file"]),
select.input,
select:not([multiple]){
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
textarea{ min-height: 110px; resize: vertical; }
.input::placeholder, textarea::placeholder{ color: var(--muted-2); }
.input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 4px rgba(59,130,246,.14);
}
.help{ margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Grid */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.form-grid .full{ grid-column: 1 / -1; }

/* Select arrow */
select{
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}



/* Checkbox / radio interaction cursor
   실제 선택 가능한 컨트롤과 컨트롤을 감싼 label 모두 클릭 가능함을 명확히 표시한다. */
:where(input[type="checkbox"], input[type="radio"]):not(:disabled){
  cursor:pointer;
}
label:has(input[type="checkbox"]:not(:disabled)),
label:has(input[type="radio"]:not(:disabled)){
  cursor:pointer;
}
:where(input[type="checkbox"], input[type="radio"]):disabled{
  cursor:not-allowed;
}


/* Native date-picker interaction */
:where(input[type="date"]):not(:disabled){
  cursor:pointer;
}
:where(input[type="date"]):not(:disabled)::-webkit-calendar-picker-indicator{
  cursor:pointer;
}
:where(input[type="date"]):disabled,
:where(input[type="date"]):disabled::-webkit-calendar-picker-indicator{
  cursor:not-allowed;
}