/* =========================================================
   입력 필드 컴포넌트 (.fld)

   디자인 시스템: Input_Status_Label_S_Light (파일 t2pufxcgW3Rlo7iScK6WRx / 6738:16335)
     Default 6738:16408 · Active 6738:16458 · Error 6738:16542

   짝을 이루는 파일:
     CI/apply/application/modules/common/views/inc/partials/_input_field.php

   상태는 CSS 가 스스로 판정하는 것(:focus)과 밖에서 붙여주는 것(.is-invalid)으로 나뉜다.
   DS 의 Completed · Retry · Disabled 변이는 쓰는 화면이 없어 아직 옮기지 않았다.

   base.css / layout.css 의 전역 폼 규칙(input[type=text]{height:50px;padding:18px 14px...})을
   이기려고 모든 값을 .fld 하위에서 명시한다.
   ========================================================= */

.fld {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* --- 라벨 --- */
.fld-label {
    display: flex;
    gap: 2px;
    align-items: baseline;
    color: #555a5d;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.32px;
}
.fld-label-sub {
    color: #777c81;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.3px;
}

/* --- 입력 + 보조문구 --- */
.fld-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 높이를 48 로 못 박고 세로 여백은 브라우저의 가운데 정렬에 맡긴다 -
   DS 가 Default(padding 13) 와 Active(padding 10) 에서 값이 다른데, 둘 다 결과 높이는 48 이다. */
.fld .fld-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #dadddf;
    border-radius: 4px;
    background: #fff;
    color: #35383b;
    font-family: inherit;
    /* KR/Body/Regular/2/Multi Line - Default · Active · Error 세 변이가 모두 같은 값이다.
       16px 은 iOS Safari 가 입력란을 탭할 때 화면을 확대하지 않는 하한이기도 하다. */
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -0.32px;
}
/* 입력값과 안내문은 굵기가 같고 색만 다르다(fg/neutral/muted vs fg/neutral/placeholder). */
.fld .fld-input::placeholder {
    color: #95989b;
}

/* 포커스는 브랜드색이 아니라 DS 의 청록이다(Focus-ring/faint). */
.fld .fld-input:focus {
    border-color: #00b5c2;
    box-shadow: 0 0 0 3px rgba(0, 181, 194, 0.16);
    outline: none;
}

/* 오류. 테두리는 color/red/500, 링과 문구는 fg/error/muted 로 DS 가 서로 다른 빨강을 쓴다 - 그대로 따른다. */
.fld .fld-input.is-invalid,
.fld .fld-input.is-invalid:focus {
    border-color: #f23b3b;
    box-shadow: 0 0 0 3px rgba(224, 40, 32, 0.12);
}

/* KR/Label/Regular/3 - 보조문구와 오류문구는 색만 다르고 타이포는 같다.
   letter-spacing 을 명시하는 이유는 전역 규칙이 -0.5px 를 흘려넣기 때문이다. */
.fld-help,
.fld-error {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.12px;
}
.fld-help {
    color: #777c81;
}
.fld-error {
    color: #e02820;
}
.fld [hidden] {
    display: none !important;
}