/**
 * 토스 스타일 폼 컴포넌트
 * 깔끔하고 사용하기 쉬운 입력 폼
 */

/* ============================
   폼 그룹
   ============================ */
.modern-form-group {
  margin-bottom: 1.5rem;
}

.modern-form-group:last-child {
  margin-bottom: 0;
}

/* ============================
   레이블
   ============================ */
.modern-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #191F28;
  margin-bottom: 0.5rem;
}

.modern-label--required::after {
  content: '*';
  color: #EF5350;
  margin-left: 0.25rem;
}

/* ============================
   인풋 필드
   ============================ */
.modern-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #191F28;
  background: #FFFFFF;
  border: 1.5px solid #E5E8EB;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.modern-input::placeholder {
  color: #B0B8C1;
}

/* 포커스 상태 */
.modern-input:focus {
  outline: none;
  border-color: #2ECA6E;
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

/* 비활성화 상태 */
.modern-input:disabled {
  background: #F9FAFB;
  color: #8B95A1;
  cursor: not-allowed;
}

/* 에러 상태 */
.modern-input--error {
  border-color: #EF5350;
}

.modern-input--error:focus {
  border-color: #EF5350;
  box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.1);
}

/* 성공 상태 */
.modern-input--success {
  border-color: #2ECA6E;
}

/* ============================
   텍스트에어리어
   ============================ */
.modern-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================
   셀렉트
   ============================ */
.modern-select {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #191F28;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234E5968' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 12px;
  border: 1.5px solid #E5E8EB;
  border-radius: 12px;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.modern-select:focus {
  outline: none;
  border-color: #2ECA6E;
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

.modern-select:disabled {
  background-color: #F9FAFB;
  color: #8B95A1;
  cursor: not-allowed;
}

/* ============================
   체크박스
   ============================ */
.modern-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.modern-checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.modern-checkbox__box {
  width: 20px;
  height: 20px;
  border: 2px solid #E5E8EB;
  border-radius: 6px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modern-checkbox__input:checked + .modern-checkbox__box {
  background: #2ECA6E;
  border-color: #2ECA6E;
}

.modern-checkbox__input:checked + .modern-checkbox__box::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.modern-checkbox__input:focus + .modern-checkbox__box {
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

.modern-checkbox__label {
  margin-left: 0.75rem;
  font-size: 0.9375rem;
  color: #4E5968;
}

/* ============================
   라디오 버튼
   ============================ */
.modern-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.modern-radio__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.modern-radio__circle {
  width: 20px;
  height: 20px;
  border: 2px solid #E5E8EB;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modern-radio__input:checked + .modern-radio__circle {
  border-color: #2ECA6E;
}

.modern-radio__input:checked + .modern-radio__circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ECA6E;
}

.modern-radio__input:focus + .modern-radio__circle {
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

.modern-radio__label {
  margin-left: 0.75rem;
  font-size: 0.9375rem;
  color: #4E5968;
}

/* ============================
   라디오/체크박스 그룹
   ============================ */
.modern-radio-group,
.modern-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modern-radio-group--horizontal,
.modern-checkbox-group--horizontal {
  flex-direction: row;
  gap: 1.5rem;
}

/* ============================
   스위치 토글
   ============================ */
.modern-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.modern-switch__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.modern-switch__slider {
  width: 44px;
  height: 24px;
  background: #E5E8EB;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.modern-switch__slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modern-switch__input:checked + .modern-switch__slider {
  background: #2ECA6E;
}

.modern-switch__input:checked + .modern-switch__slider::before {
  transform: translateX(20px);
}

.modern-switch__input:focus + .modern-switch__slider {
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

.modern-switch__label {
  margin-left: 0.75rem;
  font-size: 0.9375rem;
  color: #4E5968;
}

/* ============================
   인풋 그룹 (아이콘/버튼 추가)
   ============================ */
.modern-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.modern-input-group .modern-input {
  flex: 1;
}

/* 왼쪽 아이콘 */
.modern-input-group--icon-left .modern-input {
  padding-left: 3rem;
}

.modern-input-group__icon--left {
  position: absolute;
  left: 1rem;
  color: #8B95A1;
  pointer-events: none;
}

/* 오른쪽 아이콘 */
.modern-input-group--icon-right .modern-input {
  padding-right: 3rem;
}

.modern-input-group__icon--right {
  position: absolute;
  right: 1rem;
  color: #8B95A1;
}

/* ============================
   헬프 텍스트
   ============================ */
.modern-help-text {
  display: block;
  font-size: 0.8125rem;
  color: #8B95A1;
  margin-top: 0.5rem;
}

.modern-help-text--error {
  color: #EF5350;
}

.modern-help-text--success {
  color: #2ECA6E;
}

/* ============================
   폼 레이아웃
   ============================ */
.modern-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .modern-form-row--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modern-form-row--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================
   인라인 폼
   ============================ */
.modern-form-inline {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.modern-form-inline .modern-form-group {
  flex: 1;
  margin-bottom: 0;
}

/* ============================
   파일 업로드
   ============================ */
.modern-file-upload {
  position: relative;
}

.modern-file-upload__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.modern-file-upload__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed #E5E8EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #F9FAFB;
}

.modern-file-upload__label:hover {
  border-color: #2ECA6E;
  background: #FFFFFF;
}

.modern-file-upload__input:focus + .modern-file-upload__label {
  box-shadow: 0 0 0 3px rgba(46, 202, 110, 0.1);
}

.modern-file-upload__text {
  text-align: center;
  color: #6B7684;
}

.modern-file-upload__text strong {
  color: #2ECA6E;
  display: block;
  margin-bottom: 0.25rem;
}

/* ============================
   다크모드 지원
   ============================ */
@media (prefers-color-scheme: dark) {
  .modern-label {
    color: #FFFFFF;
  }
  
  .modern-input,
  .modern-select,
  .modern-textarea {
    background: #2A2A2A;
    border-color: #3A3A3A;
    color: #FFFFFF;
  }
  
  .modern-input::placeholder {
    color: #666666;
  }
  
  .modern-input:disabled {
    background: #1A1A1A;
    color: #666666;
  }
  
  .modern-checkbox__box,
  .modern-radio__circle {
    background: #2A2A2A;
    border-color: #3A3A3A;
  }
  
  .modern-switch__slider {
    background: #3A3A3A;
  }
  
  .modern-file-upload__label {
    background: #2A2A2A;
    border-color: #3A3A3A;
  }
  
  .modern-help-text {
    color: #A0A0A0;
  }
}