/* 색·간격 변수 (구 tokens.css) — 지금은 대부분 안 쓰지만 나중에 꾸밀 때 재사용.
   장식 제거 전 원본 전체 스타일은 styles-backup.css에 백업돼 있다 (로드하지 않음). */
:root {
  --color-bg: #FAF9F6;
  --color-text: #3a3a3a;
  --color-accent: #A9C29A;
  --color-sub: #E8E0D0;
  --color-highlight: #F4C7C3;

  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --line-height-loose: 1.7;
  --letter-spacing-loose: 0.02em;
}

/* 이하 동작에 필요한 최소 스타일만: 레이아웃·표시/숨김·폼 기본·토글.
   색이 남아 있는 곳은 상태 표시(토글 on/off, 요일 선택)와 모달 가독처럼 동작에 필요한 경우뿐이다. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-2) var(--space-4);
}

.app-header {
  text-align: center;
  margin-bottom: var(--space-3);
}

.app-header .mascot {
  width: 72px;
  height: 72px;
}

.card {
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

/* 교양 카드: 새로고침 버튼이 글과 겹치지 않게 자리만 잡는다 */
.culture-card {
  position: relative;
  padding-right: calc(var(--space-2) + 28px);
}

.culture-refresh {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* 노티 카드: 배지·본문·토글 가로 배치 + 오른쪽 아래 버튼 줄 자리 확보 */
.reminder-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
  padding-bottom: calc(var(--space-2) + 22px);
}

.reminder-card .badge {
  flex-shrink: 0;
}

.reminder-body {
  flex: 1;
}

.reminder-actions {
  position: absolute;
  right: var(--space-2);
  bottom: 10px;
  display: flex;
  gap: 6px;
}

.empty-note {
  text-align: center;
  padding: var(--space-3) 0;
}

.notice-banner {
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.notice-banner button {
  display: block;
  margin-top: var(--space-1);
}

button.primary {
  width: 100%;
  padding: 10px 16px;
  cursor: pointer;
}

/* 토글: on/off 상태 표시와 손잡이 이동 자체가 동작이라 배경색을 남긴다 */
.toggle-switch {
  width: 38px;
  height: 22px;
  border: none;
  background: #ddd;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-switch.on {
  background: var(--color-accent);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
}

.toggle-switch.on::after {
  left: 18px;
}

form.rule-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-actions {
  display: flex;
  gap: var(--space-1);
}

.form-actions button.primary {
  flex: 1;
}

form.rule-form label {
  display: block;
  margin-bottom: 2px;
}

form.rule-form input[type="text"],
form.rule-form input[type="time"],
form.rule-form select,
form.rule-form textarea {
  width: 100%;
  padding: 8px 10px;
}

.day-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.day-checkboxes {
  display: flex;
  gap: 4px;
}

.day-checkboxes label {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  cursor: pointer;
  border: 2px solid var(--color-sub);
}

/* 요일 선택: 실제 input은 숨기고 label 색으로 선택 상태를 표시 — 동작이라 색 유지 */
.day-checkboxes input {
  display: none;
}

.day-checkboxes label:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* 전체 문구 모달: 겹쳐 뜨는 화면이라 가독에 필요한 최소 배경만 유지 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
}

.message-modal {
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-3);
  background: #fff;
}

.message-modal-body {
  white-space: pre-wrap;
  word-break: keep-all;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.profile-row input,
.profile-row select {
  flex: 1;
  padding: 6px 10px;
}

/* 저장 직후 "N분 뒤 알람" 안내 토스트: 떠 있는 요소라 가독용 배경만 유지 */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  background: #3a3a3a;
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}