:root {
  --bg: #f6f3ee;
  --paper: #fffdf9;
  --line: #e7dfd3;
  --text: #1f1a17;
  --muted: #7f7468;
  --panel: #f3eee6;
  --accent: #111111;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }
.app-shell { min-height: 100vh; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(255,253,249,0.85); position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 10; }
.brand { font-size: 20px; font-weight: 700; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.sync-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sync-status.saved { color: #0f766e; font-weight: 700; }
.sync-status.dirty { color: #b45309; font-weight: 700; }
.sync-status.error { color: #b91c1c; font-weight: 700; }
.tab-btn, .nav-btn, .modal-btn, .add-schedule-btn { border: 1px solid var(--line); background: white; color: var(--text); padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tab-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
main { padding: 20px; }
.view { display: none; }
.view.active { display: block; }
.note-layout { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; align-items: start; }
.paper-wrap { min-height: calc(100vh - 120px); }
.paper { background: var(--paper); min-height: calc(100vh - 120px); border: 1px solid var(--line); border-radius: 24px; padding: 36px 46px 120px; outline: none; line-height: 1.85; font-size: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); position: relative; }
.paper:empty:before { content: attr(data-placeholder); color: #b6aa9c; }
.note-block { position: relative; margin-bottom: 18px; min-height: 32px; border-radius: 14px; }
.block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.note-tag { display: inline-flex; align-items: center; gap: 6px; color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; vertical-align: middle; }
.note-tag-text { font-weight: 700; }
.note-text { display: block; padding-left: 0; min-height: 24px; }
.note-text[contenteditable="true"]:focus { outline: none; }
.index-rail-wrap { position: sticky; top: 84px; height: calc(100vh - 120px); display: flex; flex-direction: column; align-items: center; width: 128px; padding-left: 8px; }
.index-title { font-size: 13px; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 14px; font-weight: 700; text-align: center; }
.index-rail { display: flex; flex-direction: column; gap: 3px; overflow: auto; padding: 6px 0; width: 100%; align-items: flex-end; }
.index-row { width: 100%; display: flex; align-items: center; justify-content: flex-end; }
.index-item { width: 84px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; }
.index-item-label { width: 72px; height: 32px; margin-left: auto; padding: 7px 10px 7px 12px; border-radius: 0 14px 14px 0; color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; box-shadow: 0 6px 14px rgba(0,0,0,0.08); pointer-events: none; user-select: none; -webkit-user-select: none; }
.index-item.active .index-item-label { transform: translateX(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.16); }
.index-item.plus { width: 72px; height: 32px; background: #d6cec2; color: #4d433a; border-radius: 0 14px 14px 0; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 14px rgba(0,0,0,0.08); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.week-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 20px; }
.week-label { min-width: 260px; text-align: center; font-size: 20px; font-weight: 700; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.day-col { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; min-width: 240px; }
.day-head { padding: 14px; border-bottom: 1px solid var(--line); background: #fcfaf6; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-head-left { min-width: 0; }
.day-name { font-weight: 700; }
.day-date { font-size: 13px; color: var(--muted); margin-top: 4px; }
.day-col.has-schedule .day-head { background: #fff4e8; }
.day-col.has-schedule { border-color: #f0c38a; }
.day-col.has-schedule .day-date { color: #9a5a00; font-weight: 700; }
.day-body { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.day-free-note {
  flex: 1;
  min-height: 180px;
  border: 1px dashed #d8ccbd;
  border-radius: 16px;
  padding: 12px;
  background: #fffdfa;
  outline: none;
  line-height: 1.7;
  white-space: pre-wrap;
}
.day-free-note:empty:before {
  content: attr(data-placeholder);
  color: #b6aa9c;
}
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-item { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fffaf2; cursor: pointer; }
.schedule-item:hover { background: #fff5e8; }
.schedule-time { font-size: 12px; font-weight: 700; color: #8a5a00; margin-bottom: 4px; }
.schedule-title { font-size: 14px; font-weight: 700; }
.schedule-memo { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; }
.add-schedule-btn { width: 100%; background: #f7f2ea; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; z-index: 50; }
.hidden { display: none !important; }
.modal-card { width: min(92vw, 360px); background: white; border-radius: 20px; padding: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.16); }
.schedule-card { width: min(92vw, 380px); }
.modal-title { font-weight: 700; margin-bottom: 12px; }
.modal-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; outline: none; margin-top: 10px; }
.modal-input:first-of-type { margin-top: 0; }
.modal-textarea { min-height: 100px; resize: vertical; }
.color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.color-dot.selected { border-color: #111; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-btn.primary { background: #111; color: white; border-color: #111; }
.modal-btn.danger { background: #fff1f1; color: #d92d20; border-color: #f2c5c5; }
.schedule-actions { justify-content: space-between; }
.context-menu { position: fixed; z-index: 60; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.12); overflow: hidden; }
.context-btn { display: block; width: 100%; background: white; border: 0; padding: 12px 14px; text-align: left; font: inherit; cursor: pointer; }
.context-btn:hover { background: #f7f2ea; }
.context-btn.danger { color: #d92d20; }
@media (max-width: 980px) {
  main { padding: 12px; }
  .topbar { padding: 0 12px; height: 56px; }
  .brand { font-size: 17px; }
  .sync-status { display: none; }
  .note-layout { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
  .paper { min-height: 58vh; padding: 22px 18px 80px; border-radius: 18px; font-size: 16px; line-height: 1.7; }
  .index-rail-wrap { position: sticky; top: 68px; height: calc(100vh - 92px); align-items: center; width: 72px; padding-left: 4px; }
  .index-title { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.12em; text-align: center; }
  .index-rail { gap: 2px; }
  .index-item { width: 54px; height: 34px; }
  .index-item-label { width: 42px; height: 24px; border-radius: 0 12px 12px 0; justify-content: center; font-size: 11px; padding: 6px; user-select: none; -webkit-user-select: none; }
  .index-item.plus { width: 42px; height: 24px; font-size: 16px; border-radius: 0 12px 12px 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .week-header { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .week-label { min-width: auto; font-size: 16px; }
  .week-grid {
    grid-template-columns: repeat(7, 82vw);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .day-col {
    min-width: 82vw;
    min-height: 58vh;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .day-head { padding: 12px; }
  .day-body { padding: 10px; }
}