/* ============================================================
   양식 필드 (접두사 `field`), 그리고 검색 막대와 분할 필터.
   필드 마크업은 templates/fragments/components.html 의 `field` 와 `select` 조각에서 온다.
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
}

.field-required {
  color: var(--invalid-text);
  margin-left: 2px;
}

.field-inputWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-input {
  width: 100%;
  min-height: var(--h-ctl);
  padding: 0 var(--sp3);
  background: var(--surface-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color 0.12s ease;
}

textarea.field-input {
  min-height: 96px;
  padding: var(--sp2) var(--sp3);
  resize: vertical;
}

.field-input::placeholder {
  color: var(--text-placeholder);
}

.field-input,
.searchbar input {
  text-overflow: ellipsis;
}

/* 글 입력은 모든 포커스에서 :focus-visible 에 맞으므로, 고리가 포커스 상태를 겸한다. */
.field-input:focus-visible,
.field-select:focus-visible {
  border-color: var(--accent);
  outline: var(--focus-ring);
  outline-offset: 0;
}

.field-input:hover:not(:focus):not(:disabled),
.field-select:hover:not(:focus):not(:disabled) {
  border-color: var(--text-faint);
}

.field-input:disabled,
.field-select:disabled {
  background: var(--fill-dim);
  color: var(--text-faint);
  border-color: var(--border-idle);
  cursor: not-allowed;
}

.field-inputError,
.field-inputError:hover:not(:focus):not(:disabled),
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"] {
  border-color: var(--invalid);
}

.field-rightAddon {
  position: absolute;
  right: var(--sp1);
  display: flex;
  align-items: center;
}

/* 오른쪽 덧붙이가 있는 입력: 글이 토글과 겹치지 않도록 padding 을 준다 */
.field-inputWrap:has(.field-rightAddon) .field-input {
  padding-right: calc(var(--h-sm) + var(--sp2));
}

/* 비밀번호 보이기/숨기기 토글 */
.field-eyeToggle {
  background: transparent;
  border: none;
  width: var(--h-sm);
  height: var(--h-sm);
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color 0.12s;
}

.field-eyeToggle:hover {
  color: var(--text-primary);
}

/* 오류 글은 언제나 아이콘도 지니므로, 결코 색에만 기대지 않는다. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--invalid-text);
}

.field-error:empty {
  display: none;
}

.field-error::before {
  content: "!";
  content: "!" / "";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

/* select 필드: 전체 너비, 글 입력과 맞추며, 갈매기표 이미지를 지닌다 (data URI 가 아니라 외부 파일) */
.field-select {
  width: 100%;
  min-height: var(--h-ctl);
  padding: 0 calc(var(--sp3) * 3) 0 var(--sp3);
  background-color: var(--surface-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color 0.12s ease;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("/img/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

:root[data-theme="dark"] .field-select {
  background-image: url("/img/select-arrow-dark.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-select {
    background-image: url("/img/select-arrow-dark.svg");
  }
}

.field-hint {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  line-height: 1.4;
  transition: color 0.15s ease;
}

/* 실시간 검증 힌트 상태 */
.field-hintSatisfied {
  color: var(--ok-text);
}

.field-hintError {
  color: var(--invalid-text);
}

/* 라벨과 함께 있는 체크 상자나 라디오: 행 전체가 누르는 영역이다. <label class="field-check"> 에서도, input 과 라벨을
   지닌 <div class="field-check"> 에서도 동작한다. */
.field-check {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  min-height: var(--h-ctl);
  font-size: var(--fs-md);
  color: var(--text-primary);
  cursor: pointer;
}

.field-check label {
  cursor: pointer;
}

/* 양식을 끝내는 행: 주된 동작 먼저, 그다음 나가는 길. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp3);
  margin-top: var(--sp4);
}

/* 검색 막대: 행을 채우는 입력과, 그 뒤의 선택적 버튼.
   <form class="searchbar" role="search"><label class="sr-only" for="q">...</label>
   <input id="q" class="field-input" type="search"> <button class="btn btn-secondary btn-md">...</button></form> */
.searchbar {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  flex: 1 1 280px;
  max-width: 480px;
  min-width: 0;
}

.searchbar input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]) {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: var(--h-ctl);
  padding: 0 var(--sp3);
  background: var(--surface-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
}

.searchbar input::placeholder {
  color: var(--text-faint);
}

.searchbar input:focus-visible {
  border-color: var(--accent);
  outline: var(--focus-ring);
  outline-offset: 0;
}

.searchbar .btn {
  flex-shrink: 0;
}

/* 분할 필터 (전체 / 켜짐 / 꺼짐): 링크나 버튼을 이어 붙인 행; 현재 것은 aria-current (또는 버튼이면 aria-pressed) 로
   표시한다. */
.segmented {
  display: inline-flex;
  flex-wrap: nowrap;
  border-radius: var(--radius-sm);
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  min-height: var(--h-ctl);
  padding: 0 var(--sp4);
  background: var(--surface-raised);
  border: 1px solid var(--field-border);
  color: var(--text-dim);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.segmented-item + .segmented-item {
  margin-left: -1px;
}

.segmented-item:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.segmented-item:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

a.segmented-item:hover,
.segmented-item:hover {
  background: var(--fill-dim);
  color: var(--text-primary);
  text-decoration: none;
}

.segmented-item[aria-current]:not([aria-current="false"]),
.segmented-item[aria-pressed="true"] {
  position: relative;
  z-index: 1;
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
}

.segmented-item:focus-visible {
  position: relative;
  z-index: 2;
}

/* 도구 모음 안에서 필드는 행 전체가 아니라 그 내용만큼 넓다. */
.toolbar .field-input,
.toolbar .field-select {
  width: auto;
}

@media (max-width: 480px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .searchbar {
    flex-basis: 100%;
    max-width: none;
  }
}