@font-face{
  font-family:"Erotica";
  src: url("./fonts/erotica.woff2") format("woff2");
  font-display: swap;
}

:root{
  --ink:#fff;
  --bg1:#0a0d12;
  --bg2:#05070a;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  background: radial-gradient(120% 120% at 50% 10%, var(--bg1) 0%, var(--bg2) 65%);
  color:var(--ink);
  overflow-x:hidden;
  cursor: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">\
  <path fill="%23ffffff" d="m12 2l2.39 5.74L20.5 8l-4.55 3.93L17.3 18L12 14.9L6.7 18l1.35-6.07L3.5 8l6.11-.26z"/></svg>') 6 6, auto;
}

#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.page{ position:relative; z-index:1 }
.fullbleed{ width:100vw; margin-left:calc(50% - 50vw) }

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  padding:6vh 0 12vh;
  isolation:isolate;
  overflow:hidden;
}
.word{
  position:absolute; margin:0;
  font-family:"Erotica","Bickham Script Pro","Great Vibes",cursive;
  font-weight:400; color:#f2efe6;
  white-space:nowrap; line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  transform-origin:left center;
}
.word a{ color:inherit; text-decoration:none }

/* 위치 조정 */
.w-joyful{ left:8vw;  top:10vh; font-size:clamp(48px,14vw,220px); transform:rotate(-12deg) }
/* 가운데 정렬: grateful을 화면 중앙으로 */
.w-grateful{ left:50%; top:28vh; transform:translateX(-50%) rotate(-8deg); font-size:clamp(48px,14vw,220px) }
.w-enchanted{ right:6vw; bottom:14vh; font-size:clamp(48px,14vw,220px); transform:rotate(-10deg) }

/* 스티커: hero 내부에서만 이동하도록 absolute */
.sticker{
  position:absolute; z-index:3;
  width:84px; height:84px; border-radius:50%;
  border:0; padding:0;
  background:center/cover no-repeat url("https://i.pinimg.com/1200x/3e/4f/b1/3e4fb11fe4f2de733667182ed7158e19.jpg");
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  cursor:grab; user-select:none;
}
.sticker:active{ cursor:grabbing; transform:translateY(1px) }

.scroll-down{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:#cfd9ff; text-decoration:none; font-size:22px; opacity:.7;
}

/* PLATE */
.plate-section{
  min-height:100svh; display:flex; justify-content:center; align-items:center;
  background:#000;
}
.plate-viewport{
  position:relative; width:100vw; height:100svh; overflow:hidden;
  display:flex; justify-content:center; align-items:center;
}
.plate{
  height:min(92svh,1100px);
  width:auto; object-fit:contain;
  filter:contrast(1.05) brightness(1.05);
  pointer-events:none;
}
.plate-text{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(26ch, 28vw);
  text-align:center; color:#0c0c0c;
  font-family:'Fasthand', cursive;
  font-size:clamp(11px,1.35vw,16px);
  line-height:1.3; letter-spacing:.01em;
  background:transparent; border:0; padding:0;
  text-shadow:0 0 .5px rgba(0,0,0,.35);
  cursor:pointer;
}

/* 라이트박스 */
.lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.85); z-index:20; }
.lightbox.open{ display:grid }
.lightbox .close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:0px; background:#000; color:#fff; font-size:24px; cursor:pointer; }
.lightbox-img{ max-width:min(92vw,1100px); max-height:86svh; border-radius:0px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* 메모 모달(제목 제거) */
.note-modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.75); z-index:30; }
.note-modal.open{ display:grid }
.note-card{ width:min(720px,92vw); max-height:86svh; overflow:auto; background:#fff; color:#111; border-radius:0px; padding:28px 26px; box-shadow:0 30px 80px rgba(0,0,0,.5); position:relative; }
.note-card p{ margin:0; text-align:center; font-family:'Fasthand',cursive; font-size:clamp(16px,2.1vw,22px); line-height:1.9; white-space:pre-wrap; }
.note-close{ position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:10px; background:#fff; color:#fff; font-size:24px; cursor:pointer; }