/* settings.css */
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: linear-gradient(135deg, #fde68a 0%, #fca5a5 100%);
  color: #333;
  margin: 0;
  padding: 0;
}

.settings-container {
  max-width: 800px;
  margin: 40px auto 0 auto; /* 상단 여백으로 전체를 아래로 이동 */
  background: transparent;
  padding: 0 0 30px 0; /* 하단 여백 30px */
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.settings-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #4A90E2;
}

/* 섹션 0: 보안 설정 */
.security-section {
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-left: 4px solid #7B1FA2; /* 보라색 테마 */
  padding: 20px;
  margin-bottom: 20px;
}

.security-section h3 {
  margin-top: 0;
  color: #7B1FA2; /* 보라색 테마 */
  margin-bottom: 20px;
}

.security-section h4 {
  color: #7B1FA2;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
}

.security-section .description {
  background: #f0f4f8;
  padding: 15px;
  border-left: 5px solid #7B1FA2; /* 보라색 테마 */
  border-radius: 8px;
  margin-bottom: 20px;
}

.security-section .left-section {
  background: #f3e5f5; /* 연한 보라색 배경 */
  height: auto;
  min-height: 200px;
}

.security-section .right-section {
  background: #fce4ec; /* 연한 핑크색 배경 */
  height: auto;
  min-height: 200px;
}

/* 보안 섹션 좌/우 카드: 위로 20px 이동 (상단 마진 제거) */
.security-section .left-section,
.security-section .right-section {
  margin-top: 0 !important;
}

.security-section input[type="password"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
}

.security-section input[type="password"]:focus {
  outline: none;
  border-color: #7B1FA2;
  box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.1);
}

.security-section button {
  background-color: #7B1FA2; /* 보라색 테마 */
}

.security-section button:hover {
  background-color: #6A1B9A;
}

/* 섹션 1: 저장 설정 */
.storage-section {
  background: linear-gradient(180deg, rgba(243,232,255,0.95) 0%, rgba(221,214,254,0.95) 100%);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(167,139,250,0.4);
  border-left: 4px solid #8b5cf6; /* 보라색 포인트 */
  padding: 20px;
  margin-bottom: 20px;
}

.storage-section h3 {
  margin-top: 0;
  color: #1f3a8a; /* 더 진한 인디고 */
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.storage-options {
  margin-bottom: 15px;
}

.description {
  background: #f0f4f8;
  padding: 15px;
  border-left: 5px solid #4CAF50;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 저장 설정 섹션의 안내문은 오렌지 톤으로 통일 */
.storage-section .description {
  background: rgba(255,255,255,0.7);
  border-left: 5px solid #8b5cf6;
}

/* 자동 로그아웃 섹션 안내문 배경 제거 */
.auto-logout-section .description {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 20px !important; /* 오른쪽으로 20px 이동 */
}

/* 섹션 2 & 3: 사용자 ID와 기념일 설정 */
.split-section {
  display: flex;
  gap: 20px;
  margin: 20px 0 !important; /* 섹션 간격 20px 통일 */
}

.left-section, .right-section {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  margin-top:20px;
  /* 내용이 길어도 컬럼이 밀리지 않도록 */
  min-width: 0;
}

.left-section {
  background: #eafaf1;
  height: 250px;
}

.right-section {
  background: #fff5f5;
  height: 250px;
}

.left-section h3, .right-section h3 {
  margin-top: 0;
  color: #4A90E2;
  margin-bottom: 20px;
}

/* 기념일 저장 목록 제목 강조 */
#anniversary-list-title {
  color: #1f3a8a !important; /* inline 스타일보다 우선 */
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 기념일 저장 섹션의 상단 여백 추가 */
.left-section h3:nth-of-type(2) {
  margin-top: 20px;
}

input[type="text"], input[type="date"], select {
  width: 30%;
  min-width: 100px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
}

/* 데스크톱: 사용자 ID 입력창 가로폭 확대 (버튼 위치 고정) */
@media (min-width: 769px) {
  #nickname-input-wrap { width: 60% !important; max-width: 60% !important; position: relative !important; }
  #userNickname { width: 100% !important; max-width: 100% !important; }
  #nickname-emoji-btn { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; }
}

/* === Anniversary Save compact inputs (override global min-width) === */
#eventTitle { width: 110px !important; min-width: 110px !important; }
#eventYear  { width: 64px !important;  min-width: 64px !important; }
#eventMonth { width: 48px !important;  min-width: 48px !important; }
#eventDay   { width: 48px !important;  min-width: 48px !important; }

input[type="text"]:focus, input[type="date"]:focus, select:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

button {
  padding: 4px 4px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  height: 34px;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

button:hover {
  background-color: #357ABD;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  /* 저장 설정(보라색) 섹션: 좌우 여백 균일 + 내부 텍스트 여백 보강 */
  .storage-section {
    width: 100% !important;
    padding: 12px !important;             /* 좌우 동일 여백 */
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }
  .storage-section .description {
    padding: 12px !important;
    margin: 8px 0 12px 0 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .storage-section .storage-options { gap: 10px !important; }
  .storage-section .storage-options > label { width: 100% !important; }
  .storage-section .storage-options > div { width: 100% !important; justify-content: center !important; gap: 12px !important; }
  #backup-button, #restore-button { white-space: nowrap !important; }
  /* 사용자 ID / 메인화면 기념일 설정 섹션: 좌우 여백 통일 */
  /* 상단 두 영역은 섹션 배경을 꽉 채우고 내부 패딩만 사용 */
  .split-section { padding: 0 !important; box-sizing: border-box !important; }
  .split-section .left-section,
  .split-section .right-section {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important; /* 패딩 포함하여 100%를 넘지 않게 */
  }
  .split-section .input-group { padding: 0 !important; }
  .split-section input[type="text"] { width: 100% !important; max-width: 100% !important; }

  /* 모바일: 사용자 ID 입력 래퍼를 100%로, 이모지 버튼은 입력 내부 우측 고정 */
  #nickname-input-wrap { width: 60% !important; max-width: 60% !important; }
  #nickname-emoji-btn { right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; position: absolute !important; z-index: 2 !important; }

  /* 메인화면 기념일 설정: 한 줄 유지(드롭다운 2개 + 저장 버튼) */
  #main-anniversary-title { font-size: 18px !important; }
  .anniversary-settings .settings-row { flex-wrap: nowrap !important; gap: 8px !important; }
  .anniversary-settings select { width: auto !important; min-width: 90px !important; flex: 0 0 auto !important; }
  #anniversarySelect, #displayType { width: auto !important; min-width: 90px !important; }
  #set-anniversary-btn { width: 52px !important; flex: 0 0 52px !important; margin-left: 8px !important; }
  #anniversaryTitle { width: 60% !important; max-width: 60% !important; }

  /* 사용자 ID: 모바일에서는 입력창을 100%로 확장하고 이모지는 내부 우측 고정 */
  #userNickname { width: 100% !important; min-width: 0 !important; }

  /* 메인화면 기념일 설정 폼 내부 요소가 좌측/우측에 붙지 않도록 */
  #anniversaryTitle { width: 60% !important; max-width: 60% !important; }
  .anniversary-settings .settings-row { flex-wrap: wrap !important; }
  .anniversary-settings select { width: 48% !important; }
  #set-anniversary-btn { width: 48% !important; margin-left: 0 !important; }
  /* 모바일 전용: 기념일 저장 섹션 레이아웃 정리 */
  .anniversary-list-section {
    width: 100% !important;
    padding: 0 12px !important;        /* 좌우 동일 여백 */
    box-sizing: border-box !important;
    flex-direction: column !important; /* 세로 스택 */
    gap: 12px !important;
  }
  .anniversary-list-section > div:first-child,
  .anniversary-list-section > div:last-child {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* 제목과 리스트 간격 (붙어 보이지 않게) */
  #anniversary-list-title { margin: 0 0 10px 0 !important; }

  /* 리스트 박스: 2열 그리드, 폭 100% */
  #anniversaryButtonList {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    height: 165px !important; /* 기존 높이 유지 */
    overflow-y: auto !important;
  }
  #anniversaryButtonList > * {
    flex: 0 0 auto !important;   /* 기존 flex 규칙 무력화 */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 하단 4요소: 2열 2행 그리드 */
  .anniversary-list-section > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 46px !important; /* 터치 친화 높이 */
    gap: 8px !important;
  }
  #selectedAnnivTitle,
  #cancel-selection-btn,
  #delete-btn,
  #anniversary-setting-btn {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;
  }

  .split-section {
    flex-direction: column;
  }
  
  .left-section, .right-section {
    width: 95%;
  }
  
  .security-section {
    width: 95%;
  }
  
  .storage-section {
    width: 95%;
  }
  
  .security-section input[type="password"] {
    width: 95%;
  }
  
  .left-section button {
    width: 95%;
  }
  
  input[type="text"], input[type="date"], select {
    width: 60%;
  }
  
  /* 모바일에서 백업자동안내와 버튼들 세로 배치 */
  .storage-options {
    flex-direction: column;
    gap: 10px;
  }
  
  /* 첫 번째 행 (백업자동안내) 왼쪽 끝 정렬 */
  .storage-options > label {
    justify-content: flex-start;
    margin-left: 0;
  }
  
  /* 두 번째 행 (버튼들) 가운데 정렬, 간격 20px */
  .storage-options > div {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  /* 모바일에서 기념일 저장 목록 영역 반응형 */
  /* 이전 모바일 임시 규칙 무력화 (높이 30px 등) → 위의 46px 규칙을 사용 */
}

.preview-section {
  padding-top: 0;
  padding-bottom: 0;
  background: none;
}

.preview-section h4 {
  margin-top: 0;
  color: #4A90E2;
  margin-bottom: 8px;
  font-size: 14px;
}

.preview-box {
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 13px;
  line-height: 1.4;
}

.preview-box span {
  font-weight: bold;
  color: #4A90E2;
}

/* 헤더에 표시되는 기념일 스타일 */
.header-anniversary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: #f0f4f8;
  border-radius: 4px;
  font-size: 14px;
}

.header-anniversary .title {
  font-weight: bold;
}

.header-anniversary .days {
  color: #4A90E2;
  font-weight: bold;
}

.anniversary-settings input,
.anniversary-settings select {
  padding: 6px 10px;
  font-size: 13px;
}

/* 기념일 저장 목록 섹션 하단 여백 */
.anniversary-list-section { margin-bottom: 0; }

/* 나머지 섹션도 동일하게 흰색 배경, radius, shadow 적용 */
.section, .storage-section, .user-section, .anniversary-save-section, .anniversary-settings-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin: 0 0 20px 0;
  padding: 0;
}

/* === 보안 설정 섹션: 공통 .section 규칙으로 사라진 배경/패딩 복원 === */
.security-section {
  background: #f8f9fa !important;
  border-left: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  padding: 20px !important;
  margin-top: -10px !important; /* 위로 10px 이동 */
}
.security-section h3 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #7B1FA2 !important;
  display: flex; align-items: center; gap: 8px;
}
.security-section .description {
  background: #c8e6c9 !important; /* 조금 더 진한 파스텔 그린 */
  padding: 15px !important;
  border-left: 5px solid #7B1FA2 !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
}

.left-section button {
  width: 100%;
}

#nicknamePreview {
  padding-left: 80px;
}

#anniversaryPreview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-left: 70px;
  margin-top: 30px;
  margin-bottom: 30px;
  background: none;
  border: none;
  box-shadow: none;
}

#anniversaryPreview .title {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* 전역: 좌/우 카드 상단 마진 제거로 이전 섹션과 간격 20px 유지 */
.left-section, .right-section { margin-top: 0 !important; }

/* 사용자 ID 입력창과 저장 버튼 스타일 */
.input-group {
  position: relative;
}

.input-group > button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 80px; /* 버튼 너비 조정 */
}

/* 이모지 팝오버 항목은 위 규칙의 영향을 받지 않도록 재설정 */
#nickname-emoji-pop button,
#nickname-emoji-pop .nickname-emoji-item {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
}

/* 저장 버튼 우측 여백 20px 통일 */
.input-group #save-nickname-btn { right: 20px !important; }
#anniv-options-row { margin-left: 0 !important; justify-content: space-between !important; }
#save-anniversary-btn { margin-left: auto !important; margin-right: 20px !important; }
.settings-row #set-anniversary-btn { margin-left: auto !important; margin-right: 20px !important; }

.anniv-btn {
  background: #FFF9C4;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 2px;
  margin-bottom: 2px;
}
.anniv-btn:hover {
  background: #FFE082;
}

/* 저장 설정 영역 - 보라색 배경 강제 적용 */
.storage-section {
  background: linear-gradient(180deg, #f3e8ff 0%, #ddd6fe 100%) !important;
  border: 1px solid rgba(167,139,250,0.4) !important;
  border-left: none !important; /* 왼쪽 띠 제거 */
}
.storage-section .description {
  border-left: 5px solid #8b5cf6 !important;
}

/* 저장 설정 영역 - 내부 여백과 요소 간 간격 개선 */
.storage-section {
  padding: 24px 24px !important; /* 좌우/상하 여백 확대 */
  border-radius: 12px !important;
}
.storage-section .description {
  padding: 16px 18px !important; /* 설명 박스 안쪽 여백 확대 */
  margin-bottom: 16px !important; /* 아래 간격 균일화 */
}
.storage-section .storage-options {
  margin: 14px 0 !important; /* 옵션 행들 사이 여백 */
}
/* 텍스트 가독성 향상 */
.storage-section p,
.storage-section label,
.storage-section span {
  line-height: 1.5;
}

/* 기념일 저장 목록 영역 - 파란 배경 적용 */
.anniversary-list-section {
  background: #e0e7ff !important; /* 조금 더 어두운 파스텔 남색(Indigo-100) */
  border: 1px solid rgba(79,70,229,0.34) !important; /* 살짝 진한 테두리 */
  border-radius: 12px !important;
  padding: 18px !important; /* 내부 여백 */
  box-sizing: border-box; /* 패딩 포함 너비 유지(상단과 동일 폭) */
  align-items: flex-start; /* 내부 정렬 상단 맞춤 */
  margin-top: 20px !important;  /* 섹션 간격 20px 통일 */
  margin-bottom: 20px !important;
}
/* 우측 컨트롤 칼럼 정렬/간격 보정 (inline 스타일 덮어쓰기) */
.anniversary-list-section > div:last-child {
  margin-top: 10px !important;
}
.anniversary-list-section > div:last-child input,
.anniversary-list-section > div:last-child select {
  width: 100% !important;
  display: block;
  margin-bottom: 10px;
}

/* 기념일 저장 목록 레이아웃 조정: 좌/우 컬럼 폭 균형 */
.anniversary-list-section { gap: 16px !important; }
/* 좌측: 카드 리스트 컬럼은 오른쪽 컨트롤 폭(160px) + 간격 16px 만큼 제외한 너비 */
.anniversary-list-section > div:first-child {
  width: calc(100% - 176px) !important; /* 160 + 16 */
}
/* 리스트 박스는 컬럼 너비에 맞춰 꽉 차게 */
#anniversaryButtonList { width: 100% !important; }
/* 우측 컨트롤 컬럼 고정 폭 + 세로 정렬 */
.anniversary-list-section > div:last-child {
  width: 160px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.anniversary-list-section > div:last-child input,
.anniversary-list-section > div:last-child button { width: 100% !important; }

/* 테스트: 우측 컨트롤 4개 요소 폭 100px */
#selectedAnnivTitle,
#cancel-selection-btn,
#delete-btn,
#anniversary-setting-btn {
  width: 120px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* 우측 4요소: 폭 140px, 높이 30px, 간격 5px */
.anniversary-list-section > div:last-child {
  gap: 5px !important;
}

#selectedAnnivTitle,
#cancel-selection-btn,
#delete-btn,
#anniversary-setting-btn {
  width: 140px !important;
  height: 30px !important;
  line-height: 30px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 우측 컨트롤 컬럼 위치 보정: 오른쪽 15px 이동 + 하단 정렬 */
.anniversary-list-section {
  align-items: flex-end !important; /* 우측 컬럼 하단 기준으로 정렬 */
}
.anniversary-list-section > div:last-child {
  transform: translateX(15px) !important; /* 추가로 10px 더 좌측 이동 */
  align-self: flex-end !important; /* 섹션 하단에 붙임 */
}

/* 우측 4개 요소 높이 정확히 25px로 고정 (패딩/라인하이트 포함) */
#selectedAnnivTitle,
#cancel-selection-btn,
#delete-btn,
#anniversary-setting-btn {
  height: 35px !important;
  line-height: 35px !important; /* 버튼 텍스트 수직 정렬 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#selectedAnnivTitle {
  transform: none !important; /* 이동 제거: 버튼들과 동일 간격(gap 5px) 적용 */
  height: 45px !important;      /* 선택창만 높이 45px */
  line-height: 45px !important;  /* 텍스트 수직 정렬 */
}

/* 선택창 내부 2줄 레이아웃 및 타이포 */
#selectedAnnivTitle.selected-anniv-filled {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.1 !important; /* 부모 line-height 무력화 */
}
#selectedAnnivTitle .sel-title { font-size: 14px; font-weight: 700; color: #111827; }
#selectedAnnivTitle .sel-sub   { font-size: 11px; font-weight: 600; color: #4b5563; margin-top: 1px; }
#selectedAnnivTitle .sel-sub .lunar-mark { color: #6b7280; }

/* 선택 상태: 파란 배경 + 제목 흰색 + 날짜 연회색 */
#selectedAnnivTitle.selected-anniv-filled {
  background: #1565C0 !important;
  border: none !important;
}
#selectedAnnivTitle.selected-anniv-filled .sel-title { color: #ffffff !important; }
#selectedAnnivTitle.selected-anniv-filled .sel-sub   { color: #f3f4f6 !important; margin-top: 2px !important; }
#selectedAnnivTitle.selected-anniv-filled .sel-sub .lunar-mark { color: #e5e7eb !important; }

/* 선택창 테두리만 선명하게 */
.anniversary-list-section > div:last-child #selectedAnnivTitle {
  border: 2px solid #ffffff !important;
}

/* 기념일 저장 목록 리스트 박스 폭을 +17px 확대 */
#anniversaryButtonList {
  width: calc(100% + 17px) !important;
}

/* 리스트 박스: 5개 균등 배치 + 말줄임 처리 (직계 자식 모두 대상) */
#anniversaryButtonList {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 2px !important;           /* 카드 사이 간격 */
  padding: 10px !important;       /* 내부 여백 */
  box-sizing: border-box !important;
}

/* 모든 직계 자식(버튼/a/div 등)을 동일 규칙으로 */
#anniversaryButtonList > * {
  flex: 0 0 calc((100% - 20px - 8px) / 5) !important; /* (100% - 좌우 패딩 20px - 4*gap 8px) / 5 */
  max-width: calc((100% - 20px - 8px) / 5) !important;
  min-width: 0 !important;           /* 말줄임 위해 필요 */
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;  /* 긴 제목은 … */
  padding: 6px 8px !important;
  margin: 0 !important;                /* 기본 마진 제거 */
}

#selectedAnnivTitle,
#cancel-selection-btn,
#delete-btn,
#anniversary-setting-btn {
  font-size: 13px !important;
}




/* === 자동 로그아웃 섹션: 내부 여백/정렬 보정 === */
.auto-logout-section {
  padding: 20px !important;           /* 섹션 내부 여백 */
  border-radius: 12px !important;     /* 섹션 모서리 일관화 */
  margin-top: 0 !important;
  margin-bottom: 20px !important;     /* 섹션 간격 20px 통일 */
}

.auto-logout-section h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;     /* 제목과 본문 간격 */
  line-height: 1.3;
}

/* 설명 문단을 다른 섹션과 유사한 리듬으로 */
.auto-logout-section .description {
  margin: 8px 0 16px 0 !important;    /* 좌측 들여쓰기 제거 및 아래 간격 정리 */
  padding: 12px 16px !important;      /* 안쪽 여백 부여 */
  background: rgba(255,245,230,0.6) !important; /* 섹션 톤에 맞춘 연한 배경 */
  border-left: 5px solid #ff6b35 !important;     /* 오렌지 포인트 라인 */
  border-radius: 8px !important;
}

/* 라벨의 좌측 여백 제거로 정렬 일치 */
#auto-logout-label {
  margin-left: 0 !important;
}

/* 컨트롤 높이/패딩 정렬 */
#autoLogoutTime { min-width: 120px; }
#auto-logout-save-btn {
  height: 34px !important;
  line-height: 1 !important;
  padding: 8px 16px !important;
}

/* ===== 모바일 강제 오버라이드(마지막 우선) ===== */
@media (max-width: 768px) {
  /* 컨테이너 좌우 여백 균일 */
  .anniversary-list-section {
    width: 100% !important;
    padding: 12px 12px 16px 12px !important; /* 위/아래 여백 추가로 경계에 붙는 현상 완화 */
    box-sizing: border-box !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .anniversary-list-section > div:first-child,
  .anniversary-list-section > div:last-child {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* 제목과 리스트 간격 */
  #anniversary-list-title { margin: 6px 0 12px 0 !important; }

  /* 리스트 박스: 2열 그리드(일반 flex 규칙 무력화) */
  #anniversaryButtonList {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    height: 165px !important;
    overflow-y: auto !important;
  }
  #anniversaryButtonList > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 하단 4요소: 2열 2행 */
  .anniversary-list-section > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 46px !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important; /* 버튼 그룹 상단 여백 */
  }
  #selectedAnnivTitle,
  #cancel-selection-btn,
  #delete-btn,
  #anniversary-setting-btn {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;
    margin: 0 !important;
  }
}