:root {

  color-scheme: light;

  --bg: #f5f7fb;

  --surface: #ffffff;

  --text: #202b3c;

  --muted: #8390a3;

  --line: #e7ebf2;

  --blue: #3867e8;

  --blue-light: #edf2ff;

  --green: #1c9b71;

  --red: #d84b55;

  --shadow: 0 8px 28px rgba(32, 48, 79, .045);

}

* {

  box-sizing: border-box;

}

[hidden] {

  display: none !important;

}

html {

  min-height: 100%;

  background: var(--bg);

  -webkit-text-size-adjust: 100%;

}

body {

  margin: 0;

  color: var(--text);

  background: var(--bg);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",

    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  font-size: 15px;

  line-height: 1.5;

  -webkit-tap-highlight-color: transparent;

}

button, input, textarea {

  font: inherit;

}

button, .upload-button {

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

}

button:focus-visible, input:focus-visible,

textarea:focus-visible, .upload-button:focus-visible {

  outline: 3px solid rgba(56, 103, 232, .25);

  outline-offset: 2px;

}

button:disabled {

  opacity: .55;

  cursor: not-allowed;

}

.app-shell {

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

}

.topbar {

  height: 70px;

  padding: 0 5.5%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: var(--surface);

  border-bottom: 1px solid var(--line);

}

.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--text);

  font-size: 16px;

  font-weight: 800;

  letter-spacing: -.4px;

  text-decoration: none;

}

.brand-mark {

  display: grid;

  place-items: center;

  width: 52px;

  height: 52px;

  color: white;

  background: linear-gradient(145deg, #5d83f6, #3158d7);

  border-radius: 17px;

  font-size: 25px;

  font-weight: 800;

  box-shadow: 0 7px 18px rgba(56, 103, 232, .2);

}

.brand-mark.small {

  width: 34px;

  height: 34px;

  border-radius: 11px;

  font-size: 17px;

}

.tabs {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 15px 20px 0;

  background: var(--surface);

}

.tab {

  min-height: 44px;

  padding: 0 23px;

  border: 0;

  border-radius: 12px 12px 0 0;

  color: var(--muted);

  background: transparent;

  font-weight: 650;

}

.tab.active {

  color: var(--blue);

  background: var(--blue-light);

}

main {

  width: min(100% - 48px, 1060px);

  margin: 0 auto;

  padding: 36px 0 50px;

  flex: 1;

}

.view {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.page-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 3px;

}

h1, h2, h3, p {

  margin-top: 0;

}

h1 {

  margin-bottom: 7px;

  font-size: clamp(24px, 3vw, 31px);

  letter-spacing: -1px;

  line-height: 1.25;

}

h2 {

  margin-bottom: 5px;

  font-size: 18px;

  letter-spacing: -.35px;

}

h3 {

  margin-bottom: 5px;

  font-size: 15px;

}

p {

  margin-bottom: 0;

}

.eyebrow {

  margin-bottom: 8px;

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

}

.muted {

  color: var(--muted);

  font-size: 13px;

}

.panel {

  min-width: 0;

  padding: 25px;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 18px;

  box-shadow: var(--shadow);

}

.date-navigator {

  display: grid;

  grid-template-columns: 48px 1fr 48px;

  align-items: center;

  text-align: center;

  padding: 15px;

}

.selected-date h2 {

  margin-bottom: 3px;

  font-size: 21px;

}

.arrow-button {

  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

  padding: 0;

  border: 1px solid var(--line);

  border-radius: 13px;

  color: var(--text);

  background: white;

  font-size: 30px;

  line-height: 1;

}

.arrow-button:hover {

  color: var(--blue);

  background: var(--blue-light);

}

.section-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 21px;

}

.primary, .secondary, .ghost {

  min-height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 0 16px;

  border-radius: 11px;

  font-weight: 700;

  text-decoration: none;

  transition: background .15s ease, transform .15s ease;

}

.primary {

  color: white;

  background: var(--blue);

  border: 1px solid var(--blue);

}

.primary:hover {

  background: #2c54cb;

}

.secondary {

  color: #42516a;

  background: #f7f9fc;

  border: 1px solid var(--line);

}

.secondary:hover {

  background: #edf1f8;

}

.ghost {

  color: var(--muted);

  background: transparent;

  border: 1px solid transparent;

}

.small-button {

  min-height: 36px;

  font-size: 13px;

}

.full {

  width: 100%;

  margin-top: 18px;

}

.task-list, .file-list {

  display: flex;

  flex-direction: column;

}

.task-item {

  display: flex;

  align-items: flex-start;

  gap: 13px;

  padding: 16px 0;

  border-bottom: 1px solid #eff1f5;

}

.task-item:first-child {

  padding-top: 0;

}

.task-item:last-child {

  padding-bottom: 0;

  border-bottom: 0;

}

.task-check {

  appearance: none;

  flex: 0 0 22px;

  width: 22px;

  height: 22px;

  margin: 2px 0 0;

  border: 1.8px solid #ccd4e1;

  border-radius: 7px;

  background: white;

  cursor: pointer;

}

.task-check:checked {

  border-color: var(--green);

  background: var(--green);

}

.task-check:checked::after {

  content: "✓";

  display: block;

  color: white;

  font-size: 14px;

  font-weight: 800;

  text-align: center;

  line-height: 19px;

}

.task-content {

  flex: 1;

  min-width: 0;

}

.task-title {

  overflow-wrap: anywhere;

  font-weight: 650;

  line-height: 1.45;

}

.task-item.done .task-title {

  color: #a0a8b5;

  text-decoration: line-through;

}

.task-item.done .task-meta {

  color: #b0b7c3;

}

.task-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 6px;

  color: var(--muted);

  font-size: 12px;

}

.task-memo {

  margin-top: 8px;

  color: #7d889b;

  font-size: 13px;

  white-space: pre-wrap;

  overflow-wrap: anywhere;

}

.task-actions {

  display: flex;

  align-items: center;

  gap: 3px;

}

.icon-button {

  display: grid;

  place-items: center;

  width: 35px;

  height: 35px;

  flex: 0 0 35px;

  padding: 0;

  border: 0;

  border-radius: 9px;

  color: #8490a2;

  background: transparent;

}

.icon-button:hover {

  color: var(--blue);

  background: var(--blue-light);

}

.icon-button.delete:hover {

  color: var(--red);

  background: #fff0f1;

}

.empty-state {

  padding: 30px 12px;

  color: #98a2b2;

  font-size: 13px;

  line-height: 1.9;

  text-align: center;

}

.schedule-list {

  display: flex;

  flex-direction: column;

  gap: 0;

}

.schedule-item {

  display: grid;

  grid-template-columns: 115px minmax(0, 1fr);

  gap: 15px;

  padding: 12px 0;

  border-bottom: 1px solid #eff1f5;

}

.schedule-item:last-child {

  border-bottom: 0;

}

.schedule-time {

  padding-top: 10px;

  color: #53627b;

  font-size: 12px;

  font-weight: 750;

}

.schedule-card {

  padding: 12px 15px;

  border-left: 3px solid #6488f4;

  border-radius: 0 10px 10px 0;

  background: #f3f6ff;

}

.schedule-item.done .schedule-card {

  border-left-color: #bdc5d2;

  background: #f5f6f8;

}

.schedule-item.done .schedule-card .task-title {

  color: #a0a8b5;

  text-decoration: line-through;

}

.schedule-card .muted {

  margin-top: 5px;

  font-size: 12px;

}

.calendar-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 25px;

}

.calendar-heading h2 {

  margin: 0;

  font-size: 21px;

}

.calendar-weekdays, .calendar-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

}

.calendar-weekdays {

  margin-bottom: 8px;

}

.calendar-weekdays span {

  padding: 10px 0;

  color: #8994a5;

  font-size: 12px;

  text-align: center;

}

.calendar-weekdays span:first-child {

  color: #db686e;

}

.calendar-weekdays span:last-child {

  color: #4f83e9;

}

.calendar-day {

  display: flex;

  min-width: 0;

  min-height: 90px;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 10px 2px;

  border: 1px solid transparent;

  border-radius: 12px;

  color: var(--text);

  background: transparent;

}

.calendar-day:hover {

  background: #f5f7fc;

}

.calendar-day.selected {

  border-color: #b8c9ff;

  background: var(--blue-light);

}

.calendar-day.today .day-number {

  color: var(--blue);

  font-weight: 850;

}

.calendar-day.outside {

  color: #c3c9d3;

}

.day-number {

  display: grid;

  place-items: center;

  width: 29px;

  height: 29px;

  border-radius: 50%;

  font-size: 13px;

}

.day-dots {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 3px;

  min-height: 7px;

}

.day-dot {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--blue);

}

.day-dot.completed {

  background: #a9b2c1;

}

.day-count {

  color: #8792a4;

  font-size: 10px;

}

.calendar-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 20px;

  padding-top: 16px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 12px;

}

.calendar-legend span {

  display: flex;

  align-items: center;

  gap: 7px;

}

.legend-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--blue);

}

.legend-dot.completed {

  background: #a9b2c1;

}

.upload-panel {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 38px 20px;

  border: 1px dashed #cbd6ed;

  background: #fbfcff;

}

.upload-icon {

  display: grid;

  place-items: center;

  width: 56px;

  height: 56px;

  margin-bottom: 17px;

  border-radius: 17px;

  color: var(--blue);

  background: var(--blue-light);

  font-size: 31px;

}

.upload-panel h2 {

  margin-bottom: 7px;

}

.upload-panel .muted {

  margin-bottom: 18px;

}

#file-input {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  clip-path: inset(50%);

  white-space: nowrap;

}

.upload-button {

  min-height: 43px;

  padding: 10px 22px;

}

.file-item {

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 15px 0;

  border-bottom: 1px solid #eff1f5;

}

.file-item:last-child {

  border-bottom: 0;

}

.file-icon {

  display: grid;

  place-items: center;

  width: 43px;

  height: 47px;

  flex: 0 0 43px;

  border-radius: 11px;

  color: #d8545d;

  background: #fff0f0;

  font-size: 12px;

  font-weight: 850;

}

.file-info {

  flex: 1;

  min-width: 0;

}

.file-name {

  overflow-wrap: anywhere;

  font-weight: 650;

}

.file-meta {

  margin-top: 4px;

  color: var(--muted);

  font-size: 12px;

}

.file-actions {

  display: flex;

  align-items: center;

  gap: 3px;

}

.login-screen {

  min-height: 100vh;

  min-height: 100dvh;

  display: grid;

  place-items: center;

  padding: 24px;

  background:

    radial-gradient(ellipse at 15% 10%, #e6edff 0, transparent 40%),

    radial-gradient(ellipse at 90% 90%, #e7f4ff 0, transparent 40%),

    #f5f7fb;

}

.login-card {

  width: min(100%, 390px);

  padding: 38px 32px;

  border: 1px solid rgba(231, 235, 242, .9);

  border-radius: 24px;

  background: white;

  box-shadow: 0 20px 60px rgba(36, 55, 94, .09);

}

.login-card .brand-mark {

  margin-bottom: 25px;

}

.login-card h1 {

  font-size: 28px;

}

.login-card > .muted {

  margin-bottom: 28px;

}

label:not(.upload-button) {

  display: block;

  margin: 17px 0 7px;

  color: #4e5c71;

  font-size: 13px;

  font-weight: 700;

}

input:not([type="checkbox"]):not([type="file"]),

textarea {

  width: 100%;

  min-height: 44px;

  padding: 11px 12px;

  border: 1px solid #dfe4ed;

  border-radius: 10px;

  outline: none;

  color: var(--text);

  background: white;

}

input:focus, textarea:focus {

  border-color: #91aaf5 !important;

  box-shadow: 0 0 0 3px rgba(56, 103, 232, .08);

}

textarea {

  min-height: 85px;

  resize: vertical;

}

.error {

  min-height: 20px;

  margin-top: 10px;

  color: var(--red);

  font-size: 12px;

}

.task-dialog {

  width: min(100% - 28px, 500px);

  max-height: min(88dvh, 760px);

  padding: 0;

  overflow: auto;

  border: 1px solid var(--line);

  border-radius: 20px;

  color: var(--text);

  background: white;

  box-shadow: 0 20px 70px rgba(25, 40, 70, .2);

}

.task-dialog::backdrop {

  background: rgba(27, 39, 61, .42);

  backdrop-filter: blur(3px);

}

.dialog-form {

  padding: 25px;

}

.close-button {

  width: 35px;

  height: 35px;

  min-height: 35px;

  padding: 0;

}

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 13px;

}

.form-row > div {

  min-width: 0;

}

.dialog-actions {

  display: flex;

  justify-content: flex-end;

  gap: 9px;

  margin-top: 20px;

}

footer {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 20px 5.5%;

  border-top: 1px solid var(--line);

  color: #a0a8b5;

  background: white;

  font-size: 11px;

}

.toast {

  position: fixed;

  z-index: 100;

  left: 50%;

  bottom: max(24px, env(safe-area-inset-bottom));

  max-width: calc(100vw - 32px);

  padding: 12px 18px;

  transform: translate(-50%, 15px);

  border-radius: 12px;

  color: white;

  background: #26344c;

  box-shadow: 0 8px 30px rgba(0, 0, 0, .15);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease;

  font-size: 13px;

}

.toast.show {

  transform: translate(-50%, 0);

  opacity: 1;

}

@media (min-width: 900px) {

  #tasks-view {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: start;

    gap: 20px;

  }

  #tasks-view > .page-heading,

  #tasks-view > .date-navigator {

    grid-column: 1 / -1;

  }

  #tasks-view > .page-heading {

    margin-bottom: 0;

  }

  #tasks-view > .task-panel,

  #tasks-view > .panel:last-child {

    height: 100%;

  }

}

@media (max-width: 600px) {

  body {

    font-size: 14px;

  }

  .topbar {

    height: 58px;

    padding: 0 16px;

  }

  .brand {

    font-size: 14px;

  }

  .tabs {

    position: sticky;

    z-index: 20;

    top: 0;

    gap: 3px;

    padding: 8px 10px 0;

    border-bottom: 1px solid var(--line);

  }

  .tab {

    flex: 1;

    min-width: 0;

    min-height: 43px;

    padding: 0 5px;

    border-radius: 10px 10px 0 0;

    font-size: 12px;

    white-space: nowrap;

  }

  main {

    width: 100%;

    padding: 22px 14px calc(28px + env(safe-area-inset-bottom));

  }

  .view {

    gap: 14px;

  }

  .page-heading {

    gap: 8px;

  }

  h1 {

    font-size: 25px;

  }

  h2 {

    font-size: 16px;

  }

  .panel {

    padding: 17px;

    border-radius: 15px;

  }

  .date-navigator {

    grid-template-columns: 43px 1fr 43px;

    padding: 10px;

  }

  .arrow-button {

    width: 39px;

    height: 39px;

    border-radius: 11px;

  }

  .selected-date h2 {

    font-size: 18px;

  }

  .section-heading {

    align-items: center;

    margin-bottom: 17px;

  }

  .section-heading .muted {

    font-size: 11px;

  }

  .primary, .secondary {

    min-height: 39px;

    padding: 0 11px;

    font-size: 12px;

  }

  .task-item {

    gap: 10px;

    padding: 15px 0;

  }

  .task-actions {

    gap: 0;

  }

  .icon-button {

    width: 30px;

    height: 34px;

    flex-basis: 30px;

  }

  .schedule-item {

    grid-template-columns: 78px minmax(0, 1fr);

    gap: 9px;

  }

  .schedule-time {

    font-size: 11px;

  }

  .schedule-card {

    padding: 10px;

  }

  .calendar-heading {

    margin-bottom: 14px;

  }

  .calendar-heading h2 {

    font-size: 18px;

  }

  .calendar-day {

    min-height: 64px;

    gap: 3px;

    padding: 4px 0;

    border-radius: 9px;

  }

  .day-number {

    width: 27px;

    height: 27px;

    font-size: 12px;

  }

  .day-count {

    font-size: 9px;

  }

  .calendar-legend {

    gap: 10px;

    font-size: 10px;

  }

  .upload-panel {

    padding: 28px 14px;

  }

  .file-item {

    gap: 9px;

  }

  .file-icon {

    width: 36px;

    height: 40px;

    flex-basis: 36px;

    font-size: 10px;

  }

  .file-name {

    font-size: 12px;

  }

  .file-meta {

    font-size: 10px;

  }

  .file-actions .icon-button {

    width: 29px;

    flex-basis: 29px;

  }

  .login-screen {

    padding: 18px;

  }

  .login-card {

    padding: 30px 24px;

    border-radius: 21px;

  }

  .dialog-form {

    padding: 20px;

  }

  footer {

    padding: 17px 16px;

    font-size: 10px;

  }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    scroll-behavior: auto !important;

    transition: none !important;

  }

}



/* 중요 메모 */
.note-form {
  display: grid;
  gap: 10px;
}

.note-form label {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
}

.note-form textarea {
  min-height: 160px;
  line-height: 1.65;
}

.note-form-actions,
.note-actions,
.note-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-form-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

.note-list {
  display: grid;
  gap: 12px;
}

.note-item {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.note-card-heading {
  justify-content: space-between;
  align-items: flex-start;
}

.note-card-heading h3 {
  min-width: 0;
  margin: 3px 0 12px;
  overflow-wrap: anywhere;
}

.note-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.note-date {
  margin: 14px 0 0;
  font-size: 11px;
}

.note-actions {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .tabs {
    gap: 2px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .tab {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 12px;
  }

  .note-item {
    padding: 13px;
  }

  .note-actions {
    gap: 5px;
  }
}

/* 메모 화면 표시 보정 */
#notes-view:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
}

#notes-view:not([hidden]) .note-form {
  display: grid !important;
  gap: 10px;
}

#notes-view .note-form input,
#notes-view .note-form textarea {
  display: block;
  width: 100%;
  visibility: visible;
  opacity: 1;
}