/* 오이쁨 v2 — MZ 부티크 · 다꾸 스티커 · 아기자기 (2026-10-01 형: 「아기자기, MZ 부티크, 스티커처럼」) */
:root{
  --ink:#24502F; --ink2:#3C6B45; --cu:#77AD4F; --cu2:#5E9A3C;
  --cream:#FFF8EE; --paper:#FFFDF8; --mint:#D6EFDD; --pink:#FFD3DA; --hot:#FF6F8E; --butter:#FFEDB0; --lav:#E6DDFB; --peach:#FFE0CC;
  --sub:#6E7B6C; --line:#EFE6D8; --shadow:0 10px 30px rgba(60,80,50,.10);
  --r:22px; --disp:"Jua","Pretendard Variable",Pretendard,sans-serif; --hand:"Nanum Pen Script",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 "Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:-.5px}
.hand{font-family:var(--hand);font-size:1.35em;line-height:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ── 스티커 — 투명 그림에 흰 칼선 + 그림자 ── */
.stk{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 10px rgba(40,60,30,.18))}
.tilt-l{transform:rotate(-6deg)}.tilt-r{transform:rotate(5deg)}
.float{animation:float 5s ease-in-out infinite}
.float2{animation:float 6.5s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;background:#fff;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--ink),0 6px 0 var(--ink);font-family:var(--disp);font-size:16px;color:var(--ink);white-space:nowrap}
.pill.pk{background:var(--pink)}.pill.mt{background:var(--mint)}.pill.bt{background:var(--butter)}.pill.lv{background:var(--lav)}.pill.hot{background:var(--hot);color:#fff}
.tape{position:absolute;width:86px;height:26px;background:repeating-linear-gradient(45deg,rgba(255,211,218,.85) 0 8px,rgba(255,255,255,.85) 8px 16px);
  top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.06)}
.tape.mt{background:repeating-linear-gradient(45deg,rgba(214,239,221,.9) 0 8px,rgba(255,255,255,.85) 8px 16px)}
.tape.bt{background:repeating-linear-gradient(45deg,rgba(255,237,176,.9) 0 8px,rgba(255,255,255,.85) 8px 16px)}

/* ── 쿠폰 — 홈 파인 티켓 + 절취선 ── */
.coupon{position:relative;display:flex;background:#fff;border-radius:18px;overflow:visible;box-shadow:var(--shadow);min-height:110px;
  -webkit-mask:radial-gradient(circle 14px at 70% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at 70% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 14px at 70% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at 70% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.coupon .cl{flex:0 0 70%;padding:16px 18px;border-right:2px dashed #E8DCC8}
.coupon .cr{flex:1;display:grid;place-items:center;text-align:center;padding:10px;background:var(--butter)}
.coupon.pk .cr{background:var(--pink)}.coupon.mt .cr{background:var(--mint)}.coupon.lv .cr{background:var(--lav)}
.coupon .big{font-family:var(--disp);font-size:28px;line-height:1;color:var(--hot)}
.coupon s{color:var(--sub);font-size:13px}

/* ── 폴라로이드 ── */
.pola{position:relative;background:#fff;padding:12px 12px 16px;border-radius:6px;box-shadow:var(--shadow)}
.pola img.ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.pola .cap{font-family:var(--hand);font-size:24px;margin-top:8px;line-height:1.1}
.pola .st{position:absolute;width:74px}

/* ── 공통 단추 ── */
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border-radius:18px;background:var(--ink);color:#fff;
  font-family:var(--disp);font-size:19px;border:0;box-shadow:0 6px 0 #12301A;transition:transform .1s,box-shadow .1s}
.btn2:active{transform:translateY(4px);box-shadow:0 2px 0 #12301A}
.btn2.pk{background:var(--hot);box-shadow:0 6px 0 #C94566}
.btn2.wh{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 6px 0 var(--ink)}
.btn2 img{width:26px;height:26px}

/* ── 배경 방울 ── */
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;opacity:.9}
.sec{position:relative;padding:90px 0}
.sec h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.15;margin:0 0 14px;letter-spacing:-1px}
.sec .lead{font-size:clamp(16px,1.5vw,19px);color:var(--sub);max-width:560px}
.kicker{display:inline-block;margin-bottom:12px}
@media (max-width:760px){.sec{padding:64px 0}}