/* 반쪽 팝업 장 시안 — 장 하나 = .s (16:10). 크기는 전부 cqw(장 폭의 %)로 — 320~412 어느 폭이든 같은 그림.
   글자 최소 14px: max(14px, …) 로 바닥을 깐다. 우리 집 문법 = 은우 회사소개서(세이지 · 숲색 · 영어만 이탤릭 세리프 · 한글 Pretendard · 상자 없음) */
.s{--forest:#1F3A2A;--forest2:#2C3B2C;--sage:#E6EEE9;--cream:#F5EFE2;--gold:#E3BE5E;--ink:#1B2A1F;--terra:#B8563B;
  container-type:inline-size;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;word-break:keep-all;color:var(--ink)}
.s *{box-sizing:border-box;margin:0}
.s .serif{font-family:'Playfair Display',serif;font-style:italic;font-weight:500}
.s .eyeb{font-size:max(14px,3.9cqw);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.s .h{font-size:max(18px,6.2cqw);font-weight:800;line-height:1.24;letter-spacing:-.03em}
.s .sub{font-size:max(14px,3.9cqw);font-weight:500;line-height:1.45}
.s .nb{white-space:nowrap}

/* ─── 쿠폰 공통 — 종이 쿠폰(양옆 반달 홈 + 점선) ─── */
.s .cp{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:1.6cqw;padding:0 3.4cqw 0 4.6cqw;height:14.5cqw;border-radius:1.6cqw;
  background:var(--cp,#fff);color:var(--cpi,var(--ink));box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.22);
  -webkit-mask:radial-gradient(circle 1.7cqw at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 1.7cqw at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 1.7cqw at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 1.7cqw at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.s .cp .k{font-size:max(14px,3.6cqw);font-weight:600;white-space:nowrap}
.s .cp .v{font-size:max(17px,5.6cqw);font-weight:800;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.s .cp .v small{font-size:max(14px,.66em);font-weight:700;margin-left:.1em}
.s .cp::after{content:'';position:absolute;right:0;top:0;bottom:0;width:0;border-left:1.5px dashed currentColor;opacity:.28;right:auto;left:3cqw}

/* 올라오는 움직임 — 은우 판(ij-cpc)과 같은 순서: 뒤 → 앞 */
.s .up{opacity:0;transform:translateY(22%) rotate(var(--r,0deg));animation:sUp .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes sUp{to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}
.s .shine{overflow:hidden}.s .t.shine,.s .cp.shine{isolation:isolate}
.s .shine::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#fff0 30%,#fff9 50%,#fff0 70%);transform:translateX(-120%);animation:sShine 3.2s ease-in-out 1.6s infinite}
@keyframes sShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.s .up{animation:none;opacity:1;transform:rotate(var(--r,0deg))}.s .shine::before{animation:none;opacity:0}}

/* ════ C1 — 이탈리아에서 온 편지 (은우 봉투를 살림) ════ */
.c1{background:radial-gradient(130% 110% at 0% 0%,#0b8a40 0%,#036d31 45%,#02582a 100%);color:#fff}   /* 10/1 02:0x 미주 확정 — 인스타 진한 초록 #036d31 + 같은 초록 그늘 (옛 숲색 #1F3A2A 는 .c1.forest) */
.c1.forest{background:radial-gradient(120% 90% at 0% 0%,#2E5A40 0%,#1F3A2A 58%,#173022 100%)}
.c1 .tx{position:absolute;left:5.5cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;width:44%}
.c1 .tx .serif{font-size:max(18px,6.2cqw);color:var(--gold);line-height:1}
.c1 .tx .sub{color:#E8EFE9}
.c1 .env{position:absolute;right:1cqw;bottom:-4cqw;width:50cqw;height:22cqw}
.c1 .env .back{position:absolute;inset:0;background:#EFE6D2;border-radius:1.4cqw;box-shadow:0 2cqw 5cqw rgba(0,0,0,.35)}
.c1 .env .flap{position:absolute;left:0;right:0;top:0;height:60%;background:#E6DAC0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:scaleY(-1) translateY(100%)}
.c1 .env .front{position:absolute;inset:0;background:linear-gradient(160deg,#F6EEDC,#EDE2CA);clip-path:polygon(0 38%,50% 72%,100% 38%,100% 100%,0 100%);border-radius:1.4cqw;z-index:4}
.c1 .env .seal{position:absolute;z-index:5;left:50%;top:70%;width:8.5cqw;height:8.5cqw;margin:-4.25cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#C8563A,#8E2F1E);box-shadow:inset 0 0 0 .8cqw rgba(255,255,255,.12),0 .6cqw 1.2cqw rgba(0,0,0,.3)}
.c1 .env .seal svg{position:absolute;inset:22%;width:56%;height:56%}
.c1 .cp{left:2.5cqw;width:45cqw;z-index:2}
.c1 .cp.a{top:-39cqw;--cp:#FBF7EE;--r:-3deg;--d:.15s}
.c1 .cp.b{top:-26cqw;--cp:#FBF7EE;--r:2deg;--d:.55s;left:1.5cqw}
.c1 .cp.c{top:-13cqw;--cp:var(--gold);--r:-2deg;--d:.95s;left:3cqw}

/* ════ C2 — 쿠폰북 세 장이 부채처럼 (크림 바탕 · 숲색 쿠폰) ════ */
.c2{background:var(--cream)}
.c2::before{content:'';position:absolute;right:-16cqw;top:-22cqw;width:70cqw;height:70cqw;border-radius:50%;background:#E4EBDD}
.c2 .tx{position:absolute;left:6cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;width:42%;z-index:2}
.c2 .tx .serif{font-size:max(18px,6.2cqw);color:var(--forest);line-height:1}
.c2 .tx .h{color:var(--forest)}
.c2 .tx .sub{color:#2F3B32}
.c2 .cp{right:4cqw;width:46cqw;--cp:var(--forest);--cpi:#fff}
.c2 .cp .k{color:#DCE7DE}
.c2 .cp.a{top:8cqw;--r:-5deg;--d:.15s;right:6cqw;--cp:#3E5A45}
.c2 .cp.b{top:22cqw;--r:3deg;--d:.55s;right:3cqw;--cp:#2B4633}
.c2 .cp.c{top:36cqw;--r:-2deg;--d:.95s;right:5cqw;--cp:var(--forest);}
.c2 .cp.c .v{color:var(--gold)}

/* ════ C3 — 쿠폰 세 장을 한 줄로 (위 = 숲색 제목, 아래 = 세이지 판) ════ */
.c3{background:radial-gradient(130% 110% at 0% 0%,#0b8a40 0%,#036d31 45%,#02582a 100%);color:#fff}   /* 10/1 ①과 같은 인스타 초록 */
.c3 .tx{position:absolute;left:6cqw;right:6cqw;top:6.5cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw}
.c3 .tx .serif{font-size:max(16px,5cqw);color:var(--gold);line-height:1;display:block;margin-bottom:1.4cqw}
.c3 .tx .h{font-size:max(19px,6.4cqw)}
.c3 .row{position:absolute;left:4.5cqw;right:4.5cqw;bottom:6cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw}
.c3 .t{position:relative;height:25cqw;border-radius:1.8cqw;background:#FBF7EE;color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2cqw;text-align:center;
  -webkit-mask:radial-gradient(circle 2cqw at 50% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 2cqw at 50% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 2cqw at 50% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 2cqw at 50% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.c3 .t .k{font-size:max(14px,3.6cqw);font-weight:600;color:#33443A}
.c3 .t .v{font-size:max(18px,5.8cqw);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.c3 .t .v small{font-size:max(14px,.62em);font-weight:700}
.c3 .t.g{background:var(--gold)}
.c3 .t:nth-child(1){--d:.15s}.c3 .t:nth-child(2){--d:.45s}.c3 .t:nth-child(3){--d:.75s}

/* ════ L 공통 — 제품 누끼 ════ */
.s .pj,.s .pl{position:absolute;display:block;filter:drop-shadow(0 1.6cqw 2.2cqw rgba(0,0,0,.28))}
.s .pj{width:22cqw}
.s .pl{width:25cqw}
.s .in{opacity:0;animation:sIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes sIn{from{opacity:0;transform:translateY(10%) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){.s .in{animation:none;opacity:1;transform:rotate(var(--r,0deg))}}
.s .badge{position:absolute;display:grid;place-items:center;border-radius:50%;text-align:center;line-height:1}

/* ════ L1 — 세이지 · 「Nuovo」 도장 (Fishwife·Ghia 의 새 출시 배지 문법) ════ */
.l1{background:var(--sage)}
.l1 .tx{position:absolute;left:6cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1.8cqw;width:47%;z-index:3}
.l1 .eyeb{color:var(--forest)}
.l1 .h{color:var(--forest)}
.l1 .sub{color:#2F3B32}
.l1 .floor{position:absolute;right:0;bottom:0;width:52%;height:34%;background:#D6E2DA}
.l1 .pl{right:6cqw;bottom:7cqw;width:17cqw;--r:-18deg;--d:.1s}
.l1 .pj.a{right:27cqw;bottom:4.5cqw;width:18cqw;--d:.35s}
.l1 .pj.b{right:15cqw;bottom:3cqw;width:20cqw;--d:.55s;z-index:2}
.l1 .badge{right:4.5cqw;top:5cqw;width:17cqw;height:17cqw;background:var(--forest);color:#fff;transform:rotate(-10deg);z-index:4;animation:sPop .5s cubic-bezier(.3,1.6,.5,1) .9s both}
.l1 .badge b{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:max(15px,4.8cqw)}
@keyframes sPop{from{transform:rotate(-10deg) scale(0)}to{transform:rotate(-10deg) scale(1)}}

/* ════ L2 — 숲색 밤 · 큰 이탤릭 Nuovo 뒤에 제품 ════ */
.l2{background:radial-gradient(90% 120% at 78% 60%,#35604A 0%,#1F3A2A 55%,#162C1F 100%);color:#fff}
.l2 .big{position:absolute;right:-2cqw;top:1cqw;font-family:'Playfair Display',serif;font-style:italic;font-size:30cqw;line-height:1;color:rgba(227,190,94,.16);letter-spacing:-.02em}
.l2 .tx{position:absolute;left:6cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1.8cqw;width:46%;z-index:3}
.l2 .eyeb{color:var(--gold)}
.l2 .sub{color:#E4ECE6}
.l2 .pl{right:6cqw;bottom:7cqw;width:17cqw;--r:-18deg;--d:.1s}
.l2 .pj.a{right:27cqw;bottom:5cqw;width:18cqw;--d:.35s}
.l2 .pj.b{right:15cqw;bottom:3cqw;width:20cqw;--d:.55s;z-index:2}

/* ════ L3 — 「2 + 1」 식으로 구성을 한눈에 (크림 · 테라코타 숫자) ════ */
.l3{background:var(--cream)}
.l3 .tx{position:absolute;left:6cqw;top:0;bottom:0;width:36%;display:flex;flex-direction:column;justify-content:center;gap:1.8cqw;z-index:3}
.l3 .eyeb{color:var(--terra)}
.l3 .h{color:var(--forest)}
.l3 .eq{position:absolute;right:4cqw;top:7cqw;bottom:5cqw;width:56%;display:flex;align-items:stretch;justify-content:space-between}
.l3 .cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1.6cqw}
.l3 .pics{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.l3 .jars .pics img{width:14cqw;filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.25))}
.l3 .jars .pics img+img{margin-left:-4cqw;width:15.5cqw}
.l3 .bread .pics img{width:15cqw;transform:rotate(-62deg);margin-bottom:-2cqw;filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.25))}
.l3 .plus{font-family:'Playfair Display',serif;font-size:max(22px,8cqw);color:var(--terra);align-self:center;margin-top:-6cqw;padding:0 .6cqw}
.l3 .lab{white-space:nowrap;font-size:max(14px,3.5cqw);font-weight:700;color:var(--forest)}
.l3 .lab b{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;color:var(--terra);font-size:1.3em;margin-left:.15em}

/* 상시 혜택 두 줄 (10/1 01:2x 미주 「알약 칩이 밤티」) — 테두리 없이 초대장 아래 작은 글씨처럼. 앞에 짧은 금색 선, 줄마다 금색 세리프 「+」. 깜빡임 없음 */
.s .chips{display:flex;flex-direction:column;align-items:flex-start;gap:.5cqw;margin-top:1.6cqw;padding-top:2cqw;position:relative}
.s .chips::before{content:'';position:absolute;left:0;top:0;width:6cqw;height:1px;background:var(--gold)}
.s .chip{display:flex;align-items:baseline;gap:1.2cqw;font-size:max(13px,3.4cqw);font-weight:500;letter-spacing:-.01em;white-space:nowrap;line-height:1.45}
.s .chip::first-letter{color:inherit}
.s .chip i{font-style:italic;font-family:'Playfair Display',serif;font-weight:600;color:var(--gold);font-size:1.15em;line-height:1}
.c1 .chip{color:#EDE6D2}
.c2 .chip{color:#2F3B32}.c2 .chip i{color:#B08A2E}.c2 .chips::before{background:#B08A2E}
.c3 .chips{flex-direction:row;gap:4cqw;margin-top:1.4cqw;padding-top:0}.c3 .chips::before{display:none}
.c3 .chip{color:#EDE6D2}
.c3 .tx{top:5.5cqw}
/* 좁은 폰(340 미만) — 쿠폰 글이 쿠폰 밖으로 밀리지 않게 안쪽 여백만 줄인다 */
@container (max-width:339px){.c1 .cp,.c2 .cp{padding:0 2.2cqw 0 4cqw;gap:.8cqw}.c1 .cp .k,.c2 .cp .k{letter-spacing:-.03em}.c1 .cp.a,.c1 .cp.b,.c1 .cp.c{left:1cqw}}
/* 「+」만 반짝 (10/1 01:3x 미주) — 3.2초에 한 번, 0.7초 동안 살짝 커지며 빛났다 돌아온다. 두 줄은 0.35초 어긋나게. 촐싹 안 되게 크기 1.35배 + 빛만(회전은 × 로 보여 뺐다) */
.s .chip i{display:inline-block;transform-origin:50% 55%;animation:sPlus 3.2s ease-in-out 1.4s infinite}
.s .chip+.chip i{animation-delay:1.75s}
@keyframes sPlus{0%,76%,100%{transform:none;text-shadow:none;filter:none}
  85%{transform:scale(1.35);text-shadow:0 0 .45em rgba(255,226,150,1),0 0 1em rgba(227,190,94,.75);filter:brightness(1.45)}
  94%{transform:scale(1.05);text-shadow:0 0 .25em rgba(255,226,150,.45)}}
@media (prefers-reduced-motion:reduce){.s .chip i{animation:none}}
/* 인스타 톤 판 (10/1 01:4x 미주 「은우한테 인스타 톤 맞춰달라 했었다」) — recipe_insta.md 타이틀 카드 색 표준: 진한 #036d31 · 중간 #367d45 · 흰 글자 */
.c1.ig{background:#036d31}
.c3.ig{background:#036d31}
.c3.ig .t{background:#FBF7EE}.c3.ig .t.g{background:var(--gold)}
/* 인스타 세 초록 비교용 (10/1 01:58) — 밝은 #699f61 · 중간 #367d45 · 진한 #036d31 · 진한+같은 색 그늘 */
.c1.g1{background:#699f61}.c1.g2{background:#367d45}.c1.g3{background:#036d31}
.c1.g3s{background:radial-gradient(130% 110% at 0% 0%,#0b8a40 0%,#036d31 45%,#02582a 100%)}