/* ===== CSS 변수 - 라이트/다크 테마 ===== */
:root {
  --bg-primary: #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f3f7;
  --bg-hover: #eef1f6;
  --text-primary: #1a1d29;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e8ee;
  --accent: #6c5ce7;
  --accent-hover: #5a4bd1;
  --accent-light: #eceafe;
  --accent-gradient: linear-gradient(135deg, #6c5ce7, #a29bfe);
  --success: #00b894;
  --success-hover: #00a381;
  --danger: #e17055;
  --danger-hover: #d16149;
  --warning: #fdcb6e;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --sidebar-bg: #ffffff;
  --header-bg: #ffffff;
  --note-line: #e8e8f0;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-primary: #12141a;
  --bg-secondary: #1c1f2a;
  --bg-tertiary: #242835;
  --bg-hover: #2a2f3d;
  --text-primary: #f0f1f5;
  --text-secondary: #a0a5b4;
  --text-muted: #6b7280;
  --border: #2d323f;
  --accent: #8b7cf8;
  --accent-hover: #9d8ff9;
  --accent-light: rgba(108, 92, 231, 0.15);
  --accent-gradient: linear-gradient(135deg, #6c5ce7, #a29bfe);
  --success: #00b894;
  --success-hover: #00ce9a;
  --danger: #e17055;
  --danger-hover: #ef7d62;
  --warning: #fdcb6e;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.45);
  --sidebar-bg: #1c1f2a;
  --header-bg: #1c1f2a;
  --note-line: #2d323f;
}

/* ===== 리셋 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ===== 스크롤바 ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
  opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ===== 헤더 ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: box-shadow 0.15s ease;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* ===== 레이아웃 ===== */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ===== 사이드바 ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 240px;
  min-width: 240px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
  transition: var(--transition);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-item .icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.sidebar-item .label {
  flex: 1;
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.sidebar-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.sidebar-add-btn svg {
  width: 16px;
  height: 16px;
}

/* ===== 메인 콘텐츠 ===== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  transition: var(--transition);
}

/* ===== 뷰 ===== */
.view {
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
}

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

/* ===== 홈 그리드 ===== */
.home-grid {
  display: grid;
  /* 최근 활동의 긴 제목이 캘린더 열을 밀어내지 않도록 첫 열은 0까지 축소 허용,
     홈 캘린더는 읽기 좋은 최소 폭을 고정적으로 확보한다. */
  grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.home-grid > .card {
  min-width: 0;
  width: 100%;
}

.recent-card {
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-calendar-card {
    min-width: 0;
  }
}

/* ===== 카드 ===== */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ===== 최근 활동 ===== */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  transition: var(--transition);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.recent-item:hover {
  background: var(--bg-hover);
}

.recent-item .recent-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  font-size: 16px;
}

.recent-item .recent-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-item .recent-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.empty-state .emoji {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

/* ===== 링크 버튼 ===== */
.link-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.link-btn:hover {
  text-decoration: underline;
}

/* ===== 캘린더 (미니/메인) ===== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 0;
}

.calendar-day-header.sunday {
  color: var(--danger);
}

.calendar-day-header.saturday {
  color: var(--accent);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: var(--transition);
  position: relative;
  background: transparent;
  border: none;
}

.calendar-day:hover {
  background: var(--bg-hover);
}

.calendar-day.today {
  background: var(--accent);
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.calendar-day.other-month {
  color: var(--text-muted);
  opacity: 0.5;
}

.calendar-day.sunday {
  color: var(--danger);
}

.calendar-day.saturday {
  color: var(--accent);
}

.calendar-day.today.sunday,
.calendar-day.today.saturday {
  color: white;
}

.calendar-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.calendar-day.today.has-event::after {
  background: white;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.calendar-header h2 {
  font-size: 20px;
  font-weight: 700;
  min-width: 160px;
  text-align: center;
}

.nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
  border-color: var(--accent);
}

/* 미니 캘린더 */
#mini-calendar .calendar-day {
  aspect-ratio: 1.2;
  font-size: 11px;
}

/* ===== 버튼 ===== */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.25);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}

.primary-btn:active {
  transform: translateY(0);
}

.primary-btn svg {
  width: 16px;
  height: 16px;
}

.primary-btn.small {
  padding: 8px 14px;
  font-size: 13px;
}

.secondary-btn {
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.secondary-btn:hover {
  background: var(--bg-hover);
}

.danger-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--danger);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.danger-btn:hover {
  background: var(--danger-hover);
}

/* 감사/기도 버튼 */
.thanks-btn, .prayer-btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.thanks-btn {
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
}

.thanks-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
}

.prayer-btn {
  background: linear-gradient(135deg, #0984e3, #74b9ff);
  color: white;
  box-shadow: 0 4px 16px rgba(9, 132, 227, 0.3);
}

.prayer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(9, 132, 227, 0.4);
}

/* ===== 입력 ===== */
.input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: var(--transition);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.input.narrow {
  width: 80px;
  text-align: center;
}

.input::placeholder {
  color: var(--text-muted);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.2px;
}

.textarea-small {
  min-height: 80px;
  resize: none;
  font-family: inherit;
}

/* ===== 게시판 (감사/기도) ===== */
.board-card {
  max-width: 720px;
  margin: 0 auto;
}

.board-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.board-input {
  flex: 1;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: var(--radius-md);
}

.board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.board-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  transition: var(--transition);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.board-item:hover {
  background: var(--bg-hover);
}

.board-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 80px;
}

.board-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.board-actions {
  display: flex;
  gap: 6px;
}

.board-action-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.board-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.board-action-btn.delete:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(225, 112, 85, 0.1);
}

.edit-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ===== 노트 ===== */

/* --- 노트 목록 화면 --- */
.note-list-view {
  max-width: 900px;
  margin: 0 auto;
}

.note-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.note-item {
  padding: 18px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}

.note-item:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.note-item.active {
  background: var(--accent-light);
  border-color: var(--accent);
}

.note-item .note-item-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item .note-item-date {
  font-size: 12px;
  color: var(--text-muted);
}

.note-list .empty-state {
  grid-column: 1 / -1;
}

/* --- 노트 편집 화면 --- */
.note-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.note-editor-topbar .secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.note-editor-topbar .secondary-btn svg {
  width: 16px;
  height: 16px;
}

.autosave-status {
  font-size: 12px;
  color: var(--text-muted);
  transition: opacity 0.3s ease;
}

.autosave-status.saving {
  color: var(--accent);
}

.note-editor-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.note-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1;
}

/* 우측 성경 구절 패널 */
.bible-panel {
  width: 280px;
  min-width: 280px;
  height: fit-content;
  align-self: flex-start;
}

.bible-panel-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.bible-panel-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bible-book-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.bible-book-select {
  width: 100%;
}

.bible-chapter-verse-row {
  display: flex;
  gap: 8px;
}

.bible-chapter-verse-row .form-group {
  flex: 1;
}

.bible-panel .bible-verse-box {
  font-size: 13px;
  padding: 12px 14px;
  margin-bottom: 0;
}

.bible-panel .insert-bible-btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 14px;
}

@media (max-width: 1400px) {
  .bible-panel {
    width: 240px;
    min-width: 240px;
  }
}

@media (max-width: 1024px) {
  .note-editor-wrap {
    flex-direction: column;
  }

  .bible-panel {
    width: 100%;
    min-width: 0;
  }
}

.note-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* 본문말씀 목록 셀렉터 폭 */
.bible-passage-select {
  min-width: 120px;
}

.note-meta-main {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .note-meta-main {
    grid-template-columns: 1fr 1fr;
  }
}

.bible-ref-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bible-ref-input select {
  flex: 1;
  min-width: 130px;
  font-size: 13px;
  padding: 10px 8px;
}

.bible-ref-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bible-ref-input .input.narrow {
  width: 60px;
  padding: 10px 8px;
  font-size: 13px;
}

.bible-ref-input .sep {
  color: var(--text-muted);
  font-weight: 600;
}

.bible-verse-box {
  background: linear-gradient(135deg, var(--accent-light), rgba(108, 92, 231, 0.05));
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.bible-verse-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  font-style: italic;
}

/* --- 노트 편집 영역: 왼쪽 편집 + 오른쪽 미리보기 (라이브 프리뷰) --- */
.note-textarea-wrap {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 1024px) {
  .note-textarea-wrap {
    grid-template-columns: 1fr;
  }
}

.note-textarea {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.8;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: var(--transition);
}

.note-textarea:focus {
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
  border-radius: var(--radius-md);
}

/* 본문 성경 삽입 버튼 */
.note-insert-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.insert-bible-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.insert-bible-btn:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
}

.insert-bible-btn span {
  font-size: 16px;
}

.note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.note-action-spacer {
  flex: 1 1 auto;
}

.note-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  white-space: nowrap;
}

.note-move-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.note-move-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 700px) {
  .note-actions {
    align-items: stretch;
  }

  .note-action-spacer {
    display: none;
  }

  .note-actions > button {
    flex: 1 1 calc(50% - 5px);
  }

  .note-move-btn {
    flex-basis: 100% !important;
    order: -1;
  }
}

/* ===== 캘린더 뷰 ===== */
.calendar-main-card {
  margin-bottom: 20px;
}

.calendar-main-card .calendar-grid {
  gap: 6px;
}

.calendar-main-card .calendar-day {
  aspect-ratio: 1.4;
  font-size: 15px;
  position: relative;
}

.calendar-main-card .calendar-day-header {
  font-size: 13px;
  padding: 12px 0;
}

.event-card {
  max-width: 600px;
}

.event-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.event-item .event-time {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 60px;
}

.event-item .event-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.event-item .event-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== 연락처 ===== */
.contacts-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.contact-item:hover {
  background: var(--bg-hover);
}

.contact-item.active {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-phone {
  font-size: 12px;
  color: var(--text-muted);
}

.contact-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ===== 설정 ===== */
.settings-layout {
  max-width: 800px;
  margin: 0 auto;
}

.settings-layout > .card > h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}

.settings-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.settings-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-img-preview {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}

.file-input {
  display: none;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.upload-btn:hover {
  background: var(--accent);
  color: white;
}

.menu-manage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.menu-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.menu-manage-item .menu-icon {
  font-size: 16px;
}

.menu-manage-item .menu-label {
  flex: 1;
  font-weight: 500;
}

.menu-manage-item .menu-remove {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
  padding: 4px 8px;
  border-radius: 4px;
}

.menu-manage-item .menu-remove:hover {
  color: var(--danger);
  background: rgba(225, 112, 85, 0.1);
}

/* ===== 홈 캘린더 ===== */
.home-calendar-card {
  min-height: 420px;
  min-width: 420px;
  overflow: hidden;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav .month-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  color: var(--text-primary);
}

.calendar-nav .nav-btn {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

#home-calendar .calendar-grid {
  gap: 2px;
}

#home-calendar .calendar-day {
  aspect-ratio: 1.1;
  font-size: 12px;
}

/* ===== URL 뷰 ===== */
#view-url {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 400px;
  flex-direction: column;
}

.url-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-secondary);
  flex: 1;
}

/* ===== 모달 ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.close-btn {
  font-size: 16px;
  color: var(--text-muted);
}

.modal-content {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

/* 메뉴 추가 모달 */
.menu-add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-add-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  /* iPad Pro 세로 */
  .sidebar {
    width: 210px;
    min-width: 210px;
  }
}

@media (max-width: 768px) {
  /* 태블릿/모바일 */
  .main-content {
    padding: 16px;
  }

  .note-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .board-input-row {
    flex-direction: column;
  }

  .board-item {
    flex-direction: column;
    gap: 8px;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* 모바일 */
  .main-content {
    padding: 12px;
  }

  .card {
    padding: 16px;
  }

  .card-header h2 {
    font-size: 16px;
  }

  .note-meta-main {
    grid-template-columns: 1fr;
  }

  .calendar-main-card .calendar-day {
    font-size: 12px;
    aspect-ratio: 1;
  }

  .calendar-main-card .calendar-day-header {
    font-size: 11px;
  }

  .note-textarea {
    font-size: 14px;
    line-height: 1.8;
  }
}


/* =========================================================
   마크다운 에디터 툴바
   ========================================================= */
.md-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* =========================================================
   마크다운 미리보기
   ========================================================= */
.note-preview {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.8;
  overflow-y: auto;
}

.markdown-body .md-empty {
  color: var(--text-muted);
  font-style: italic;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 20px 0 10px;
  font-weight: 700;
  line-height: 1.4;
}

.markdown-body h1 { font-size: 26px; border-bottom: 2px solid var(--border); padding-bottom: 8px; }
.markdown-body h2 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.markdown-body h3 { font-size: 18px; }
.markdown-body h4 { font-size: 16px; }
.markdown-body h5,
.markdown-body h6 { font-size: 14px; color: var(--text-secondary); }

.markdown-body > *:first-child { margin-top: 0; }

.markdown-body p {
  margin: 0 0 12px;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.markdown-body li {
  margin-bottom: 4px;
}

.markdown-body ul.task-list {
  list-style: none;
  padding-left: 4px;
}

.markdown-body .task-item input {
  margin-right: 6px;
  accent-color: var(--accent);
}

.markdown-body blockquote {
  margin: 0 0 12px;
  padding: 10px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-light);
  color: var(--text-primary);
}

.markdown-body blockquote p:last-child {
  margin-bottom: 0;
}

.markdown-body code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--danger);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.markdown-body pre {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  overflow-x: auto;
}

.markdown-body pre code {
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}

.markdown-body table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.markdown-body table th,
.markdown-body table td {
  padding: 9px 12px;
  border: 1px solid var(--border);
  text-align: left;
}

.markdown-body table th {
  background: var(--bg-tertiary);
  font-weight: 700;
}

.markdown-body table tbody tr:nth-child(even) {
  background: var(--bg-tertiary);
}

.markdown-body hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.markdown-body a {
  color: var(--accent);
  text-decoration: underline;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.markdown-body mark {
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--warning);
  color: #1a1d29;
}

.markdown-body del {
  color: var(--text-muted);
}

/* =========================================================
   URL 뷰 상단 바
   ========================================================= */
.url-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.url-view-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.url-open-link {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.url-open-link:hover {
  text-decoration: underline;
}

.url-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* =========================================================
   노트 저장 위치 설정
   ========================================================= */
.path-config-item {
  margin-bottom: 16px;
}

.path-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.path-config-item .input {
  width: 100%;
}

.path-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

.path-status {
  margin-top: 12px;
  font-size: 13px;
  white-space: pre-line;
}


#import-status {
  max-height: 340px;
  overflow-y: auto;
  line-height: 1.55;
  word-break: break-word;
}

.path-status:empty {
  display: none;
}

.path-status.success {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 184, 148, 0.1);
  border: 1px solid rgba(0, 184, 148, 0.3);
  color: var(--success);
}

.path-status.error {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(225, 112, 85, 0.1);
  border: 1px solid rgba(225, 112, 85, 0.3);
  color: var(--danger);
}

.settings-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* =========================================================
   모바일 사이드바 (드로어)
   ========================================================= */
.mobile-menu-btn {
  display: none;
  flex-shrink: 0;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop.show {
  opacity: 1;
}

/* 900px 이하 = 아이폰 세로/가로 모두 드로어 방식으로 동작 */
@media (max-width: 900px) {
  .mobile-menu-btn {
    display: flex;
    width: 38px;
    height: 38px;
    margin-left: -4px;
  }

  .app-header {
    height: 56px;
    padding: 0 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .header-title {
    font-size: 16px;
  }

  .header-left {
    gap: 8px;
    min-width: 0;
  }

  .header-logo {
    width: 32px;
    height: 32px;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 56px;
    bottom: 0;
    z-index: 90;
    width: 78vw;
    max-width: 300px;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    top: 56px;
    pointer-events: none;
  }

  .sidebar-backdrop.show {
    pointer-events: auto;
  }

  /* 드로어가 열려 있는 동안 뒤쪽 스크롤 방지 */
  body.sidebar-open .main-content {
    overflow: hidden;
  }

  /* 손가락으로 누르기 쉬운 크기 */
  .sidebar-item {
    padding: 14px 16px;
    font-size: 15px;
  }

  .main-content {
    padding: 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .note-list {
    grid-template-columns: 1fr 1fr;
  }

  .note-editor-wrap {
    flex-direction: column;
  }

  .bible-panel {
    width: 100%;
    min-width: 0;
  }

  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  /* 툴바는 모바일에서 가로 스크롤 */
  .md-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .md-toolbar::-webkit-scrollbar {
    display: none;
  }

  .md-toolbar-spacer {
    min-width: 4px;
  }

  .md-btn {
    flex-shrink: 0;
    min-width: 38px;
    height: 38px;
  }

  .note-textarea,
  .note-preview {
    min-height: 320px;
  }

  #view-url {
    min-height: calc(100vh - 160px);
  }
}

/* 아이폰 가로 모드: 헤더/여백을 줄여 화면을 넓게 */
@media (max-width: 900px) and (orientation: landscape) {
  .app-header {
    height: 48px;
  }

  .sidebar,
  .sidebar-backdrop {
    top: 48px;
  }

  .sidebar {
    width: 45vw;
    max-width: 280px;
  }

  .main-content {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .note-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   2026-08 기능 개선: 로그인 / 본문 범위 / 캘린더 / 연락처 / MD 툴바
   ========================================================= */

/* 접속 비밀번호 */
.auth-checking #app,
.auth-locked #app {
  visibility: hidden;
  pointer-events: none;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-primary);
}

.login-card {
  width: min(420px, 100%);
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 16px;
}

.login-card h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.login-card p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 22px;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-input {
  text-align: center;
  font-size: 16px;
}

.login-btn {
  width: 100%;
  min-height: 44px;
}

.login-error {
  min-height: 22px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 13px;
}

.password-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* 본문말씀: 시작~끝 구절 + 복수 구절 */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.secondary-btn.tiny {
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
}

.field-help {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.field-help.compact {
  margin-top: -4px;
}

.passage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.passage-row {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-tertiary);
}

.passage-input-grid {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) auto 12px auto 30px;
  align-items: center;
  gap: 5px;
}

.passage-book {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
}

.passage-point {
  display: flex;
  align-items: center;
  gap: 3px;
}

.passage-point .input.narrow {
  width: 54px;
  min-width: 0;
  padding: 9px 5px;
  font-size: 12px;
  text-align: center;
}

.passage-point .sep,
.passage-range-sep {
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

.passage-remove-btn {
  width: 30px;
  height: 30px;
  font-size: 12px;
  color: var(--text-muted);
}

.passage-remove-btn:hover {
  color: var(--danger);
}

.passage-preview {
  margin: 8px 0 0;
  padding: 10px 12px;
  max-height: 90px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.55;
}

.bible-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.bible-range-row .form-group {
  min-width: 0;
}

.bible-range-row .form-group label {
  font-size: 11px;
  white-space: nowrap;
}

.bible-range-row .input {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}

.bible-range-row .range-arrow {
  grid-column: 1 / -1;
  height: 8px;
  line-height: 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* 마크다운 툴바 버튼 규격 통일 */
.md-toolbar {
  gap: 6px;
  padding: 7px;
}

.md-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.md-toolbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  flex: 0 0 1px;
  background: var(--border);
}

.md-toolbar-spacer {
  flex: 1;
}

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.md-btn:hover {
  border-color: var(--border);
  background: var(--bg-secondary);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.md-btn:active {
  transform: translateY(0);
}

/* Google Calendar 스타일의 메인 캘린더 */
.calendar-main-card {
  padding: 20px;
}

.calendar-main-card .calendar-grid {
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
}

.calendar-main-card .calendar-day-header {
  padding: 10px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.calendar-main-card .calendar-day {
  aspect-ratio: auto;
  min-height: 112px;
  padding: 7px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 5px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-secondary);
  text-align: left;
  overflow: hidden;
}

.calendar-main-card .calendar-day:hover {
  background: var(--bg-hover);
}

.calendar-main-card .calendar-day.selected {
  background: var(--accent-light);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar-main-card .calendar-day.today {
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: none;
}

.calendar-main-card .calendar-day.today:hover {
  background: var(--bg-hover);
}

.calendar-main-card .calendar-day.other-month {
  background: var(--bg-tertiary);
  opacity: 0.55;
}

.calendar-main-card .calendar-day.has-event::after {
  display: none;
}

.calendar-date-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.calendar-main-card .calendar-day.today .calendar-date-number {
  background: var(--accent);
  color: white;
}

.calendar-main-card .calendar-day.sunday .calendar-date-number {
  color: var(--danger);
}

.calendar-main-card .calendar-day.saturday .calendar-date-number {
  color: var(--accent);
}

.calendar-main-card .calendar-day.today.sunday .calendar-date-number,
.calendar-main-card .calendar-day.today.saturday .calendar-date-number {
  color: white;
}

.calendar-events-inline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.calendar-event-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  height: 23px;
  padding: 0 6px;
  border: none;
  border-radius: 5px;
  background: var(--accent-light);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.calendar-event-chip span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-chip.birthday {
  background: rgba(253, 203, 110, 0.28);
}

.calendar-event-chip.prayer {
  background: rgba(0, 184, 148, 0.14);
}

.calendar-event-chip.note {
  background: rgba(74, 108, 247, 0.13);
}

.calendar-event-chip:hover {
  filter: brightness(0.97);
}

.calendar-event-icon {
  flex: 0 0 auto;
  font-size: 10px;
}

.calendar-more-events {
  padding-left: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.event-card {
  max-width: none;
}

.event-content {
  flex: 1;
  min-width: 0;
}

.event-title-button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.event-title-button:hover {
  color: var(--accent);
  text-decoration: underline;
}

.event-item.birthday-event {
  border-left: 4px solid var(--warning);
}

.event-item.note-event {
  border-left: 4px solid var(--accent);
}

.calendar-detail-date {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.calendar-detail-title {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
}

.calendar-detail-desc {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  font-size: 14px;
  line-height: 1.6;
}

.calendar-detail-meta {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

/* 홈 캘린더도 이벤트 이름을 1줄 표시 */
#home-calendar .calendar-grid {
  gap: 3px;
}

#home-calendar .calendar-day {
  aspect-ratio: auto;
  min-height: 54px;
  padding: 4px 3px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}

#home-calendar .calendar-date-number {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  font-size: 10px;
}

#home-calendar .calendar-day.has-event::after {
  display: none;
}

.mini-calendar-event {
  display: block;
  width: 100%;
  padding: 2px 3px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--text-primary);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

#home-calendar .calendar-day.today .mini-calendar-event {
  background: rgba(255,255,255,0.2);
  color: white;
}

.mini-calendar-event.birthday {
  background: rgba(253, 203, 110, 0.28);
}

.mini-calendar-event.prayer {
  background: rgba(0, 184, 148, 0.14);
}

.mini-calendar-event.note {
  background: rgba(74, 108, 247, 0.13);
}

/* 연락처 정렬 / 삭제 */
.contacts-card-header {
  align-items: center;
  margin-bottom: 10px;
}

.contacts-card-header h2 {
  margin: 0;
  line-height: 1.35;
}

.contacts-card-header #add-contact-btn {
  flex: 0 0 auto;
  min-width: 72px;
  white-space: nowrap;
}

.contact-sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

.contact-sort-row label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.compact-select {
  width: auto;
  min-width: 160px;
  max-width: 220px;
  padding: 8px 32px 8px 11px;
  font-size: 12px;
}

.contact-birthdate {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.contact-form-actions {
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .note-meta-main {
    grid-template-columns: 1fr;
  }

  .password-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .login-card {
    padding: 28px 20px;
  }

  .passage-input-grid {
    grid-template-columns: 1fr auto 12px auto 30px;
  }

  .passage-book {
    grid-column: 1 / -2;
  }

  .calendar-main-card {
    padding: 12px;
    overflow-x: auto;
  }

  .calendar-main-card .calendar-grid {
    min-width: 720px;
  }

  .calendar-main-card .calendar-day {
    min-height: 96px;
  }

  .contacts-card-header {
    align-items: center;
    gap: 10px;
  }

  .contact-sort-row {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .compact-select {
    width: 100%;
    max-width: none;
  }
}

/* 홈: iPad 11인치 가로 및 중간 폭 화면에서 캘린더 폭 보호 */
@media (min-width: 1025px) and (max-width: 1280px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
    gap: 18px;
  }

  .home-calendar-card {
    min-width: 400px;
  }

  .recent-item {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }
}

/* =========================================================
   2026-08 예배 구분 + iPad 11" 가로 레이아웃 개선
   ========================================================= */
.note-meta-grid {
  gap: 14px;
}

.note-meta-top {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(160px, 0.9fr) minmax(200px, 1.2fr);
  gap: 12px;
  align-items: end;
}

.note-meta-top .input {
  min-height: 44px;
}

.meta-title,
.meta-passage {
  min-width: 0;
}

/* iPad 11인치 가로(대략 1133~1194 CSS px)에서는
   오른쪽 성경 패널을 아래로 내려 노트 입력 영역이 눌리지 않도록 한다. */
@media (min-width: 901px) and (max-width: 1280px) {
  .sidebar {
    width: 210px;
    min-width: 210px;
  }

  .main-content {
    padding: 18px;
  }

  .view {
    max-width: none;
  }

  .note-editor-wrap {
    flex-direction: column;
    gap: 14px;
  }

  .note-card,
  .bible-panel {
    width: 100%;
    min-width: 0;
  }

  .bible-panel {
    padding: 18px;
  }

  .note-meta-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .note-textarea-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .passage-input-grid {
    grid-template-columns: minmax(150px, 1.25fr) auto 12px auto 34px;
    gap: 7px;
  }

  .passage-point .input.narrow {
    width: 58px;
  }
}

@media (max-width: 900px) {
  .note-meta-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .note-meta-top .meta-preacher {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .note-meta-top {
    grid-template-columns: 1fr;
  }

  .note-meta-top .meta-preacher {
    grid-column: auto;
  }
}

/* 폭이 조금 더 좁은 태블릿 가로에서는 편집/미리보기를 한 열로 전환 */
@media (min-width: 901px) and (max-width: 1049px) {
  .note-textarea-wrap {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Obsidian MD Import
   ========================================================= */
.import-action-row {
  align-items: center;
  gap: 14px;
}

.import-btn {
  min-width: 110px;
  min-height: 40px;
}

.import-delete-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.import-delete-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

#import-status {
  max-height: 260px;
  overflow: auto;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .import-action-row {
    align-items: stretch;
  }

  .import-btn,
  .import-delete-option {
    flex: 1 1 180px;
    justify-content: center;
  }
}


/* =========================================================
   v10 Import 판별 보류 / 수동 분류 로그
   ========================================================= */
.import-log-panel {
  max-height: 430px !important;
  padding: 12px !important;
  color: var(--text-primary) !important;
}

.import-log-summary {
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.import-log-summary-title {
  font-weight: 700;
  color: var(--text-primary);
}

.import-log-summary-meta,
.import-log-meta,
.import-log-path,
.import-log-message,
.import-log-fix,
.import-log-warning,
.import-log-more,
.import-log-progress,
.import-log-error,
.import-log-pending-guide,
.import-log-success {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.import-log-path {
  color: var(--text-muted);
}

.import-log-pending-guide,
.import-log-warning,
.import-log-fix {
  color: #a66b00;
}

.import-log-success {
  color: var(--success);
}

.import-log-error {
  color: var(--danger);
}

.import-log-item {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.import-log-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.import-log-pending {
  border-color: rgba(230, 160, 20, .45);
  background: rgba(230, 160, 20, .07);
}

.import-log-resolved {
  border-color: rgba(0, 184, 148, .35);
  background: rgba(0, 184, 148, .07);
}

.import-decision-question {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.import-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.import-decision-btn {
  flex: 0 1 180px;
  min-width: 150px;
  min-height: 38px;
}

.import-decision-btn:disabled {
  opacity: .55;
  cursor: wait;
}

/* iPad 11인치 가로폭에서도 두 선택 버튼이 찌그러지지 않도록 유지 */
@media (min-width: 901px) and (max-width: 1280px) {
  .import-log-panel {
    max-height: 390px !important;
  }
  .import-decision-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .import-decision-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .import-decision-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .import-decision-btn {
    width: 100%;
    min-width: 0;
  }
}


/* v12: 홈 캘린더가 한 열 레이아웃에서 가로로 넘치지 않도록 최종 보정 */
@media (max-width: 1024px) {
  .home-calendar-card {
    min-width: 0;
    width: 100%;
  }
}

/* ===== v13: iPad용 플로팅 성경구절 삽입기 ===== */
.bible-panel-header {
  min-width: 0;
}

.bible-panel-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.bible-panel-drag-icon,
.bible-panel-controls {
  display: none;
}

/* v17: PC · iPad · iPhone 전 화면에서 패널을 플로팅 처리한다. */
@media (min-width: 0px) {
  .note-editor-wrap {
    display: block;
  }

  .note-card {
    width: 100%;
    min-width: 0;
  }

  .bible-panel.is-floating {
    position: fixed !important;
    top: 82px;
    right: 18px;
    left: auto;
    width: 340px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 96px);
    margin: 0 !important;
    padding: 0 !important;
    z-index: 220;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
    background: var(--bg-secondary);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .bible-panel.is-floating .bible-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .bible-panel.is-floating.is-dragging .bible-panel-header {
    cursor: grabbing;
  }

  .bible-panel.is-floating .bible-panel-heading {
    flex: 1;
    overflow: hidden;
  }

  .bible-panel.is-floating .bible-panel-drag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 30px;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
  }

  .bible-panel.is-floating .bible-panel-title {
    margin: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bible-panel.is-floating .bible-panel-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  .bible-panel-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }

  .bible-panel-control-btn:active {
    transform: scale(0.96);
  }

  .bible-panel.is-floating .bible-panel-form {
    gap: 10px;
    max-height: calc(100dvh - 150px);
    padding: 14px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .bible-panel.is-floating.is-collapsed {
    width: 286px !important;
    max-height: none;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-header {
    border-bottom: 0;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-form {
    display: none;
  }

  .bible-panel.is-floating .bible-range-row {
    gap: 6px;
  }

  .bible-panel.is-floating .bible-range-row .input {
    min-width: 0;
  }

  .bible-panel.is-floating .insert-bible-btn {
    min-height: 44px;
  }
}

/* v17: 아이폰/소형 모바일에서는 펼친 패널은 화면 안에 맞추고,
   접었을 때는 작은 📖 플로팅 버튼만 남긴다. */
@media (max-width: 767px) {
  .bible-panel.is-floating {
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 88px);
    border-radius: 14px;
  }

  .bible-panel.is-floating .bible-panel-header {
    min-height: 48px;
    padding: 8px 8px 8px 12px;
  }

  .bible-panel.is-floating .bible-panel-form {
    max-height: calc(100dvh - 144px);
    padding: 12px 14px 14px;
  }

  .bible-panel.is-floating.is-collapsed {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    border: 0;
    border-radius: 50%;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-header {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-heading,
  .bible-panel.is-floating.is-collapsed #bible-panel-reset-btn {
    display: none !important;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-controls {
    display: block !important;
    width: 56px;
    height: 56px;
  }

  .bible-panel.is-floating.is-collapsed #bible-panel-collapse-btn {
    width: 56px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 24px;
    line-height: 1;
  }

  .bible-panel.is-floating .bible-range-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bible-panel.is-floating .bible-range-row .range-arrow {
    display: none;
  }
}

/* 넓은 PC에서는 입력 패널을 조금 더 여유 있게 사용한다. */
@media (min-width: 1281px) {
  .bible-panel.is-floating {
    width: 360px !important;
  }
}


/* =========================================================
   v14: 홈 미니 캘린더 7열 강제 고정
   - 긴 이벤트 제목이 CSS Grid track의 최소폭을 키워 7열이 깨지는 현상 방지
   ========================================================= */
#home-calendar,
#home-calendar .calendar-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#home-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
}

#home-calendar .calendar-day-header,
#home-calendar .calendar-day {
  min-width: 0;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#home-calendar .calendar-day > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#home-calendar .mini-calendar-event {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 홈 카드 헤더 역시 내용 때문에 캘린더 폭을 밀지 않도록 방어 */
.home-calendar-card,
.home-calendar-card .card-header,
.home-calendar-card .calendar-nav {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.home-calendar-card .card-header h2,
.home-calendar-card .calendar-nav .month-label {
  flex-shrink: 1;
  min-width: 0;
}

/* iPad 11인치 가로: 7열이 항상 카드 내부에 정확히 들어오게 한다. */
@media (min-width: 1025px) and (max-width: 1280px) {
  #home-calendar .calendar-grid {
    gap: 2px;
  }

  #home-calendar .calendar-day {
    min-height: 52px;
    padding-left: 2px;
    padding-right: 2px;
  }

  #home-calendar .mini-calendar-event {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 7.5px;
  }
}

/* =========================================================
   v15: 설교 노트 / 성경공부 노트 목록 리디자인
   - 날짜 배지 + 제목/설교자 + 본문구절의 금융내역형 한 줄 목록
   - 기존 크리스찬 노트의 보라색 테마를 유지
   ========================================================= */
.note-list-view {
  max-width: 1040px;
  width: 100%;
}

.note-list-view > .card {
  overflow: hidden;
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  border-top: 1px solid var(--border);
}

.note-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(150px, 240px);
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 8px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.note-item:last-child {
  border-bottom: 0;
}

.note-item:hover {
  background: color-mix(in srgb, var(--accent-light) 46%, transparent);
  transform: none;
}

.note-item:active {
  background: var(--accent-light);
}

.note-item.active {
  background: var(--accent-light);
  border-color: var(--border);
  box-shadow: inset 3px 0 0 var(--accent);
}

.note-date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 6px;
  min-width: 98px;
  max-width: 108px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.15px;
  white-space: nowrap;
}

.note-date-badge.is-empty {
  border-color: var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.note-date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.note-date-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-date-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-item-main {
  min-width: 0;
  overflow: hidden;
}

.note-item .note-item-title {
  min-width: 0;
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item .note-item-preacher {
  min-width: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item-passage {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item-passage.is-empty {
  color: var(--text-muted);
  font-weight: 500;
}

.note-list .empty-state {
  width: 100%;
  padding: 42px 20px;
}

/* iPad 세로 및 폭이 좁은 화면: 본문구절만 두 번째 줄 오른쪽에 배치 */
@media (max-width: 1024px) {
  .note-item {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px 14px;
    min-height: 78px;
    padding: 12px 6px;
  }

  .note-item-main {
    grid-column: 2;
    grid-row: 1;
  }

  .note-item-passage {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 11.5px;
  }

  .note-date-badge {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* 휴대폰: 날짜 배지는 짧게, 제목/설교자/본문은 한 덩어리로 유지 */
@media (max-width: 560px) {
  .note-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 5px 10px;
    min-height: 74px;
    padding: 10px 2px;
  }

  .note-date-badge {
    min-width: 86px;
    max-width: 90px;
    padding: 0 7px;
    font-size: 11px;
  }

  .note-item .note-item-title {
    font-size: 14px;
  }
}

/* =========================================================
   v16 - Nabit signature branding
   ========================================================= */
.header-left {
  min-width: 0;
}

.header-logo.header-signature {
  width: auto;
  height: 46px;
  max-width: 176px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
  background: transparent;
}

/* 기본 로고 상태에서는 상단을 비워두고, 사용자 시그니처 업로드 후 표시 */
.header-logo.header-signature.is-default-signature {
  display: none;
}

.settings-img-preview {
  width: 156px;
  height: 72px;
  padding: 6px 10px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

/* 시그니처가 흰 배경 이미지여도 다크 모드에서 자연스럽게 보이도록 반전 */
[data-theme="dark"] .header-logo.header-signature:not(.is-default-signature) {
  filter: invert(1) brightness(1.15);
}

[data-theme="dark"] .settings-img-preview {
  filter: invert(1) brightness(1.15);
  background: #000;
}

@media (max-width: 768px) {
  .header-logo.header-signature {
    height: 38px;
    max-width: 142px;
  }
}


/* =========================================================
   v17: 전 기기 플로팅 성경구절 삽입기 보강
   ========================================================= */
.bible-panel.is-floating {
  box-sizing: border-box;
}

.bible-panel.is-floating .bible-panel-header {
  -webkit-tap-highlight-color: transparent;
}

.bible-panel.is-floating .bible-panel-control-btn {
  -webkit-tap-highlight-color: transparent;
}

@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .bible-panel.is-floating {
      max-width: calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right) + 16px));
    }
  }
}


/* =========================================================
   v18: 플로팅 성경 삽입기 입력 단순화
   - 성경 책 + 장 + 시작 절 + 끝 절
   - 끝 장 입력은 제거하고 같은 장 범위만 빠르게 조회
   ========================================================= */
.bible-panel.is-floating .bible-range-row-simple {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.bible-panel.is-floating .bible-range-row-simple .form-group {
  min-width: 0;
}

.bible-panel.is-floating .bible-range-row-simple .input {
  width: 100%;
  min-width: 0;
  text-align: center;
}

@media (max-width: 767px) {
  .bible-panel.is-floating .bible-range-row-simple {
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 7px;
  }
}


/* =========================================================
   v19: 한 줄 성경구절 입력기
   - 창 1:1-3 형태를 직접 입력
   - PC/iPad/iPhone 플로팅 UI(v17/v18) 유지
   ========================================================= */
.bible-panel .bible-reference-group {
  min-width: 0;
}

.bible-panel .bible-reference-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.bible-panel .bible-reference-input {
  width: 100%;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.bible-panel .bible-reference-input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.bible-panel .field-help.compact strong {
  color: var(--text-primary);
  font-weight: 650;
}

@media (max-width: 767px) {
  .bible-panel.is-floating .bible-reference-input {
    font-size: 16px; /* iPhone Safari 입력 확대 방지 */
    min-height: 44px;
  }
}

/* =========================================================
   v20: 기존 노트 읽기 전용 미리보기 + 통합 노트 통계
   ========================================================= */
.note-reader-view {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.note-reader-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.note-reader-topbar .secondary-btn,
.note-reader-topbar .primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.note-reader-topbar svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.note-reader-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.note-reader-card {
  padding: 34px 38px;
  overflow: hidden;
}

.note-reader-content {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.78;
}

.note-reader-content blockquote {
  margin: 0 0 24px;
  padding: 14px 17px;
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--accent-light) 72%, var(--bg-secondary));
  color: var(--text-secondary);
}

.note-reader-content blockquote p {
  margin: 3px 0;
}

.note-reader-content blockquote p:first-child {
  color: var(--accent);
  font-weight: 750;
}

.note-reader-content h1 {
  margin-top: 4px;
}

.markdown-body .wiki-link {
  color: var(--accent);
  font-weight: 600;
}

.note-stats-view {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.note-stats-header-card {
  margin-bottom: 16px;
}

.note-stats-title-row {
  align-items: flex-start;
}

.note-stats-title-row h2 {
  margin: 0 0 5px;
}

.note-stats-subtitle,
.note-stats-section-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.note-stats-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.note-stat-summary-card {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.note-stat-summary-label {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 650;
}

.note-stat-summary-value {
  display: block;
  margin: 4px 0 2px;
  color: var(--text-primary);
  font-size: 25px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.7px;
}

.note-stat-summary-caption {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-stats-loading {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}

.note-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.note-stats-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.note-stats-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.note-stats-section-header h3 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 16px;
}

.note-stats-list {
  max-height: 650px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.note-stat-row {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.note-stat-row:last-child {
  border-bottom: 0;
}

.note-stat-row:hover {
  background: color-mix(in srgb, var(--accent-light) 35%, transparent);
}

.note-stat-rank {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.note-stat-book-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.note-stat-row-body {
  min-width: 0;
}

.note-stat-row-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-stat-row-title.passage-title {
  color: var(--accent);
}

.note-stat-row-meta {
  min-width: 0;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-stat-bar {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-tertiary);
}

.note-stat-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  opacity: .72;
}

.note-stat-count {
  min-width: 0;
  text-align: right;
}

.note-stat-count strong {
  display: block;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.1;
}

.note-stat-count span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9.5px;
}

.passage-stat-row {
  grid-template-columns: 28px minmax(0, 1fr) 54px;
}

.empty-state.compact {
  padding: 34px 18px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .note-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .note-stats-grid {
    grid-template-columns: 1fr;
  }

  .note-stats-list {
    max-height: none;
  }

  .note-reader-card {
    padding: 28px 26px;
  }
}

@media (max-width: 600px) {
  .note-reader-topbar {
    align-items: stretch;
  }

  .note-reader-actions {
    gap: 6px;
  }

  .note-reader-topbar .secondary-btn,
  .note-reader-topbar .primary-btn {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }

  .note-reader-card {
    padding: 22px 17px;
    border-radius: 12px;
  }

  .note-reader-content {
    font-size: 14px;
  }

  .note-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .note-stat-summary-card {
    padding: 12px;
  }

  .note-stat-summary-value {
    font-size: 21px;
  }

  .note-stat-row {
    grid-template-columns: 24px 34px minmax(0, 1fr) 48px;
    gap: 8px;
    padding: 10px 12px;
  }

  .passage-stat-row {
    grid-template-columns: 24px minmax(0, 1fr) 48px;
  }
}

/* v20 PDF fallback: 서버 PDF 엔진이 없을 때 현재 읽기 화면만 브라우저 PDF로 출력 */
@media print {
  body.printing-note-pdf {
    background: #fff !important;
  }

  body.printing-note-pdf > * {
    visibility: hidden !important;
  }

  body.printing-note-pdf #app,
  body.printing-note-pdf #app *,
  body.printing-note-pdf #note-reader-export-area,
  body.printing-note-pdf #note-reader-export-area * {
    visibility: hidden !important;
  }

  body.printing-note-pdf #note-reader-export-area,
  body.printing-note-pdf #note-reader-export-area * {
    visibility: visible !important;
  }

  body.printing-note-pdf #note-reader-export-area {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #2f2a38 !important;
    overflow: visible !important;
  }

  body.printing-note-pdf #note-reader-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: #2f2a38 !important;
    font-size: 11pt !important;
    line-height: 1.72 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-note-pdf #note-reader-content h1,
  body.printing-note-pdf #note-reader-content h2,
  body.printing-note-pdf #note-reader-content h3,
  body.printing-note-pdf #note-reader-content h4,
  body.printing-note-pdf #note-reader-content h5,
  body.printing-note-pdf #note-reader-content h6 {
    color: #26202f !important;
    break-after: avoid-page;
  }

  body.printing-note-pdf #note-reader-content blockquote {
    background: #f7f5fc !important;
    border-left-color: #7668b7 !important;
    color: #4a4355 !important;
    break-inside: avoid-page;
  }

  body.printing-note-pdf #note-reader-content img,
  body.printing-note-pdf #note-reader-content pre,
  body.printing-note-pdf #note-reader-content table {
    break-inside: avoid-page;
  }
}

@page {
  size: A4;
  margin: 16mm 15mm 18mm;
}

/* v20: 브라우저 직접 PDF 생성용 렌더링 영역
   html2pdf에 내장된 html2canvas는 absolute/fixed 위치 요소를 높이 0으로 처리해서
   빈(흰) PDF가 된다. 문서 흐름(relative)에 놓인 요소만 정상 캡처되므로
   오프스크린 좌표 대신 relative로 둔다. 화면에는 캡처 순간에만 body 끝에 붙었다가
   save 직후 제거되어 거의 노출되지 않는다. */
.pdf-client-export {
  position: relative;
  left: auto;
  top: auto;
  z-index: -1;
  pointer-events: none;
  width: 180mm;
  padding: 0;
  background: #fff;
  color: #2f2a38;
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 11pt;
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.pdf-client-export .pdf-client-note {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #2f2a38;
}

.pdf-client-export h1,
.pdf-client-export h2,
.pdf-client-export h3,
.pdf-client-export h4,
.pdf-client-export h5,
.pdf-client-export h6 {
  color: #26202f;
  break-after: avoid-page;
}

.pdf-client-export h1 {
  padding-bottom: 9px;
  border-bottom: 2px solid #e5e0ef;
}

.pdf-client-export h2 {
  padding-bottom: 6px;
  border-bottom: 1px solid #ece8f2;
}

.pdf-client-export blockquote {
  background: #f7f5fc;
  border-left: 4px solid #7668b7;
  color: #4a4355;
  break-inside: avoid-page;
}

.pdf-client-export table {
  width: 100%;
  border-collapse: collapse;
}

.pdf-client-export th,
.pdf-client-export td {
  border: 1px solid #ded9e7;
}

.pdf-client-export img,
.pdf-client-export pre,
.pdf-client-export table {
  max-width: 100%;
  break-inside: avoid-page;
}

/* =========================================================
   v21: 집중 작성 모드 - 에디터 내부 스크롤 / 커서 하단 방지
   ========================================================= */
.note-editor-view {
  --note-editor-height: min(68dvh, 720px);
  --note-editor-bottom-space: 220px;
}

/* 페이지 전체가 끝없이 길어지지 않도록 작성/미리보기 영역에 자체 높이를 준다. */
.note-editor-view .note-textarea-wrap {
  min-width: 0;
  height: var(--note-editor-height);
  min-height: 360px;
  align-items: stretch;
  overflow: hidden;
}

.note-editor-view .note-textarea,
.note-editor-view .note-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 마지막 문장도 화면 바닥이 아니라 가운데 가까이 올릴 수 있는 여유 공간 */
.note-editor-view .note-textarea {
  padding-bottom: var(--note-editor-bottom-space);
  scroll-padding-top: 110px;
  scroll-padding-bottom: var(--note-editor-bottom-space);
}

.note-editor-view .note-preview {
  padding-bottom: 120px;
}

/* 본문을 스크롤해도 서식 버튼은 작업 영역 위에 남는다. */
.note-editor-view .md-toolbar {
  top: 8px;
  z-index: 18;
  box-shadow: 0 4px 14px rgba(20, 18, 35, 0.06);
}

[data-theme="dark"] .note-editor-view .md-toolbar {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* 에디터가 포커스된 동안 작업 영역이 시각적으로 구분되도록 아주 약하게 강조 */
.note-editor-view.editor-writing-active .note-textarea {
  border-color: var(--accent);
}

/* 한 열 레이아웃에서는 작성창과 미리보기가 각각 독립 스크롤 영역이 된다. */
@media (max-width: 1049px) {
  .note-editor-view .note-textarea-wrap {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .note-editor-view .note-textarea,
  .note-editor-view .note-preview {
    height: var(--note-editor-height);
    min-height: 300px;
  }

  .note-editor-view .note-preview {
    margin-top: 2px;
  }
}

/* iPhone 등 작은 화면: 키보드가 올라왔을 때도 실제 보이는 높이에 맞춰 축소 */
@media (max-width: 600px) {
  .note-editor-view {
    --note-editor-bottom-space: 150px;
  }

  .note-editor-view .note-textarea,
  .note-editor-view .note-preview {
    min-height: 220px;
  }

  .note-editor-view .note-textarea {
    padding-left: 16px;
    padding-right: 16px;
  }

  .note-editor-view .md-toolbar {
    top: 4px;
  }
}

/* ===== v22 SaaS / Multi-user / PWA ===== */
.multiuser-login-card { width: min(420px, calc(100vw - 32px)); }
.login-subtitle { margin-bottom: 18px !important; color: var(--text-muted, #7b8190); }

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-muted, #7b8190);
  font-size: 13px;
}
.auth-switch-btn {
  border: 0;
  padding: 4px 2px;
  background: transparent;
  color: var(--primary, #6d5cae);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.auth-switch-btn:hover { text-decoration: underline; }
.login-security-note {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #e8e9ef);
  font-size: 12px !important;
  line-height: 1.55;
  color: var(--text-muted, #8b91a0) !important;
}
.account-chip {
  max-width: 190px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(109,92,174,.10);
  color: var(--primary, #6d5cae);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border-color, #e3e5ed);
  border-radius: 999px;
  background: var(--card-bg, #fff);
  color: var(--text-secondary, #646b78);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.header-logout-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.header-logout-btn:hover {
  border-color: rgba(109,92,174,.35);
  background: rgba(109,92,174,.08);
  color: var(--primary, #6d5cae);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(109,92,174,.12);
  color: var(--primary, #6d5cae);
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}
.file-input-visible {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px dashed var(--border-color, #d9dbe5);
  border-radius: 10px;
  background: var(--bg-secondary, #f7f7fb);
  color: var(--text-primary, #252836);
}
.pwa-settings-section .settings-row { align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .account-chip { max-width: 92px; font-size: 11px; padding: 6px 8px; }
  .header-right { gap: 4px; }
  .header-logout-btn { width: 34px; padding: 0; }
  .header-logout-btn span { display: none; }
  .multiuser-login-card { padding: 24px 20px; }
}

/* ===== v24 계정/관리자 UI ===== */
.header-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.header-admin-link:hover { background: var(--bg-hover); }
.auth-resend-row { margin-top: -4px; }
#register-form { gap: 10px; }
@media (max-width: 600px) {
  .header-admin-link { width: 34px; padding: 0; font-size: 0; }
  .header-admin-link::before { content: '⚙'; font-size: 15px; }
}

/* ===== v26 사용자별 Google Drive 노트 저장 ===== */
.settings-section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-section-heading-row h3 { margin-bottom: 6px; }
.settings-section-heading-row .settings-desc { margin: 0; }
.google-drive-settings-section { overflow: hidden; }
.drive-status-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, #e2e3eb);
  border-radius: 14px;
  background: var(--bg-secondary, #f8f8fc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.drive-status-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.drive-status-main > div { min-width: 0; }
.drive-status-main strong {
  display: block;
  color: var(--text-primary, #252836);
  font-size: 14px;
  margin-bottom: 3px;
}
.drive-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #a7aab4;
  box-shadow: 0 0 0 4px rgba(167,170,180,.12);
}
.drive-status-card.is-connected .drive-status-dot {
  background: #34a853;
  box-shadow: 0 0 0 4px rgba(52,168,83,.12);
}
.drive-status-card.is-error .drive-status-dot {
  background: #d9534f;
  box-shadow: 0 0 0 4px rgba(217,83,79,.12);
}
.drive-folder-link {
  flex: 0 0 auto;
  color: var(--accent, #6d5cae);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.drive-folder-link:hover { text-decoration: underline; }
.google-drive-path-row { margin-top: 14px; }
.drive-path-controls { align-items: center; flex-wrap: nowrap; }
.drive-path-controls .input { min-width: 0; flex: 1 1 auto; }
.google-drive-action-row { margin-top: 14px; flex-wrap: wrap; }
.google-drive-action-row .danger-btn.small { padding: 7px 12px; font-size: 12px; }
.drive-guide {
  color: var(--text-primary, #252836);
  line-height: 1.65;
  font-size: 14px;
}
.drive-guide-intro {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(109,92,174,.08);
  margin-bottom: 14px;
}
.drive-guide ol { padding-left: 22px; margin: 10px 0 16px; }
.drive-guide li { margin: 8px 0; }
.drive-guide-note {
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--bg-secondary, #f7f7fb);
  color: var(--text-secondary, #656b78);
  font-size: 13px;
}
.drive-guide code {
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(109,92,174,.08);
  color: var(--accent, #6d5cae);
}
@media (max-width: 720px) {
  .settings-section-heading-row { align-items: center; gap: 10px; }
  .settings-section-heading-row > div { min-width: 0; }
  .drive-status-card { align-items: flex-start; flex-direction: column; }
  .drive-path-controls { flex-direction: column; align-items: stretch; }
  .drive-path-controls .secondary-btn { width: 100%; }
  .google-drive-action-row > button { flex: 1 1 130px; }
}

/* ===== v27 계정 라이선스 표시 ===== */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.account-chip-name {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.license-plan-badge,
.account-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .02em;
}
.license-plan-badge.is-free {
  background: rgba(116, 122, 136, .11);
  color: var(--text-secondary, #646b78);
}
.license-plan-badge.is-pro {
  background: rgba(109, 92, 174, .16);
  color: var(--primary, #6d5cae);
  box-shadow: inset 0 0 0 1px rgba(109, 92, 174, .12);
}
.license-plan-badge.is-expired {
  background: rgba(190, 82, 82, .10);
  color: #b44e4e;
}
.account-role-badge {
  background: rgba(68, 83, 120, .10);
  color: var(--text-secondary, #646b78);
}
.account-license-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 14px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, #e7e8ef);
  border-radius: 14px;
  background: rgba(109, 92, 174, .045);
}
.account-license-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-license-label {
  color: var(--text-muted, #8b91a0);
  font-size: 12px;
  white-space: nowrap;
}
.account-license-row > :last-child {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.license-value.is-pro { color: var(--primary, #6d5cae); }
.license-value.is-expired { color: #b44e4e; }

@media (max-width: 900px) {
  .account-chip { gap: 4px; padding: 6px 7px; }
  .account-chip-name { max-width: 84px; }
  .license-plan-badge, .account-role-badge { padding: 2px 5px; font-size: 8px; }
}
@media (max-width: 560px) {
  .account-chip-name { max-width: 64px; }
  .account-role-badge { display: none; }
  .account-license-card { grid-template-columns: 1fr; gap: 8px; }
}


/* =========================================================
   v28: iPhone 입력 폭 + 본문말씀 입력 단순화
   ========================================================= */
.form-group,
.note-meta-top > *,
.contact-form-panel,
.contact-form-panel .card,
.contact-form-panel .form-group {
  min-width: 0;
}

/* iOS Safari의 date input 고유 최소폭 때문에 카드 밖으로 밀리는 현상 방지 */
input[type="date"].input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

input[type="date"].input::-webkit-date-and-time-value {
  min-width: 0;
  width: 100%;
  text-align: left;
}

input[type="date"].input::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}

/* 메타 본문은 '창 1:1-2' 한 줄 입력으로 통일 */
.passage-input-grid.passage-input-grid-simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.passage-reference-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .note-card {
    min-width: 0;
  }

  .note-meta-grid,
  .note-meta-top,
  .meta-date,
  .meta-worship-type,
  .meta-preacher,
  .meta-title,
  .meta-passage {
    min-width: 0;
    max-width: 100%;
  }

  input[type="date"].input {
    font-size: 16px; /* iOS 자동 확대 방지 */
    padding-left: 12px;
    padding-right: 12px;
  }

  .passage-row {
    min-width: 0;
    padding: 8px;
  }

  .passage-input-grid.passage-input-grid-simple {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 7px;
  }

  .passage-reference-input {
    font-size: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .passage-remove-btn {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   v29: iOS native date input overflow 완전 차단
   - 실제 date input은 투명 hit-area로만 사용
   - 화면에는 고정 폭 custom shell을 표시
   ========================================================= */
.date-picker-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: var(--transition);
}

.date-picker-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.date-picker-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
}

.date-picker-value.is-empty {
  color: var(--text-muted);
}

.date-picker-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.date-picker-native {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.001;
  cursor: pointer;
  box-sizing: border-box;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* iOS 내부 date renderer가 자체 최소 너비를 계산해도 shell 밖으로 그리지 못하게 한다. */
.date-picker-native::-webkit-date-and-time-value,
.date-picker-native::-webkit-datetime-edit,
.date-picker-native::-webkit-datetime-edit-fields-wrapper {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .date-picker-shell {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 11px 12px;
  }

  .date-picker-value {
    font-size: 16px;
  }

  .meta-date,
  .contact-form-panel .form-group {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
}

/* =========================================================
   v30: 플로팅 성경삽입기 드래그 안정화 + 라이선스 UI
   ========================================================= */
.bible-panel.is-floating .bible-panel-header,
.bible-panel.is-floating.is-collapsed .bible-panel-header,
.bible-panel.is-floating.is-collapsed #bible-panel-collapse-btn {
  touch-action: none !important;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.bible-panel.is-floating.is-dragging {
  transition: none !important;
}

.bible-panel.is-floating.is-dragging .bible-panel-header,
.bible-panel.is-floating.is-dragging #bible-panel-collapse-btn {
  cursor: grabbing !important;
}

.pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-left: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

#floating-bible-toggle-btn.is-off {
  opacity: .85;
}

#floating-bible-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: .65;
}

#bible-floating-settings .settings-section-heading-row {
  align-items: center;
}

#menu-limit-hint {
  margin: 0 0 10px;
}

/* ===== v31: Pro 만료 후 커스텀 메뉴 잠금 ===== */
.sidebar-item.is-pro-locked {
  opacity: .58;
  cursor: not-allowed;
  background: transparent;
}
.sidebar-item.is-pro-locked:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.sidebar-pro-lock {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: .8;
}
.menu-manage-item:has(.pro-lock-badge) {
  opacity: .72;
}
.pro-lock-badge {
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* =========================================================
   v32: iOS/iPadOS 플로팅 성경 삽입기 드래그 재구현
   ========================================================= */
.bible-panel.is-floating {
  z-index: 9999 !important;
  pointer-events: auto !important;
  will-change: left, top;
  contain: layout paint;
}

.bible-panel.is-floating .bible-panel-header {
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  overscroll-behavior: none;
}

.bible-panel.is-floating.is-collapsed #bible-panel-collapse-btn {
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

html.bible-panel-drag-active,
html.bible-panel-drag-active body {
  overscroll-behavior: none !important;
}

html.bible-panel-drag-active body {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.bible-panel.is-floating.is-dragging {
  transition: none !important;
  animation: none !important;
}

/* =========================================================
   v33: 플로팅 성경삽입기 입력영역/드래그영역 완전 분리
   - ⠿ 전용 손잡이만 drag
   - ↺ / − / + / 📖 버튼은 일반 click
   - iOS Safari에서 touch/click 충돌 제거
   ========================================================= */
.bible-panel.is-floating .bible-panel-header {
  touch-action: auto !important;
  pointer-events: auto !important;
  cursor: default !important;
}

.bible-panel-drag-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: grab;
  touch-action: none !important;
  pointer-events: auto !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.bible-panel-drag-grip:active,
.bible-panel.is-dragging .bible-panel-drag-grip {
  cursor: grabbing;
  background: var(--bg-tertiary);
}

.bible-panel.is-floating .bible-panel-control-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

@media (max-width: 767px) {
  .bible-panel.is-floating.is-collapsed {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    height: 56px;
    max-height: 56px;
    border: 0;
    border-radius: 28px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-header {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: 102px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-heading {
    display: flex !important;
    flex: 0 0 42px;
    width: 42px;
    overflow: visible;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-title {
    display: none !important;
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-drag-grip {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--bg-secondary);
    box-shadow: 0 5px 14px rgba(0,0,0,.13);
  }

  .bible-panel.is-floating.is-collapsed .bible-panel-controls {
    display: block !important;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }

  .bible-panel.is-floating.is-collapsed #bible-panel-reset-btn {
    display: none !important;
  }

  .bible-panel.is-floating.is-collapsed #bible-panel-collapse-btn {
    display: inline-flex !important;
    width: 56px;
    height: 56px;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* =========================================================
   v34: 플로팅 성경삽입기 전역 컨트롤러 안정화
   ========================================================= */
.bible-panel.is-floating {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  contain: none !important;
  isolation: isolate;
}

.bible-panel.is-floating .bible-panel-drag-grip {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: grab !important;
}

.bible-panel.is-floating .bible-panel-control-btn {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.bible-panel.is-floating .bible-panel-form,
.bible-panel.is-floating .bible-panel-form * {
  pointer-events: auto;
}

html.bible-panel-drag-active,
html.bible-panel-drag-active body {
  touch-action: none !important;
  overscroll-behavior: none !important;
}