:root{
  --brand-violet: #6A4C93;
  --brand-violet-soft: #D8B4E2;

  /* 세로 카드 비율(3:5)과 최대/최소 폭 */
  --ratio-w: 3;
  --ratio-h: 5;
  --max-width: 560px;
  --min-width: 320px;

  /* 배경 사진(히어로와 동일 변수 사용) */
  --intro-image: url("/static/images/wedding_photo_color.jpg");
  --intro-pos-x: var(--hero-focus-x, 50%);
  --intro-pos-y: var(--hero-focus-y, 50%);
}

/* 화면 전체 덮기 + 중앙 정렬 + 스크롤 잠금 */
.intro-typing{
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* 최상위 (모달은 2147483600) */
  display: grid;
  place-items: center;
  opacity: 1;
}
body.no-scroll{ overflow: hidden; }

/* 세로형 카드 프레임: 배경 '사진'은 여기 (항상 유지) */
.intro-frame{
  height: 100dvh;                                  /* 세로 꽉 채움 */
  aspect-ratio: var(--ratio-w) / var(--ratio-h);   /* 가로는 비율 */
  width: auto;
  max-width: min(var(--max-width), calc(100vw - 24px));
  min-width: var(--min-width);

  position: relative;
  overflow: hidden;
  isolation: isolate;                               /* 스택 분리 */
  border-radius: 0;                                 /* 각지게 */
  box-shadow: 0 18px 50px rgba(0,0,0,.18);

  /* 사진(없으면 보라 기본색) */
  background-color: #6A4C93;
  background-image: var(--intro-image, none);
  background-size: cover;
  background-position: var(--intro-pos-x) var(--intro-pos-y);
  background-repeat: no-repeat;

  /* 인트로 시작은 살짝 확대 → 히어로로 축소 이동 */
  transform: scale(1.03);
  transition:
    transform 900ms ease,
    left 900ms ease,
    top 900ms ease,
    width 900ms ease,
    height 900ms ease,
    opacity 700ms ease;
}

/* 비네팅/보라 오버레이 (사라져도 사진은 남음) */
.intro-vignette{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(216,180,226,.55), rgba(106,76,147,.55)),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.30));
  transition: opacity 1.1s ease;
}

/* 텍스트 레이어 (항상 위) */
.intro-content{
  position: absolute;
  inset: 0;
  z-index: 3;

  /* ✅ 중앙(타이핑) + 하단(고정문구) 그리드 */
  display: grid;
  grid-template-rows: 0.60fr auto; /* ✅ 조절포인트: 값 낮출수록 '중앙 텍스트'가 더 위로 */
  place-items: center;
  padding: 0 16px;

  /* 필요 시 전체 덩어리 이동 */
  /* transform: translateY(-2vh); */ /* ⬅️ 더 위로 밀고 싶으면 주석 해제 */
}

/* 중앙 타이핑(두 줄) */
.intro-lines{
  /* ✅ 중앙 정렬 + 흰 글씨 */
  text-align: center;
  color: #fff;

  /* ✅ 어두운 그림자(흰 글씨를 선명하게) */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);

  /* ✅ 글자 덩어리 미세 이동 (음수=위로) */
  transform: translateY(-3.5vh); /* 조절포인트: -2vh ~ -5vh 권장 */
}

.line{
  display: block;
  margin: .22em 0;
  min-height: 1.6em;
  border-right: none !important; /* 커서 제거 */
}
.line-title{
  font-family: 'OneStoreMobilePop', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;
  word-break: keep-all;
  font-size: clamp(22px, 5vw, 38px);
  letter-spacing: .02em;
  text-align: center;
  color: inherit; /* = #fff 유지 */
}
.line-names{
  font-family: 'Paperozi','Noto Serif KR', serif;
  font-weight: 600;
  font-size: clamp(16px, 4vw, 24px);
  text-align: center;
  color: inherit; /* = #fff 유지 */
}

/* 하단 고정 문구 */
.bottom-meta{
  align-self: end;

  /* ✅ 위치 조정: 발끝 정도로 올리기 */
  margin-bottom: 50px;          /* ⬅️ 아래 여백 (8px→32px) */
  transform: translateY(-120px); /* ⬅️ 위로 20px. 더 올리면 -24px, 덜 올리면 -12px */

  /* 항상 보이게(타이핑과 무관) */
  opacity: 1 !important;
  transition: none !important;

  /* ✅ 중앙 정렬 + 흰 글씨 */
  text-align: center;
  color: #fff;

  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-size: clamp(12px, 3.1vw, 15px);
}

/* 종료 상태: 오버레이만 페이드 + 카드 줌아웃 */
.intro-typing.is-done .intro-vignette{
  opacity: 0;
  pointer-events: none;
}
.intro-typing.is-done .intro-frame{
  transform: scale(1.0);
}

/* 본문 페이드인 */
#content{
  opacity: 0;
  transform: translateY(10px) scale(.985);
  filter: blur(4px);
  transition: opacity 800ms ease, transform 800ms ease, filter 900ms ease;
}
body.content-reveal #content{
  opacity: 1;
  transform: none;
  filter: none;
}

/* 반응형 미세 튜닝 */
@media (max-width: 480px) {
  .intro-content { grid-template-rows: 0.68fr auto; }  /* 모바일은 덜 올림 */
  .intro-lines   { transform: translateY(-3vh); }      /* 모바일 미세조정 */
}
@media (min-width: 768px) {
  .intro-content { grid-template-rows: 0.55fr auto; }  /* 태블릿+는 더 올림 */
  .intro-lines   { transform: translateY(-4vh); }      /* 태블릿+ 미세조정 */
  .bottom-meta   { transform: translateY(-120px);}
}

/* 데스크톱: 사이트가 정해둔 최대폭만 지키고(=가운데 카드 느낌), 그 범위 안에서 꽉 채움 */
@media (min-width: 768px){
  .intro-frame{
    width: min(100%, var(--max-width));  /* 컨테이너 기준 100% */
    max-width: var(--max-width);         /* 예: 560px */
    min-width: var(--min-width);
  }
}

/* 모바일: 브라우저 좌우 여백 없이 진짜 꽉 채움 */
@media (max-width: 767.98px){
  .intro-frame{
    width: 100vw;           /* 좌우 여백 제거 */
    max-width: 100vw;
    min-width: 100vw;
    aspect-ratio: auto;     /* 세로 100dvh로 계산되도록 */
    height: 100dvh;         /* 세로도 꽉 */
    box-shadow: none;       /* 모서리/그림자에서 생기는 미세한 띠 방지(선택) */
    border-radius: 0;
  }
}


/* 참고: 더 과감히 올리고 싶다면 택1로 수치만 조정 */
   .intro-lines { transform: translateY(-10.5vh); }
   .bottom-meta { transform: translateY(-120px); }


/* 인트로 상단 우측의 '음악 켜기' 작은 버튼 */
.intro-sound-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  user-select: none;
}
.intro-sound-btn[hidden] { display: none; }

/* ✅ 데스크톱일 때 가운데 인트로 프레임의 오른쪽 위에 고정 */
@media (min-width: 768px) {
  .intro-frame {
    position: relative;  /* 버튼의 기준이 될 부모 */
  }
  .intro-sound-btn {
    right: 20px;         /* 인트로 프레임 안쪽 오른쪽 상단 */
    top: 20px;
  }
}

/* =========================
   Intro full-bleed & bottom text position (final overrides)
   ========================= */

/* 0) 기본 여백/스크롤 이슈 방지 */
html, body { margin: 0; padding: 0; }
.intro-typing { overflow: hidden; }

/* 1) 모바일: 진짜 풀블리드 (여백 제로) */
@media (max-width: 767.98px){
  .intro-typing .intro-frame{
    width: 100svw !important;      /* 안전한 viewport 폭 */
    height: 100dvh !important;     /* iOS/안드로이드 모두 대응 */
    max-width: 100svw !important;
    min-width: 100svw !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-size: cover !important;
    background-position: var(--intro-pos-x) var(--intro-pos-y) !important;
  }
}

/* 2) 데스크톱: 사이트가 정한 가로폭만 유지(카드 느낌) */
@media (min-width: 768px){
  .intro-typing .intro-frame{
    width: min(100%, var(--max-width)); /* 예: 560px */
    max-width: var(--max-width);
    min-width: var(--min-width);
    height: 100dvh;                     /* 세로는 풀로 */
  }
}

/* 3) 하단 문구를 '절대위치'로 고정해서 확실히 올리기 */
.intro-typing .intro-content { position: relative; } /* 기준 */
.intro-typing .bottom-meta{
  position: absolute;
  left: 0; right: 0;
  /* 원하는 높이만큼 위로: 숫자만 조절하면 됨 */
  bottom: -705px;   /* ↔ 여기 값만 올리거나 내려서 미세조정 */
  margin: 0 !important;
  transform: none !important;         /* 이전 transform 무력화 */
  text-align: center;
  color: #fff;
}

/* 4) 중앙 타이틀/이름 블록은 네가 찾은 값 유지 (예시) */
.intro-typing .intro-lines{
  transform: translateY(-8vh, -7vh ) !important;  /* 이미 맘에 든 위치 */
}

/* =========================
   👇 최종 위치 조정 (유성미 확정 버전)
   ========================= */
.intro-typing .intro-lines {
  transform: translateY(120px) !important; /* 중앙 텍스트를 아래로 내림 */
}

.intro-typing .bottom-meta {
  bottom: -705px !important; /* 하단 문구가 너무 낮으면 여기서 조정 */
}