/* 포스트잇 창. 포스트잇 색은 실제 종이처럼 다크 모드에서도 그대로 둔다. */
.sticky-btn { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: #FAC775; color: #412402; border: 0.5px solid #BA7517; }
.sticky-btn:hover { background: #EF9F27; }
.sticky-btn .count { font-size: 12px; background: rgba(65,36,2,.12); border-radius: 999px; padding: 0 7px; }

.sticky-win { position: fixed; left: 20px; bottom: 72px; z-index: 60; width: min(760px, calc(100vw - 40px)); height: min(520px, calc(100vh - 110px));
  min-width: 320px; min-height: 260px; resize: both; overflow: hidden; display: flex; flex-direction: column;
  background: var(--card); border: 0.5px solid var(--border-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sticky-win[hidden] { display: none; }
.sticky-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.sticky-top h2 { font-size: 15px; font-weight: 500; margin: 0 6px 0 0; }
.sticky-top .grow { flex: 1; }
.sticky-top input[type=password] { font: inherit; font-size: 13px; height: 30px; padding: 4px 8px; width: 150px; border-radius: 8px;
  border: 0.5px solid var(--border-strong); background: var(--card); color: var(--text); }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid transparent; cursor: pointer; padding: 0; }
.swatch.on { border-color: var(--text); }
.sticky-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sticky-msg { font-size: 12px; color: var(--muted); }
.sticky-msg.err { color: #A32D2D; }

.sticky-board { position: relative; flex: 1; overflow: auto;
  background-color: var(--card-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; }
.sticky-canvas { position: relative; width: 1600px; height: 1100px; }
.sticky-empty { position: absolute; left: 24px; top: 24px; color: var(--muted); font-size: 13px; }

.note { position: absolute; width: 190px; min-height: 150px; display: flex; flex-direction: column; color: #2C2C2A;
  border-radius: 3px 3px 14px 3px; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.note.drag { box-shadow: 0 10px 22px rgba(0,0,0,.25); z-index: 5; }
.note-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px 3px 9px; font-size: 11px; cursor: grab; user-select: none; touch-action: none; }
.note.ro .note-head { cursor: default; }
.note-head .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
.note-head button { background: none; border: 0; padding: 0 2px; cursor: pointer; color: inherit; font: inherit; }
.note-head .open { text-decoration: underline; opacity: .8; }
.note-head .del { font-size: 15px; line-height: 1; opacity: .55; }
.note-head .del:hover { opacity: 1; }
.note textarea { flex: 1; min-height: 110px; border: 0; background: transparent; resize: none; outline: none; color: inherit;
  font: 14px/1.55 -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; padding: 2px 10px 10px; }
.note.saving { opacity: .7; }