/* =====================================================
   입력 필드 컴포넌트 - 재사용 가능한 입력 필드 스타일
   
   사용법:
   <label class="input-label">라벨</label>
   <input type="text" class="input-field input-md" placeholder="입력하세요">
   
   클래스 조합:
   - 기본: .input-field (필수)
   - 크기: .input-sm, .input-md, .input-lg
   - 타입: .input-text, .input-date, .input-time, .input-tel, .input-number
   - 상태: .input-error, .input-disabled
   ===================================================== */

/* 입력 필드 기본 스타일 */
input.input-field { width: 100%; height: 50px; padding: 0 16px;
    border: 1px solid var(--border-semilight); border-radius: var(--radius-xs); 
    font-size: 16px; color: var(--text-primary); background: var(--bg-primary); 
    box-sizing: border-box; transition: border-color 0.2s ease; }
input.input-field::placeholder { color: var(--text-tertiary); font-weight: 400; font-size: 16px; }
input.input-field:focus { outline: none; border-color: var(--primary); }
input.input-field:disabled { background: var(--bg-tertiary); color: var(--text-tertiary); cursor: not-allowed; }
input.input-field.input-error { border-color: var(--error); }
input.input-field.input-error:focus { border-color: var(--error); }

/* 입력 필드 크기 */
input.input-field.input-sm { height: 44px; font-size: 14px; }
input.input-field.input-md { height: 50px; font-size: 16px; }
input.input-field.input-lg { height: 60px; font-size: 18px; }

/* 라벨 스타일 */
.input-label { display: block; font-size: var(--fs-14-18); font-weight: 700; 
    color: var(--text-secondary); margin: 20px 0 8px 0; }
.input-label .required { color: var(--error); font-weight: 400; }
.input-label .optional { color: var(--text-tertiary); font-weight: 400; }

/* 입력 필드 래퍼 (아이콘, 단위, 글자수 카운터 등과 함께 사용) */
.input-wrapper { position: relative; }
.input-wrapper:has(.input-icon) input.input-field { padding-right: calc(var(--space-16-20) + 24px + var(--space-8-12)); }
.input-icon { position: absolute; right: var(--space-16-20); top: 50%; transform: translateY(-50%); 
    width: 24px; height: 24px; pointer-events: none; color: var(--text-secondary); }

/* 날짜/시간 입력 필드 특수 처리 */
input.input-field.input-date, input.input-field.input-time { cursor: pointer; -webkit-appearance: none; appearance: none; }
input.input-field.input-date::-webkit-calendar-picker-indicator, input.input-field.input-time::-webkit-calendar-picker-indicator { 
    opacity: 0; position: absolute; right: 0; width: 24px; height: 24px; cursor: pointer; z-index: 1; }
input.input-field.input-date::-moz-calendar-picker-indicator, input.input-field.input-time::-moz-calendar-picker-indicator { 
    opacity: 0; width: 0; height: 0; }

/* 날짜/시간 입력 필드 기본 플레이스홀더 숨기기 */
input.input-field.input-date::placeholder, input.input-field.input-time::placeholder { 
    color: transparent !important; opacity: 0 !important; }
input.input-field.input-date::-webkit-input-placeholder, input.input-field.input-time::-webkit-input-placeholder { 
    color: transparent !important; opacity: 0 !important; }
input.input-field.input-date::-moz-placeholder, input.input-field.input-time::-moz-placeholder { 
    color: transparent !important; opacity: 0 !important; }
input.input-field.input-date:-ms-input-placeholder, input.input-field.input-time:-ms-input-placeholder { 
    color: transparent !important; opacity: 0 !important; }
/* 값이 없을 때 입력 필드 텍스트도 투명하게 (브라우저 기본 플레이스홀더 숨기기) */
input.input-field.input-date:not([value]):not(:focus), input.input-field.input-time:not([value]):not(:focus) { 
    color: transparent !important; }

/* 날짜/시간 입력 필드 플레이스홀더 처리 */
input.input-field.input-date.has-placeholder, input.input-field.input-time.has-placeholder { color: transparent !important; }
/* 값이 없을 때 플레이스홀더 표시 */
.input-wrapper:has(.input-date:not([value]))::after, .input-wrapper:has(.input-time:not([value]))::after,
.input-wrapper:has(.input-date.has-placeholder)::after, .input-wrapper:has(.input-time.has-placeholder)::after { 
    content: attr(data-placeholder); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); 
    color: var(--text-tertiary); pointer-events: none; font-size: 16px; font-weight: 400; z-index: 1; }
/* 날짜 입력 필드에 값이 있을 때 포맷된 날짜 표시 */
.input-wrapper:has(.input-date[value]:not(.has-placeholder))::after { 
    content: attr(data-display); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); 
    color: var(--text-primary); pointer-events: none; font-size: 16px; font-weight: 400; z-index: 1; }
/* 시간 입력 필드에 값이 있을 때는 기본 표시 사용 (플레이스홀더 숨김) */
.input-wrapper:has(.input-time[value]:not(.has-placeholder))::after { 
    content: none; }

/* 텍스트 영역 */
textarea.textarea-field { width: 100%; min-height: 140px; padding: var(--space-14-18); 
    border: 1px solid var(--border-semilight); border-radius: var(--radius-xs); 
    font-size: var(--fs-14-18); color: var(--text-primary); background: var(--bg-primary); 
    resize: vertical; box-sizing: border-box; transition: border-color 0.2s ease; }
/* 텍스트 영역 기본 플레이스홀더 숨기기 */
textarea.textarea-field::placeholder { 
    color: transparent !important; opacity: 0 !important; }
textarea.textarea-field::-webkit-input-placeholder { 
    color: transparent !important; opacity: 0 !important; }
textarea.textarea-field::-moz-placeholder { 
    color: transparent !important; opacity: 0 !important; }
textarea.textarea-field:-ms-input-placeholder { 
    color: transparent !important; opacity: 0 !important; }
/* 텍스트 영역 커스텀 플레이스홀더 */
.textarea-wrapper[data-placeholder]::after { 
    content: attr(data-placeholder); position: absolute; left: var(--space-14-18); top: var(--space-14-18); 
    color: var(--text-tertiary); pointer-events: none; font-size: 16px; font-weight: 400; z-index: 1; white-space: pre-wrap; }
/* 값이 있을 때 플레이스홀더 숨기기 */
.textarea-wrapper:has(.textarea-field.has-value)::after { 
    content: none; }
/* 값이 없을 때 텍스트 영역 텍스트도 투명하게 */
textarea.textarea-field.has-placeholder { 
    color: transparent !important; }
textarea.textarea-field:focus { outline: none; border-color: var(--primary); }
textarea.textarea-field:disabled { background: var(--bg-tertiary); color: var(--text-tertiary); cursor: not-allowed; }
.textarea-wrapper { position: relative; }

/* 문자 카운터 */
.input-char-counter { display: block; font-size: var(--fs-11-14); color: var(--text-tertiary); 
    text-align: right; margin-top: var(--space-4-8); }
.input-wrapper .input-char-counter { position: static; margin-top: var(--space-4-8); }
.textarea-wrapper .input-char-counter { position: absolute; bottom: var(--space-8-12); 
    right: var(--space-14-18); margin-top: 0; }

/* 힌트 텍스트 */
.input-hint { display: block; font-size: var(--fs-12-16); color: var(--text-secondary); 
    margin-top: var(--space-4-8); }

/* 입력 필드 그룹 (여러 필드가 한 줄에) */
.input-group { display: flex; align-items: center; gap: var(--space-8-12); }
.input-group .input-wrapper { flex: 1; }

/* 가격 입력 필드 (단위 표시) */
.input-price-wrapper { position: relative; }
.input-price-wrapper input.input-field { padding-right: 50px; }
.input-price-unit { position: absolute; right: var(--space-16-20); top: 50%; 
    transform: translateY(-50%); font-size: var(--fs-14-18); color: var(--text-primary); 
    pointer-events: none; }

/* 입력 필드 오른쪽 버튼 */
.input-with-button { display: flex; gap: 8px; align-items: center; }
.input-with-button .input-field { flex: 3; }
.input-with-button .input-button { flex: 1; padding: var(--space-16-20) var(--space-12-16); 
    font-size: 16px; min-width: 70px; white-space: nowrap; background: var(--primary-10); 
    color: var(--primary); border: none; font-weight: 500; border-radius: var(--radius-xs); 
    cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.input-with-button .input-button:hover { background: var(--primary-20); transform: translateY(-1px); }
.input-with-button .input-button:active { background: var(--primary); color: var(--bg-primary); transform: translateY(0); }
.input-with-button .input-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* 체크박스 스타일 */
.checkbox-field { width: var(--space-16-20); height: var(--space-16-20); 
    margin: 0 var(--space-6-10) 0 0; cursor: pointer; border: 1px solid var(--border-medium); 
    border-radius: 4px; appearance: none; -webkit-appearance: none; -moz-appearance: none; 
    background: var(--bg-primary); flex-shrink: 0; position: relative; 
    transition: all 0.2s ease; }
.checkbox-field:checked { background: var(--primary); border-color: var(--primary); }
.checkbox-field:checked::after { content: ''; position: absolute; left: 50%; top: 50%; 
    transform: translate(-50%, -50%) rotate(45deg); width: 4px; height: 8px; 
    border: solid var(--bg-primary); border-width: 0 2px 2px 0; }
.checkbox-field:disabled { background: var(--bg-tertiary); border-color: var(--border-light); cursor: not-allowed; }
.checkbox-label { display: flex; align-items: center; font-size: var(--fs-13-17); 
    color: var(--text-secondary); font-weight: 400; cursor: pointer; margin: 0; }
.checkbox-label .checkbox-field { margin-right: var(--space-6-10); }

/* 폼 필드 컨테이너 */
.form-field { margin-bottom: var(--space-20-28); }
.form-field:last-child { margin-bottom: 0; }

/* 에러 메시지 */
.input-error-message { display: none; font-size: var(--fs-12-16); color: var(--error); 
    margin-top: var(--space-4-8); font-weight: 500; }
.input-error-message.show { display: flex; align-items: center; gap: var(--space-4-8); }
.input-error-message::before { content: '\e90b'; font-family: 'primeicons'; font-size: 12px; }

/* 성공 메시지 */
.input-ok-message { display: none; font-size: var(--fs-12-16); color: var(--success); 
    margin-top: var(--space-4-8); font-weight: 500; }
.input-ok-message.show { display: flex; align-items: center; gap: var(--space-4-8); }
.input-ok-message::before { content: '\e909'; font-family: 'primeicons'; font-size: 12px; }

/* 반응형 */
@media (min-width: 600px) {
  input.input-field.input-md { height: 56px; }
  input.input-field.input-lg { height: 64px; }
  textarea.textarea-field { font-size: var(--fs-16-20); padding: var(--space-16-20); }
  .textarea-wrapper .input-char-counter { bottom: var(--space-12-16); right: var(--space-16-20); }
  .textarea-wrapper[data-placeholder]::after { 
      left: var(--space-16-20); top: var(--space-16-20); font-size: 16px; }
  .textarea-wrapper:has(.textarea-field.has-value)::after { 
      content: none; }
  .input-icon { width: 26px; height: 26px; right: var(--space-20-24); }
  .input-wrapper:has(.input-icon) input.input-field { padding-right: calc(var(--space-20-24) + 26px + var(--space-8-12)); }
  .input-with-button .input-button { padding: var(--space-16-20) var(--space-12-16); height: 56px; }
  .input-wrapper:has(.input-date:not([value]))::after, .input-wrapper:has(.input-time:not([value]))::after,
  .input-wrapper:has(.input-date.has-placeholder)::after, .input-wrapper:has(.input-time.has-placeholder)::after { 
      left: var(--space-16-20); font-size: 16px; }
  .input-wrapper:has(.input-date[value]:not(.has-placeholder))::after { 
      left: var(--space-16-20); font-size: 16px; }
}