:root{
  --cream:#fff8f4;
  --paper:#fffdfb;
  --red:#a80f1e;
  --deep-red:#680914;
  --black:#171316;
  --gold:#bd8a55;
  --muted:#7a6064;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--black);
  background:
    radial-gradient(circle at 80% 0%,rgba(212,31,50,.12),transparent 34rem),
    linear-gradient(180deg,#fffaf7 0%,#fff1ef 48%,#f8e8e6 100%);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.entry-screen{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at center,rgba(166,14,31,.22),transparent 42rem),
    rgba(17,8,12,.94);
  transition:opacity .55s ease,visibility .55s ease;
}
.entry-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.entry-card{
  width:min(92vw,560px);
  padding:44px 30px;
  text-align:center;
  color:#fff7f5;
  border:1px solid rgba(255,224,225,.46);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(82,5,17,.96),rgba(25,12,17,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 0 50px rgba(255,255,255,.04);
}
.entry-card .bell{font-size:36px;color:#ffb6be}
.eyebrow{margin:10px 0;color:#dca0a8;font-size:13px;font-weight:900;letter-spacing:.18em}
.entry-card h1{margin:16px 0 28px;font-size:clamp(28px,6vw,48px);line-height:1.35}
.entry-card button{
  width:min(100%,320px);padding:17px 24px;
  color:white;font-size:20px;font-weight:900;
  border:1px solid #ffb8c0;border-radius:999px;
  background:linear-gradient(135deg,#7e0d1a,#d31d30);
  box-shadow:0 0 32px rgba(219,31,50,.38);
  cursor:pointer;
}
.entry-card small{display:block;margin-top:14px;color:#b89399}
.site{width:min(100%,1200px);margin:0 auto;padding:14px 10px 80px}
.hero{overflow:hidden;border:1px solid rgba(123,42,50,.2);border-radius:26px;background:#fff;box-shadow:0 24px 70px rgba(91,15,26,.16)}
.hero img,.profile-card,.comic-cut,.night-interlude img{display:block;width:100%;height:auto}
.quick-nav{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:14px 0 24px;padding:10px;
  border:1px solid rgba(130,24,38,.18);border-radius:999px;
  background:rgba(255,248,246,.86);backdrop-filter:blur(10px);
  box-shadow:0 12px 32px rgba(91,15,26,.09);
}
.quick-nav a{padding:10px 15px;border:1px solid #e9c9cd;border-radius:999px;background:#fff;color:#7b1522;font-size:14px;font-weight:900}
.ticket{
  position:relative;
  display:grid;grid-template-columns:.9fr 1.4fr;gap:28px;
  margin:0 auto 30px;padding:26px;
  border:1px solid #dfb8bd;border-radius:22px;
  background:
    linear-gradient(90deg,transparent 0 49%,rgba(169,15,30,.06) 49% 51%,transparent 51%),
    #fffdfb;
  box-shadow:0 18px 50px rgba(91,15,26,.11);
}
.ticket .label{display:block;color:#8d555d;font-size:12px;font-weight:900;letter-spacing:.2em}
.ticket strong{display:block;color:var(--deep-red);font-size:clamp(36px,6vw,62px);letter-spacing:.03em}
.ticket dl{margin:0}
.ticket dl div{display:grid;grid-template-columns:90px 1fr;padding:8px 0;border-bottom:1px dashed #e9ced1}
.ticket dt{color:#9c7076;font-size:12px;font-weight:900}.ticket dd{margin:0;font-weight:900}
.heart-secret{
  position:absolute;right:18px;top:15px;
  width:44px;height:44px;border:0;border-radius:50%;
  color:white;background:linear-gradient(135deg,#b60e22,#e03c4d);
  box-shadow:0 8px 20px rgba(176,14,34,.25);
  cursor:pointer;
}
.heart-secret.pulse{animation:pulse .42s ease}
.secret-message{
  grid-column:1/-1;
  margin:0;max-height:0;opacity:0;overflow:hidden;
  color:#8e1723;font-weight:900;text-align:center;
  transition:.35s ease;
}
.secret-message.show{max-height:60px;opacity:1;margin-top:4px}
.section{margin-top:30px}
.section-heading{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0 4px}
.section-heading>span{
  display:grid;place-items:center;width:48px;height:48px;
  border-radius:15px;color:white;font-weight:900;
  background:linear-gradient(135deg,#6d0913,#b20f22);
}
.section-heading p{margin:0;color:#a05f67;font-size:12px;font-weight:900;letter-spacing:.12em}
.section-heading h2{margin:3px 0 0;font-size:clamp(26px,4vw,43px)}
.profile-card{border:1px solid rgba(126,34,46,.19);border-radius:22px;background:#fff;box-shadow:0 22px 62px rgba(91,15,26,.15)}
.chapter-card{
  width:min(100%,900px);margin:0 auto 20px;padding:28px;text-align:center;
  border:1px solid #dfb8bd;border-radius:22px;background:#fffdfb;
}
.chapter-card p{margin:0;color:#a80f1e;font-weight:900;letter-spacing:.22em}
.chapter-card h2{margin:10px 0;font-size:clamp(29px,5vw,50px)}
.chapter-card span{color:var(--muted);line-height:1.7}
.comic-viewer{width:min(100%,1080px);margin:0 auto}
.comic-cut{margin:0 auto 10px;background:#fff;box-shadow:0 10px 30px rgba(72,12,20,.12)}
.night-interlude{position:relative;margin:0 auto 10px;overflow:hidden;background:#000}
.night-interlude img{min-height:55vh;object-fit:cover}
.night-copy{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  color:white;background:radial-gradient(circle,rgba(130,0,18,.16),transparent 55%);
}
.night-copy span{color:#b76a75;font-size:12px;font-weight:900;letter-spacing:.28em}
.night-copy p{margin:12px 0 0;font-family:serif;font-size:clamp(26px,5vw,48px);letter-spacing:-.03em}
.reservation{
  width:min(100%,900px);margin:36px auto 0;padding:clamp(28px,5vw,54px);
  text-align:center;border:1px solid #dbadb4;border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(197,20,39,.11),transparent 28rem),
    #fffdfb;
  box-shadow:0 24px 70px rgba(91,15,26,.16);
}
.reservation h2{margin:12px 0 24px;font-size:clamp(30px,6vw,54px);line-height:1.35}
.reservation-slip{margin:0 auto 24px;border:1px dashed #d2a0a8;border-radius:18px;padding:8px 18px;background:#fff8f7}
.reservation-slip div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid #f0d7da}
.reservation-slip div:last-child{border-bottom:0}
.reservation-slip span{color:#a16e75;font-size:12px;font-weight:900;letter-spacing:.12em}
.reservation-slip strong{color:#72101a}
.reserve-button{
  display:flex;align-items:center;justify-content:center;
  min-height:78px;padding:18px 30px;
  border-radius:20px;color:white;font-size:clamp(22px,4vw,34px);font-weight:900;
  background:linear-gradient(135deg,#720a16,#d31d30);
  border:1px solid #ffb4bd;
  box-shadow:0 18px 40px rgba(177,15,35,.3),inset 0 0 20px rgba(255,255,255,.12);
}
.link-note{color:#9b7075;font-size:13px;font-weight:800}
footer{text-align:center;margin-top:30px;color:#a98489;font-size:12px;letter-spacing:.18em}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes pulse{50%{transform:scale(1.18)}}
@media(max-width:650px){
  .site{padding:0 0 56px}
  .hero,.profile-card{border-radius:0;border-left:0;border-right:0}
  .quick-nav{position:static;margin:10px 8px 18px;border-radius:18px}
  .ticket{grid-template-columns:1fr;margin:0 10px 24px;padding:22px 18px}
  .ticket strong{font-size:46px}
  .section-heading{padding:0 12px}
  .comic-cut,.night-interlude{margin-bottom:0}
  .reservation{border-radius:0;border-left:0;border-right:0}
  .night-interlude img{min-height:48vh}
}