/* 우츄 스케줄러 — v3: 라이트 기본 + 다크 토글, 하단 탭바, 알약 월간 캘린더 */

/* ── 라이트 (기본) ── */
:root {
  --bg: #f7f7f9;
  --bg2: #ffffff;
  --bg3: #eef0f4;
  --line: #e7e9ee;
  --fg: #2b2f38;
  --fg-dim: #9aa1ad;
  --accent: #4a9df8;
  --accent-soft: rgba(74, 157, 248, 0.12);
  --danger: #e8544d;
  --ok: #7cc35e;
  --warn: #f5a742;
  --purple: #9d7bf5;
  --pill-ev: #4a9df8;
  --pill-dl: #f5a742;
  --lv-red-bg: #fdecea;
  --lv-yellow-bg: #fdf3e0;
  --lv-green-bg: #edf7e6;
  --lv-purple-bg: #f1eafd;
  --shadow: 0 1px 4px rgba(30, 40, 60, 0.06);
  --radius: 12px;
  font-size: 15px;
}

/* ── 다크 ── */
html[data-theme="dark"] {
  --bg: #16161e;
  --bg2: #1f2029;
  --bg3: #2a2b3a;
  --line: #32334a;
  --fg: #d5dcf9;
  --fg-dim: #7982a9;
  --accent: #7aa2f7;
  --accent-soft: rgba(122, 162, 247, 0.14);
  --danger: #f7768e;
  --ok: #9ece6a;
  --warn: #e0af68;
  --purple: #bb9af7;
  --pill-ev: #3d6db5;
  --pill-dl: #b58347;
  --lv-red-bg: #43222d;
  --lv-yellow-bg: #41351e;
  --lv-green-bg: #293a21;
  --lv-purple-bg: #382b52;
  --shadow: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", "Malgun Gothic", -apple-system, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s;
}
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
button { cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s; }
button:active { transform: scale(0.96); }

/* ── 상단 바 ── */
#topbar {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px 8px; user-select: none;
}
#clock { font-size: 1.3em; font-weight: 800; font-variant-numeric: tabular-nums; }
#today-label { color: var(--fg-dim); font-size: 0.82em; }
.top-actions { margin-left: auto; display: flex; gap: 5px; }
.top-actions button {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 4px 9px; font-size: 0.88em;
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow);
}
.top-actions button:hover { border-color: var(--accent); color: var(--accent); }
.tauri-only { display: none; }
body.tauri .tauri-only { display: inline-block; }

/* ── 검색 바 ── */
#search-bar { padding: 0 14px 8px; }
#search-bar input { flex: 1; }
#search-bar button[type="button"] { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg-dim); padding: 9px 12px; }

/* ── 공휴일 ── */
.holiday-note { color: var(--danger); font-weight: 700; font-size: 0.84em; padding: 2px 4px 6px; }
.day-head.hol { color: var(--danger); }
.mcal-cell .hname {
  color: var(--danger); font-size: 0.82em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 일정 인라인 편집 ── */
.edit-form {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 10px 12px;
}
.edit-form .e-title { width: 100%; }
.edit-form .e-cancel { background: var(--bg3); border: 0; border-radius: var(--radius); color: var(--fg); padding: 9px 12px; }

/* ── 마감 스트립 + 페이스 ── */
#deadline-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; }
#deadline-strip::-webkit-scrollbar { display: none; }
.dl-chip {
  flex: 0 0 auto; display: flex; gap: 7px; align-items: baseline;
  background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 999px; padding: 4px 12px; font-size: 0.8em; cursor: pointer;
}
.dl-chip .dday { font-weight: 800; }
.dl-chip.urgent { border-color: var(--danger); }
.dl-chip.urgent .dday { color: var(--danger); }
.dl-chip.soon .dday { color: var(--warn); }
.dl-chip.far .dday { color: var(--ok); }
#pace-info {
  margin: 0 14px 8px; padding: 8px 12px; font-size: 0.78em; line-height: 1.5;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px;
  cursor: pointer;
}

/* ── 본문 ── */
main { flex: 1; overflow-y: auto; padding: 2px 14px 10px; scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; }
.row { display: flex; gap: 6px; align-items: center; }
input, textarea, select {
  font: inherit; color: var(--fg); background: var(--bg2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px;
  min-width: 0; box-shadow: var(--shadow);
}
input::placeholder, textarea::placeholder { color: var(--fg-dim); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input[type="date"], input[type="time"] { padding: 7px 8px; font-size: 0.9em; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color-scheme: dark; }
form button[type="submit"] {
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  font-weight: 800; padding: 9px 16px; flex: 0 0 auto;
}
form button[type="submit"]:hover { filter: brightness(1.08); }
details > summary { color: var(--fg-dim); cursor: pointer; font-size: 0.82em; padding: 4px 2px; list-style-position: inside; }
details[open] > summary { color: var(--accent); }
details .row { margin-top: 6px; }
#quick-add, #memo-form, #log-form { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
#ev-title { flex: 1; }
#ev-date { flex: 1.5; } #ev-start, #ev-end { flex: 1; }
textarea { resize: vertical; width: 100%; }
.chk { display: flex; gap: 5px; align-items: center; color: var(--fg-dim); white-space: nowrap; font-size: 0.9em; }
.chk input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ── 범위 토글 ── */
#range-toggle { gap: 4px; margin: 4px 0 10px; }
.rbtn {
  flex: 1; background: var(--bg2); border: 1px solid var(--line); color: var(--fg-dim);
  border-radius: 9px; padding: 6px 0; font-size: 0.84em; box-shadow: var(--shadow);
}
.rbtn.active { border-color: var(--accent); color: var(--accent); font-weight: 700; background: var(--accent-soft); }

/* ── 월간 캘린더 (알약형) ── */
#ev-month-nav { justify-content: center; gap: 14px; margin-bottom: 8px; }
#ev-month-nav button, #log-nav button {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); padding: 3px 12px;
}
#ev-month-nav button:hover, #log-nav button:hover { border-color: var(--accent); }
#ev-month-label, #log-month-label { font-weight: 800; min-width: 110px; text-align: center; font-size: 1.05em; }
#month-cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow);
}
.cal-head { text-align: center; color: var(--fg-dim); font-size: 0.72em; padding: 6px 0 4px; }
.cal-head.sun { color: var(--danger); }
.mcal-cell {
  min-height: 58px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 3px 2px 2px; font-size: 0.7em; cursor: pointer; overflow: hidden;
}
.mcal-cell:hover { background: var(--accent-soft); }
.mcal-cell.out { opacity: 0.35; pointer-events: none; }
.mcal-cell .n { text-align: center; color: var(--fg); font-weight: 600; line-height: 1.6; }
.mcal-cell.sun .n { color: var(--danger); }
.mcal-cell.today .n {
  background: var(--accent); color: #fff; border-radius: 999px;
  width: 1.9em; margin: 0 auto;
}
.mcal-cell.sel { background: var(--accent-soft); }
.pill {
  border-radius: 6px; padding: 1px 4px; font-size: 0.88em; color: #fff;
  background: var(--pill-ev); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill.dl { background: var(--pill-dl); }
.more { color: var(--fg-dim); font-size: 0.85em; text-align: center; }

/* ── 리스트 ── */
.list { display: flex; flex-direction: column; gap: 6px; }
.empty { color: var(--fg-dim); text-align: center; padding: 24px 0; font-size: 0.88em; }
.day-head { color: var(--accent); font-size: 0.76em; font-weight: 700; margin-top: 10px; padding-left: 2px; }
.item {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 10px 12px;
}
.item:hover { border-color: var(--accent); }
.item .time { color: var(--accent); font-size: 0.78em; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 34px; }
.item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .del, .item .hold { background: none; border: 0; color: var(--fg-dim); padding: 2px 6px; font-size: 0.9em; opacity: 0.55; }
.item:hover .del, .item:hover .hold { opacity: 1; }
.item .del:hover { color: var(--danger); }
.item .hold:hover { color: var(--warn); }
.item.deadline { border-left: 3px solid var(--danger); }
.memo-body { flex: 1; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.memo-date { color: var(--fg-dim); font-size: 0.72em; flex: 0 0 auto; }
.proj-chip { flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 9px; font-size: 0.7em; font-weight: 700; }
#memo-project { flex: 1; font-size: 0.88em; }

/* ── 할일 ── */
.item.todo { padding: 8px 12px; }
.todo-chk { width: 17px; height: 17px; accent-color: var(--ok); flex: 0 0 auto; cursor: pointer; }
.item.held { opacity: 0.55; }

/* ── 마감 등록 ── */
#deadline-add { margin-top: 12px; }
#dl-title { flex: 2; } #dl-date { flex: 1.3; }

/* ── 기록 달력 ── */
#log-count { flex: 1; }
#log-nav { justify-content: center; gap: 14px; margin: 6px 0 10px; }
#log-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow);
}
#log-calendar .cal-head:first-child { color: var(--danger); }
.cal-cell {
  aspect-ratio: 1; border-radius: 8px; background: var(--bg3); border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.7em; gap: 1px;
}
.cal-cell.out { opacity: 0; pointer-events: none; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell .n { color: var(--fg-dim); font-size: 0.9em; }
.cal-cell .c { font-weight: 800; font-size: 0.95em; }
.cal-cell.lv-red { background: var(--lv-red-bg); }
.cal-cell.lv-red .c { color: var(--danger); }
.cal-cell.lv-yellow { background: var(--lv-yellow-bg); }
.cal-cell.lv-yellow .c { color: var(--warn); }
.cal-cell.lv-green { background: var(--lv-green-bg); }
.cal-cell.lv-green .c { color: var(--ok); }
.cal-cell.lv-purple { background: var(--lv-purple-bg); }
.cal-cell.lv-purple .c { color: var(--purple); }
.cal-cell .w { font-size: 0.8em; line-height: 1; }
#log-stats {
  margin-top: 12px; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 10px 14px; font-size: 0.84em; color: var(--fg-dim); line-height: 1.8;
}
#log-stats b { color: var(--fg); }

/* ── 상태바 + 하단 탭바 ── */
#statusbar { padding: 4px 14px; font-size: 0.72em; color: var(--fg-dim); min-height: 22px; }
#status.err { color: var(--danger); }
#tabs {
  display: flex; background: var(--bg2); border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab {
  flex: 1; background: none; border: 0; color: var(--fg-dim);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0; font-size: 0.72em; border-radius: 10px;
}
.tab .ico { font-size: 1.5em; line-height: 1; filter: grayscale(1) opacity(0.55); }
.tab.active { color: var(--accent); font-weight: 700; }
.tab.active .ico { filter: none; }
.tab:hover { color: var(--fg); }

/* ── 넓은 화면 ── */
@media (min-width: 500px) {
  #app { max-width: 420px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}