/* ==========================================================================
   기적스토리 (miracle/story.php · assets/js/sx/story.js) — "책상 위에 쌓이는 일상 사진" · 밝은 종이 톤
   ========================================================================== */
.sub--story { --mono: "SFMono-Regular", Consolas, monospace; --led: var(--y); }
/* 필름 카메라 날짜 각인 */
.sub--story .st-led { font-family: var(--mono); color: var(--led); text-shadow: 0 0 6px var(--y-a3); }

/* ---------- 목록 Hero: 사진이 떨어져 책상에 흩어짐 ---------- */
.st-hero { position: relative; height: 100vh; height: 100svh; min-height: 660px; overflow: hidden; background: var(--paper-warm); color: var(--ink); isolation: isolate; }
.st-desk { position: absolute; inset: 0; z-index: 0; perspective: 1400px; perspective-origin: 50% 20%; }
.st-desk__plane { position: absolute; left: -15vw; right: -15vw; top: 4vh; height: 104vh; transform-style: preserve-3d; transform: rotateX(48deg) rotateZ(var(--rz, 0deg)); transform-origin: 50% 60%; }
.st-drop { position: absolute; left: var(--x); top: var(--y); width: clamp(150px, 15vw, 240px); padding: 8px 8px 30px; background: var(--white); box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
  transform: rotate(var(--r)) translateZ(0); transform-style: preserve-3d; }
.st-drop img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.st-drop b { position: absolute; right: 14px; bottom: 38px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--y); text-shadow: 0 0 5px rgba(0, 0, 0, .6); }
.sx-motion .st-hero:not(.is-in) .st-drop { opacity: 0; }
.sx-motion .st-hero.is-in .st-drop { animation: st-fall 1.1s cubic-bezier(.3, .8, .4, 1.15) calc(.2s + var(--i) * .16s) both; }
@keyframes st-fall {
  0% { opacity: 0; transform: rotate(calc(var(--r) * -3)) translateZ(900px) rotateX(-30deg); box-shadow: 0 120px 80px rgba(0, 0, 0, 0); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--r)) translateZ(0); box-shadow: 0 12px 24px rgba(0, 0, 0, .14); }
}
.st-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--paper-warm) 0, transparent 28%, transparent 55%, var(--paper-warm) 96%); }
.st-hero__top { position: absolute; left: 0; right: 0; top: calc(var(--hd-h) + 24px); pointer-events: none; }
.st-hero__top a { pointer-events: auto; }
.st-hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vh, 64px); pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.st-hero__title { display: grid; gap: 12px; }
.st-hero__title span { font-family: var(--f-display); font-size: var(--t-mega); font-weight: 800; line-height: .8; letter-spacing: -.06em; }
.st-hero__title small { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.st-hero__lead small { display: block; margin-top: 8px; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink); }
.st-hero__lead { max-width: 380px; padding: 16px 18px; background: var(--white); box-shadow: var(--sh-paper); font-size: var(--fs-sm); color: var(--ink2); transform: rotate(1.2deg); }

/* ---------- 목록 ---------- */
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: round(clamp(32px, 4vw, 64px), 4px) round(clamp(16px, 2.4vw, 40px), 4px); }
.st-card a { display: block; }
.st-card__photo { position: relative; display: block; padding: 10px 10px 34px; background: var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: rotate(var(--rot)); transition: transform .7s var(--ease), box-shadow .7s; }
.st-card__pic { display: block; }
.st-card__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper2); filter: saturate(.9); transition: filter .6s; }
.st-card__photo b { position: absolute; right: 18px; bottom: 44px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--y); text-shadow: 0 0 5px rgba(0, 0, 0, .65); }
.st-tape { position: absolute; left: 50%; top: -12px; width: 86px; height: 26px; margin-left: -43px; background: rgba(255, 248, 204, .78); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transform: rotate(-4deg) scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.st-card a:is(:hover, :focus-visible) .st-card__photo { transform: rotate(0) translateY(-10px) scale(1.03); box-shadow: 0 28px 50px rgba(0, 0, 0, .16); }
.st-card a:is(:hover, :focus-visible) .st-card__photo img { filter: saturate(1.15); }
.st-card a:is(:hover, :focus-visible) .st-tape { transform: rotate(-4deg) scaleX(1); }
.st-card__cap { display: grid; gap: 4px; padding: 18px 4px 0; }
.st-card__cap small { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink2); }
.st-card__cap strong { font-size: var(--fs-md); letter-spacing: -.03em; line-height: 1.45; }
.st-more { display: flex; justify-content: center; margin-top: round(clamp(64px, 7vw, 100px), 4px); }

/* ---------- 글 ---------- */
.st-progress { position: fixed; left: 0; right: 0; top: 0; z-index: calc(var(--z-header) + 1); height: 3px; pointer-events: none; }
.st-progress i { display: block; width: 100%; height: 100%; background: var(--k); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.st-phero { padding: calc(var(--hd-h) + 64px) 0 40px; }
.st-phero__in { max-width: 980px; }
.st-phero__stamp { margin: 40px 0 8px; font-family: var(--mono); font-size: var(--fs-3xl); font-weight: 600; color: var(--y); text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 0 14px var(--y-a3); }
.st-phero__title { font-family: var(--f-display); font-size: max(var(--fs-3xl), min(var(--fs-4xl), (100vw - 960px) * 999), min(var(--fs-6xl), (100vw - 1280px) * 999)); font-weight: 800; line-height: 1.12; letter-spacing: -.05em; }
.st-phero__meta { display: flex; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink2); }
.st-post { padding-top: 40px !important; }
.st-post__in { display: grid; justify-items: center; gap: 40px; max-width: 820px; }
.st-post__txt { font-size: max(var(--fs-md), min(var(--fs-lg), (100vw - 1600px) * 999)); line-height: 1.85; text-align: center; }
.st-post__img { width: 100%; margin: 0; padding: 12px 12px 40px; background: var(--white); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); transform: rotate(var(--rot)); }
.st-post__img button { display: block; width: 100%; }
.st-post__img img { width: 100%; height: auto; }
.sx-motion .st-post__img img { filter: brightness(2.6) contrast(.35) saturate(0); transition: filter 2.6s cubic-bezier(.3, 0, .2, 1); }
.sx-motion .st-post__img { opacity: 0; transform: rotate(var(--rot)) translateY(40px); transition: opacity .8s, transform 1.1s var(--ease); }
.sx-motion .st-post__img.is-dev { opacity: 1; transform: rotate(var(--rot)); }
.sx-motion .st-post__img.is-dev img { filter: none; }
.st-pn { padding-bottom: round(clamp(100px, 10vw, 160px), 4px); }
.st-pn__in { display: grid; grid-template-columns: 1fr 1fr; }
.st-pn__link { position: relative; display: flex; align-items: flex-end; min-height: 46vh; padding: round(clamp(24px, 3vw, 48px), 4px); overflow: hidden; color: var(--on-dark); background: var(--k); isolation: isolate; }
.st-pn__link.is-r { justify-content: flex-end; text-align: right; }
.st-pn__link.is-empty { background: var(--paper2); }
.st-pn__img { position: absolute; inset: 0; z-index: -1; }
.st-pn__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) grayscale(.6); transform: scale(1.08); transition: transform 1.4s var(--ease), filter .8s; }
.st-pn__link:hover .st-pn__img img { transform: scale(1); filter: brightness(.55) grayscale(0); }
.st-pn__txt { display: grid; gap: 6px; max-width: 420px; }
.st-pn__txt small { font-size: var(--fs-xs); font-weight: 700; color: var(--y); }
.st-pn__txt b { font-size: var(--fs-2xl); letter-spacing: -.03em; line-height: 1.3; }
.st-pn__txt em { font-style: normal; font-family: var(--mono); font-size: var(--fs-xs); color: var(--on-dark-2); }
.st-pn__list { display: flex; justify-content: center; margin-top: 48px; }

@media (max-width: 1180px) { .st-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  .st-hero__foot { flex-direction: column; align-items: flex-start; }
  .st-pn__in { grid-template-columns: 1fr; }
  .st-pn__link.is-r { justify-content: flex-start; text-align: left; }
  .st-pn__link { min-height: 30vh; }
}
@media (max-width: 640px) {
  .st-grid { gap: 28px 16px; }
  .st-card__photo { padding: 6px 6px 22px; }
  .st-card__cap strong { font-size: var(--fs-sm); }
}

/* ---------- 사진 집어 옮기기 ---------- */
.st-drop { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.st-drop img { pointer-events: none; }
.st-drop.is-landed { animation: none !important; opacity: 1; transform: rotate(var(--r)) translateZ(var(--lz, 0px)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .45s; }
.st-drop.is-drag { cursor: grabbing; --lz: 90px; box-shadow: 0 60px 60px rgba(0, 0, 0, .2); transition: transform .25s var(--ease), box-shadow .25s; }
.st-hero::after { z-index: 1; }
.st-hero__top, .st-hero__foot { z-index: 2; }

/* ---------- 글 등장 ---------- */
.st-phero__title .ch { display: inline-block; white-space: pre; }
.sx-motion .st-phero__title .ch { opacity: 0; transform: translateY(.4em) scale(1.6) rotate(var(--cr, 0deg)); }
.sx-motion .st-phero.is-in .st-phero__title .ch { animation: st-stamp .5s cubic-bezier(.3, 1.5, .5, 1) calc(.5s + var(--ci) * .035s) forwards; }
@keyframes st-stamp { to { opacity: 1; transform: none; } }
.sx-motion .st-post__txt { position: relative; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.sx-motion .st-post__txt::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--y); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }
.sx-motion .st-post__txt.is-in { clip-path: inset(0); }
.sx-motion .st-post__txt.is-in::after { animation: st-swipe 1.1s cubic-bezier(.7, 0, .2, 1); }
@keyframes st-swipe { 0% { transform-origin: 0 50%; transform: scaleX(0); } 50% { transform-origin: 0 50%; transform: scaleX(1); } 51% { transform-origin: 100% 50%; } 100% { transform-origin: 100% 50%; transform: scaleX(0); } }
.st-post__img { position: relative; }
.st-post__img .st-tape { top: -14px; transform: rotate(-3deg) scaleX(1); }
.sx-motion .st-post__img { transform: rotate(calc(var(--rot) * -4 + 6deg)) translateY(-60px) scale(1.04); transition: opacity .5s, transform 1s cubic-bezier(.3, 1.3, .5, 1); }
.sx-motion .st-post__img .st-tape { transform: rotate(-3deg) scaleX(0); transition: transform .45s var(--ease) .75s; }
.sx-motion .st-post__img.is-dev .st-tape { transform: rotate(-3deg) scaleX(1); }