/* ==========================================================================
   field — 폼 입력 한 줄. name 은 기능정의서 4-2 필드명과 맞춘다
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.field__label {
  color: #000000;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.16;
}

.field__req { margin-left: 2px; color: var(--c-danger); }

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  padding: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-input);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  line-height: 1.16;
}

.field__textarea { min-height: 88px; }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--c-text-placeholder); }

.field__hint { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* 에러 자리는 처음부터 마크업에 두고 hidden 으로 감춘다.
   색만으로 알리지 않는다 — 테두리 + 문구를 함께 쓴다. */
.field__error { color: var(--c-danger); font-size: var(--fs-sm); }

.field.is-invalid .field__input,
.field.is-invalid .field__textarea,
.field.is-invalid .field__select { border-color: var(--c-danger); }

.field.is-disabled { opacity: .5; }

/* --- 라디오 · 체크박스 ------------------------------------------------------- */

.field--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.field__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.16;
  color: #000000;
}

.field__radio,
.field__checkbox {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin: 0;
  accent-color: var(--c-radio);
}

/* 네모를 **첫 줄 글자 가운데**에 맞춘다 `[2026-09-21]`.
   묶음이 flex-start 정렬이라 네모(15px)와 글자 줄(14px × 1.4 = 19.6px)이
   위 끝에서 맞았고, 그만큼 네모가 글자보다 올라가 보였다.
   두 줄짜리 문구에서는 가운데 정렬로 맞출 수 없다 — 네모가 문단 한가운데로
   내려가므로, 첫 줄과의 차이만큼만 내린다: (19.6 − 15) ÷ 2 ≈ 2px */
.field--check .field__checkbox { margin-top: 2px; }

.field--check {
  flex-direction: row;
  flex-wrap: wrap;            /* 경고문구가 체크박스 옆이 아니라 아랫줄로 간다 */
  align-items: flex-start;
  gap: var(--sp-2) var(--sp-3);
}
/* 글자가 체크박스 **옆에서** 시작한다 `[2026-09-21]`.
   flex-basis 가 auto 라 글자가 한 줄에 다 안 들어가면 라벨이 통째로 아랫줄로
   밀려났다 — 체크박스만 윗줄에 덩그러니 남고, 문장이 길면 별표(*)까지 따로
   떨어졌다. 남은 폭을 라벨이 받아 그 안에서 접히게 한다.
   min-width: 0 이 있어야 긴 단어에서도 칸을 넘기지 않는다 */
.field--check .field__label {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  /* 두 줄이 되면 1.16 은 줄끼리 붙는다 */
  line-height: 1.4;
}
.field--check .field__error { flex-basis: 100%; }

.field__link { text-decoration: underline; }
.field__link:hover { color: var(--c-blue); }

/* --- 드롭다운 화살표 ---------------------------------------------------------
   브라우저 기본 화살표는 굵기·위치를 손댈 수 없어서 직접 그린다.
   아이콘 폰트·스프라이트가 아니라 인라인 SVG 를 data URI 로 넣은 것이다.
   색을 바꾸려면 아래 stroke 의 %23 뒤 6자리를 고친다 (%23 = #).
   -------------------------------------------------------------------------- */

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;                       /* 화살표 자리 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1 1l5 5 5-5' stroke='%23323232' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;    /* 오른쪽에서 20px */
  background-size: 12px 7px;
}

/* 기본 화살표가 남는 구형 IE·Edge 대비 */
.field__select::-ms-expand { display: none; }

/* --- 안내 문구 -------------------------------------------------------------
   에러가 아니라 알림이다 (로그아웃 완료 · 메일 발송 안내).
   --c-danger 는 빨강이라 오류로 읽히므로 파랑 계열로 둔다.
   개발 쪽에서 추가했다 — 디자이너가 모양을 다시 볼 것 [2026-09-16]
   -------------------------------------------------------------------------- */
.field__notice {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  color: var(--c-blue-deep);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
}

/* 잠깐 보였다 사라진다 `[2026-09-23]` — "담았습니다" 같은 알림은 읽고 나면 할 일이
   없는데, 남아 있으면 아래 내용을 계속 밀어 둔다. 자리까지 함께 접어야 글자만
   흐려지고 빈 칸이 남는 일이 없다 (grid-template-rows 로 높이를 0 으로 준다).

   움직임을 줄여 달라고 한 사람에게는 서서히 사라지는 대신 그냥 없앤다 */
.field__notice--fade {
  display: grid;
  grid-template-rows: 1fr;
  padding-block: var(--sp-3);
  transition: grid-template-rows .28s ease, opacity .28s ease,
              padding-block .28s ease, margin .28s ease;
}
.field__notice--fade > * { overflow: hidden; }

.field__notice--fade.is-gone {
  grid-template-rows: 0fr;
  margin-block: 0;
  padding-block: 0;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .field__notice--fade { transition: none; }
}