/* 전역 사이드 간격 변수 */
:root { --diary-side-gap-mobile: 12px; }

/* 이 페이지 전역 리셋: 기본 body 마진(8px) 제거 및 가로 넘침 방지 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* 📦 전체 컨테이너 */
.diary-container {
  display: flex;
  flex-direction: row;
  gap: 10px; /* 섹션 간 간격 축소로 오른쪽 여백 줄임 */
  max-width: 1200px;
  margin: -30px auto 0;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, #fde68a 0%, #fca5a5 100%) !important; /* 살구→코랄 핑크 */
  border-radius: 20px;
  padding: 12px; /* 외곽 투톤이 보이도록 */
}

/* 📅 달력 영역 */
.calendar-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  margin-top: 10px; /* 투톤 배경 상단에서 10px 아래로 */
  padding-top: 20px;
  background: transparent !important; /* 부모 투톤과 자연스럽게 합침 */
  border-radius: 16px;
  padding-left: 12px; padding-right: 12px; /* 가장자리 캔버스 노출 */
}

.calendar-header {
  display: flex;
  justify-content: center; /* 화살표와 날짜를 중앙에 모아 배치 */
  align-items: center;
  margin-bottom: 30px; /* 날짜 아래 전체를 10px 더 아래로 */
  padding: 15px;
  position: relative;
  z-index: 10;
  margin-top: 0; /* 섹션 여백과 정렬 */
  gap: 12px; /* 요소 간 간격 (기존 대비 절반 수준) */
}
.calendar-header button#prev-month,
.calendar-header button#next-month {
  transform: scale(0.75); /* 크기 75% */
}

.calendar-header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 음력 토글 버튼 - 사각형 스타일 */
.lunar-toggle-button {
  /* 배경 제거 - 각 요소가 개별 배경을 가짐 */
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: -27px; /* 달력 헤더와의 간격 (10px - 37px = -27px) */
  margin-bottom: 10px; /* 달력 그리드와의 간격 */
  display: flex; /* flex로 변경하여 한 행에 배치 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 5px; /* 요소들 사이 간격 */
  width: fit-content; /* 내용물 크기만큼만 차지 */
}

/* .lunar-toggle-button:hover는 제거 - label에 적용됨 */

.lunar-toggle-button label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #8B4513; /* 어두운 갈색 텍스트 */
  font-size: 12px; /* 13px → 12px로 축소 */
  font-weight: 500;
  user-select: none;
  margin: 0;
  background: #E6E6FA; /* 흐린 밝은 보라색 배경 */
  border-radius: 8px;
  padding: 5px 10px;
  transition: all 0.2s ease;
}

.lunar-toggle-button label:hover {
  background: #D8BFD8; /* 호버 시 더 진한 보라색 */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(230, 230, 250, 0.3);
}

.lunar-toggle-button input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #4682B4;
  background: #4682B4;
  border: 2px solid white;
  border-radius: 3px;
}

.lunar-toggle-button input[type="checkbox"]:checked {
  background: #4682B4;
  border-color: white;
}

.lunar-toggle-button span {
  color: #8B4513; /* 어두운 갈색 텍스트 */
  font-weight: 500;
}

/* 국가별 공휴일 드롭다운 스타일 */
#country-holidays-container {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 0; /* flex 컨테이너 내에서 간격 조정 */
  background: #E6E6FA; /* 흐린 밝은 보라색 배경 */
  border-radius: 8px;
  padding: 2px; /* 여백 더 줄임 */
  transition: all 0.2s ease;
}

#country-holidays-container:hover {
  background: #D8BFD8; /* 호버 시 더 진한 보라색 */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(230, 230, 250, 0.3);
}

#country-holidays-container label {
  color: #8B4513;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

#country-holidays-select {
  padding: 2px 4px; /* 여백 줄임 */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: white;
  color: #333;
  cursor: pointer;
}

#country-holidays-select:hover {
  border-color: #4682B4;
}

#country-holidays-select:focus {
  outline: none;
  border-color: #4682B4;
  box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.2);
}

.calendar-header h2 {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 2.5em;
  color: #0F172A;
  font-weight: 700;                 /* 두께 완화 */
  text-align: center;
  margin: 0;
  padding: 0 6px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 외곽선 대신 하이라이트 + 그림자로 입체감 */
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.18);
  -webkit-text-stroke: 0;
          text-stroke: 0;
  letter-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

.calendar-header h2::after { content: none !important; display: none !important; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 요일 헤더 스타일 */
.calendar-header-day {
  text-align: center;
  padding: 8px;
  font-weight: bold;
  background: #D9F99D;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

/* 일요일 스타일 */
.calendar-header-day.sunday {
  color: #ef4444;
}

.calendar-day.sunday {
  color: #ef4444;
}

.calendar-day.sunday .date-number {
  color: red !important;
}

/* 공휴일 스타일 */
.calendar-day.holiday,
.calendar-day.sunday {
  background: linear-gradient(180deg, #fff3f3 0%, #ffdcdc 100%) !important;
  border: 1.5px solid rgba(220,38,38,0.45) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), 0 3px 10px rgba(190,24,24,0.16) !important;
}

.calendar-day.holiday .date-number,
.calendar-day.sunday .date-number {
  color: red !important;
}
.calendar-day.holiday:hover,
.calendar-day.sunday:hover {
  background: linear-gradient(180deg, #fff7f7 0%, #ffe7e7 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: inset 0 2.2px 0 rgba(255,255,255,1), 0 8px 20px rgba(190,24,24,0.26) !important;
  transform: translateY(-2px);
  filter: saturate(1.06);
}

.calendar-day.holiday:active,
.calendar-day.sunday:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #ffecec 0%, #ffd0d0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(190,24,24,0.18) !important;
  border-color: #dc2626 !important;
}

/* 오늘 날짜 셀도 동일 톤으로 입체감 */
.calendar-day.today {
  border: 1.8px solid #8B5CF6 !important;
  background: linear-gradient(180deg, #f6f1ff 0%, #e9dbff 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), 0 3px 10px rgba(91,33,182,0.18) !important;
}

.calendar-day.today:hover {
  border-color: #7c3aed !important;
  box-shadow: inset 0 2.2px 0 rgba(255,255,255,1), 0 8px 20px rgba(91,33,182,0.28) !important;
  transform: translateY(-2px);
}

.calendar-day.today:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #efe6ff 0%, #dfccff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(91,33,182,0.2) !important;
}

.calendar-day.holiday .holiday-name {
  font-size: 11px !important;
  text-align: left !important;
  color: #ff0000 !important;
  font-weight: 500 !important;
}

/* 빈 셀 스타일 */
.calendar-day.empty {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.calendar-day.empty:hover {
  background: transparent;
}

/* 달력 셀 스타일 */
.calendar-day {
  height: 100px;
  background: #fffbeb;
  border: 1.5px solid rgba(30,58,138,0.35);
  border-radius: 10px;
  padding: 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), 0 3px 10px rgba(17,24,39,0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 13px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 입체감 배경: 공휴일/오늘 제외 */
.calendar-day:not(.holiday):not(.today):not(.sunday) {
  background: linear-gradient(180deg, #fffdf6 0%, #fff6e6 100%);
}

/* Hover: 살짝 상승 + 포커스 컬러 */
.calendar-day:not(.holiday):not(.today):not(.sunday):hover {
  background: linear-gradient(180deg, #fffefc 0%, #ffeed6 100%);
  border-color: #3b82f6;
  box-shadow: inset 0 2.2px 0 rgba(255,255,255,1), 0 8px 20px rgba(17,24,39,0.24);
  transform: translateY(-2px);
  filter: saturate(1.06);
}

/* Active: 눌림 효과 */
.calendar-day:not(.holiday):not(.today):not(.sunday):active {
  transform: translateY(0);
  background: linear-gradient(180deg, #fff9ef 0%, #ffe2bf 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(17,24,39,0.16);
  border-color: #1d4ed8;
}

/* 키보드 포커스 접근성 */
.calendar-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25), inset 0 2px 0 rgba(255,255,255,1);
}

.date-number {
  font-weight: bold;
  margin-bottom: 4px;
  text-align: left;
}

.day-events {
  font-size: 12px;
  color: #4b5563;
}

.event {
  display: block;
  color: #0a0ee4 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin: 1px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lunar-date {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
}

/* 🔴 사용자 제시 음력 관련 스타일 수정 */
.lunar {
  font-size: 11px !important;
  color: #444 !important; /* 짙은 회색 */
  margin-top: 60px !important; /* 아래쪽으로 60px 이동 (20px 더 추가) */
  margin-bottom: 5px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.holiday {
  font-size: 12px !important;
  color: red !important;
  font-weight: bold !important;
  margin-top: 2px !important;
  margin-bottom: 5px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.anniversary {
  font-size: 11px !important;
  color: #ff0000 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  text-align: left !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
}

/* 오늘 날짜 스타일 강화 */
.calendar-day.today {
  border: 2px solid #8B5CF6;
  background-color: #f0e6ff;
}

.calendar-day.today .date-number {
  color: #8B5CF6;
  font-weight: bold;
}

/* 📔 일기장 */
.diary-section {
  flex: 1;
  background: transparent !important; /* 부모 투톤의 오른쪽 보라가 보이게 */
  border-radius: 16px;
  padding: 12px !important; /* 가장자리 캔버스 노출 */
  margin-top: 23px; /* 5px 추가로 더 아래로 이동 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.diary-input {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  margin-top: 0 !important; /* 마진 조정 */
  padding: 0 !important; /* 좌우 패딩 제거 */
}

/* 다이어리 제목 스타일 */
.diary-title {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  color: #0F172A; /* Deep Navy */
  text-align: center;
  margin: 15px 0 10px 0; /* 마진 조정 */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-text-stroke: 1px rgba(255,255,255,0.55); /* 밝은 외곽선 */
          text-stroke: 1px rgba(255,255,255,0.55);
  letter-spacing: 3px;
  position: relative;
}

.diary-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #60a5fa 0%, #1d4ed8 100%); /* 더 진한 블루 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  margin: 10px auto;
  border-radius: 2px;
}

/* 메모 입력창 */
textarea#memo-input {
  /* 일반 모드 기본 높이 → 6줄 근사값은 미디어쿼리에서 제어 */
  width: 100% !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 14px !important;
  border: 1px solid skyblue !important;
  box-sizing: border-box !important;
  background: #ffffff !important; /* 밝은 흰색 */
}

/* 사진 모드일 때 텍스트를 2줄로 강제: JS가 .photo-mode 클래스를 토글 */
.diary-input.photo-mode textarea#memo-input {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  resize: none !important;
}

/* 데스크탑 전용: 메모 입력창 높이 축소 (모바일은 유지) */
@media (min-width: 769px) {
  /* 컨테이너가 남는 공간을 차지해 버튼을 밀지 않도록 */
  .diary-input {
    flex: 0 0 auto !important;
    margin-top: 15px !important; /* 파란 입력 영역을 전체적으로 아래로 15px 이동 */
  }

  /* PC에서 보기 좋은 높이로 조정 */
  textarea#memo-input {
    height: 160px !important;
    min-height: 160px !important;
  }
  /* 사진 모드에서는 2줄로 축소 */
  .diary-input.photo-mode textarea#memo-input {
    height: 60px !important; /* 대략 2줄 */
    min-height: 60px !important;
  }

  /* 데스크톱: (2) 그룹만 좌측으로 5px 이동
     - 기념일 (.anniversary)
     - 등록한 일정 제목 (.event) 2개
     - 일정 + n (.more-events) */
  .calendar-day.holiday .anniversary,
  .calendar-day.holiday .event,
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .anniversary,
  .calendar-day.sunday .event,
  .calendar-day.sunday .more-events {
    position: relative;
    left: -5px;
  }
  /* 기존 margin 보정 제거 (좌표 이동만 적용) */
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    margin-left: 0 !important;
  }

  /* 데스크톱: 공휴일/일요일의 "일정 +n" 중앙 정렬 */
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    text-align: center !important;
  }

  /* 데스크톱: 공휴일/일요일의 "일정 +n" 위로 6px 이동 (추가 +2px) */
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    top: -6px;
  }

  /* 데스크톱: 공휴일/일요일의 "일정 +n"만 오른쪽으로 2px 이동
     (2번 전체가 left:-5px 적용되어 있으므로, 보정값 -3px로 재설정) */
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    left: -4px;
  }

  /* 데스크톱: 1(공휴일 제목)과 2(기념일/일정/일정+n) 전체를 위로 3px 이동 (음력 제외) */
  .calendar-day .holiday-name,
  .calendar-day .anniversary,
  .calendar-day .event,
  .calendar-day .more-events {
    position: relative;
    top: -3px;
  }

  /* 데스크톱: "일정 +n"만 추가 보정 → 총 -6px */
  .calendar-day .more-events {
    top: -6px;
  }

  /* ================== 평일(비공휴일/비일요일) 전용 보정 ================== */
  /* 데스크톱: 평일의 (2) 그룹 좌측 5px 이동 + 위로 3px 이동 */
  .calendar-day:not(.holiday):not(.sunday) .anniversary,
  .calendar-day:not(.holiday):not(.sunday) .event,
  .calendar-day:not(.holiday):not(.sunday) .more-events {
    position: relative;
    left: -5px;
    top: -3px;
  }

  /* 데스크톱: 평일의 "일정(+n)" 중앙 정렬 및 추가 위치 보정 */
  .calendar-day:not(.holiday):not(.sunday) .more-events {
    text-align: left !important;   /* 중앙 → 왼쪽 정렬 */
    top: -4px;                     /* 아래로 2px 보정 */
    left: -5px;                    /* 왼쪽으로 1px 추가 이동 */
    margin-left: 0 !important;
  }
}

/* 버튼 그룹 스타일 */
.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 8px 14px !important; /* 버튼 가로폭 확보(여백 축소) */
  padding: 0 !important;
}

/* 저장 버튼 스타일 */
#save-memo {
  padding: 7px 12px;
  background: green !important;
  color: rgb(255, 255, 255) !important; /* 밝은 하얀색 */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease !important;
  position: relative; z-index: 10002; pointer-events: auto;
}

#save-memo:hover {
  background: #1a5f9e !important;
}

/* 수정 버튼 스타일 */
#update-memo {
  padding: 7px 12px;
  background: orange !important;
  color: rgb(255, 255, 255) !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease !important;
  position: relative; z-index: 10002; pointer-events: auto;
}

#update-memo:hover {
  background: #cc7000 !important;
}

/* 삭제 버튼 스타일 */
#delete-memo {
  padding: 7px 12px;
  background: red !important;
  color: rgb(255, 255, 255) !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease !important;
  margin-left: 6px !important;
  position: relative; z-index: 10002; pointer-events: auto;
}

#delete-memo:hover {
  background: #b30000 !important;
}

/* 메모 저장창 */
#memo-list {
  margin-top: 0 !important; /* 마진 조정 */
  height: 335px !important; /* 160 + 15 + 160 */
  min-height: 335px !important;
  max-height: 335px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  color: #8475d8 !important;
  border: none !important; /* 섹션을 완전 분리하기 위해 외곽 보더 제거 */
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(95, 204, 227, 0.90) 0%, rgba(255, 136, 178, 0.90) 100%) !important; /* 청록→핑크 */
  padding: 0 !important;
  /* 텍스트 입력창(카드)와 동일 가로폭: 좌우 여백 제거 */
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: none !important;
  cursor: pointer !important; /* 마우스 커서 변경 */
}

/* 메모 저장창 상단 (오늘의 메모) */
.memo-today {
  height: 160px !important; /* 각 영역 160px */
  background: #C7D2FE !important; /* 흐린 파스텔 남색(인디고 계열) */
  padding: 10px;
  border-radius: 8px !important; /* 입력창(텍스트에어리어)과 동일 라운드 */
  margin-top: 15px !important; /* 위쪽과 너무 붙지 않도록 아래로 15px 이동 */
  margin-bottom: 15px !important; /* 아래쪽 간격 */
  overflow-y: auto !important;
  border: 2px solid #69b7ff !important; /* 더 또렷한 테두리 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(0,0,0,0.08) !important; /* 은은한 입체감 */
}

/* 🟠 지난/이번달 날짜 클릭 시(리스트 모드) 배경 강조: 흐린 오렌지 */
.memo-today.history-day-mode {
  background: #FFF4E5 !important; /* soft orange */
  border-bottom-color: #ffd7a6 !important;
}

/* 메모 저장창 하단 (이전 메모) */
.memo-history {
  height: 160px !important; /* 각 영역 160px */
  background: #E6E6FA !important; /* 약한 보라 파스텔 */
  padding: 10px;
  border-radius: 8px !important; /* 입력창(텍스트에어리어)과 동일 라운드 */
  border: 2px solid #69b7ff !important; /* 더 또렷한 테두리 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(0,0,0,0.08) !important; /* 은은한 입체감 */
  display: flex;
  flex-direction: column;
  overflow: hidden !important; /* 전체 overflow 제거 */
}

/* 📷 메모 탭 버튼 그룹 */
.memo-tab-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  justify-content: flex-start;
  flex-shrink: 0; /* 버튼이 줄어들지 않도록 */
}

/* history-memo에만 스크롤 적용 */
#history-memo {
  flex: 1;
  overflow-y: auto !important;
  min-height: 0; /* flex 자식이 제대로 스크롤되도록 */
}

.memo-tab-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.6);
  color: #6b7280;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.memo-tab-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.memo-tab-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.88) 0%, rgba(124, 58, 237, 0.88) 100%);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
}

/* 📷 사진 메모 검색 영역 */
.photo-memo-search {
  margin-top: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}

#photo-search-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white;
}

#photo-search-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

#photo-search-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

#photo-search-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
}

.memo-today h3, .memo-history h3 {
  margin: 0 0 4px 0 !important; /* 아래 마진 축소 */
  font-size: 13px !important; /* 리스트 항목과 동일 */
  font-weight: 800 !important;
  color: #ffffff !important;
  padding: 6px 12px !important; /* 내부 패딩 축소 */
  border-radius: 18px !important; /* pill 살짝 완화 */
  line-height: 1 !important; /* 세로 여백 최소화 */
  position: sticky; top: 0; z-index: 1;
  display: inline-flex; align-items: center; /* 수직 가운데 정렬 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.memo-today h3 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.88) 0%, rgba(234, 88, 12, 0.88) 100%) !important; /* soft orange */
}
.memo-history h3 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.88) 0%, rgba(124, 58, 237, 0.88) 100%) !important; /* soft indigo/purple */
}

/* 이번달메모 / 사진메모 헤더 정렬 */
.memo-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* 사진메모 버튼을 이번달메모 타이틀과 비슷한 느낌으로 */
#photo-memo-button {
  padding: 5px 12px;          /* h3 대비 1px 줄여 높이 보정 */
  font-size: 13px;            /* h3와 동일 폰트 크기 */
  font-weight: 800;
  color: #ffffff;
  font-family: inherit;       /* 제목과 동일한 폰트 패밀리 사용 */
  border: none;
  border-radius: 18px;        /* h3와 동일 pill 정도 */
  cursor: pointer;
  /* 짙은 파랑 계열 배경 */
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45);
  line-height: 1;             /* 세로 높이 맞춤 */
  white-space: nowrap;
  display: inline-flex;       /* h3와 동일 정렬 방식 */
  align-items: center;
  margin-top: -5px;           /* 제목 대비 5px 위로 올리기 */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#photo-memo-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.6);
}

#photo-memo-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.6);
}

/* 지난메모 날짜 보기에서 기본 화면으로 되돌아가기 버튼 */
#memo-reset-btn {
  margin-left: 8px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #e74c3c !important;
  color: #fff !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
#memo-reset-btn:hover { background: #c0392b !important; }

/* 메모 항목 스타일 */
#memo-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

#memo-list li:last-child {
  border-bottom: none !important;
}

#memo-list li:hover {
  background: rgba(0,0,0,0.05) !important;
}

/* 날짜별 리스트 가독성 향상: 줄무늬 + 호버 시 좌측 강조선 */
#today-memo li:nth-child(odd) { background: rgba(255,255,255,0.45) !important; }
#history-memo li:nth-child(odd) { background: rgba(255,255,255,0.45) !important; }
#today-memo li:hover { border-left: 3px solid #ef4444 !important; }
#history-memo li:hover { border-left: 3px solid #6d28d9 !important; }

/* 지난 메모 보기 섹션 */
.memo-date-selector {
  margin-top: 17px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(95, 204, 227, 0.90) 0%, rgba(255, 136, 178, 0.90) 100%) !important; /* 청록→핑크 */
  border-radius: 18px;
  display: flex;
  gap: 6px; /* 선택/취소 사이 간격 조금 축소 */
  align-items: center;
  font-size: 13px !important;
  /* 위 텍스트 입력 카드와 동일 가로폭 */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 모바일: 한 줄 유지 (데스크톱과 동일하게 가로 정렬) */
@media (max-width: 768px) {
  .memo-date-selector {
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .memo-date-selector label {
    flex-basis: auto;
    margin-bottom: 0 !important;
    line-height: 1.15;
  }
}

/* 초소형 기기(iPhone SE 등, ≤ 390px) 최적화 */
@media (max-width: 390px) {
  :root { --diary-side-gap-mobile: 8px; }

  .calendar-header {
    padding: 10px;
  }

  .calendar-header h2 {
    font-size: 22px;
    min-width: 0;           /* 고정 최소폭 제거 → 넘침 방지 */
    flex: 0 0 auto !important; /* 화살표가 날짜 옆에 붙도록 폭 고정 */
    text-align: center;
  }

  /* 이전/다음 버튼 더 작게 */
  .calendar-header button#prev-month,
  .calendar-header button#next-month {
    transform: scale(0.62);
    padding: 6px 10px;
  }
}

.memo-date-selector label {
  white-space: nowrap;
  font-size: 13px !important;
}

.memo-date-selector select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px !important;
  background: white;
}

.memo-date-selector {
  display: flex;
  align-items: center;
  gap: 6px;                 /* 요소 간 일정 간격 */
  flex-wrap: nowrap;
}

.memo-date-selector label {
  margin-right: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.memo-date-selector select {
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}

.memo-date-selector button {
  padding: 5px 10px;
  background: #4A90E2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px !important;
  white-space: nowrap;
}

.memo-date-selector button:hover {
  background: #357ABD;
}

#reset-memo {
  background: #e74c3c;
  font-size: 12px !important;
  padding: 4px 8px;
}

/* 모바일에서 지난 메모 영역 오른쪽 여백 확보 (X 버튼이 가장자리에 붙지 않도록) */
@media (max-width: 640px) {
  .memo-date-selector {
    margin-right: 10px;
    gap: 4px; /* 좁은 화면에서는 간격 살짝 축소 */
  }
}

/* 선택한달 메모 영역 */
.selected-month-memo {
  margin-top: 10px;
  padding: 5px; /* 더 작게 패딩 조정 */
  background: #E8F5E9 !important; /* 지난메모보기와 동일한 연두색 */
  border-radius: 18px; /* 위 리스트와 통일 */
  border: 1px solid skyblue; /* 다른 섹션과 동일 보더 톤 */
  height: 170px; /* 보라색 영역과 동일한 전체 높이 */
  max-height: 170px;
  /* 텍스트 입력 카드와 동일 가로폭 */
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.selected-month-memo h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.selected-month-memo #selected-month-list {
  height: 150px !important; /* 전체 높이에서 패딩 제외 */
  min-height: 150px !important;
  max-height: 150px !important;
  overflow-y: auto;
  background: transparent; /* 하얀색 배경 제거 */
  border-radius: 6px;
  padding: 3px;
  list-style: none;
  margin: 0;
  font-size: 13px !important; /* 이번달메모와 동일한 폰트 크기 */
}

.selected-month-memo #selected-month-list li {
  padding: 4px 0; /* 이번달메모와 동일하게 */
  border-bottom: 1px solid rgba(0,0,0,0.1); /* 이번달메모와 동일하게 */
  cursor: pointer;
  transition: background-color 0.2s;
  line-height: normal; /* 기본값으로 */
  background: transparent; /* 투명 배경 */
  border-radius: 0; /* 둥근 모서리 제거 */
  margin: 0; /* 마진 제거 */
  list-style: none;
  font-size: 13px !important; /* 이번달메모와 동일한 폰트 크기 */
}

.selected-month-memo #selected-month-list li:last-child {
  border-bottom: none;
}

.selected-month-memo #selected-month-list li:hover {
  background: rgba(0,0,0,0.05) !important; /* 이번달메모와 동일하게 */
}

/* 🪄 팝업창 */
.popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: white;
  padding: 20px;
  width: 450px; /* 🔴 기존보다 50% 확대 */
  height: 450px; /* 🔴 350px에서 450px로 100px 증가 */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 90vh; /* 화면 높이의 90%를 넘지 않도록 제한 */
  overflow-y: auto; /* 내용이 많을 경우 스크롤 가능 */
}

/* 알림 칩 스타일 */
.notify-row { margin-top: 8px; display: flex; align-items: center; }
.notify-label { margin-right: 20px !important; }
.notify-select { font-size: 13px; }

/* 저장된 일정 옆 알림 배지 */
.notify-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 11px;
  color: #ffffff;
  background: #ef4444;
  border: 1px solid #ef4444;
  border-radius: 9999px;
}

.popup-content input,
.popup-content textarea {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.popup-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.popup-buttons button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#save-schedule {
  background: #4A90E2;
  color: white;
}

#close-popup {
  background: #ccc;
  color: black;
}
/* 🎉 기념일 섹션 */
.popup-content div[style*="background: #fff9f9"] {
  width: 66% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 또는 ID를 사용한 더 명확한 선택자 */
#popup-holiday-list {
  width: 66% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 월 이동 버튼 스타일 */
#prev-month, #next-month {
  background: #4A90E2;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

#prev-month:hover, #next-month:hover {
  background: #3A7BD5;
}

/* 🔐 메모 인증 팝업 스타일 */
#memo-auth-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10001;
  display: none;
}

#memo-auth-popup input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
  box-sizing: border-box;
  font-size: 14px;
}

#memo-auth-popup button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

#memo-auth-popup button:first-of-type {
  background: #43A047;
  color: white;
}

#memo-auth-popup button:first-of-type:hover {
  background: #388E3C;
}

#memo-auth-popup button:last-of-type {
  background: #666;
  color: white;
}

#memo-auth-popup button:last-of-type:hover {
  background: #555;
}

/* ====== 캘린더 셀 내 표시 방식 개선 ====== */

/* 날짜 옆(상단)에 공휴일/명절/음력기념일 한 줄로, 길면 ... */
.calendar-day .date-number, .calendar-day .holiday-name, .calendar-day .anniversary {
  display: inline-block;
  vertical-align: middle;
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 기념일은 날짜 아래 한 줄, 여러 개면 ,로 구분, 길면 ... */
.anniversary {
  display: block;
  color: #e11d48 !important; /* 빨간색 */
  font-size: 11px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  text-align: left !important;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 일정은 2개만, 나머지는 +추가일정 n개로 표시 (JS에서 추가) */
.event {
  display: block;
  color: #0a0ee4 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin: 1px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-events {
  color: #3639be !important;
  font-size: 11px !important;
  margin-top: 2px !important;
  text-align: left !important;
  margin-top: 0px !important;
  margin-left: -1px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* 음력 날짜는 맨 아래, 회색, 가운데 정렬 */
.lunar {
  font-size: 10px !important;
  color: #666666 !important;
  position: absolute;
  bottom: -1px; /* 아래로 3px 이동 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.calendar-day .holiday-name {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.calendar-day .holiday-name {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: inline !important;         /* ← 이게 핵심! */
  vertical-align: middle !important;  /* 레이아웃 유지 */
}

/* 공휴일 셀 내부 일정/추가일정도 평일과 동일하게 */
.calendar-day.holiday .event,
.calendar-day.holiday .more-events,
.calendar-day.sunday .event,
.calendar-day.sunday .more-events {
  color: #0a0ee4 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin: 1px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  display: block !important;
}

.calendar-day.holiday .more-events,
.calendar-day.sunday .more-events {
  color: #3639be !important;
  font-size: 11px !important;
  margin-top: 2px !important;
  margin-left: -1px !important;
}

/* 모바일 전용 레이아웃 */
@media (max-width: 768px) {
  .diary-container {
    flex-direction: column;
    margin: 0;
    padding: var(--diary-side-gap-mobile);
    width: 100% !important;          /* 모바일에서 풀폭 사용 */
    max-width: none !important;      /* 상단 섹션과 폭 일치 */
    gap: 12px; /* 모바일 간격 약간 축소 */
  }
  /* 모바일: 화살표를 날짜 바로 옆에 배치 강제 */
  .calendar-header { justify-content: center !important; gap: 8px !important; }
  .calendar-header > * { flex: 0 0 auto !important; }
  
  .calendar-section {
    width: 100%;
    margin-bottom: 10px;
    padding-left: 0;                 /* 내부 좌우 패딩 제거로 시각적 폭 통일 */
    padding-right: 0;
  }
  
  .diary-section {
    width: 100%;
    margin-top: 8px;
    padding-left: 0 !important;      /* 입력/리스트 폭을 달력과 맞춤 */
    padding-right: 0 !important;
  }

  /* 모바일: 텍스트 입력창 높이 160px 고정 (언어 무관) */
  textarea#memo-input {
    height: 160px !important;
    min-height: 160px !important;
  }
  /* 모바일 사진모드에서는 2행 유지 */
  .diary-input.photo-mode textarea#memo-input {
    height: 60px !important;
    min-height: 60px !important;
  }
  
  .diary-title {
    font-size: 2em;
    margin: 10px 0;
  }
  /* 모바일: 화살표와 월 제목 간격 더 축소 */
  .calendar-header { justify-content: center; gap: 8px; }
  .calendar-header h2 { padding: 0 4px; min-width: 0; }
  .calendar-header button#prev-month,
  .calendar-header button#next-month { transform: scale(0.65) !important; padding: 6px 10px !important; }
  
  .calendar-grid {
    gap: 5px;
    width: 100%;                     /* 그리드도 컨테이너 폭에 맞춤 */
  }
  
  .calendar-day {
    min-height: 60px;
    font-size: 12px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.98), 0 4px 14px rgba(17,24,39,0.16);
  }
  
  .date-number {
    font-size: 10px;
  }
  
  .lunar-date {
    font-size: 10px;
  }

  /* 모바일: 셀 내부 모든 텍스트 10px 통일 */
  .calendar-day .date-number,
  .calendar-day .holiday-name,
  .calendar-day.holiday .holiday-name,
  .calendar-day .more-events,
  .calendar-day .anniversary,
  .calendar-day .lunar {
    font-size: 10px !important; /* 요구: 공휴일 글자 크기와 동일(10px) */
  }

  /* 모바일: 등록한 일정 제목도 10px로 통일 */
  .calendar-day .event {
    font-size: 10px !important;
  }

  /* 모바일: 공휴일 셀 내부에서도 일정/더보기 크기 강제 덮어쓰기 */
  .calendar-day.holiday .event,
  .calendar-day.sunday .event {
    font-size: 10px !important;
  }
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    font-size: 10px !important;
  }

  /* 모바일: 기념일/일정 텍스트 중앙 정렬, 전체 폭 사용 */
  .calendar-day .event,
  .calendar-day .more-events,
  .calendar-day .anniversary {
    position: relative;
    /* width:100% + 중앙정렬 환경에서 left 오프셋이 체감되지 않음 → transform 사용 */
    left: 0;
    transform: translateX(-5px);
    top: -3px; /* 아래로 2px */
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;      /* 여러 줄 허용 */
    overflow: visible !important;        /* 숨기지 않음 */
    text-overflow: unset !important;     /* 말줄임표 해제 */
    word-break: keep-all !important;     /* 한글 단어 단위 줄바꿈 */
    margin-left: 0 !important;
  }

  /* B안: 모바일 평일(공휴일/일요일 제외)만 2·3·4번을 아래로 2px 내림 */
  .calendar-day:not(.holiday):not(.sunday) .event,
  .calendar-day:not(.holiday):not(.sunday) .more-events,
  .calendar-day:not(.holiday):not(.sunday) .anniversary {
    top: -4px !important; /* 추가 2px 위로 조정 */
  }

  /* 모바일 평일: 4번(일정 +n)만 왼쪽으로 2px 이동 */
  .calendar-day:not(.holiday):not(.sunday) .more-events {
    left: -1px !important; /* 오른쪽으로 1px 이동 */
    /* 줄임표 방지: 평일은 전체 표시 */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline-block !important;
  }

  /* 모바일 평일: 3번(일정) 세로 정렬 불일치 해소를 위해 왼쪽 정렬 */
  .calendar-day:not(.holiday):not(.sunday) .event {
    text-align: left !important;
  }

  /* 모바일: 일정(+n)만 1px 우측으로 미세 조정 → 총 -4px 효과 */
  .calendar-day .more-events {
    transform: translateX(-4px) !important;
    /* 한 줄 고정 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 모바일: 공휴일/일요일의 "일정+n"은 한 줄로 전체 표시 (줄바꿈 금지) */
  .calendar-day.holiday .more-events,
  .calendar-day.sunday .more-events {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline-block !important; /* 줄바꿈 방지 보조 */
  }

  /* 모바일: 공휴일/일요일의 일정(3번) 말줄임 완전 해제 - 상위 규칙 덮어쓰기 */
  .calendar-day.holiday .event,
  .calendar-day.sunday .event {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
  }

  /* 모바일: 공휴일/일요일의 "(+n)"만 빨간색 */
  .calendar-day.holiday .more-events .more-count,
  .calendar-day.sunday .more-events .more-count {
    color: #ff0000 !important;
    font-weight: 700 !important;
  }

  /* 모바일: "일정" 라벨은 파란색 */
  .more-events .more-label {
    color: #1d4ed8 !important; /* 파란색 */
    font-weight: 700 !important;
  }

  /* 모바일 평일: +n도 빨간색으로 강조 */
  .calendar-day:not(.holiday):not(.sunday) .more-events .more-count {
    color: #ff0000 !important;
    font-weight: 700 !important;
  }

  /* 모바일: 공휴일 제목도 중앙 정렬 강제 */
  .calendar-day .holiday-name {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(-5px) !important;
    top: -3px !important; /* 아래로 2px */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;      /* 여러 줄 허용 */
    overflow: visible !important;        /* 숨기지 않음 */
    text-overflow: unset !important;     /* 말줄임표 해제 */
    word-break: keep-all !important;     /* 한글 단어 단위 줄바꿈 */
    margin-left: 0 !important;
  }
  
  /* 모바일에서 국가별 공휴일 드롭다운 스타일 */
  #country-holidays-container { margin-left: 0; margin-top: 0; }
  
  #country-holidays-container label { font-size: 12px; }
  
  #country-holidays-select { font-size: 12px; padding: 3px 6px; }
  
  /* 모바일: 영어 요일명 오버플로우 방지 */
  .calendar-header-day {
    font-size: 11px !important;  /* 14px → 11px로 축소 */
    padding: 6px 2px !important; /* 8px → 6px 2px로 축소 */
    min-width: 0 !important;      /* 최소 너비 제한 해제 */
  }

  /* 모바일: 데스크톱과 동일 폭 정렬(입력 카드 외곽과 맞춤) */
  #memo-list,
  .memo-date-selector,
  .selected-month-memo,
  .button-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ✅ 모바일 버튼(모든 언어) 정렬
     - 요구사항: 4열 1행(무조건 한 줄)
     - 원칙: 제목이 잘리면 안 됨 → 말줄임표 금지, 대신 버튼별 폭 비율 + (필요 시) 버튼 내부 줄바꿈 허용 */
  .button-group {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap !important; /* ✅ 절대 2줄 금지 */
  }
  .button-group > button {
    margin-right: 0 !important; /* diary.html 인라인 margin-right 무력화 */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center;
    /* ✅ 말줄임표/잘림 금지 → 버튼 내부에서 2줄까지 줄바꿈 허용 */
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.05;
  }
  /* 버튼별 폭 비율(언어 길이 고려): To‑Do가 가장 넓게, Save/Read는 좁게 */
  .button-group #today-todo { flex: 1.55 1 0 !important; }
  .button-group #pick-photo { flex: 1.15 1 0 !important; }
  .button-group #read-memo { flex: 0.85 1 0 !important; }
  .button-group #save-memo { flex: 0.85 1 0 !important; }
  .button-group #update-memo { flex: 0.95 1 0 !important; }
  .button-group #delete-memo { flex: 0.95 1 0 !important; }
  .button-group #today-todo,
  .button-group #read-memo,
  .button-group #pick-photo,
  .button-group #save-memo,
  .button-group #update-memo,
  .button-group #delete-memo {
    padding: 6px 4px !important;
    font-size: 11px !important;
    border-radius: 12px;
  }

  /* 모바일: 리스트 바깥 그림자/보더가 잘리지 않도록 */
  .memo-today, .memo-history, .selected-month-memo {
    width: auto;
  }

  /* 모바일: 일정 팝업 좌우 여백 확보 및 높이 제한 */
  .popup-content {
    width: calc(100% - 24px) !important; /* 좌우 12px 여백 확보 */
    max-width: 520px !important;          /* 너무 넓지 않게 상한 */
    margin-left: 12px !important;
    margin-right: 12px !important;
    height: auto !important;              /* 고정 높이 해제 */
    max-height: 85vh !important;          /* 화면 높이의 85% 이내 */
    padding: 16px !important;             /* 내부 패딩 살짝 축소 */
    box-sizing: border-box;
  }
}