.detail-screen {
  background: var(--color-white);
  min-height: 780px;
  display: flex;
  flex-direction: column;
}

.hero-photo {
  position: relative;
  width: 360px;
  height: 690px;
  background-size: cover;
  background-position: 30% 20%;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  flex: 1;
}
.hero-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(80,60,30,0.75) 55%, rgba(80,60,30,0.92) 100%);
  pointer-events: none;
}

.side-actions {
  position: absolute;
  right: 20px;
  bottom: 220px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.side-actions .pill {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: rgba(243,243,243,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
}
.side-actions .pill img { width: 18px; height: 18px; }
.side-actions .pill span { font-family: var(--font-supreme); font-size: 10px; letter-spacing: -0.3px; }

.hero-content {
  position: absolute;
  left: 20px;
  bottom: 24px;
  z-index: 4;
  width: 260px;
  color: #fff;
}
.hero-content .author {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  text-decoration: none;
}
.hero-content .author img { width: 24px; height: 24px; border-radius: 999px; }
.hero-content .title { margin: 0 0 8px; }
.hero-content .desc {
  margin: 0;
  font-family: var(--font-supreme);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: var(--color-neutral-50);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom bar variants */
.detail-bottombar {
  background: var(--color-black);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.detail-bottombar.joined { height: 80px; }
.detail-bottombar.explore { height: 100px; }

.joined-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.joined-people { display: flex; align-items: center; gap: 6px; }
.joined-avatars { display: flex; }
.joined-avatars img { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #fff; margin-right: -16px; object-fit: cover; }
.joined-avatars img:last-child { margin-right: 0; }
.joined-people p { margin: 0; color: #fff; font-family: var(--font-supreme); font-size: 15px; letter-spacing: -0.5px; }
.start-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 12px 6px 20px;
  font-family: var(--font-supreme-bold);
  font-size: 16px;
  letter-spacing: -0.5px;
  text-decoration: none;
}
.start-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

.explore-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: #fff;
}
.explore-row img { width: 30px; height: 30px; }
.explore-row span { font-family: var(--font-supreme); font-size: 15px; letter-spacing: -0.5px; color: #fff; }

.home-indicator-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.home-indicator-row span { width: 144px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.6); mix-blend-mode: plus-lighter; }

/* ── Swipe-morph detail (평소 → 1회 진입 → 올릴때) ───────────────── */
.swipe-detail {
  position: relative;
  height: 780px;
  min-height: 0;
  overflow: hidden;
  background: var(--color-black);
  touch-action: none;          /* let the swipe handler own vertical gestures */
  user-select: none;
  -webkit-user-select: none;
}
.swipe-detail .hero-photo {
  position: absolute;
  inset: 0;
  width: 360px;
  height: 780px;
  border-radius: 0;                  /* the .phone frame provides the 40px top clip */
  flex: none;
}
/* Default (평소): a GRADUAL warm blur — the photo stays sharp up top and the blur
   fades in only toward the bottom where the text sits (feathered over a long ramp). */
.swipe-detail .hero-photo::after {
  height: 50%;
  background: linear-gradient(180deg, rgba(108,94,67,0.3) 0%, rgba(210,183,130,0.72) 100%);
  filter: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  transition: height .38s cubic-bezier(.4,0,.2,1);
}
/* Scrolled up (1회진입): the whole profile background becomes fully blurry — a larger
   region, stronger blur, and a short feather so most of it is uniformly blurred. */
.swipe-detail.expanded .hero-photo::after {
  height: 62%;
  background: linear-gradient(180deg, rgba(108,94,67,0.5) 0%, rgba(210,183,130,0.78) 100%);
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
}

/* Title / desc (left) + side action pills (right), above the bottom sheet */
.detail-info {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 128px;                 /* 48px gap above the 80px bottom bar (Figma) */
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  transition: bottom .38s cubic-bezier(.4,0,.2,1);
}
.swipe-detail.expanded .detail-info { bottom: 140px; }
.detail-text { flex: 1; min-width: 0; color: #fff; cursor: pointer; }
.detail-text .author { display: flex; align-items: center; gap: 4px; text-decoration: none; margin-bottom: 8px; }
.detail-text .author img { width: 24px; height: 24px; border-radius: 999px; }
.detail-text .author-name { font-family: var(--font-supreme-bold); font-size: 15px; letter-spacing: -0.5px; color: #fff; }
.detail-title {
  margin: 0 0 12px;
  max-width: 202px;
  font-family: var(--font-supreme-bold);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: #fff;
}
.detail-desc {
  margin: 0;
  max-width: 202px;
  font-family: var(--font-supreme);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: var(--color-neutral-50);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42px;                                     /* ~2 lines (1.4 × 15px) */
  transition: max-height .5s cubic-bezier(.22,1.2,.36,1);  /* springy overshoot */
}
/* Tapping the text expands the description in place: the block is bottom-anchored,
   so it springs upward while spacing/layout stay put. JS drives max-height to the
   measured full height so the reveal has tension; tap again springs it closed. */
.detail-text.desc-open .detail-desc { -webkit-line-clamp: unset; }
.detail-actions { display: flex; flex-direction: column; gap: 11px; padding-bottom: 8px; flex-shrink: 0; }
.action-pill {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(243,243,243,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; color: #fff;
}
.action-pill img { width: auto; height: 16px; display: block; }
.action-pill span { font-family: var(--font-supreme); font-size: 11px; }

/* Embers rising from the joined-avatar profiles: each flame floats up and fades,
   looping. Only the flame's base is softly blurred (::after masked to the bottom);
   the silhouette itself stays sharp. */
.fire-icons { position: absolute; left: 46px; bottom: 80px; z-index: 4; transition: opacity .28s ease; }
.swipe-detail.expanded .fire-icons { opacity: 0; }
.fire-icons .fire {
  position: absolute;
  display: block;
  background: url('../assets/icons/fire.svg') no-repeat center / contain;
  animation: fire-rise 2.6s ease-in-out infinite;
}
.fire-icons .fire::after {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(1.4px);
  /* Only the very bottom edge gets a soft blur; the whole silhouette stays sharp. */
  -webkit-mask-image: linear-gradient(180deg, transparent 80%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 80%, #000 100%);
}
.fire-icons .fire1 { width: 24px; height: 24px; bottom: 0; left: 16px; }
.fire-icons .fire2 { width: 19px; height: 19px; bottom: 24px; left: 33px; rotate: 13deg; animation-delay: 1.1s; }
@keyframes fire-rise {
  0%   { transform: translateY(6px) scale(0.8);   opacity: 0; }
  20%  { opacity: 0.95; }
  75%  { opacity: 0.5; }
  100% { transform: translateY(-42px) scale(1.15); opacity: 0; }
}

/* Bottom sheet (flat black strip; grows on swipe up) */
.detail-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  height: 80px;
  background: var(--color-black);
  overflow: hidden;
  transition: height .38s cubic-bezier(.4,0,.2,1);
}
.swipe-detail.expanded .detail-sheet { height: 116px; }
/* Inverted (concave) radius where the content frame meets the flat black bottom bar.
   Two masked black fillets sit at the bar's top corners; they rise with the push
   (via --push) so the concave junction travels with the sheet. */
.swipe-detail::before,
.swipe-detail::after {
  content: "";
  position: absolute;
  bottom: 80px;
  width: 40px;
  height: 40px;
  background: var(--color-black);
  z-index: 5;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--push, 0px)));
  transition: bottom .38s cubic-bezier(.4,0,.2,1);
}
.swipe-detail::before { left: 0;  -webkit-mask: radial-gradient(40px at 100% 0, #0000 99%, #000 100%); mask: radial-gradient(40px at 100% 0, #0000 99%, #000 100%); }
.swipe-detail::after  { right: 0; -webkit-mask: radial-gradient(40px at 0 0, #0000 99%, #000 100%);   mask: radial-gradient(40px at 0 0, #0000 99%, #000 100%); }
.swipe-detail.expanded::before,
.swipe-detail.expanded::after { bottom: 116px; }
.detail-sheet .sheet-joined,
.detail-sheet .sheet-explore {
  position: absolute;
  left: 0; right: 0; top: 8px;
  transition: opacity .28s ease;
}
.detail-sheet .sheet-explore { opacity: 0; pointer-events: none; padding-top: 6px; }
.swipe-detail.expanded .sheet-joined { opacity: 0; pointer-events: none; }
.swipe-detail.expanded .sheet-explore { opacity: 1; pointer-events: auto; }
/* Pulled OUT of the sheet: it represents the phone's own bottom bar, so it stays
   pinned to the very bottom and does NOT move up with the Explore Packs push.
   Descendant (not child) selector so it's always absolutely pinned to the bottom
   — a stray static fallback would otherwise float up to the top of the frame. */
.swipe-detail .home-indicator-row { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; }

/* 평소 "more" button — warm translucent rounded square with horizontal dots */
.kebab-tan {
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #736549;
  border: none;
  border-radius: 10px;
  width: 41.5px;
  height: 27.5px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* The chip is now deliberately much brighter than the photo, so on an already-bright frame
   white-on-white is a real possibility — the shadow is what keeps the dots readable there. */
.kebab-tan img { width: 3.5px; height: 17.5px; transform: rotate(90deg); display: block; filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(0,0,0,0.35)); }

/* ── Pack colour ───────────────────────────────────────────────────────────
   The bottom sheet and the kebab both take their fill from the hero photo, which
   assets/packs.js samples and hands over as --pack-main / --pack-deep plus a
   .pack-light or .pack-dark class. Falling back to the original black and tan means
   the screen still looks right if that sampling never lands. */

/* Sheet stays the design's solid black — a translucent tint over the photo read as a
   smear rather than a bar. Only the kebab takes its colour from the image. */

/* Kebab: the clip's own main colour at 80%, and a 20% veil that goes the OTHER WAY from
   the picture — white over a dark frame, black over a bright one. That is the whole rule;
   there is no blur behind it any more. The frosted version leaned on a heavy backdrop
   filter to lift itself off the footage, and on a full-bleed clip that read as a smear
   over the picture rather than as a control sitting on it. At 80% fill the backdrop
   contributes about a sixth of what is seen, so nothing needs to be blurred for the
   button to hold together. packs.js hands over --pack-main-80 and the light/dark class. */
.kebab-tan {
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)),
              var(--pack-main-80, rgba(115, 101, 73, 0.8));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pack-light .kebab-tan {
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
              var(--pack-main-80, rgba(115, 101, 73, 0.8));
}