/* 생신 축하 페이지: 따뜻한 종이·크림색, 손글씨 편지 (형광·그라디언트 없이) */
:root { --bg: #f6ecdf; --paper: #fffaf2; --ink: #3b2a20; --dim: #8a7362; --red: #c8463a; --gold: #c99a3d; --line: #e6d5c0; --green: #4f7a52; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: 'Noto Sans KR', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ───────── 1) 첫 화면 */
.gate { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px 60px; text-align: center; }
.gate h1 { font: 900 clamp(30px, 8vw, 44px) 'Noto Serif KR', serif; margin: 26px 0 8px; letter-spacing: -.01em; }
.hint { color: var(--dim); margin: 0 0 22px; font-size: 16px; }
#gateForm { display: flex; gap: 8px; width: min(360px, 100%); }
#gateName { flex: 1; min-width: 0; height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 700 20px 'Noto Sans KR', sans-serif; text-align: center; }
#gateName:focus { outline: none; border-color: var(--ink); }
#gateBtn { height: 54px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ink); color: var(--paper); font: 700 17px 'Noto Sans KR', sans-serif; cursor: pointer; }
#gateBtn:disabled { opacity: .5; }
.err { min-height: 22px; color: var(--red); font-weight: 700; margin: 12px 0 0; }
.gate.shake #gateForm { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }

/* 케이크 그림 (CSS) */
.cake { position: relative; width: 190px; height: 170px; }
.plate { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 50%; background: #e3d2bd; }
.tier { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 10px 10px 6px 6px; }
.tier.bottom { bottom: 8px; width: 170px; height: 62px; background: #8b5a3c; box-shadow: inset 0 14px 0 #fff3e4; }
.tier.top { bottom: 66px; width: 120px; height: 46px; background: #a9714c; box-shadow: inset 0 12px 0 #fff3e4; }
.tier.top::after, .tier.bottom::after { content: ''; position: absolute; left: 10%; right: 10%; top: 22px; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 22px); border-radius: 3px; opacity: .85; }
.candles { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.candles b { width: 9px; height: 30px; border-radius: 3px; background: repeating-linear-gradient(180deg, #fff 0 6px, #e7a7a1 6px 12px); }
.flames { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); display: flex; gap: 17px; }
.flames i { width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f4b942; box-shadow: 0 0 0 3px rgba(244,185,66,.25); animation: flick 1.1s infinite ease-in-out alternate; }
.flames i:nth-child(2) { animation-delay: .3s; } .flames i:nth-child(3) { animation-delay: .6s; }
@keyframes flick { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(1.15) rotate(3deg); } }

/* ───────── 2) 편지 */
.stage { min-height: 100vh; padding: 40px 16px 120px; display: flex; flex-direction: column; align-items: center; }
.envelope { position: relative; width: min(340px, 90vw); height: 220px; margin-top: 18vh; perspective: 800px; transition: transform .8s ease, opacity .8s ease; }
.env-back { position: absolute; inset: 0; background: #d8b996; border-radius: 10px; }
.env-front { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(to top right, #e9cfae 50%, transparent 50.5%) left / 50.5% 100% no-repeat, linear-gradient(to top left, #e9cfae 50%, transparent 50.5%) right / 50.5% 100% no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; z-index: 3; }
.env-front::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: #e3c39d; clip-path: polygon(0 100%, 50% 18%, 100% 100%); border-radius: 0 0 10px 10px; }
.env-front span { position: relative; font: 32px 'Nanum Pen Script', cursive; color: var(--ink); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; background: #cfa77d; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .7s ease; z-index: 4; border-radius: 10px 10px 0 0; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.away { transform: translateY(40vh) scale(.8); opacity: 0; }

.letter { position: relative; width: min(560px, 100%); background: var(--paper); border-radius: 6px; padding: 42px 28px 36px; box-shadow: 0 2px 0 var(--line), 0 18px 40px rgba(80,50,20,.12);
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, var(--line) 39px 40px); background-position: 0 30px; animation: rise .9s ease-out; }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } }
.stamp { position: absolute; right: 18px; top: 16px; margin: 0; padding: 6px 8px; border: 2px solid var(--red); color: var(--red); font: 700 13px/1.15 'Noto Serif KR', serif; text-align: center; transform: rotate(8deg); border-radius: 4px; background: var(--paper); }
.letter h2 { font: 900 clamp(24px, 6vw, 30px) 'Noto Serif KR', serif; margin: 0 0 18px; padding-right: 70px; word-break: keep-all; line-height: 1.35; }
.letter .body p { font: 27px/40px 'Nanum Pen Script', cursive; margin: 0 0 0; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; word-break: keep-all; }
.letter .body p + p { text-indent: 1em; }
.letter .body p:first-child { font-size: 30px; }
.letter .body p.show { opacity: 1; transform: none; }
.letter .from { font: 32px/40px 'Nanum Pen Script', cursive; text-align: right; margin: 20px 0 0; color: var(--ink); opacity: 0; transition: opacity .8s; }
.letter .from.show { opacity: 1; }

/* ───────── 3) 당겨서 선물 */
.giftzone { margin-top: 40px; text-align: center; animation: rise .7s ease-out; }
.pull-hint { font: 700 18px 'Noto Serif KR', serif; margin: 0 0 18px; animation: bob 1.6s infinite ease-in-out; }
@keyframes bob { 50% { transform: translateY(4px); } }
.box { position: relative; width: 170px; height: 300px; margin: 0 auto; touch-action: none; }
.base { position: absolute; left: 10px; right: 10px; top: 46px; height: 120px; background: var(--red); border-radius: 6px; box-shadow: inset 0 0 0 0 transparent; }
.base::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; background: var(--gold); }
.lid { position: absolute; left: 0; right: 0; top: 22px; height: 34px; background: #b13d32; border-radius: 6px; z-index: 2; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .6s; }
.lid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; background: var(--gold); }
.bow { position: absolute; left: 50%; top: -24px; width: 60px; height: 30px; margin-left: -30px; }
.bow::before, .bow::after { content: ''; position: absolute; top: 4px; width: 28px; height: 22px; border: 6px solid var(--gold); border-radius: 50% 50% 50% 50%; }
.bow::before { left: 0; transform: rotate(-20deg); } .bow::after { right: 0; transform: rotate(20deg); }
.string { position: absolute; left: 50%; top: 166px; width: 3px; height: 70px; margin-left: -1.5px; background: var(--gold); transform-origin: top; }
.handle { position: absolute; left: 50%; top: 230px; width: 76px; height: 46px; margin-left: -38px; border: 0; border-radius: 23px; background: var(--ink); color: var(--paper); font: 700 15px 'Noto Sans KR', sans-serif; cursor: grab; touch-action: none; box-shadow: 0 4px 0 #1f1610; }
.handle:active { cursor: grabbing; }
.box.opened .lid { transform: translateY(-120px) rotate(-25deg); opacity: 0; }
.box.opened .string, .box.opened .handle { opacity: 0; transition: opacity .3s; }

.gift { width: min(460px, 100%); margin-top: 20px; text-align: center; animation: pop .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.gift h3 { font: 900 24px 'Noto Serif KR', serif; margin: 0 0 6px; }
.gname { color: var(--dim); margin: 0 0 14px; }
.gimg { display: block; width: 100%; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: zoom-in; }
.gimg img { display: block; width: 100%; height: auto; border-radius: 8px; }
.gnote { color: var(--dim); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.gnote b { color: var(--ink); }
.zoom { position: fixed; inset: 0; z-index: 40; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: 88vh; }
.zoom p { color: #666; font-size: 13px; margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) { .letter .body p, .letter .from { transition: none; } .flames i, .pull-hint { animation: none; } }