/* — 사이드바 전체 레이아웃 — */
.sidebar {
  width: 260px;
  background-color: #ffffff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  height: 100vh;
  overflow-y: auto;
  top: 0;
  left: 0;
  z-index: 10;
}

/* — 헤더 — */
.sidebar-header {
  margin-top: 16px;
  margin-bottom: 8px;
}

.sidebar-header h2 {
  font-size: 20px;
  position: relative;      /* before 위치 계산을 위해 */
  padding-left: 24px;      /* 체크 아이콘 공간 확보 */
}

.sidebar-header h2::before {
  content: "✔";            /* 체크 표시 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #3b82f6;          /* 파란색 체크 */
  line-height: 1;
}

/* — Device Information 폼 — */
.sidebar-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.sidebar-form .form-group {
  display: flex;
  flex-direction: column;
}
.sidebar-form label {
  font-size: 13px;
  margin-bottom: 4px;
}

.sidebar-form input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-form select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Service 그룹, 항목 */
.service-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.service-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

/* 실제 checkbox 숨기기 */
.service-checkbox {
  display: none;
}


/* 기본 원형 체크박스 (입체감) */
.checkbox-circle {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f0f0f3;     /* 살짝 밝은 배경 */
  border: 2px solid #ccc;
  
  /* 외부, 내부 그림자로 네우모픽 효과 */
  box-shadow:
    /* 외부 그림자: 아래쪽 밝은 그림자 */
    2px 2px 5px rgba(255,255,255,0.7),
    /* 외부 그림자: 위쪽 어두운 그림자 */
   -2px -2px 5px rgba(0,0,0,0.1),
    /* 내부 그림자: 눌린 부분 연출 */
    inset 2px 2px 5px rgba(0,0,0,0.05),
    inset -2px -2px 5px rgba(255,255,255,0.6);
  transition: all 0.2s ease;
}

/* 체크되었을 때: 색상 + 눌린 느낌 */
.service-checkbox:checked + .checkbox-circle {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  border-color: #1e40af;
  
  box-shadow:
    /* 외부 그림자: 살짝 깊어진 어두운 그림자 */
    2px 2px 5px rgba(0,0,0,0.2),
   -2px -2px 5px rgba(0,0,0,0.1),
    /* 내부 그림자: 더 깊은 눌린 효과 */
    inset 2px 2px 5px rgba(0,0,0,0.2),
    inset -2px -2px 5px rgba(255,255,255,0.2);
}

/* 체크 아이콘 (✅) 추가하기 (옵션) */
.checkbox-circle::after {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  border: solid white;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 0.2s ease;
  position: relative;
  left: 4px;
  top: 3px;
}

.service-checkbox:checked + .checkbox-circle::after {
  transform: rotate(-45deg) scale(1);
}


/* — Apply 버튼 — */
.apply-btn {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  background-color: #10b981;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.apply-btn:hover {
  background-color: #059669;
}