/* ─── 기홍♥인하 · 종이 앨범북 ─────────────────────────────── */
:root{
  --paper:     oklch(97.5% 0.014 85);   /* 크림 종이 */
  --paper-2:   oklch(95.5% 0.02 80);
  --ink:       oklch(32% 0.028 45);     /* 따뜻한 먹색 */
  --ink-soft:  oklch(48% 0.03 45);
  --rose:      oklch(58% 0.12 18);      /* 장미빛 */
  --rose-deep: oklch(46% 0.13 15);
  --blush:     oklch(88% 0.05 20);
  --sage:      oklch(62% 0.055 140);
  --butter:    oklch(92% 0.06 95);
  --frame:     oklch(99% 0.005 90);     /* 폴라로이드 흰 테 */
  --serif: "Gowun Batang", serif;
  --sans:  "Gowun Dodum", sans-serif;
  --pen:   "Nanum Pen Script", cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  line-height:1.6;
}
/* 종이 질감 + 수채 얼룩 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52rem 36rem at 12% -6%,  oklch(90% 0.05 20 / .55), transparent 62%),
    radial-gradient(44rem 30rem at 105% 12%, oklch(91% 0.05 95 / .5),  transparent 60%),
    radial-gradient(40rem 40rem at 88% 92%,  oklch(90% 0.04 140 /.45), transparent 62%),
    radial-gradient(36rem 30rem at -4% 78%,  oklch(91% 0.045 20 /.4),  transparent 60%),
    var(--paper);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#petals{position:fixed;inset:0;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}

/* ─── 음악 버튼 ─── */
#music-btn{
  position:fixed;top:clamp(.9rem,3vw,1.5rem);right:clamp(.9rem,3vw,1.5rem);z-index:20;
  width:2.9rem;height:2.9rem;border-radius:50%;
  border:1px solid oklch(80% 0.05 20);
  background:var(--frame);color:var(--rose-deep);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px oklch(46% 0.13 15 / .12);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
#music-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px oklch(46% 0.13 15 / .18)}
#music-btn[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:var(--frame);animation:sway 2.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ─── 히어로 ─── */
.hero{
  min-height:88svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(3rem,8vw,5rem) 1.2rem 2rem;
}
.hero-date{
  font-family:var(--pen);font-size:clamp(1.25rem,3.4vw,1.7rem);color:var(--ink-soft);
  letter-spacing:.02em;
}
.hero-names{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.8rem,10vw,5.2rem);
  letter-spacing:.06em;margin:.2em 0 .1em;color:var(--ink);
}
.heart{
  display:inline-block;color:var(--rose);font-size:.5em;
  margin:0 .35em;vertical-align:.28em;
  animation:beat 1.6s ease-in-out infinite;transform-origin:center;
}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.12)}48%{transform:scale(1)}}
.dday{display:flex;align-items:baseline;gap:.5em;margin-top:.6rem}
.dday-label{font-size:clamp(1rem,2.6vw,1.2rem);color:var(--ink-soft)}
.dday-num{
  font-family:var(--serif);font-weight:700;color:var(--rose-deep);
  font-size:clamp(3rem,11vw,5.5rem);line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 var(--frame);
}
.hero-note{font-family:var(--pen);font-size:clamp(1.2rem,3vw,1.5rem);color:var(--rose);margin-top:1.1rem}
.hero-scroll{margin-top:auto;padding-top:2.5rem;color:var(--ink-soft);font-size:1.4rem;animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(6px);opacity:.9}}

/* ─── 섹션 공통 ─── */
main{max-width:72rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.sec-title{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(1.5rem,4.5vw,2.1rem);letter-spacing:.04em;
  margin:clamp(3rem,8vw,5rem) 0 1.6rem;
}
.sec-title .pen{
  font-family:var(--pen);font-weight:400;color:var(--rose);
  font-size:.85em;margin-right:.35em;
}

/* ─── 기념일 리본 ─── */
.milestones{position:relative}
.ms-track{
  display:flex;gap:.9rem;overflow-x:auto;padding:1.4rem .4rem 1.6rem;
  scroll-snap-type:x proximity;
  background:
    linear-gradient(to bottom, transparent 46%, oklch(70% 0.04 45 / .45) 46%,
      oklch(70% 0.04 45 / .45) calc(46% + 1.5px), transparent calc(46% + 1.5px));
  background-size:100% 100%;background-repeat:no-repeat;
  scrollbar-width:thin;scrollbar-color:var(--blush) transparent;
}
.ms-tag{
  flex:0 0 auto;scroll-snap-align:center;
  background:var(--frame);border:1px solid oklch(86% 0.03 60);
  border-radius:.35rem;padding:.75rem .95rem .65rem;min-width:7.4rem;text-align:center;
  box-shadow:0 3px 8px oklch(32% 0.03 45 / .08);
  position:relative;
  transform:rotate(var(--tilt,0deg)) translateY(var(--lift,0));
}
.ms-tag::before{ /* 집게핀 */
  content:"";position:absolute;top:-.55rem;left:50%;translate:-50% 0;
  width:.8rem;height:.9rem;border-radius:.15rem;
  background:linear-gradient(160deg, var(--sage), oklch(50% 0.06 140));
  box-shadow:0 1px 2px oklch(32% 0.03 45/.3);
}
.ms-tag.ms-bday::before{background:linear-gradient(160deg, oklch(78% 0.1 60), oklch(64% 0.13 30))} /* 생일은 살구빛 핀 */
.ms-tag.ms-bday .ms-d{font-size:1rem;white-space:nowrap}
.ms-tag.is-passed{opacity:.62}
.ms-tag.is-passed::after{
  content:"♡";position:absolute;right:.4rem;bottom:.3rem;
  font-size:.7rem;color:var(--rose);
}
.ms-tag.is-next{
  border-color:var(--rose);box-shadow:0 6px 16px oklch(46% 0.13 15/.2);
  --lift:-4px;
}
.ms-d{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink)}
.ms-tag.is-next .ms-d{color:var(--rose-deep)}
.ms-date{font-size:.78rem;color:var(--ink-soft);margin-top:.1rem}
.ms-left{font-family:var(--pen);font-size:1.05rem;color:var(--rose);margin-top:.15rem;line-height:1.1}

/* ─── 앨범 그리드 ─── */
.al-hint{font-family:var(--pen);font-size:1.15rem;color:var(--ink-soft);margin:-0.6rem 0 1rem}
.al-grid{
  display:grid;gap:clamp(1.4rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));
  padding-bottom:2rem;
}
.al-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--frame);
  padding:.7rem .7rem 1rem;
  border-radius:.2rem;
  box-shadow:0 4px 14px oklch(32% 0.03 45/.12), 0 1px 3px oklch(32% 0.03 45/.1);
  transform:rotate(var(--tilt));
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
.al-card:nth-child(4n+1){--tilt:-1.6deg}
.al-card:nth-child(4n+2){--tilt:1.2deg}
.al-card:nth-child(4n+3){--tilt:-0.7deg}
.al-card:nth-child(4n+4){--tilt:1.8deg}
.al-card::before{ /* 뒤에 깔린 사진 한 장 */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:.2rem;
  background:var(--paper-2);
  transform:rotate(calc(var(--tilt) * -1.8)) translate(3px,4px);
  box-shadow:0 2px 6px oklch(32% 0.03 45/.08);
}
.al-card::after{ /* 마스킹테이프 */
  content:"";position:absolute;top:-.6rem;left:50%;translate:-50% 0;
  width:5.2rem;height:1.35rem;transform:rotate(-2deg);
  background:oklch(88% 0.05 20/.75);
  box-shadow:inset 0 0 4px oklch(58% 0.12 18/.25);
  clip-path:polygon(2% 0,98% 4%,100% 96%,0 100%);
}
.al-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 14px 30px oklch(32% 0.03 45/.18);z-index:2}
.al-cover{
  aspect-ratio:1/1;overflow:hidden;background:var(--blush);
  display:grid;place-items:center;
}
.al-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.al-card:hover .al-cover img{transform:scale(1.045)}
.al-cover .no-img{font-size:2rem;opacity:.5}
.al-name{
  font-family:var(--pen);font-size:1.5rem;line-height:1.15;
  margin:.65rem .15rem 0;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.al-meta{font-size:.8rem;color:var(--ink-soft);margin:0 .15rem}
.al-empty{
  grid-column:1/-1;text-align:center;padding:3rem 1rem;
  border:1.5px dashed oklch(80% 0.05 20);border-radius:.6rem;color:var(--ink-soft);
}
.al-empty b{color:var(--rose-deep)}
.al-empty .pen{font-family:var(--pen);font-size:1.3rem}

/* ─── 푸터 ─── */
.foot{text-align:center;padding:3.5rem 1rem 2.5rem;color:var(--ink-soft)}
.foot-pen{font-family:var(--pen);font-size:1.35rem;color:var(--rose)}
.foot-sub{font-size:.8rem;margin-top:.3rem}
.foot-link{color:var(--ink-soft);text-decoration:underline dotted;text-underline-offset:3px}
.foot-link:hover{color:var(--rose-deep)}

/* ─── 등장 애니메이션 ─── */
.reveal{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
.reveal:nth-child(1){animation-delay:.05s}.reveal:nth-child(2){animation-delay:.2s}
.reveal:nth-child(3){animation-delay:.4s}.reveal:nth-child(4){animation-delay:.6s}
.reveal:nth-child(5){animation-delay:.8s}
@keyframes rise{to{opacity:1;transform:none}}
.in-view{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.in-view.seen{opacity:1;transform:rotate(var(--tilt,0deg))}

/* ─── 앨범 상세 페이지 ─── */
.ab-head{
  text-align:center;padding:clamp(2.5rem,7vw,4rem) 1.2rem 1.2rem;position:relative;
}
.ab-back{
  position:absolute;left:clamp(.9rem,3vw,1.6rem);top:clamp(1rem,3vw,1.6rem);
  font-size:.9rem;color:var(--ink-soft);text-decoration:none;
  border:1px solid oklch(86% 0.03 60);border-radius:2rem;padding:.35rem .9rem;
  background:var(--frame);transition:all .25s;
}
.ab-back:hover{color:var(--rose-deep);border-color:var(--rose)}
.ab-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,6vw,2.8rem);letter-spacing:.04em}
.ab-meta{font-family:var(--pen);font-size:1.2rem;color:var(--ink-soft);margin-top:.3rem}
.gallery{
  columns:3 14rem;column-gap:.9rem;
  max-width:76rem;margin:1.5rem auto 3rem;padding:0 clamp(.7rem,2.5vw,1.4rem);
}
.g-item{
  break-inside:avoid;margin-bottom:.9rem;cursor:zoom-in;position:relative;
  background:var(--frame);padding:.4rem;border-radius:.2rem;
  box-shadow:0 2px 8px oklch(32% 0.03 45/.1);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.g-item:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 22px oklch(32% 0.03 45/.16)}
.g-item img,.g-item video{width:100%;display:block;border-radius:.1rem;background:var(--blush)}
.g-item .vid-badge{
  position:absolute;right:.75rem;top:.75rem;background:oklch(32% 0.03 45/.7);color:var(--frame);
  border-radius:2rem;font-size:.72rem;padding:.15rem .55rem;letter-spacing:.05em;
}
/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:50;display:none;background:oklch(20% 0.02 45/.94)}
.lb.open{display:grid;place-items:center}
.lb img,.lb video{max-width:94vw;max-height:88vh;border-radius:.25rem;box-shadow:0 10px 50px oklch(0% 0 0/.5)}
.lb-btn{
  position:absolute;background:none;border:none;color:oklch(95% 0.01 85/.85);
  font-size:2rem;cursor:pointer;padding:1rem;line-height:1;font-family:var(--sans);
  transition:color .2s, transform .2s;
}
.lb-btn:hover{color:#fff;transform:scale(1.1)}
.lb-close{top:.4rem;right:.6rem}
.lb-prev{left:.3rem;top:50%;translate:0 -50%}
.lb-next{right:.3rem;top:50%;translate:0 -50%}
.lb-count{
  position:absolute;bottom:1rem;left:50%;translate:-50% 0;
  color:oklch(95% 0.01 85/.8);font-size:.85rem;letter-spacing:.08em;
}

@media (max-width:640px){
  .gallery{columns:2 9rem;column-gap:.55rem}
  .g-item{margin-bottom:.55rem;padding:.25rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  #petals{display:none}
}