/* ============================================================
   Radio
   ============================================================ */
.radio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.radio input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checked 상태 */
.radio input[type='radio']:checked + .radio__control {
  border-color: var(--color-primary-dark);
}

.radio input[type='radio']:checked + .radio__control::after {
  opacity: 1;
  transform: scale(1);
}

/* Disabled 상태 */
.radio input[type='radio']:disabled + .radio__control {
  border-color: var(--color-border-secpmdary);
  background-color: blue;
  cursor: not-allowed;
}

.radio input[type='radio']:disabled + .radio__control::after {
  background-color: blue;
}

.radio input[type='radio']:disabled ~ .radio__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Focus 상태 (키보드 접근성) */
.radio input[type='radio']:focus-visible + .radio__control {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================
   Radio 커스텀 원형
   ============================================================ */

.radio__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* 20px */
  height: 2rem; /* 20px */
  border: 0.15rem solid var(--color-border-secpmdary); /* 1.5px */
  border-radius: 50%;
  transition: all var(--duration-fast) var(--easing-out);
  flex-shrink: 0;
  background: var(--color-white);
}

/* Hover 효과 */
.radio:hover input[type='radio']:not(:disabled) + .radio__control {
  background-color: var(--color-white);
}

/* 내부 채워진 원 (checked 상태) */
.radio__control::after {
  content: '';
  position: absolute;
  width: 1rem; /* 10px */
  height: 1rem; /* 10px */
  border-radius: 50%;
  background-color: var(--color-secondary-red-dark);
  opacity: 0;
  transform: scale(0);
  transition: all var(--duration-fast) var(--easing-out);
}

.radio__control::before {
  content: '';
  position: absolute;
  width: 1rem; /* 10px */
  height: 1rem; /* 10px */
  border-radius: 50%;
  background-color: var(--color-bg-secondary);
  opacity: 1;
  transform: scale(1);
  transition: all var(--duration-fast) var(--easing-out);
}

/* ============================================================
   Radio label
   ============================================================ */

.radio__label {
  font-size: var(--font-size-level-4); /* 14px */
  color: var(--color-text-primary);
  margin-left: var(--spacing-sm); /* 8px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-out);
}

.radio:hover .radio__label {
  color: var(--color-text-primary);
}

/* ============================================================
   Radio 버튼 묶음
   ============================================================ */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* 16px */
}

.radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-lg); /* 24px */
}

.radio-group__label {
  font-size: var(--font-size-level-5); /* 16px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm); /* 8px */
  display: block;
}
/* ============================================================
   checkbox
   ============================================================ */


/* 실제 input 숨김 (접근성 유지) */
.checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checked 상태 */
.checkbox input[type='checkbox']:checked + .checkbox__control {
  border-color: var(--color-secondary-red-dark);
  background-color: var(--color-secondary-red-dark);
}

.checkbox input[type='checkbox']:checked + .checkbox__control::after {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}

/* Disabled 상태 */
.checkbox input[type='checkbox']:disabled + .checkbox__control {
  border-color: var(--color-border-secpmdary);
  background-color: var(--color-white);
  cursor: not-allowed;
}

.checkbox input[type='checkbox']:disabled ~ .checkbox__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Focus 상태 (키보드 접근성) */
.checkbox input[type='checkbox']:focus-visible + .checkbox__control {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Checkbox Control (커스텀 사각형)
----------------------------------------------------------------------------- */

.checkbox__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.15rem solid var(--color-border-secpmdary);
  border-radius: 4px;
  background-color: var(--color-white);
  transition: all var(--duration-fast) var(--easing-out);
  flex-shrink: 0;
}

/* Hover 효과 */
.checkbox:hover input[type='checkbox']:not(:disabled) + .checkbox__control {
  /*border-color: var(--color-border-secpmdary);*/
  /*background-color: var(--color-white);*/
}

/* 체크마크 (L자 모양으로 회전) */
.checkbox__control::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 1rem;
  border: solid var(--color-bg-primary);
  border-width: 0 0.2rem 0.2rem 0;
  opacity: 0;
  transform: scale(0) rotate(45deg);
  bottom: 0.6rem;
  transition: all var(--duration-fast) var(--easing-out);
}

/* -----------------------------------------------------------------------------
   Checkbox Label
----------------------------------------------------------------------------- */



.checkbox:hover .checkbox__label {
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------------
   Checkbox Group (체크박스 묶음)
----------------------------------------------------------------------------- */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.checkbox-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.checkbox-group__label {
  font-size: var(--font-size-level-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
}

/* -----------------------------------------------------------------------------
   일부만 선택 상태 (예: 전체 선택 체크박스)
----------------------------------------------------------------------------- */

.checkbox input[type='checkbox']:indeterminate + .checkbox__control {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.checkbox input[type='checkbox']:indeterminate + .checkbox__control::after {
  width: 1rem;
  height: 0;
  border: none;
  border-bottom: 0.2rem solid var(--color-bg-primary);
  opacity: 1;
  transform: scale(1) rotate(0);
}