.birthday-hero { display: none; }
html[data-season="birthday"] .hero { display: none; }
html[data-season="birthday"] .birthday-hero { display: block; }
.birthday-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fbf0e0;
  border-bottom: 1px solid #ebd8c9;
}
.birthday-stage { position: relative; max-width: 1920px; margin: auto; aspect-ratio: 3 / 2; max-height: 850px; min-height: 650px; }
.birthday-scene { position: absolute; inset: 0; background: url('birthday-window.webp') center / cover no-repeat; }
.birthday-copy {
  position: absolute; z-index: 1; left: max(6%, calc((100% - 1180px) / 2)); top: 24%; width: 39%; max-width: 500px;
  color: #61433c; text-shadow: 0 1px 12px #fff8eaaa;
}
.birthday-date { display: flex; align-items: center; gap: 14px; color: #986858; font-size: 0.76rem; letter-spacing: 0.14em; margin: 0 0 24px; }
.birthday-date::before { content: ''; width: 32px; height: 1px; background: #b48b77; }
.birthday-copy h1 { font-size: clamp(2.3rem, 4.2vw, 4.2rem); line-height: 1.27; letter-spacing: -0.045em; margin: 0 0 26px; font-weight: 700; }
.birthday-copy h1 span { display: block; color: #a76469; }
.birthday-copy p.birthday-wish { font-size: clamp(0.95rem, 1.25vw, 1.12rem); line-height: 1.95; color: #79564b; margin-bottom: 26px; }
.birthday-signature { font-size: 0.78rem; color: #947264; letter-spacing: 0.05em; }
.birthday-letter-trigger {
  position: absolute; left: 66%; top: 77%; width: 210px; min-height: 122px; padding: 22px 20px;
  border: 1px solid #dfc7b5; border-radius: 2px; color: #98636a; text-align: left;
  background: repeating-linear-gradient(0deg, transparent 0 25px, #d5a3a328 25px 26px), #fffaf1;
  box-shadow: 0 9px 20px #71442b28, 0 2px 3px #71442b22;
  transform: rotate(-7deg); cursor: pointer; font: inherit;
  transition: transform 450ms ease, box-shadow 450ms ease;
}
.birthday-letter-trigger:hover { transform: rotate(-3deg) translateY(-5px); box-shadow: 0 16px 26px #71442b30; }
.birthday-letter-trigger:focus-visible { outline: 3px solid #9e626d; outline-offset: 6px; }
.birthday-letter-trigger .letter-to { display: block; font-size: 1.6rem; font-family: 'Gamja Flower', 'Bird Pretendard', sans-serif; }
.birthday-letter-trigger .letter-hint { display: block; margin-top: 12px; font-size: 0.72rem; color: #8c6b5f; }
.birthday-modal { border: 0; padding: 0; background: transparent; color: #674a46; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; perspective: 1200px; }
.birthday-modal::backdrop { background: #4e363954; backdrop-filter: blur(4px); }
body.birthday-modal-open { overflow: hidden; }
.birthday-paper { position: relative; padding: 54px 44px 38px; background: #fff8f7; border: 1px solid #ebcfce; border-radius: 5px; transform-origin: center top; box-shadow: inset 0 0 60px #f2d9ce38; }
.birthday-modal[open] .birthday-paper { animation: birthday-unfold 1000ms cubic-bezier(.18,.65,.25,1) both; }
.birthday-paper::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #cfb2a02b; box-shadow: 0 2px 4px #ffffff; pointer-events: none; }
.birthday-paper-copy { position: relative; }
.birthday-modal[open] .birthday-paper-copy { animation: birthday-ink 850ms 500ms both; }
.birthday-paper-date { color: #a17b70; font-size: 0.75rem; letter-spacing: 0.13em; }
.birthday-paper h2 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 24px 0; color: #a06470; line-height: 1.4; }
.birthday-paper-message { font-family: 'Gamja Flower', 'Bird Pretendard', sans-serif; font-size: 1.35rem; line-height: 1.9; }
.birthday-paper-message p { margin: 0 0 22px; }
.birthday-paper-sign { text-align: right; font-size: 0.82rem; color: #9d7376; margin: 24px 0 30px; }
.birthday-paper .birthday-form-link { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; padding: 13px 20px; border-radius: 7px; background: #a96373; color: #fffaf8; font-size: 0.86rem; font-weight: 700; text-decoration: none; text-align: center; }
.birthday-letter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.birthday-paper .birthday-letter-actions a { display: flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 13px 10px; min-height: 46px; border: 1px solid #b57584; border-radius: 7px; font-size: .82rem; font-weight: 700; text-align: center; text-decoration: none; }
.birthday-rolling-link { color: #965969; background: #fffaf8; }
.birthday-letter-actions a:focus-visible { outline: 3px solid #855462; outline-offset: 3px; }
.birthday-modal[open] .birthday-rolling-link { animation: birthday-ink 750ms 1000ms both; }
.birthday-modal[open] .birthday-form-link { animation: birthday-ink 750ms 1000ms both; }
.birthday-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid #eacfcf; background: #fffcfa; border-radius: 50%; color: #855660; font-size: 1.4rem; cursor: pointer; }
@keyframes birthday-unfold { from { opacity: 0; transform: translateY(32px) rotateX(-65deg) scale(.9); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes birthday-ink { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.message-card.note-birthday, .letter-dialog.note-birthday {
  --note-paper: #fff1f4; --note-rule: rgba(176, 95, 120, .13); --note-tape: rgba(255, 233, 194, .85);
  border-color: #e3b8c4;
  box-shadow: inset 0 0 0 4px #fff9f8, inset 0 0 0 5px #d4ac8638, 0 12px 32px #9c64731c;
}
.message-card.note-birthday::after, .letter-dialog.note-birthday::before {
  content: ''; position: absolute; width: 28px; height: 28px; top: 12px; right: 12px; pointer-events: none;
  background: radial-gradient(ellipse at 38% 38%, #c68a9859 0 14%, transparent 17%), radial-gradient(ellipse at 70% 59%, #c7a87752 0 13%, transparent 16%), radial-gradient(ellipse at 41% 78%, #c68a983d 0 10%, transparent 13%);
}
.message-card.note-birthday::before, .letter-dialog.note-birthday::after {
  background: linear-gradient(90deg, transparent 7px, #c39a6330 7px 8px, transparent 8px calc(100% - 8px), #c39a6330 calc(100% - 8px) calc(100% - 7px), transparent calc(100% - 7px)), var(--note-tape);
  border-color: #dcc09466;
}
.letter-dialog.note-birthday::before { top: 29px; right: 27px; }
.occasion-badge.occasion-birthday, .message-card.note-birthday > .occasion-badge { background: #f8dfe6; border-color: #e6bfc9; color: #9d5b70; }
.birthday-preview-banner { padding: 12px 20px; text-align: center; background: #f7e6eb; color: #845963; font-size: .82rem; }
.birthday-preview-banner a { margin-left: 16px; color: inherit; }
.birthday-preview-sample { max-width: 1080px; margin: 36px auto; padding: 0 22px; }
.birthday-preview-sample h2 { font-size: 1.05rem; margin-bottom: 8px; }
.birthday-preview-sample > p { color: #94777b; font-size: .82rem; }
.birthday-preview-sample .message-card { width: min(100%, 350px); margin-top: 28px; }
.birthday-preview-sample .message-open { text-decoration: none; display: inline-flex; align-items: center; }
@media (min-width: 1550px) { .birthday-stage { min-height: 760px; } }
@media (max-width: 760px) {
  .birthday-stage { aspect-ratio: auto; min-height: 0; max-height: none; height: auto; padding-top: 305px; }
  .birthday-copy { left: 26px; right: 26px; top: 38px; width: auto; max-width: none; }
  .birthday-copy h1 { font-size: clamp(2.15rem, 7.8vw, 3.2rem); margin-bottom: 15px; }
  .birthday-date { margin-bottom: 16px; }
  .birthday-copy p.birthday-wish { font-size: .96rem; line-height: 1.8; margin-bottom: 12px; }
  .birthday-scene { position: relative; height: clamp(390px, 95vw, 590px); background-size: auto 112%; background-position: 70% 50%; }
  .birthday-scene::before { content: ''; position: absolute; inset: 0 0 auto; height: 70px; background: linear-gradient(#fbf0e0, transparent); }
  .birthday-letter-trigger { width: 172px; min-height: 103px; top: auto; left: auto; right: 8%; bottom: 22px; padding: 16px 20px; }
  .birthday-letter-trigger .letter-to { font-size: 1.4rem; }
  .birthday-letter-trigger .letter-hint { margin-top: 7px; }
  .birthday-paper { padding: 40px 24px 30px; }
  .birthday-paper-message { font-size: 1.2rem; }
  .birthday-modal::backdrop { backdrop-filter: none; }
}
@media (max-width: 420px) { .birthday-letter-actions { grid-template-columns: 1fr; } }
html:not([data-birthday-released="true"]) .fanart-card[data-publish-at="2026-09-22T00:00:00+09:00"] { display: none; }