/* ============================================================
   ElementEditPanel — 요소 편집 패널 스타일 (Figma 룩앤필 리스타일)
   네임스페이스: .ep-panel, .ep-section__, .ep-input__, .ep-btn__, .ep-seg__, .ep-row__
   각진 디자인 고정 / 폰트 Pretendard Variable / 컬러 토큰 준수
   ============================================================ */

/* ---------- 패널 컨테이너 ---------- */
.ep-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 12px;
  color: #374151;
  overflow: hidden;
}

/* ---------- 헤더 ---------- */
.ep-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
  height: 49px;
}

.ep-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
}

.ep-panel__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #6B7280;
  padding: 0;
  transition: color 0.1s;
}

.ep-panel__close-btn:hover {
  color: #111827;
}

/* ---------- 스크롤 본문 ---------- */
.ep-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- 섹션 ---------- */
.ep-section {
  border-bottom: 1px solid #E5E7EB;
}

.ep-section:last-child {
  border-bottom: none;
}

.ep-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px 12px;
}

/* 리스타일: 어두운 색, 12px, 대문자/간격 제거 */
.ep-section__title {
  font-size: 12px;
  font-weight: 600;
  color: #1F2937;
  text-transform: none;
  letter-spacing: 0;
}

.ep-section__reset-btn {
  font-size: 11px;
  color: #9CA3AF;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.1s;
}

.ep-section__reset-btn:hover {
  color: #6366F1;
}

.ep-section__body {
  padding: 4px 12px 12px 12px;
}

/* ---------- 행(row) ---------- */
.ep-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ep-row:last-child {
  margin-bottom: 0;
}

.ep-row__label {
  font-size: 11px;
  color: #6B7280;
  width: 52px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-row__label--wide {
  width: 72px;
}

.ep-row__fill {
  flex: 1;
}

/* ---------- 입력 공통 (리스타일: 채움형 + 상호작용 보더) ---------- */
.ep-input {
  height: 28px;
  border: 1px solid transparent;
  background: #F3F4F6;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 12px;
  color: #111827;
  padding: 0 6px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.1s, background 0.1s;
}

.ep-input:hover {
  border-color: #E5E7EB;
  background: #ffffff;
}

.ep-input:focus {
  border-color: #6366F1;
  background: #ffffff;
}

.ep-input--number {
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

.ep-input--number-sm {
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.ep-input--color {
  width: 44px;
  height: 28px;
  padding: 1px 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.ep-input--textarea {
  height: auto;
  min-height: 56px;
  resize: vertical;
  padding: 6px;
  line-height: 1.5;
}

/* ---------- 단위 라벨 ---------- */
.ep-unit {
  font-size: 11px;
  color: #9CA3AF;
  flex-shrink: 0;
  min-width: 14px;
}

/* ---------- 버튼 ---------- */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  color: #374151;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.ep-btn:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.ep-btn--primary {
  background: #6366F1;
  border-color: #6366F1;
  color: #ffffff;
}

.ep-btn--primary:hover {
  background: #4F46E5;
  border-color: #4F46E5;
}

.ep-btn--danger {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.ep-btn--danger:hover {
  background: #FEE2E2;
}

.ep-btn--icon {
  width: 28px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
}

.ep-btn--icon.ep-btn--active,
.ep-btn--active {
  background: #EEF2FF;
  border-color: #6366F1;
  color: #4F46E5;
}

.ep-btn--sm {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.ep-btn--full {
  width: 100%;
  justify-content: center;
}

/* ---------- 세그먼트 그룹 (리스타일: 채움형 트랙) ---------- */
.ep-seg {
  display: flex;
  border: 1px solid transparent;
  background: #F3F4F6;
  overflow: hidden;
}

.ep-seg__btn {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  border-right: 1px solid #E5E7EB;
  color: #6B7280;
  padding: 0 4px;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.ep-seg__btn:last-child {
  border-right: none;
}

.ep-seg__btn:hover {
  background: #E9EBEE;
  color: #374151;
}

/* 리스타일: 흰 배경 + 인디고 텍스트 */
.ep-seg__btn--active {
  background: #ffffff;
  color: #4F46E5;
  font-weight: 600;
}

/* 세그먼트 채움 변형 */
.ep-seg--fill {
  flex: 1;
}

/* ---------- 신규: ep-field (채움형 필드 래퍼) ---------- */
.ep-field {
  display: flex;
  align-items: center;
  height: 28px;
  box-sizing: border-box;
  background: #F3F4F6;
  border: 1px solid transparent;
  padding: 0 6px;
  gap: 4px;
  transition: border-color 0.1s, background 0.1s;
}

.ep-field:hover {
  border-color: #E5E7EB;
  background: #ffffff;
}

.ep-field:focus-within {
  border-color: #6366F1;
  background: #ffffff;
}

/* 전폭 변형 */
.ep-field--full {
  width: 100%;
}

/* ---------- 신규: ep-field__lead (필드 내부 선행 라벨) ---------- */
.ep-field__lead {
  font-size: 10px;
  color: #9CA3AF;
  flex-shrink: 0;
  min-width: 12px;
  text-align: center;
  white-space: nowrap;
}

.ep-field__lead--wide {
  min-width: 34px;
}

/* ---------- 신규: ep-field__input (알맹이 input) ---------- */
.ep-field__input {
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: right;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 12px;
  color: #111827;
  min-width: 0;
}

/* ---------- 신규: ep-field__unit (후행 단위) ---------- */
.ep-field__unit {
  font-size: 10px;
  color: #9CA3AF;
  flex-shrink: 0;
}

/* ---------- 신규: ep-grid2 (2열 그리드) ---------- */
.ep-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
}

/* ---------- 신규: ep-subsection (서브섹션 래퍼) ---------- */
.ep-subsection {
  margin-bottom: 6px;
}

/* ---------- 신규: ep-subhead (서브섹션 헤더) ---------- */
.ep-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ep-subhead__label {
  font-size: 11px;
  color: #6B7280;
}

/* ---------- 패딩 4방향 그리드 ---------- */
.ep-padding-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 4px;
  align-items: center;
  justify-items: center;
}

.ep-padding-grid__link {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #9CA3AF;
  flex-direction: column;
}

.ep-padding-grid__link:hover {
  color: #6366F1;
}

.ep-padding-grid__link--linked {
  color: #6366F1;
}

.ep-padding-grid__label {
  font-size: 10px;
  color: #9CA3AF;
  text-align: center;
}

/* ---------- 색상 행 (color + 투명 버튼) ---------- */
.ep-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* 리스타일: 20×20 소형 스와치 */
.ep-color-row__preview {
  width: 20px;
  height: 20px;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* 투명 체커 */
  background-image: linear-gradient(45deg, #D1D5DB 25%, transparent 25%),
                    linear-gradient(-45deg, #D1D5DB 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #D1D5DB 75%),
                    linear-gradient(-45deg, transparent 75%, #D1D5DB 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

.ep-color-row__swatch {
  position: absolute;
  inset: 0;
}

.ep-color-row__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 신규: ep-color-row__hex (채움형 HEX 입력) */
.ep-color-row__hex {
  flex: 1;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: #F3F4F6;
  color: #111827;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.1s, background 0.1s;
}

.ep-color-row__hex:hover {
  border-color: #E5E7EB;
  background: #ffffff;
}

.ep-color-row__hex:focus {
  border-color: #6366F1;
  background: #ffffff;
}

.ep-color-row__transparent-btn {
  font-size: 11px;
  color: #9CA3AF;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.1s;
}

.ep-color-row__transparent-btn:hover {
  color: #6366F1;
}

/* ---------- 이미지 미리보기 ---------- */
.ep-img-thumb {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border: 1px solid #E5E7EB;
  display: block;
  background: #F3F4F6;
  margin-bottom: 6px;
}

/* ---------- 아이콘 이름 ---------- */
.ep-icon-name {
  font-size: 11px;
  color: #6B7280;
  padding: 4px 6px;
  background: #F3F4F6;
  border: 1px solid transparent;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 28px;
  display: flex;
  align-items: center;
  transition: border-color 0.1s, background 0.1s;
}

.ep-icon-name:hover {
  border-color: #E5E7EB;
  background: #ffffff;
}

/* ---------- 빈 상태 ---------- */
.ep-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px 20px;
  text-align: center;
  color: #9CA3AF;
  gap: 12px;
}

.ep-panel__empty-icon {
  color: #D1D5DB;
}

.ep-panel__empty-text {
  font-size: 12px;
  line-height: 1.6;
  color: #9CA3AF;
}

/* ---------- 커스텀 체크박스 (각진 인디고) ---------- */
.ep-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #6B7280;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.ep-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.ep-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid #D1D5DB;
  background: #ffffff;
  transition: background 0.1s, border-color 0.1s;
}

.ep-checkbox__box::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.ep-checkbox:checked + .ep-checkbox__box {
  background: #6366F1;
  border-color: #6366F1;
}

.ep-checkbox:checked + .ep-checkbox__box::after {
  opacity: 1;
}

.ep-checkbox:focus-visible + .ep-checkbox__box {
  outline: 1px solid #6366F1;
  outline-offset: 1px;
}

.ep-checkbox-label:hover .ep-checkbox__box {
  border-color: #6366F1;
}

/* ---------- 작업 버튼 행 ---------- */
.ep-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 10px 12px;
}

.ep-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  cursor: pointer;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 10px;
  color: #6B7280;
  padding: 4px 2px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.ep-action-btn:hover {
  background: #F3F4F6;
  color: #374151;
  border-color: #D1D5DB;
}

.ep-action-btn--danger {
  color: #DC2626;
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.ep-action-btn--danger:hover {
  background: #FEE2E2;
}

/* ---------- 삭제 확인 버튼 ---------- */
.ep-delete-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
  border: 2px solid #DC2626;
  background: #DC2626;
  color: #ffffff;
  cursor: pointer;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 2px;
  animation: ep-pulse 0.4s ease;
}

@keyframes ep-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---------- 연결 토글 아이콘 ---------- */
.ep-link-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.ep-link-icon__line {
  width: 1.5px;
  height: 6px;
  background: currentColor;
}

.ep-link-icon__dot {
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  background: transparent;
}

/* ---------- 스크롤바 ---------- */
.ep-panel__body::-webkit-scrollbar {
  width: 4px;
}
.ep-panel__body::-webkit-scrollbar-track {
  background: transparent;
}
.ep-panel__body::-webkit-scrollbar-thumb {
  background: #E5E7EB;
}
.ep-panel__body::-webkit-scrollbar-thumb:hover {
  background: #D1D5DB;
}

/* ---------- 정렬(피그마 Position) 툴바 — 가로/세로 두 그룹이 행을 균등 분할 ---------- */
.ep-align-row {
  gap: 8px;
}
.ep-align-seg {
  flex: 1;
}
.ep-align-seg .ep-btn--icon {
  flex: 1;
  width: auto;
}