/* 종류 ③ 러브레터 · 크라프트 봉투 + 버건디 밀랍, 줄 노트 편지지, 폴라로이드와 마스킹테이프 */
:root{
  --page:#E7DCCB; --paper:#FDFAF3; --fg:#3B3129; --sub:#8B7D6D; --line:#E2D7C6;
  --accent:#8E2F3A; --on-accent:#fff; --sun:#8E2F3A;
  --font:'Gowun Batang','Nanum Myeongjo',serif; --disp:'Gowun Batang',serif; --pen:'Nanum Pen Script',cursive; --script:'Mrs Saint Delafield',cursive;
  --card:#FDFAF3; --fab-bg:rgba(142,47,58,.7);
}
body{background:var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper{max-width:480px;margin:0 auto;padding:30px 24px 50px;background-color:var(--paper);background-image:linear-gradient(transparent 33px,rgba(110,140,180,.16) 34px);background-size:100% 34px;box-shadow:0 10px 50px rgba(80,60,40,.18);overflow:hidden}
.pen{font-family:var(--pen)}
/* 머리: 받는 사람·우표·소인 */
.lt-head{position:relative;height:120px}
.to{font:400 30px/1 var(--pen);padding-top:30px}
.stamp{position:absolute;top:6px;right:6px;width:76px;height:94px;padding:6px;background:#fff;outline:6px dotted var(--paper);outline-offset:-3px;transform:rotate(3deg);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.stamp img{width:100%;height:100%;object-fit:cover}
.post{position:absolute;top:44px;right:56px;width:86px;height:86px;border-radius:50%;border:2px solid rgba(60,60,100,.5);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(60,60,100,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-14deg);color:rgba(60,60,100,.6);font:700 9px/1.4 sans-serif;letter-spacing:.14em}
.post b{font-size:11px;letter-spacing:.06em}
/* 표지 폴라로이드 */
.hero{position:relative;width:88%;margin:14px auto 40px;background:#fff;padding:12px 12px 62px;transform:rotate(-2deg);box-shadow:0 14px 30px rgba(60,40,20,.22)}
.hero img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero .pen{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:32px;color:var(--fg)}
.tape{position:absolute;width:96px;height:26px;background:rgba(214,190,150,.6);box-shadow:0 1px 2px rgba(0,0,0,.06);z-index:2}
.t1{top:-12px;left:14%;transform:rotate(-7deg)}
.t2{top:-10px;right:12%;transform:rotate(6deg)}
/* 편지 */
.sec{padding:34px 0 10px}
.letter{font-size:15.5px;line-height:34px;padding:0 4px}
.sign{text-align:right;font:400 32px/1.2 var(--pen);margin-top:18px}
.sign span{display:block;font:400 34px/1 var(--script);color:var(--accent)}
.fam{margin-top:30px;padding:18px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);text-align:center;font-size:14px}
.hd{text-align:center;font-size:18px;font-weight:700;letter-spacing:.06em;margin-bottom:20px}
.hd span{display:block;font:400 44px/1.1 var(--script);color:var(--accent);font-weight:400;letter-spacing:0}
.sub{text-align:center;color:var(--sub);font-size:13px;margin:-10px 0 18px}
/* 우리 이야기 */
.tl{list-style:none;position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;border-left:2px dashed rgba(142,47,58,.35)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 42%;gap:6px 14px;align-items:center;margin-bottom:30px}
.tl li::before{content:"";position:absolute;left:-22px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.tl-d{grid-column:1/-1;font:400 26px/1 var(--pen);color:var(--accent)}
.tl-b h3{font-size:15.5px;margin-bottom:4px}
.tl-b p{font-size:13.5px;line-height:1.8;color:var(--fg)}
/* 날짜 */
.when{text-align:center;font-size:15px;line-height:1.9}
.when small{display:block;color:var(--sub);font-size:12.5px}
.calw{position:relative;background:#fff;margin:20px 6px;padding:16px 12px 10px;box-shadow:0 6px 18px rgba(60,40,20,.1);transform:rotate(.6deg)}
.cal-m{text-align:center;font:400 26px/1 var(--pen);margin-bottom:6px}
.cal td{position:relative}
.cal td.on span{background:none;color:var(--accent);font-weight:700}
.circ{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%) rotate(-8deg);fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.3s ease .5s;pointer-events:none}
.calw.in .circ,html:not(.rv-on) .circ{stroke-dashoffset:0}
.dd{text-align:center;font:400 28px/1.2 var(--pen);margin:10px 0 18px}
.dd b{color:var(--accent);font-weight:400}
.day,.place{text-align:center}
.place .ways,.place .maplinks{text-align:left}
.mapcard{position:relative;background:#fff;padding:8px;margin:18px 4px;box-shadow:0 6px 18px rgba(60,40,20,.12);transform:rotate(-.8deg)}
.mapcard .map{height:210px}
/* 폴라로이드 사진첩 */
.pols{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;padding:6px 4px}
.pol{position:relative;display:block;background:#fff;padding:8px 8px 30px;box-shadow:0 8px 18px rgba(60,40,20,.18);transform:rotate(var(--r))}
.rv-on .pol[data-rv]{transform:translateY(18px) rotate(var(--r))}
.rv-on .pol[data-rv].in{transform:rotate(var(--r))}
.pol img{width:100%;aspect-ratio:1;object-fit:cover}
.pol-c{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:400 18px/1 var(--pen)}
.pol .tape{width:60px;height:18px;top:-9px;left:50%;margin-left:-30px;transform:rotate(-4deg)}
.pols .pol:nth-child(3n){margin-top:18px}
/* 답장·편지함 */
.postcard{position:relative;background:#fff;border:1px solid var(--line);padding:24px 20px 20px;text-align:center;font-size:14.5px;line-height:1.9;box-shadow:0 6px 16px rgba(60,40,20,.1)}
.postcard .btn-solid{margin-top:16px}
.gb{margin-top:34px}
.gb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.gb-head h3{font:400 30px/1 var(--pen)}
.note{background:#FFF6D8;border:0;padding:16px 36px 14px 16px;margin:12px 4px;box-shadow:0 4px 10px rgba(60,40,20,.12);transform:rotate(-.7deg)}
.note:nth-child(even){transform:rotate(.8deg);background:#F6EADF}
.note .gb-by{font:400 20px/1 var(--pen);color:var(--fg);margin-top:8px}
.heart .cts{margin-top:20px}
.ps{text-align:center;padding:40px 0 10px}
.ps .pen{font-size:28px}
.ps-btn{display:flex;gap:8px;justify-content:center;margin-top:26px}
/* 밀랍 봉인 */
.seal{display:grid;place-items:center;width:56px;height:56px;border-radius:48% 52% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 35% 30%,#B44A55,#6E1E28 72%);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 0 4px rgba(0,0,0,.12),inset 0 0 0 7px rgba(255,255,255,.06);color:#F2CFC8;font:400 22px/1 var(--script)}
.seal i{font-size:15px;margin:0 1px;font-style:normal}
.seal.big{width:76px;height:76px;margin:30px auto 0;font-size:30px}
/* 봉투에서 꺼내기 */
.lt-intro{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");transition:opacity 1s ease,visibility 1s;touch-action:none}
.lt-intro.gone{opacity:0;visibility:hidden}
.li-to{font:400 30px/1.2 var(--pen);text-align:center;margin-bottom:18px}
.li-to small{font-size:24px;color:var(--sub)}
.env{position:relative;width:min(80vw,330px);aspect-ratio:1.5;margin-top:120px;cursor:grab;user-select:none;-webkit-user-select:none}
.env-in{position:absolute;inset:0;background:#A97F55;border-radius:3px;box-shadow:0 26px 50px rgba(60,40,20,.35)}
.env-flap{position:absolute;left:0;right:0;bottom:100%;height:56%;background:linear-gradient(0deg,#B98F63,#C9A274);clip-path:polygon(0 100%,50% 0,100% 100%)}
.card{position:absolute;left:7%;right:7%;top:-40%;height:112%;z-index:2;background:#FFFDF8;padding:16px 18px;box-shadow:0 -2px 10px rgba(0,0,0,.08);transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .6s;background-image:linear-gradient(transparent 27px,rgba(110,140,180,.18) 28px);background-size:100% 28px}
.card-to{font:400 24px/28px var(--pen)}
.card-l{font:400 30px/56px var(--pen);color:var(--accent)}
.env-front{position:absolute;inset:0;z-index:3;background:linear-gradient(160deg,#D8B587,#C49B6C);clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);border-radius:3px;transition:transform .8s ease,opacity .8s}
.env-front .seal{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%)}
.env-in,.env-flap{transition:transform .8s ease,opacity .8s}
.lt-intro.pulled .card{transform:translateY(-62%)}
.lt-intro.pulled .env-front,.lt-intro.pulled .env-in,.lt-intro.pulled .env-flap{transform:translateY(46%);opacity:0}
.lt-intro.unfold .card{transform:translateY(-62%) scale(1.25);opacity:0}
.li-hint{margin-top:34px;font-size:14px;color:var(--fg);display:flex;align-items:center;gap:8px}
.arrow{width:10px;height:10px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(45deg)}}
.li-btn{margin-top:14px;font-size:13px;color:var(--sub);text-decoration:underline;text-underline-offset:4px}