/* 기본 모양. 토큰(tokens.css) 변수만 쓴다. 숫자 직접 쓰지 않기. */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

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

.screen-title { margin: 0 0 var(--space-3); font-size: 1.5rem; }

/* 메모 입력 */
.memo-form { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.memo-label { font-size: 0.875rem; color: var(--color-muted); }
.memo-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}

.btn {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
  background: var(--color-bg);
  color: var(--color-text);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.error { margin: 0; color: var(--color-error); font-size: 0.875rem; word-break: break-all; }

/* 메모 목록 */
.memo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.memo-item {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.memo-text { margin: 0 0 var(--space-1); white-space: pre-wrap; word-break: break-word; }
.memo-time { font-size: 0.75rem; color: var(--color-muted); }

/* 배포 버전 바닥글 */
.version { text-align: center; font-size: 0.75rem; color: var(--color-muted); padding: var(--space-3); }

/* 빈 상태: app.js가 is-empty 클래스를 붙였다 뗀다. 보이고 안 보이고는 여기서 */
.memo-empty { color: var(--color-muted); display: none; }
.memo-list.is-empty .memo-empty { display: block; }