/* 포스트잇 — 한 장은 25em 정사각(문 너비의 1/4)
 * 자리: --x, --y = 가운데 위치(문 너비·높이를 1로 본 비율), --rot = 기울기
 * 색: --paper(종이), --edge(말린 면), --ink(펜), --fs(글씨 크기, em 숫자)
 * 그림자는 번짐 없는 딱딱한 그림자 하나(직광 플래시 사진처럼, 그리고 가볍게).
 */
.note {
  position: absolute; left: 0; top: 0; width: 25em; height: 25em;
  transform: translate3d(calc(var(--x, .5) * 100em - 12.5em), calc(var(--y, .5) * 190em - 12.5em), 0) rotate(var(--rot, 0deg));
  cursor: pointer; outline: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.note__lift {
  position: absolute; inset: 0; transform-origin: 50% 8%;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}

/* 그림자 — 위는 붙어 있고 아래가 들떠서, 아래·오른쪽으로만 보임 */
.note__lift::before, .note--pad::before {
  content: ""; position: absolute; left: 1.2em; right: -.55em; top: 1.6em; bottom: -1.15em;
  background: rgba(140, 58, 76, .34); border-radius: .3em .3em 1.8em .7em;
  transform: skewX(-1.5deg);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s;
}

/* 종이 */
.note__paper {
  position: absolute; inset: 0; overflow: hidden;
  padding: 2.3em 2.2em 2.4em 2.4em; color: var(--ink, #1F1A1C);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
  background:
    radial-gradient(circle at 93% 93%, rgba(110, 40, 56, .26) 0, rgba(110, 40, 56, 0) 24%),
    var(--grain-paper, none),
    linear-gradient(to bottom, rgba(60, 20, 30, .07) 0, rgba(60, 20, 30, 0) 16%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .34) 100%),
    linear-gradient(104deg, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, 0) 42%),
    var(--paper, #FBEB93);
}

/* 말린 모서리(오른쪽 아래) — 접힌 뒷면이 원통처럼 말려 올라옴 */
.note__lift::after, .note--pad::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 16%; height: 16%;
  border-top-left-radius: .7em;
  background: linear-gradient(135deg,
    var(--edge, #E9D36A) 0, var(--paper, #FBEB93) 26%, rgba(255, 255, 255, .85) 41%,
    var(--edge, #E9D36A) 49.5%, rgba(0, 0, 0, 0) 50.5%);
}

/* 글씨 */
.note__text {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--f-pen); font-weight: 400;
  font-size: calc(var(--fs, 4.6) * 1em); line-height: 1.14; letter-spacing: -.01em;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
.note[data-font="marker"] .note__text, .note[data-font="marker"] .note__input { font-family: var(--f-marker); font-weight: 700; }
.note[data-font="pencil"] .note__text, .note[data-font="pencil"] .note__input { font-family: var(--f-pencil); opacity: .92; }
.note__nick {
  position: absolute; right: 1.7em; bottom: .55em; max-width: 6.4em;
  font-family: var(--f-pen); font-size: 2.9em; line-height: 1.1; white-space: nowrap; overflow: hidden;
  opacity: .78;
}
.note[data-font="marker"] .note__nick { font-family: var(--f-marker); font-size: 2.4em; }
.note[data-font="pencil"] .note__nick { font-family: var(--f-pencil); font-size: 2.6em; }
.note.has-nick .note__text { height: calc(100% - 3.4em / var(--fs, 4.6)); }

/* 내 포스트잇 = 작은 딸기 스티커 / 예시 = 「예시」 딱지
 * 스티커는 종이 왼쪽 위 모서리에 걸친다. 종이 안으로는 위·왼쪽 여백(2.3em)만큼만 들어와서 첫 글자를 가리지 않는다. */
.note__sticker {
  position: absolute; left: -2.2em; top: -3.6em; width: 5.4em; height: 6.3em;
  background: var(--berry-2) center / contain no-repeat; transform: rotate(-18deg);
}
.note__flag {
  position: absolute; left: .7em; bottom: -.5em; padding: 0 .45em;
  font: 700 max(2.7em, 9px)/1.45 var(--f-ui); letter-spacing: .04em;
  color: var(--red-deep); background: var(--paper); border-radius: .2em;
  box-shadow: 0 0 0 1px rgba(163, 20, 42, .45); transform: rotate(-3deg);
}

/* 눌림·초점 */
@media (hover: hover) {
  .note:hover .note__lift { transform: translate3d(0, -.3em, 0) rotate(.6deg); }
}
.note:active .note__lift { transform: scale(.98); }
.note:focus-visible::after {
  content: ""; position: absolute; inset: -.9em; border: 3px solid var(--red); border-radius: .8em;
}

/* 손에 든 상태 → 붙는 순간 */
.note.is-held { cursor: grab; touch-action: none; z-index: 5; }
.note.is-held.is-drag { cursor: grabbing; }
.note.is-held .note__lift { transform: scale(1.08) rotate(1.5deg); }
.note.is-held .note__lift::before { transform: translate3d(1.5em, 2.1em, 0) skewX(-3deg); opacity: .62; }
.note.is-bad .note__lift::before { background: rgba(60, 20, 30, .5); }
.note.is-stick .note__lift { animation: stick .54s cubic-bezier(.2, .9, .3, 1) 1 both; }
.note.is-stick .note__lift::before { animation: stickShadow .54s cubic-bezier(.2, .9, .3, 1) 1 both; }
@keyframes stick {
  0% { transform: perspective(70em) scale(1.08) rotateX(6deg) rotate(1.5deg); }
  30% { transform: perspective(70em) scale(.968) rotateX(0deg) rotate(0deg); }   /* 손바닥으로 꾹 */
  56% { transform: perspective(70em) scale(1.01) rotateX(10deg); }              /* 손을 떼면 아래가 팔랑 */
  78% { transform: perspective(70em) scale(1) rotateX(-2.5deg); }
  100% { transform: perspective(70em) scale(1) rotateX(0deg); }
}
@keyframes stickShadow {
  0% { transform: translate3d(1.5em, 2.1em, 0) skewX(-3deg); opacity: .62; }
  30% { transform: translate3d(-.5em, -.7em, 0) skewX(0deg); opacity: 1; }
  56% { transform: translate3d(.5em, .9em, 0) skewX(-2.5deg); opacity: .8; }
  100% { transform: translate3d(0, 0, 0) skewX(-1.5deg); opacity: 1; }
}
.note.is-new .note__lift { animation: notePop .5s cubic-bezier(.2, .9, .3, 1) 1 both; }
@keyframes notePop { 0% { transform: scale(.6) rotate(-6deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }

/* 쓰는 판의 큰 포스트잇 — 같은 모양을 크게 */
.note.note--pad {
  position: relative; left: auto; top: auto; flex: none; cursor: text;
  font-size: calc(min(62vw, 250px) / 25); transform: rotate(-1.2deg);
}
.note__input {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; resize: none; outline: none; overflow: hidden; color: inherit;
  font-family: var(--f-pen); font-weight: 400;
  font-size: calc(var(--fs, 5.2) * 1em); line-height: 1.14; letter-spacing: -.01em;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none;
}
.note__input::placeholder { color: currentColor; opacity: .38; }
.note--pad.has-nick .note__input { height: calc(100% - 3.4em / var(--fs, 5.2)); }
.note--pad:focus-within::before { background: rgba(140, 58, 76, .46); }

/* 크게 보기 */
.viewer__note .note {
  position: relative; left: auto; top: auto; cursor: default;
  font-size: calc(min(74vw, 320px) / 25); transform: rotate(var(--rot, 0deg));
}
.viewer__note .note .note__lift { transform: none; }

/* 캡처 화면에서 내 포스트잇을 맨 앞·조금 크게 */
.app[data-mode="shot"] .note.is-mine { z-index: 4; }
.app[data-mode="shot"] .note.is-mine .note__lift { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .note__lift, .note__lift::before { transition: none; }
  .note.is-stick .note__lift, .note.is-stick .note__lift::before, .note.is-new .note__lift { animation: none; }
}