@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
  --bg-main: #f2f4f6; --bg-card: #ffffff; --text-primary: #191f28; --text-secondary: #8b95a1;
  --accent-primary: #3182f6; --accent-light: #e8f3ff; --dusty-blue: #5f6c85; --border-color: #e5e8eb;
  --danger-color: #f04438; --danger-light: #fee4e2; --success-color: #049254; --success-light: #e6f4ea;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.03); --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.12);
  --nav-bg: #f9fafb; --cell-bg: #fafafa; --cell-hover: #f2f4f6; --toggle-bg: #e5e8eb; --toggle-icon-bg: #ffffff;
  --weather-bg-gradient: linear-gradient(135deg, #5b8ec9 0%, #87b3e0 100%); --weather-text: #ffffff;
  --radius-card: 24px; --radius-inner: 16px; --radius-pill: 999px;
}
:root[data-theme="dark"] {
  --bg-main: #101010; --bg-card: #1c1c1e; --text-primary: #f9fafb; --text-secondary: #a1aab5;
  --accent-primary: #4a94ec; --accent-light: #1b263b; --dusty-blue: #8b9bb4; --border-color: #2c2c2e;
  --danger-color: #ff6b6b; --danger-light: #3d1c1c; --success-color: #2fb379; --success-light: #183324;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.8);
  --nav-bg: #2c2c2e; --cell-bg: #2a2b2e; --cell-hover: #35363a; --toggle-bg: #3a3a3c; --toggle-icon-bg: #1c1c1e;
  --weather-bg-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --weather-text: #f9fafb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-main); font-family: 'Pretendard', sans-serif; color: var(--text-primary); padding: 32px 24px; min-height: 100vh; user-select: none; transition: background-color 0.3s ease, color 0.3s ease; }
.app-container { display: grid; grid-template-columns: 1fr 400px; gap: 24px; max-width: 1440px; margin: 0 auto; align-items: stretch; height: calc(100vh - 64px); }
.right-panel { display: flex; flex-direction: column; gap: 24px; height: 100%; min-height: 0; }
.card { background: var(--bg-card); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); transition: background 0.3s ease; }
.calendar-card { overflow-y: auto; display: flex; flex-direction: column; }
.todo-card { flex-shrink: 0; max-height: 45vh; display: flex; flex-direction: column; }
.weather-card { flex: 1; background: var(--weather-bg-gradient); color: var(--weather-text); padding: 24px; position: relative; overflow-y: auto; display: flex; flex-direction: column; }
.weather-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 14px; font-weight: 500; opacity: 0.9; }
.loader-spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-bottom-color: #fff; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.hidden { display: none !important; }
.weather-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.weather-location { font-size: 16px; font-weight: 700; opacity: 0.95; }
.weather-main-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.weather-temp-box { display: flex; align-items: center; gap: 8px; }
.weather-temp { font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.weather-desc-box { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; }
.weather-desc { font-size: 16px; font-weight: 700; opacity: 0.95; }
.weather-minmax { font-size: 13px; font-weight: 500; opacity: 0.8; }
.weather-chart-container { height: 90px; width: 100%; position: relative; margin-bottom: 16px; flex-shrink: 0; }
.weekly-forecast-list { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); }
.weekly-item { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; padding: 4px 0; }
.weekly-day { width: 45px; opacity: 0.9; }
.weekly-rain { width: 55px; font-size: 13px; color: #93c5fd; text-align: left; font-weight: 700; }
.weekly-icon { flex: 1; text-align: center; font-size: 18px; }
.weekly-temps { width: 70px; text-align: right; display: flex; justify-content: flex-end; gap: 8px; }
.temp-max { font-weight: 700; }
.temp-min { opacity: 0.6; font-weight: 500; }
.cal-weather-icon { position: absolute; top: 6px; right: 6px; font-size: 14px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-shrink: 0; }
.header-left { display: flex; align-items: center; gap: 12px; padding: 4px 8px; border-radius: 12px; transition: background 0.2s; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-left h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin: 0; cursor: pointer; transition: opacity 0.2s;}
.header-left h1:hover { opacity: 0.7; }
.nav-buttons { display: flex; align-items: center; gap: 4px; background: var(--nav-bg); padding: 4px 6px; border-radius: var(--radius-pill); }
.icon-btn, .text-btn { border: none; background: transparent; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--text-secondary); border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s ease; }
.text-btn { color: var(--text-primary); background: var(--bg-card); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); pointer-events: auto; }
.text-btn:hover { background: var(--cell-hover); color: var(--text-primary); }
.icon-btn:hover { background: var(--cell-hover); color: var(--text-primary); }
.today-badge-btn { background: var(--nav-bg); color: var(--text-primary); border: 1px solid var(--border-color); padding: 6px 14px; font-size: 13px; font-weight: 700; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s ease; margin-left: 4px; }
.today-badge-btn:hover { background: var(--cell-hover); }
.primary-btn { background: var(--accent-primary); color: white; border: none; padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; }
.primary-btn:hover { opacity: 0.9; }
.cancel-btn, .delete-action-btn { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; }
.cancel-btn:hover { background: var(--nav-bg); }
.delete-action-btn { color: var(--danger-color); border-color: var(--danger-color); }
.delete-action-btn:hover { background: var(--danger-light); }
.theme-toggle { position: relative; display: inline-block; width: 56px; height: 30px; }
.theme-toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--toggle-bg); transition: .3s ease; border-radius: 999px; }
.toggle-slider:before { position: absolute; content: "☀️"; font-size: 14px; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; left: 3px; bottom: 3px; background-color: var(--toggle-icon-bg); transition: .3s ease; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
input:checked + .toggle-slider:before { transform: translateX(26px); content: "🌙"; }
.todo-realtime-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); gap: 6px; flex-shrink: 0; }
.live-date { font-size: 13px; font-weight: 700; color: var(--accent-primary); background: var(--accent-light); padding: 6px 14px; border-radius: var(--radius-pill); }
.live-clock { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 42px; font-weight: 800; color: var(--text-primary); letter-spacing: -1px; }
.clock-ampm { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; padding-bottom: 8px; flex-shrink: 0; }
.weekday-grid .sun { color: var(--danger-color); }
.weekday-grid .sat { color: var(--accent-primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex-shrink: 0; }
.day-cell { background: var(--cell-bg); border-radius: var(--radius-inner); min-height: 85px; padding: 8px; display: flex; flex-direction: column; gap: 4px; transition: all 0.2s; cursor: pointer; border: 2px solid transparent; position: relative; }
.day-cell:hover { background: var(--cell-hover); }
.day-cell.other-month { opacity: 0.35; }
.day-cell.selected { border-color: var(--accent-primary); background: var(--bg-card); box-shadow: 0 4px 12px rgba(49, 130, 246, 0.1); }
.day-cell.drag-over { border: 2px dashed var(--accent-primary); background: var(--accent-light); }
.day-cell:nth-child(7n+1) .day-number:not(.today-badge) { color: var(--danger-color); }
.day-cell:nth-child(7n) .day-number:not(.today-badge) { color: var(--accent-primary); }
.day-cell.is-holiday .day-number:not(.today-badge) { color: var(--danger-color) !important; }
.day-header-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.day-number { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-primary); min-width: 26px; height: 26px; padding: 0 4px; border-radius: 8px; pointer-events: none;}
.day-number.today-badge { background: var(--accent-primary); color: #ffffff !important; }
.holiday-name { font-size: 11px; font-weight: 600; color: var(--danger-color); }
.event-tag { position: relative; font-size: 11px; font-weight: 600; padding: 4px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; margin-bottom: 2px; z-index: 2; user-select: none; transition: opacity 0.1s;}
.event-tag:active { cursor: grabbing; opacity: 0.8;}
.event-tag.no-left-radius { margin-left: -14px; padding-left: 14px; border-top-left-radius: 0; border-bottom-left-radius: 0; z-index: 5; }
.event-tag.no-right-radius { margin-right: -14px; padding-right: 14px; border-top-right-radius: 0; border-bottom-right-radius: 0; z-index: 5; }
.tag-work { background: var(--accent-light); color: var(--accent-primary); }
.tag-personal { background: var(--success-light); color: var(--success-color); }
.tag-important { background: var(--danger-light); color: var(--danger-color); }
.resize-handle { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 10; background: rgba(0,0,0,0.05); }
.resize-handle:hover { background: rgba(0,0,0,0.15); }
.resize-handle.left { left: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.resize-handle.right { right: 0; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.daily-agenda { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); flex: 1; display: flex; flex-direction: column; min-height: 0; }
.agenda-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
.agenda-header h3 { font-size: 18px; font-weight: 700; }
.agenda-count { font-size: 13px; font-weight: 600; color: var(--dusty-blue); background: rgba(95, 108, 133, 0.1); padding: 4px 10px; border-radius: var(--radius-pill); }
.agenda-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 8px; flex: 1; }
.agenda-item { display: flex; gap: 16px; padding: 16px; background: var(--nav-bg); border-radius: var(--radius-inner); border-left: 4px solid var(--accent-primary); cursor: pointer; }
.agenda-time { font-size: 13px; font-weight: 700; color: var(--text-secondary); min-width: 45px; }
.agenda-content { flex: 1; }
.agenda-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.agenda-details { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.agenda-empty { text-align: center; color: var(--dusty-blue); font-size: 14px; padding: 30px 0; }
.todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
.todo-header h2 { font-size: 16px; font-weight: 700; }
.badge { background: var(--accent-light); color: var(--accent-primary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); }
.todo-input-group { display: flex; gap: 8px; margin-bottom: 16px; flex-shrink: 0; }
.todo-input-group input, .input-group input, .input-group textarea { flex: 1; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); border-radius: 12px; padding: 10px 16px; font-size: 14px; outline: none; width: 100%; font-family: inherit; }
.input-group textarea { resize: vertical; min-height: 80px; }
.todo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.todo-item { display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); padding: 10px 14px; border-radius: var(--radius-inner); }
.todo-left { display: flex; align-items: center; gap: 12px; }
.todo-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-primary); cursor: pointer; }
.todo-text { font-size: 14px; font-weight: 500; }
.todo-item.completed .todo-text { text-decoration: line-through; color: var(--text-secondary); }
.delete-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.delete-btn:hover { color: var(--danger-color); }
.modal { 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; opacity: 1; visibility: visible; transition: all 0.2s ease; backdrop-filter: blur(2px); }
.modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.modal-content { width: 100%; max-width: 440px; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; background: var(--bg-card); border-radius: var(--radius-card); padding: 28px; }
.input-row { display: flex; gap: 12px; }
.input-group { margin-bottom: 16px; width: 100%; }
.input-group.half { flex: 1; }
.input-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.category-selector { display: flex; gap: 16px; }
.category-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.datepicker-content { max-width: 320px; padding: 24px; }
.picker-columns { display: flex; gap: 16px; height: 200px; }
.picker-col { flex: 1; display: flex; flex-direction: column; }
.picker-label { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.picker-list { flex: 1; overflow-y: auto; list-style: none; scroll-snap-type: y mandatory; border: 1px solid var(--border-color); border-radius: 12px; background: var(--nav-bg); }
.picker-list::-webkit-scrollbar { width: 6px; }
.picker-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; }
.picker-item { padding: 12px 0; text-align: center; font-size: 15px; color: var(--text-secondary); cursor: pointer; scroll-snap-align: center; }
.picker-item:hover { background: var(--cell-hover); color: var(--text-primary); }
.picker-item.active { font-weight: 700; color: var(--accent-primary); background: var(--accent-light); font-size: 18px; }

/* Context Menu */
#context-menu {
    position: fixed; z-index: 9999; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px 0; min-width: 120px;
}
.context-menu-item { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--danger-color); cursor: pointer; }
.context-menu-item:hover { background: var(--danger-light); }
@media (max-width: 900px) { .app-container { grid-template-columns: 1fr; } }