/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Orbit&display=swap');

/* 기본 리셋 (CodePen 보강) */
html, body { height: 100%; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }

/* 공통 */
body {
  overflow: hidden;
  font-family: "Orbit", sans-serif;
  background: #fff;
  color: #000;
  transition: background-color 0.35s ease;
  cursor: wait;
}

/* 배경 이미지 (항상 맨뒤) */
#slideshow {
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: auto;
  display: block;
  -webkit-user-drag: none; /* 필요없으면 삭제 가능 */
  user-select: none;
}

/* 단계별 이미지 위치 미세 조정 */
body.stage6 #slideshow {
  transform: translate(calc(-50% - 10px), calc(-50% + 5px));
}

/* 텍스트 오버레이 (이미지 위) */
.overlay {
  position: fixed;
  /* inset: 0;  → 일부 검증기 경고 회피용으로 개별 지정 */
  top: 0; right: 0; bottom: 0; left: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #000;
  pointer-events: none; /* 내부 텍스트는 클릭 막기 */
  padding: 4vw;
  z-index: 100;         /* 배경 위로 */
}
.stack { width: min(1000px, 94vw); margin: auto; text-align: center; }

/* 1단계 */
.title {
  font-weight: 450;
  font-size: clamp(30px, 13vw, 100px);
  margin: 12vh 0 15vh;
}
.quote1 {
  font-weight: 300;
  font-size: clamp(14px, 3.6vw, 26px);
  line-height: 1.35;
  opacity: 0.9;
  margin: 0 0 2rem;
}
.hint {
  font-size: clamp(10px, 1.4vw, 16px);
  letter-spacing: 0.02em;
  opacity: 0.75;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 30% { opacity: 0; } }

/* 2~6단계 배경 색상 */
body.stage2 { background: #d0d0d0; color: #fff; }
body.stage3 { background: #8c8c8c; color: #fff; }
body.stage4 { background: #4a4a4a; color: #fff; }
body.stage5 { background: #2e2e2e; color: #fff; }
body.stage6 { background: #151515; color: #fff; }

/* 7단계: 완전 검은 화면 */
body.stage7 { background: #000; color: #fff; }
body.stage7 .overlay { display: grid; place-items: center; text-align: center; }
.quote7 {
  display: none;
  color: #fff;
  font-size: clamp(8px, 2vw, 15px);
  animation: blink7 1.5s ease-in-out infinite;
  margin-left: 15px;
  margin-top: -10px;
}
@keyframes blink7 {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

/* 이전 단계별 텍스트 공통 */
.quote2, .quote3, .quote4, .quote5, .quote6 {
  display: none;
  font-weight: 300;
  white-space: pre-line;
  color: #fff;
}
.quote2 { font-size: clamp(10px, 4vw, 20px); line-height: 1.5; }
.quote3 { font-size: clamp(8px, 4vw, 15px); line-height: 1.6; }
.quote4 { font-size: clamp(8px, 3.3vw, 13px); line-height: 1.5; opacity: 0.95; }
.quote5 { font-size: clamp(5px, 3vw, 10px); line-height: 1.45; opacity: 0.95; }
.quote6 { font-size: clamp(3px, 2.7vw, 6px); line-height: 1.42; opacity: 0.96; }

/* 단계별 표시 제어 */
body.stage2 .title,
body.stage2 .quote1,
body.stage2 .hint,
body.stage3 .title,
body.stage3 .quote1,
body.stage3 .hint,
body.stage3 .quote2,
body.stage4 .title,
body.stage4 .quote1,
body.stage4 .hint,
body.stage4 .quote2,
body.stage4 .quote3,
body.stage5 .title,
body.stage5 .quote1,
body.stage5 .hint,
body.stage5 .quote2,
body.stage5 .quote3,
body.stage5 .quote4,
body.stage6 .title,
body.stage6 .quote1,
body.stage6 .hint,
body.stage6 .quote2,
body.stage6 .quote3,
body.stage6 .quote4,
body.stage6 .quote5,
body.stage7 .title,
body.stage7 .quote1,
body.stage7 .hint,
body.stage7 .quote2,
body.stage7 .quote3,
body.stage7 .quote4,
body.stage7 .quote5,
body.stage7 .quote6 { display: none; }

body.stage2 .quote2 { display: block; }
body.stage3 .quote3 { display: block; }
body.stage4 .quote4 { display: block; }
body.stage5 .quote5 { display: block; }
body.stage6 .quote6 { display: block; }
body.stage7 .quote7 { display: block; }

/* ===================== */
/* 고정 배지 / 정보 카드 */
/* ===================== */

/* 배지 */
.fixed-badge {
  font-family: "Orbit", sans-serif;
  position: fixed;
  z-index: 20000;         /* 최상단 */
  top: 13px;
  left: 13px;
  opacity: 0.8;
  background: darkseagreen;
  color: honeydew;
  font-size: 13px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 2px darkgreen;
  pointer-events: auto;
}

/* 카드 */
.credit-card {
  font-family: "Orbit", sans-serif;
  position: fixed;
  z-index: 20001;         /* 배지보다 위 */
  top: 50px;
  left: 16px;
  background: honeydew;
  color: darkgreen;
  padding: 12px 14px;
  border-radius: 5px;
  box-shadow: 0 2px 2px darkseagreen;
  width: max-content;
  max-width: min(80vw, 145px);
  font-size: 10px;
  pointer-events: auto;

  /* 토글 애니메이션 */
  overflow: hidden;
  max-height: 0;          /* 닫힘 상태 */
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
}

/* hidden 속성 초기화 (HTML에서 hidden 토글 사용) */
.credit-card[hidden] { display: none; }

/* 열림 상태 */
.credit-card.open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  display: block;         /* hidden 제거 시 보이게 */
}

.credit-card strong { font-weight: 700; }
.credit-card .label { opacity: .8; margin-right: 6px; }
.credit-card .row { margin: 4px 0; }