@charset "UTF-8";

/**
 * --------------------------------------------------------------------------
 * Form Styles
 * --------------------------------------------------------------------------
 * @description 입력창, 선택박스, 체크박스, 라디오 및 달력 입력 필드 스타일 정의
 * @version 1.0
 */

/* ==========================================================================
   1. Base Input & Select Styles (공통 입력창)
   ========================================================================== */

/* [Text-based Inputs] */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="search"],
select,
textarea,
.form-input,
.form-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

/* ==========================================================================
   2. Input States (상태별 스타일)
   ========================================================================== */

/* [Focus State] */
input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-focus);
}

/* [Disabled & Readonly State] */
input:disabled,
select:disabled,
textarea:disabled,
input[readonly] {
  background-color: var(--bg-input-readonly);
  color: var(--text-tertiary);
  cursor: not-allowed;
  border-color: var(--border-color);
}

/* ==========================================================================
   3. Specific Element Adjustments (특수 요소)
   ========================================================================== */

/* [Textarea] */
textarea,
.form-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
  line-height: 1.6;
}

/* [Select Box Arrow] */
select,
.form-select {
  padding-right: 32px;
  cursor: pointer;
  /* icons.css의 변수를 사용하지 않는 이유는 화살표 색상 제어를 위해 stroke 값을 직접 조정해야 하기 때문 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

/* 다크모드 Select 화살표 색상 보정 */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ==========================================================================
   4. Checkbox & Radio (토스 스타일 네이티브)
   ========================================================================== */

/* [Group Container] */
.chk-area {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 40px;
}

/* [Label Wrapper] */
.check-label,
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-primary);
  user-select: none;
}

/* [Native Input Styling] */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary-color); /* 브랜드 컬러 적용 */
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

/* [Disabled State] */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input:disabled + span {
  color: var(--text-tertiary);
}

/* ==========================================================================
   5. Plugin Integration (달력 및 외부 라이브러리)
   ========================================================================== */

/* [Datepicker & MonthPicker Icons] */
input.inputDatePicker,
input.inputMonthPicker {
  padding-right: 35px !important;
  cursor: pointer;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 20px !important;
}

/* icons.css에 정의된 SVG 변수 참조 */
input.inputDatePicker {
  background-image: var(--icon-svg-date) !important;
  width: 130px;
}

input.inputDatePicker::placeholder {
  font-size: 12px;       /* 폰트 크기 축소 */
  color: #a0aec0;        /* 폰트 색상 지정 */
  opacity: 1;            /* Firefox 등 일부 브라우저의 기본 투명도 초기화 */
}

input.inputMonthPicker {
  background-image: var(--icon-svg-month) !important;
  width: 110px;
}

input.inputMonthPicker::placeholder {
  font-size: 12px;       /* 폰트 크기 축소 */
  color: #a0aec0;        /* 폰트 색상 지정 */
  opacity: 1;            /* Firefox 등 일부 브라우저의 기본 투명도 초기화 */
}

/* ==========================================================================
   6. Switch Toggle (스위치 토글)
   ========================================================================== */
.form-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}
.form-switch input { opacity: 0; width: 0; height: 0; }
.form-switch .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border-color); transition: .3s; border-radius: 24px;
}
.form-switch .slider:before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background-color: #ffffff; transition: .3s; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.form-switch input:checked + .slider { background-color: var(--primary-color); }
.form-switch input:checked + .slider:before { transform: translateX(20px); }
.form-switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   7. File Upload (파일 업로드)
   ========================================================================== */
.file-upload-wrap {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.file-upload-wrap input[type="file"] {
  flex: 1; padding: 4px 8px; background-color: var(--bg-input);
  border: 1px solid var(--border-color); border-radius: var(--radius-base);
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.file-upload-wrap input[type="file"]::file-selector-button {
  background-color: var(--bg-content); border: 1px solid var(--border-color);
  border-radius: 4px; padding: 4px 12px; margin-right: 12px;
  color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: 0.2s;
}
.file-upload-wrap input[type="file"]::file-selector-button:hover {
  background-color: var(--hover-bg); color: var(--text-primary);
}

/* ==========================================================================
   8. Input Groups (Composite Fields)
   ========================================================================== */

/* [Input Group Wrap] 코드-명칭 연동 및 버튼 결합형 레이아웃 */
.input-group-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.input-group-wrap .form-input {
  flex: 1;
}

/* 코드 입력창 전용 고정폭 (ERP 표준 100px) */
.input-group-wrap .form-input.w-code {
  flex: 0 0 100px;
}

/* 모바일 대응: 768px 이하에서도 비율 유지 */
@media (max-width: 768px) {
  .input-group-wrap .form-input.w-code {
    flex: 0 0 80px;
  }
}