/* frontend/css/sputnik-feel.css — sputnik 감각 층(v1.7). 정본: ~/Desktop/control/NOA-MESSENGER-SPUTNIK.md §13.
 * 누름 · 목록↔방 전환 · 도착 떠오름 · 전송 실패 느낌표 · 아래로 가기 · 길게 누르기 コピー · 미읽음 구분선.
 * 절제: 그림자·광택·반동 없음. 움직임은 "이어짐"(어디서 와서 어디로 갔는지)만. 색은 의미 있는 곳에 한 번.
 * 색은 아래 토큰 두 벌(라이트/다크, html[data-theme] 기준). 값은 지휘소 캡처 검수로 확정.
 * 기계 트랙: 이 파일에는 문구가 없다(::before/::after는 선만).
 */

:root {
  --sp-pressed: #dceaf7;        /* 눌린 행 — 바탕(#EEF6FC)보다 한 단계 짙은 하늘 */
  --sp-shade: #000000;          /* 방이 덮을 때 목록 그늘 */
  --sp-shade-max: 0.08;
  --sp-fail: #d93a40;           /* 전송 실패 원 */
  --sp-on-fail: #ffffff;
  --sp-menu-bg: #2b3446;        /* コピー 말풍선 */
  --sp-menu-text: #ffffff;
  --sp-down-bg: #ffffff;        /* 아래로 가기 원 */
}

html[data-theme="dark"] {
  --sp-pressed: #222d45;        /* 바탕(#151d2e)보다 한 단계 밝은 네이비 */
  --sp-shade-max: 0.3;
  --sp-fail: #e5484d;
  --sp-menu-bg: #e6ebf3;
  --sp-menu-text: #151d2e;
  --sp-down-bg: #1b2438;
}

/* ---- §13-1 누름(js/sputnik/press.js가 .is-pressed를 붙인다 — 60ms 지연·최소 80ms) ---------------- */
.sp-room.is-pressed,
.sp-push.is-pressed { background: var(--sp-pressed); }
.sp-back.is-pressed,
.sp-send.is-pressed,
.sp-down.is-pressed,
.sp-retry.is-pressed,
.sp-menu-item.is-pressed { opacity: 0.4; }
.sp-room, .sp-push, .sp-back, .sp-send, .sp-down, .sp-retry, .sp-menu-item { -webkit-tap-highlight-color: transparent; }

/* ---- §13-2 전환: 방 패널이 목록 위에서 민다. 목록 그늘 = .sp-shade(nav.js가 목록 패널에 둔다) ---------- */
.sp-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--sp-shade);
  opacity: 0;
  pointer-events: none;
}
html.sp-nav .sp-panel { will-change: transform; }
html.sp-nav .sp-panel-list { pointer-events: none; }    /* 전환 중 밑의 목록은 누를 수 없다 */
.sp-bar-ghost { pointer-events: none; }

/* ---- §13-3 도착: 통째 도착 + 120ms 떠오름(처음 그리는 풍선만, js가 .is-new) ---------------------- */
@keyframes sp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes sp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sp-row.is-new { animation: sp-rise 120ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .sp-row.is-new { animation-name: sp-fade-in; }
}

/* 전송 실패 — 풍선 오른쪽 바깥 빨간 원 느낌표(기호). 탭 = 재전송. */
.sp-retry {
  flex: 0 0 auto;
  align-self: center;
  width: 30px;
  height: 30px;
  margin: 0 -6px 0 -2px;        /* 원은 22px — 누름 자리만 넓힌다(풍선과의 간격 = .sp-line gap) */
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sp-retry svg { display: block; width: 22px; height: 22px; }
.sp-retry-disc { fill: var(--sp-fail); }
.sp-retry-mark { fill: none; stroke: var(--sp-on-fail); stroke-width: 2.2; stroke-linecap: round; }
.sp-retry-dot { fill: var(--sp-on-fail); }

/* 아래로 가기 — 입력줄 바로 위 오른쪽. 원형 ↓ + 새 메시지 수(배지 토큰). */
.sp-down {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 12px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sp-line);
  border-radius: 50%;
  background: var(--sp-down-bg);
  color: var(--sp-send);
  cursor: pointer;
}
.sp-down[hidden] { display: none; }
.sp-down svg { width: 22px; height: 22px; }
.sp-down-count {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sp-badge-bg);
  color: var(--sp-badge-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.sp-down-count:empty { display: none; }

/* ---- §13-5 길게 누르기 → コピー. 풍선의 기본 텍스트 선택·콜아웃은 끈다 ------------------------------- */
.sp-bubble {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sp-menu {
  position: absolute;
  z-index: 5;
  border-radius: 10px;
  background: var(--sp-menu-bg);
  --sp-menu-tail: 50%;
}
.sp-menu[hidden] { display: none; }
.sp-menu::after {               /* 풍선 쪽 작은 꼬리(선 없는 삼각) */
  content: "";
  position: absolute;
  left: calc(var(--sp-menu-tail) - 6px);
  top: 100%;
  width: 12px;
  height: 6px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sp-menu.is-below::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sp-menu-item {
  display: block;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--sp-menu-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

/* ---- §13-6 미읽음 구분선: 가는 선 + 가운데 작은 글자 ----------------------------------------------- */
.sp-unread {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 6px;
}
.sp-unread::before,
.sp-unread::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--sp-line);
}
.sp-unread-label {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.4;
  color: var(--sp-muted);
}
.sp-unread + .sp-row { margin-top: 0; }