:root {
  /* 2026-09-09 가독성 조정: 다크 배경 위 보조 회색 텍스트 대비 개선 */
  --muted: #9499A6;
  --faint: #7A808C;
}

/* 인트로 본문: 텍스트와 그림을 같은 레이어에 겹치지 않는다.
   텍스트가 먼저 끝난 뒤 그림이 시작되고, 그림의 가장자리만 먹색으로 녹인다. */
.act {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 96svh;
  margin: 0;
  padding: 5.25rem 0 4.5rem;
  overflow: hidden;
  justify-content: flex-start;
  align-items: center;
}

/* 제목·본문·보조 문구는 전부 같은 38rem 텍스트 컬럼의 같은 x좌표에서 시작한다.
   원본 .act-body의 max-width:30rem을 반드시 해제해야 중앙으로 밀리지 않는다. */
.act > .act-era,
.act > .act-line,
.act > .act-body,
.act > .aside,
.act > .act-mark {
  position: relative;
  z-index: 2;
  width: min(calc(100% - (var(--gutter) * 2)), 38rem);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.act-line,
.act-body,
.act .aside {
  text-align: left;
}

.act-body {
  max-width: none !important;
}

/* DOM에서는 그림이 두 번째지만, 시각적으로는 모든 본문 뒤로 보낸다. */
.act-era { order: 1; }
.act-line { order: 2; }
.act-body { order: 3; }
.act .aside { order: 4; }
.act-mark { order: 5; }
.act-art { order: 6; }

/* 그림은 absolute 배경이 아니라 별도 흐름으로 둔다.
   따라서 제목/본문과 실제 박스가 겹칠 수 없다. */
.act-art {
  display: block !important;
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(100vw, 76rem);
  max-width: none;
  margin: 2.4rem 0 0;
  border: 0 !important;
  outline: 0;
  box-shadow: none;
  background: transparent !important;
  pointer-events: none;
  overflow: visible;
  line-height: 0;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
}

/* 그림도 텍스트 뒤에서 은은하게 떠오르는 패럴랙스 감각으로 부드럽게 등장 */
.act.seen > .act-art {
  animation: parallax-glide 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both !important;
}

.act-art img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  opacity: 0.72;
  filter: saturate(0.70) contrast(1.03) brightness(1.00);
  mix-blend-mode: normal;
}

/* 좌우·상하 경계가 잘린 액자처럼 보이지 않도록 실제 이미지 안쪽에서 천천히 사라지게 한다. */
.act-art {
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 48%,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.88) 68%,
    rgba(0,0,0,0.42) 84%,
    transparent 100%);
  mask-image: radial-gradient(ellipse 76% 72% at 50% 48%,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.88) 68%,
    rgba(0,0,0,0.42) 84%,
    transparent 100%);
}

/* 위쪽과 좌우를 부드럽게 연결해 텍스트와 배경 사이에서 그림이 자연스럽게 녹아들게 한다. */
.act-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(7,8,11,0.95) 0%,
      rgba(7,8,11,0.72) 3%,
      rgba(7,8,11,0.30) 8%,
      transparent 18%,
      transparent 82%,
      rgba(7,8,11,0.30) 92%,
      rgba(7,8,11,0.72) 97%,
      rgba(7,8,11,0.95) 100%),
    linear-gradient(to bottom,
      rgba(7,8,11,0.88) 0%,
      rgba(7,8,11,0.42) 10%,
      rgba(7,8,11,0.08) 24%,
      transparent 38%,
      transparent 78%,
      rgba(7,8,11,0.20) 90%,
      rgba(7,8,11,0.76) 100%);
}

.act:nth-child(1) .act-art img { opacity: 0.75; }
.act:nth-child(2) .act-art img { opacity: 0.70; }
.act:nth-child(3) .act-art img { opacity: 0.75; }
.act:nth-child(4) .act-art img { opacity: 0.73; }

@media (max-width: 640px) {
  .act {
    min-height: 100svh;
    padding: 4.75rem 0 4.25rem;
  }

  /* 모바일에서도 본문이 완전히 끝난 뒤 약 36px 아래에서 그림 시작. */
  .act-art {
    width: 100vw;
    margin-top: 2.25rem;
    -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 48%,
      #000 0%,
      #000 57%,
      rgba(0,0,0,0.90) 70%,
      rgba(0,0,0,0.46) 87%,
      transparent 100%);
    mask-image: radial-gradient(ellipse 82% 74% at 50% 48%,
      #000 0%,
      #000 57%,
      rgba(0,0,0,0.90) 70%,
      rgba(0,0,0,0.46) 87%,
      transparent 100%);
  }

  .act-art img {
    opacity: 0.74;
    filter: saturate(0.72) contrast(1.03) brightness(1.01);
  }

  .act:nth-child(1) .act-art img { opacity: 0.77; }
  .act:nth-child(2) .act-art img { opacity: 0.72; }
  .act:nth-child(3) .act-art img { opacity: 0.77; }
  .act:nth-child(4) .act-art img { opacity: 0.75; }

  .act-art::after {
    background: linear-gradient(to bottom,
      rgba(7,8,11,0.92) 0%,
      rgba(7,8,11,0.48) 11%,
      rgba(7,8,11,0.10) 25%,
      transparent 40%,
      transparent 78%,
      rgba(7,8,11,0.18) 90%,
      rgba(7,8,11,0.78) 100%);
  }
}

/* ================= 봉인 장면: 두루마리 WebP + CSS 미세 모션 ================= */
.seal-media {
  position: relative;
  width: min(100vw, 76rem);
  max-width: none;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  margin: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 82% 80% at 50% 50%,
    #000 0%,
    #000 60%,
    rgba(0,0,0,0.90) 73%,
    rgba(0,0,0,0.44) 89%,
    transparent 100%);
  mask-image: radial-gradient(ellipse 82% 80% at 50% 50%,
    #000 0%,
    #000 60%,
    rgba(0,0,0,0.90) 73%,
    rgba(0,0,0,0.44) 89%,
    transparent 100%);
}

.seal-media img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.04) brightness(0.88);
  transform-origin: 52% 48%;
  animation: seal-drift 8s ease-in-out infinite alternate;
  will-change: transform;
}

/* 이미지 위에 아주 약한 달빛/안개층만 움직여 영상처럼 보이되 텍스트를 방해하지 않는다. */
.seal-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 40% 62%, rgba(218,212,198,0.10), transparent 38%),
    radial-gradient(ellipse at 68% 30%, rgba(183,178,166,0.07), transparent 32%);
  filter: blur(16px);
  opacity: 0.28;
  animation: seal-mist 7s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.seal-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(7,8,11,0.95) 0%,
      rgba(7,8,11,0.70) 4%,
      rgba(7,8,11,0.25) 10%,
      transparent 20%,
      transparent 80%,
      rgba(7,8,11,0.25) 90%,
      rgba(7,8,11,0.70) 96%,
      rgba(7,8,11,0.95) 100%),
    linear-gradient(to bottom,
      rgba(7,8,11,0.60) 0%,
      transparent 24%,
      transparent 72%,
      rgba(7,8,11,0.58) 100%),
    radial-gradient(ellipse at center,
      transparent 52%,
      rgba(7,8,11,0.10) 72%,
      rgba(7,8,11,0.40) 100%);
}

@keyframes seal-drift {
  from { transform: scale(1.035) translate3d(-0.6%, 0.3%, 0); }
  to   { transform: scale(1.075) translate3d(0.8%, -0.5%, 0); }
}

@keyframes seal-mist {
  from { transform: translate3d(-3%, 1%, 0); opacity: 0.20; }
  to   { transform: translate3d(4%, -1%, 0); opacity: 0.40; }
}

@media (max-width: 640px) {
  .seal-media {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .act.seen > .act-art { transform: none !important; }
  .seal-media img,
  .seal-media::before { animation: none !important; }
}

/* 결과의 절 제목과 그 안의 유형·기간 제목을 다른 위계로 표시한다. */
.reading-section > .subsection-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0.5rem 0 -0.35rem 0.65rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--hairline);
}
.subsection-label {
  font-family: var(--serif);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--moon);
}
.subsection-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--washi);
  word-break: keep-all;
  overflow-wrap: anywhere;
}


/* 인트로 및 주요 이미지의 좌우 경계가 배경에 자연스럽게 녹아들도록 좌우 그라데이션 마스킹 */
.act-art img,
.seal-media img {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.10) 2%,
    rgba(0,0,0,0.38) 6%,
    rgba(0,0,0,0.78) 12%,
    #000 20%,
    #000 80%,
    rgba(0,0,0,0.78) 88%,
    rgba(0,0,0,0.38) 94%,
    rgba(0,0,0,0.10) 98%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.10) 2%,
    rgba(0,0,0,0.38) 6%,
    rgba(0,0,0,0.78) 12%,
    #000 20%,
    #000 80%,
    rgba(0,0,0,0.78) 88%,
    rgba(0,0,0,0.38) 94%,
    rgba(0,0,0,0.10) 98%,
    transparent 100%);
}

/* 상하 경계도 페이지 배경으로 부드럽게 연결 */
.act-art,
.seal-media {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.18) 6%,
    rgba(0,0,0,0.65) 14%,
    #000 25%,
    #000 72%,
    rgba(0,0,0,0.65) 84%,
    rgba(0,0,0,0.18) 94%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.18) 6%,
    rgba(0,0,0,0.65) 14%,
    #000 25%,
    #000 72%,
    rgba(0,0,0,0.65) 84%,
    rgba(0,0,0,0.18) 94%,
    transparent 100%);
}

/* 본문 텍스트 패럴랙스 슬라이드 & 부드러운 페이드인 */
@keyframes parallax-glide {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--glide-y, 24px), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.act > .act-era,
.act > .act-line,
.act > .act-body,
.act > .aside,
.act > .act-mark {
  opacity: 0;
  transform: translate3d(0, var(--glide-y, 24px), 0);
  will-change: opacity, transform;
}

.act.seen > .act-era,
.act.seen > .act-line,
.act.seen > .act-body,
.act.seen > .aside,
.act.seen > .act-mark {
  animation: parallax-glide 0.88s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.act > .act-era { --glide-y: 16px; }
.act.seen > .act-era { animation-delay: 0.06s; }

.act > .act-line { --glide-y: 28px; }
.act.seen > .act-line { animation-duration: 0.96s; animation-delay: 0.18s; }

.act > .act-body { --glide-y: 22px; }
.act.seen > .act-body { animation-duration: 0.92s; animation-delay: 0.32s; }

.act > .aside { --glide-y: 18px; }
.act.seen > .aside { animation-duration: 0.88s; animation-delay: 0.44s; }

.act > .act-mark { --glide-y: 12px; }
.act.seen > .act-mark { animation-duration: 0.82s; animation-delay: 0.22s; }

/* 봉인 화면 문구 및 진입 버튼 패럴랙스 등장 */
.seal-line,
.seal-ask,
.enter {
  opacity: 0;
  transform: translate3d(0, var(--glide-y, 22px), 0);
  will-change: opacity, transform;
}

.seal-stage.seen .seal-line {
  --glide-y: 26px;
  animation: parallax-glide 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both !important;
}
.seal-stage.seen .seal-ask {
  --glide-y: 20px;
  animation: parallax-glide 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both !important;
}
.seal-stage.seen .enter {
  --glide-y: 18px;
  animation: parallax-glide 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both !important;
}

/* 인트로의 달빛과 별: 화면에 들어온 장면만 천천히 움직인다. */
.gate { overflow: hidden; isolation: isolate; }
.gate::before {
  z-index: 1;
  background: radial-gradient(circle at 44% 40%, color-mix(in srgb, var(--moon) 24%, transparent), transparent 68%);
  animation: intro-moon-breathe 4s ease-in-out infinite alternate paused;
}
.gate::after {
  content: "";
  position: absolute;
  inset: 8% 0 20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 24%, var(--moon) 0 1.5px, transparent 3px),
    radial-gradient(circle at 78% 16%, var(--washi) 0 1.5px, transparent 3px),
    radial-gradient(circle at 86% 48%, var(--moon) 0 1.5px, transparent 3px),
    radial-gradient(circle at 28% 68%, var(--washi) 0 1.5px, transparent 3px),
    radial-gradient(circle at 64% 76%, var(--moon) 0 1.5px, transparent 3px);
  opacity: 0.35;
  animation: intro-star-drift 4.5s ease-in-out infinite alternate paused;
}
.gate-bg { animation: intro-gate-drift 7s ease-in-out infinite alternate paused; }
.gate.in-view::before, .gate.in-view::after, .gate.in-view .gate-bg { animation-play-state: running; }
@keyframes intro-gate-drift {
  from { transform: scale(1); opacity: 0.18; }
  to { transform: scale(1.06); opacity: 0.24; }
}
.gate:not(.in-view) .gate-scroll span { animation-play-state: paused; }
@keyframes intro-moon-breathe {
  from { opacity: 0.45; transform: translate(-50%, -62%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -62%) scale(1.08); }
}
@keyframes intro-star-drift {
  from { opacity: 0.15; transform: translateY(12px); }
  to { opacity: 0.9; transform: translateY(-12px); }
}
.act-art img {
  transform-origin: 50% 55%;
  animation: intro-art-drift 6s ease-in-out infinite alternate paused;
}
.act.in-view .act-art img { animation-play-state: running; }
@keyframes intro-art-drift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.07) translateY(-12px); }
}
.act-art::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 38% 42%, color-mix(in srgb, var(--moon) 22%, transparent), transparent 62%);
  opacity: 0;
  animation: intro-art-light 5s ease-in-out infinite alternate paused;
}
.act.in-view .act-art::before { animation-play-state: running; }
.act-final .act-art::before {
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--moon) 32%, transparent), transparent 58%);
}
@keyframes intro-art-light {
  from { opacity: 0.15; transform: translateX(-3%); }
  to { opacity: 0.8; transform: translateX(3%); }
}
.act-era::after {
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.act.seen .act-era::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  #intro .gate::before, #intro .gate::after, #intro .gate-bg,
  #intro .act-art img, #intro .act-art::before,
  #intro .act > *, #intro .seal-stage > * {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  #intro .gate::before { transform: translate(-50%, -62%) !important; }
  #intro .act > *, #intro .seal-stage > * { opacity: 1; }
  #intro .act-art::before { opacity: 0.2; }
  #intro .act-era::after { transform: none; transition: none; }
}

/* 본풀이 결과 일러스트도 좌우 경계가 배경에 매끄럽게 녹아들도록 처리 */
.birth-options { display: grid; gap: .65rem; min-width: 0; }
.birth-options select, .birth-options input:not([type="checkbox"]) {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px;
  background: var(--surface); color: var(--washi);
  border: 1px solid var(--faint, #7A808C); border-radius: 4px;
  padding: .65rem .8rem; font: inherit; font-size: 16px; color-scheme: dark;
}
.birth-options p, .personalization-label { color: var(--muted); font-size: .9rem; line-height: 1.8; }
.birth-clear { justify-self: start; min-height: 44px; background: none; color: var(--muted); border: 0; text-decoration: underline; cursor: pointer; }
.life-area, .calculation-note { border-top: 1px solid var(--faint); padding: 1rem 0; }
.calculation-note { margin: 2rem 0; color: var(--muted); font-size: .9rem; line-height: 1.9; }
.life-area summary, .calculation-note summary { cursor: pointer; min-height: 44px; padding: .5rem 0; }
.solar-variant + .solar-variant { margin-top: 1.5rem; }
.solar-variant h4 { font-weight: 400; color: var(--muted); }
.birth-options :focus-visible, .life-area summary:focus-visible, .calculation-note summary:focus-visible { outline: 2px solid var(--muted); outline-offset: 4px; }
.art-fig img {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.08) 2%,
    rgba(0,0,0,0.45) 6%,
    #000 14%,
    #000 86%,
    rgba(0,0,0,0.45) 94%,
    rgba(0,0,0,0.08) 98%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.08) 2%,
    rgba(0,0,0,0.45) 6%,
    #000 14%,
    #000 86%,
    rgba(0,0,0,0.45) 94%,
    rgba(0,0,0,0.08) 98%,
    transparent 100%);
}