/* =============================================
   하을이의 10년 성장 이야기 — style.css
   밝고 귀엽고 화사한 테마 ✨
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --m50:  #edfdf8;
  --m100: #c3f5e8;
  --m200: #86ead4;
  --m300: #4dd9bc;
  --m400: #26c4a4;
  --m500: #1aaa8c;
  --m600: #148a71;
  --m700: #0f6b58;

  --coral:  #ff8585;
  --yellow: #ffe566;
  --pink:   #ffafd0;
  --lilac:  #d4b8ff;
  --peach:  #ffcfa0;
  --sky:    #a8e8ff;

  --bg:    #f5fef9;
  --white: #ffffff;
  --dark:  #1a3a2e;
  --mid:   #3d6b5c;
  --cream: #fffcf4;

  --r-sm: 18px;
  --r-md: 28px;
  --r-lg: 40px;
  --r-xl: 60px;

  --shadow-soft: 0 8px 32px rgba(26,170,140,.12);
  --shadow-pop:  0 16px 48px rgba(26,170,140,.2);

  --ease: cubic-bezier(.4,0,.2,1);

  /* 귀여운 폰트 우선순위 */
  --font-cute:  'Jua', 'Gaegu', sans-serif;
  --font-body:  'Noto Sans KR', sans-serif;
  --font-serif: 'Noto Serif KR', serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--dark);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 떠다니는 장식 ── */
.floaties {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floaty {
  position: absolute;
  top: -60px;
  left: var(--x);
  font-size: calc(1.1rem * var(--s, 1));
  animation: floatDown 14s linear var(--d, 0s) infinite;
  opacity: 0;
}
@keyframes floatDown {
  0%   { transform: translateY(-60px) rotate(0deg);   opacity: 0; }
  8%   { opacity: .45; }
  92%  { opacity: .45; }
  100% { transform: translateY(110vh) rotate(400deg); opacity: 0; }
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-slides { position: absolute; inset: 0; }
.h-slide {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease;
  /* 이미지 선명도·채도·생동감 향상 */
  filter: brightness(1.08) saturate(1.2) contrast(1.04);
}
.h-slide.on { opacity: 1; }

/* 오버레이: 상단은 거의 투명, 하단만 살짝 어둡게 (텍스트 가독성) */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.05)    0%,
    rgba(0,0,0,.0)     30%,
    rgba(0,0,0,.0)     55%,
    rgba(10,50,40,.48) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 48px 52px 44px;
  animation: popIn .9s var(--ease) both;

  /* 글자 뒤 박스 오버레이 */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 32px;
  border: 1.5px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 48px rgba(0,0,0,.25),
              inset 0 1px 0 rgba(255,255,255,.1);
  max-width: 680px;
}

/* 연도 뱃지 */
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  border-radius: 50px;
  padding: 7px 22px;
  font-family: var(--font-cute);
  font-size: .95rem;
  letter-spacing: .1em;
  margin-bottom: 24px;
  color: #fff;
}

/* 히어로 제목 — Jua 폰트로 귀엽게 */
.hero-title {
  font-family: var(--font-cute);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1.2;
  /* 텍스트 뒤에 부드러운 그림자로 가독성 확보 */
  text-shadow: 0 2px 12px rgba(0,0,0,.55),
               0 6px 32px rgba(0,0,0,.35);
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.hero-title em {
  font-style: normal;
  color: #b2f5e8;
  display: block;
  font-size: 1.05em;
  text-shadow: 0 0 40px rgba(178,245,232,.5),
               0 2px 12px rgba(0,0,0,.55);
}

.hero-sub {
  font-family: 'Gaegu', cursive;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #fff;
  line-height: 2;
  margin-bottom: 40px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.hero-actions {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
}

.btn-primary {
  padding: 15px 38px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--m300), var(--m400));
  color: #fff;
  border: none;
  font-family: var(--font-cute);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(77,217,188,.5),
              0 2px 0 rgba(0,0,0,.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  letter-spacing: .02em;
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 36px rgba(77,217,188,.6);
}

/* 음악 버튼 */
.music-pill {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 200;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50px;
  padding: 8px 18px 8px 10px;
  color: #fff;
  font-family: var(--font-cute);
  font-size: .88rem;
  cursor: pointer;
  transition: background .25s;
}
.music-pill:hover { background: rgba(255,255,255,.32); }
.music-note {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m300), var(--m500));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(77,217,188,.4);
}
.music-pill.playing .music-note { animation: spin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 스크롤 힌트 */
.scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%); z-index: 3;
}
.scroll-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.7);
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(10px); opacity: 1; }
}

/* ══════════════════════════════
   INTRO CARD
══════════════════════════════ */
.intro-section {
  padding: 80px 0 72px;
  background: var(--cream);
  position: relative; z-index: 1;
}

.intro-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 60px 52px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-pop),
              0 0 0 3px var(--m100);
  overflow: visible;
}

/* 반짝이 데코 */
.intro-card::before,
.intro-card::after {
  content: '✨';
  position: absolute;
  font-size: 1.6rem;
  animation: twinkle 2s ease-in-out infinite;
}
.intro-card::before { top: -18px; left: 32px; }
.intro-card::after  { top: -18px; right: 32px; animation-delay: 1s; }

@keyframes twinkle {
  0%,100% { transform: scale(1) rotate(-10deg); opacity: .8; }
  50%      { transform: scale(1.25) rotate(10deg); opacity: 1; }
}

.sticker {
  position: absolute;
  font-size: 2.2rem;
  animation: wiggle 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.sticker-tl { top: -22px; left: 28px; }
.sticker-tr { top: -22px; right: 28px; animation-delay: .9s; }

@keyframes wiggle {
  0%,100% { transform: rotate(-10deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.12); }
}

.intro-tag {
  font-family: var(--font-cute);
  font-size: 1.05rem;
  color: var(--m400);
  margin-bottom: 16px;
  letter-spacing: .05em;
}

.intro-card h2 {
  font-family: var(--font-cute);
  font-size: 2rem;
  color: var(--dark);
  margin-bottom: 24px;
  letter-spacing: -.01em;
}

.intro-body {
  font-size: 1rem;
  line-height: 2.15;
  color: var(--mid);
  font-family: var(--font-body);
}
.intro-body strong { color: var(--m500); font-weight: 700; }

/* ══════════════════════════════
   CHAPTER 공통
══════════════════════════════ */
.chapter { padding: 0 0 88px; position: relative; z-index: 1; }

.chapter-header {
  padding: 72px 20px 56px;
  text-align: center;
}
.chapter-header.mint {
  background: linear-gradient(180deg, var(--m50) 0%, #fff 100%);
}
.chapter-header.pink {
  background: linear-gradient(180deg, #fff4f9 0%, #fff 100%);
}
.chapter-header.white { background: transparent; }

.chap-num {
  display: inline-block;
  font-family: var(--font-cute);
  font-size: .88rem;
  color: var(--m500);
  background: var(--m50);
  border: 2px solid var(--m200);
  padding: 4px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  letter-spacing: .08em;
}
.tree-chapter .chap-num {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #b2f5e8;
}

.chapter-header h2 {
  font-family: var(--font-cute);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  color: var(--dark);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.tree-chapter h2 { color: #fff; }

.chapter-header p {
  font-family: 'Gaegu', cursive;
  font-size: 1.1rem;
  color: var(--mid);
  line-height: 2;
}
.tree-chapter p { color: rgba(255,255,255,.78); }

/* ══════════════════════════════
   생일 타임라인
══════════════════════════════ */
.bday-timeline {
  position: relative;
  padding: 20px 0;
}
.bday-timeline::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    var(--m200) 0%, var(--pink) 40%,
    var(--m300) 70%, var(--yellow) 100%);
  transform: translateX(-50%);
  border-radius: 4px;
}

.bday-item {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  padding: 28px 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.bday-item.vis { opacity: 1; transform: none; }

.bday-item:nth-child(odd)  .bday-photo { order: 0; padding-right: 24px; }
.bday-item:nth-child(odd)  .bday-dot   { order: 1; }
.bday-item:nth-child(odd)  .bday-info  { order: 2; text-align: left; padding-left: 28px; }

.bday-item:nth-child(even) .bday-photo { order: 2; padding-left: 24px; }
.bday-item:nth-child(even) .bday-dot   { order: 1; }
.bday-item:nth-child(even) .bday-info  { order: 0; text-align: right; padding-right: 28px; }

.bday-dot {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--white);
  border: 3.5px solid var(--m300);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
  box-shadow: 0 0 0 7px var(--m50),
              0 6px 20px rgba(77,217,188,.3);
  z-index: 2; position: relative;
}

.bday-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  border: 4px solid var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bday-photo img:hover {
  transform: scale(1.03) rotate(-1.5deg);
  box-shadow: 0 24px 60px rgba(26,170,140,.28);
}

.bday-year {
  font-family: var(--font-cute);
  font-size: 3rem;
  color: var(--m400);
  line-height: 1;
  margin-bottom: 6px;
}

.bday-age-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--m100), var(--pink));
  color: var(--m700);
  font-family: var(--font-cute);
  font-size: .82rem;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.bday-msg {
  font-family: 'Gaegu', cursive;
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.9;
}

/* ══════════════════════════════
   나무 섹션
══════════════════════════════ */
.tree-chapter {
  background: linear-gradient(155deg, #0b4f3e 0%, #167a60 50%, #0a3d30 100%);
  padding-bottom: 80px;
}

.tree-deco-top {
  height: 64px;
  background: linear-gradient(180deg, #fff 0%, transparent 100%);
}
.tree-deco-bot {
  height: 64px;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
}

.tree-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}

.tree-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  opacity: 0;
  transform: scale(.92) translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  border: 2.5px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.tree-card.vis { opacity: 1; transform: none; }
.tree-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.tree-card:hover img { transform: scale(1.1); }
.tree-card:hover { border-color: rgba(178,245,232,.4); }

.tree-card-info {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,50,40,.9) 0%, transparent 55%);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
}
.tree-card-year {
  font-family: var(--font-cute);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tree-card-sub {
  font-family: 'Gaegu', cursive;
  font-size: .76rem;
  color: #b2f5e8;
  margin-top: 3px;
}

/* 나무 비교 */
.tree-vs {
  display: flex; align-items: center;
  justify-content: center;
  gap: 40px; flex-wrap: wrap;
  padding: 0 12px;
}
.tree-vs-item {
  text-align: center; cursor: pointer;
}
.tree-vs-item img {
  width: 260px; height: 340px;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 4px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 56px rgba(0,0,0,.3);
  transition: transform .3s var(--ease), border-color .3s;
}
.tree-vs-item:hover img {
  transform: scale(1.04);
  border-color: rgba(178,245,232,.45);
}
.tree-vs-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--m300), var(--m500));
  color: #fff;
  font-family: var(--font-cute);
  font-size: 1rem;
  padding: 5px 18px;
  border-radius: 50px;
  margin-top: 14px;
  box-shadow: 0 4px 14px rgba(77,217,188,.4);
}
.tree-vs-label {
  font-family: 'Gaegu', cursive;
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  margin-top: 6px;
}
.tree-vs-arrow {
  font-size: 3rem;
  color: #b2f5e8;
  font-weight: 300;
  flex-shrink: 0;
  opacity: .7;
}

/* ══════════════════════════════
   추억 갤러리
══════════════════════════════ */
.ytabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}
.ytab {
  padding: 8px 22px;
  border-radius: 50px;
  border: 2px solid var(--m200);
  background: transparent;
  color: var(--mid);
  font-family: var(--font-cute);
  font-size: .92rem;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.ytab:hover {
  border-color: var(--m400);
  color: var(--m500);
  background: var(--m50);
  transform: translateY(-2px);
}
.ytab.on {
  background: linear-gradient(135deg, var(--m300), var(--m400));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(77,217,188,.4);
  transform: translateY(-2px);
}

/* 슬라이드 */
.slide-box { position: relative; margin-bottom: 24px; }

.slide-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dark);
  aspect-ratio: 16/9;
  max-height: 100vh;
  position: relative;
  box-shadow: var(--shadow-pop),
              0 0 0 4px var(--m100);
}
.slide-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .45s ease;
  cursor: zoom-in;
}
.slide-frame img:hover {
  filter: brightness(1.04);
}

.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 30px;
  background: linear-gradient(to top, rgba(10,55,45,.9), transparent);
  color: #fff;
  font-family: 'Gaegu', cursive;
  font-size: 1.12rem;
  line-height: 1.7;
  min-height: 72px;
  display: flex; align-items: flex-end;
}

.slide-bar {
  position: absolute; bottom: 0; left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--m300), var(--m400));
  border-radius: 3px;
  transition: width .15s linear;
  z-index: 5;
}
.slide-cnt {
  position: absolute; top: 14px; right: 16px;
  background: rgba(0,0,0,.4);
  color: rgba(255,255,255,.9);
  font-family: var(--font-cute);
  font-size: .8rem;
  padding: 4px 14px;
  border-radius: 50px;
  z-index: 5;
}

.snav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: none;
  font-size: 1.6rem; color: var(--m600);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: all .22s var(--ease);
  line-height: 1; z-index: 6;
}
.snav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(26,170,140,.25);
}
.sprev { left: -24px; }
.snext { right: -24px; }

/* 썸네일 그리드 */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.titem {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--m100);
  transition: transform .22s var(--ease);
  border: 2.5px solid transparent;
}
.titem:hover { transform: scale(1.05); }
.titem img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.titem.active {
  border-color: var(--m400);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(77,217,188,.4);
}
.titem-more {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(77,217,188,.85), rgba(26,170,140,.85));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cute);
  font-size: 1.15rem;
}

/* ══════════════════════════════
   ENDING
══════════════════════════════ */
.ending-section {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ending-slides { position: absolute; inset: 0; }
.e-slide {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 2.2s ease;
}
.e-slide.on { opacity: 1; }
.ending-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,70,55,.6), rgba(8,50,40,.82));
}

.ending-content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
  padding: 48px 24px;
  animation: popIn .8s var(--ease) both;
}
.ending-emoji {
  font-size: 4.5rem;
  margin-bottom: 24px;
  animation: wiggle 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 16px rgba(178,245,232,.4));
}
.ending-content h2 {
  font-family: var(--font-cute);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  margin-bottom: 22px;
  text-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.ending-content p {
  font-family: 'Gaegu', cursive;
  font-size: 1.2rem;
  line-height: 2.2;
  color: rgba(255,255,255,.88);
  margin-bottom: 44px;
}
.ending-years {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  font-family: var(--font-cute);
  font-size: 1.1rem;
  color: #b2f5e8;
}
.ending-years b { color: rgba(255,255,255,.22); font-weight: 400; }

/* ══════════════════════════════
   라이트박스
══════════════════════════════ */
.lb {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 9999;
  align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb-inner {
  max-width: 90vw; max-height: 90vh;
  text-align: center;
}
.lb-inner img {
  max-width: 100%; max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  transition: opacity .6s ease;
}
.lb-inner img.fade {
  opacity: 0;
}

/* 라이트박스 하단 진행바 */
.lb-bar {
  position: fixed;
  bottom: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--m300), var(--m400));
  border-radius: 2px;
  transition: width .15s linear;
  z-index: 10000;
}

/* 자동재생 토글 버튼 */
.lb-auto-btn {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 50px;
  color: rgba(255,255,255,.8);
  font-family: var(--font-cute);
  font-size: .82rem;
  padding: 6px 18px;
  cursor: pointer;
  z-index: 10000;
  transition: background .2s;
}
.lb-auto-btn:hover { background: rgba(255,255,255,.24); }
.lb-inner p {
  font-family: var(--font-cute);
  color: rgba(255,255,255,.6);
  margin-top: 12px; font-size: .9rem;
}
.lb-close {
  position: fixed; top: 20px; right: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; z-index: 10;
}
.lb-close:hover { background: rgba(255,255,255,.28); }
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; line-height: 1;
}
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

/* ══════════════════════════════
   애니메이션
══════════════════════════════ */
@keyframes popIn {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════
   맨 위로 버튼
══════════════════════════════ */
.top-btn {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m300), var(--m500));
  color: #fff;
  border: none;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(77,217,188,.45),
              0 2px 0 rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(16px) scale(.85);
  transition: opacity .35s var(--ease),
              transform .35s var(--ease),
              box-shadow .25s;
  pointer-events: none;
  line-height: 1;
}
.top-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.top-btn:hover {
  box-shadow: 0 12px 32px rgba(77,217,188,.6);
  transform: translateY(-3px) scale(1.07);
}

/* ══════════════════════════════
   엔딩 성장 문구
══════════════════════════════ */
.ending-growing {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 36px auto 0;
  max-width: 520px;
  flex-wrap: wrap;
  justify-content: center;
}
.growing-line {
  flex: 1;
  min-width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent, rgba(178,245,232,.5), transparent);
}
.growing-text {
  font-family: var(--font-cute);
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  color: rgba(255,255,255,.9);
  text-align: center;
  line-height: 1.85;
  text-shadow: 0 2px 16px rgba(0,0,0,.2);
  white-space: nowrap;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { text-shadow: 0 2px 16px rgba(0,0,0,.2),
                          0 0 0 rgba(178,245,232,0); }
  50%      { text-shadow: 0 2px 16px rgba(0,0,0,.2),
                          0 0 24px rgba(178,245,232,.35); }
}

/* ══════════════════════════════
   반응형
══════════════════════════════ */
@media (max-width: 900px) {
  .tree-strip { grid-template-columns: repeat(3,1fr); }
  .tree-vs-item img { width: 200px; height: 260px; }
}
@media (max-width: 700px) {
  .bday-timeline::before { left: 30px; }
  .bday-item {
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .bday-item:nth-child(odd)  .bday-photo,
  .bday-item:nth-child(even) .bday-photo {
    order: 1; grid-column: 2; padding: 0;
  }
  .bday-item:nth-child(odd)  .bday-dot,
  .bday-item:nth-child(even) .bday-dot {
    order: 0; grid-column: 1; grid-row: 1;
    justify-self: center; align-self: start; margin-top: 8px;
  }
  .bday-item:nth-child(odd)  .bday-info,
  .bday-item:nth-child(even) .bday-info {
    order: 2; grid-column: 2;
    text-align: left; padding: 0;
  }
  .sprev { left: 4px; }
  .snext { right: 4px; }
  .intro-card { padding: 48px 24px; }
  .tree-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .tree-vs { gap: 20px; }
  .tree-vs-item img { width: 140px; height: 186px; }
  .tree-vs-arrow { font-size: 2rem; }
}