/* ============================================================
   iPlan — 모달 / 다이얼로그
   태스크 편집 모달, 확인 다이얼로그, 프로젝트 생성 모달
   ============================================================ */

/* ── 모달 공통 ── */
.ip-modal {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn var(--duration-slow) var(--ease-default);
}

.ip-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
}

.ip-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.ip-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-sub);
  transition: background var(--duration-fast) var(--ease-default);
}

.ip-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-main);
}

.ip-modal-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.ip-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
}

/* ── 폼 필드 그룹 ── */
.ip-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ip-form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ip-form-row {
  display: flex;
  gap: var(--s-3);
}

.ip-form-row > * {
  flex: 1;
}

/* ── 태스크 편집 모달 ── */
.ip-task-edit-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-w2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  width: 100%;
}

.ip-task-edit-title:focus {
  border-color: var(--accent);
}

/* ── 우선순위 선택기 ── */
.ip-priority-selector {
  display: flex;
  gap: var(--s-2);
}

.ip-priority-option {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.ip-priority-option:hover {
  background: var(--surface-hover);
}

.ip-priority-option.selected {
  border-color: currentColor;
}

.ip-priority-option[data-priority="urgent"] { color: var(--ip-priority-urgent); }
.ip-priority-option[data-priority="high"]   { color: var(--ip-priority-high); }
.ip-priority-option[data-priority="medium"] { color: var(--ip-priority-medium); }
.ip-priority-option[data-priority="low"]    { color: var(--ip-priority-low); }

.ip-priority-option.selected[data-priority="urgent"] { background: var(--danger-dim); }
.ip-priority-option.selected[data-priority="high"]   { background: var(--warning-dim); }
.ip-priority-option.selected[data-priority="medium"] { background: var(--info-dim); }
.ip-priority-option.selected[data-priority="low"]    { background: var(--ip-priority-low-dim); }

/* ── 확인 다이얼로그 ── */
.ip-confirm-dialog {
  max-width: 400px;
  text-align: center;
}

.ip-confirm-dialog .ip-modal-body {
  align-items: center;
}

.ip-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}

.ip-confirm-icon--danger {
  background: var(--danger-dim);
  color: var(--danger);
}

.ip-confirm-message {
  font-size: var(--text-base);
  color: var(--text-sub);
  line-height: var(--leading-relaxed);
}

/* ── 프로젝트 색상 선택기 ── */
.ip-color-picker {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.ip-color-option {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-default);
  border: 2px solid transparent;
}

.ip-color-option:hover {
  transform: scale(1.15);
}

.ip-color-option.selected {
  border-color: var(--text-main);
  transform: scale(1.15);
}

/* ── 날짜 선택 ── */
.ip-date-input {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-w2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-main);
  color-scheme: dark;
}

.ip-date-input:focus {
  border-color: var(--accent);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}