*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color: var(--ink);
  background: var(--paper-deep);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: -0.015em;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  color: var(--ink);
  background: var(--acid);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.ambient {
  position: fixed;
  inset: -48px;
  z-index: 0;
  background: var(--ambient-image) center / cover no-repeat;
  filter: blur(var(--surface-blur)) brightness(.76) saturate(.94) contrast(1.04);
  transform: scale(1.04);
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(226, 227, 216, .04);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── 페이지 전환 ──────────────────────────────
   나갈 때는 아주 짧게 흐려지고(흰 깜박임 대신),
   들어올 때는 요소들이 순서대로 살짝 올라오며 나타난다. */

.content {
  transition: opacity .18s ease;
}

.content.is-leaving {
  opacity: .45;
}

/* 등장 — 나타날 것들에 붙는다. --i 는 등장 순서(0,1,2…) */
.rise {
  opacity: 0;
  transform: translateY(24px);
}

.is-entering .rise {
  animation: riseIn 1.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* 움직임을 줄이도록 설정한 분에게는 전부 정지 상태로 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .content { transition: none; }
  .content.is-leaving { opacity: 1; }
  .rise { opacity: 1; transform: none; }
  .is-entering .rise { animation: none; }
}

/* ── 누르는 느낌 ──────────────────────────────
   누르는 동안만 살짝 들어가고, 떼면 원래대로 돌아온다.
   버튼과 링크 전반에 얇게 깔아 두어 어디를 눌러도 반응이 있다. */
button,
a,
.zoom-trigger,
.journal-row,
.thing-row {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active,
.zoom-trigger:active,
.nav-main:active,
.entry-back:active,
.guest-reveal:active {
  transform: scale(.975);
}

button,
.zoom-trigger {
  transition: transform .16s var(--ease);
}

/* 목록 줄은 눌릴 때 아주 조금만 들어간다(줄이 길어 크게 움직이면 어지럽다) */
.journal-row:active,
.thing-row:active {
  transform: scale(.995);
}

.journal-row,
.thing-row {
  transition: padding .3s var(--ease), background .3s ease, transform .16s var(--ease);
}

/* 키보드로 이동할 때도 같은 리듬으로 보이도록 */
:focus-visible {
  outline-offset: 3px;
  transition: outline-offset .16s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  .zoom-trigger:active,
  .nav-main:active,
  .entry-back:active,
  .guest-reveal:active,
  .journal-row:active,
  .thing-row:active {
    transform: none;
  }
}