/* Figma 305:2 — independent campaign layer; underlying site is unchanged. */
#october-promo{--op-red:#b81723;--op-paper:#fff8eb;--op-gold:#ffe5a0;box-sizing:border-box;width:600px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:16px;background:var(--op-paper);color:#201c19;font-family:'Noto Sans KR',sans-serif;margin:auto;overflow:auto;overscroll-behavior:contain;box-shadow:0 28px 100px #0008;scrollbar-width:thin}
#october-promo::backdrop{background:#100906ba;backdrop-filter:blur(8px)}
#october-promo *{box-sizing:border-box}#october-promo p,#october-promo h2{margin:0}#october-promo button{font:inherit;cursor:pointer;border:0}#october-promo button:focus-visible,#october-promo a:focus-visible,#october-promo input:focus-visible{outline:3px solid #ebac36;outline-offset:3px}
.op-hero{padding:20px 36px 22px;background:var(--op-red);color:var(--op-paper);overflow:hidden;position:relative}.op-header{height:60px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.op-header b{font-size:21px;font-weight:900}.op-x{width:32px;height:32px;display:grid;place-items:center;background:transparent;color:inherit;border-radius:50%}.op-x:hover{background:#ffffff26}
#october-title{text-align:center;letter-spacing:-.8px;margin-bottom:14px!important}#october-title span{display:block;font-size:25px;font-weight:700;line-height:36px}#october-title strong{display:block;font-family:'Noto Sans KR',sans-serif;font-weight:900;font-size:42px;line-height:58px;color:var(--op-gold);text-shadow:3px 4px #841019}
.op-offer{display:grid;grid-template-columns:248px 272px;gap:8px;height:230px;align-items:center}.op-benefit{text-align:center;display:flex;align-items:center;flex-direction:column}.op-benefit p{font-size:23px;font-weight:700;line-height:30px}.op-benefit .op-number{font-family:'Noto Sans KR',sans-serif;font-size:110px;font-weight:900;line-height:116px;color:var(--op-gold);text-shadow:4px 6px #841019}.op-benefit>b{font-family:'Noto Sans KR',sans-serif;font-size:32px;font-weight:900;line-height:38px}.op-benefit small{font-size:13px;line-height:26px;font-weight:700;color:var(--op-gold)}
.op-collage{width:272px;height:230px;position:relative}.op-collage img{position:absolute}.op-halo{left:30px;top:43px}.op-store{left:17px;top:0;width:238px;height:128px;object-fit:cover;outline:3px solid var(--op-gold);border-radius:10px;box-shadow:0 6px 14px #1f030547}.op-bowl{left:-17px;top:67px;width:303px;height:175px;object-fit:contain;filter:drop-shadow(0 8px 10px #1f030540)}.op-star{left:245px;top:126px}
.op-regions{padding:15px 36px;background:#201c19;text-align:center;color:var(--op-paper);display:flex;flex-direction:column;gap:5px}.op-regions strong{font-size:28px;font-weight:900;line-height:36px;letter-spacing:-.7px}.op-regions b{font-size:17px;line-height:25px}.op-regions small{font-size:12px;line-height:18px;color:#dccebb}.op-details{padding:22px 36px;display:flex;flex-direction:column;gap:18px}.op-details>p{text-align:center;font-size:17px;line-height:28px}.op-apply{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:16px 24px;border-radius:6px;background:var(--op-red);color:var(--op-paper);font-size:19px;font-weight:900;line-height:28px;text-decoration:none;box-shadow:0 5px #84101929;transition:transform .2s,box-shadow .2s}.op-apply:hover{transform:translateY(-3px);box-shadow:0 8px 20px #84101944}.op-apply img{flex-shrink:0}.op-footer{min-height:48px;padding:10px 36px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f3eddf;color:#726a62}.op-footer label{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.op-footer input{width:16px;height:16px;accent-color:var(--op-red)}.op-footer button{background:transparent;color:inherit;padding:5px;font-size:13px!important;font-weight:700!important}
html.op-lock{overflow:hidden;scrollbar-gutter:stable}
#october-promo[open]{animation:op-enter .8s cubic-bezier(.16,1,.3,1) both}#october-promo[open]::backdrop{animation:op-backdrop .6s both}#october-promo[open] #october-title span{animation:op-rise .6s .12s both}#october-promo[open] #october-title strong{animation:op-pop .9s .22s both}#october-promo[open] .op-benefit{animation:op-pop .9s .35s both}#october-promo[open] .op-store{animation:op-photo 1s .35s both}#october-promo[open] .op-bowl{animation:op-food 1.15s .45s both,op-float 2s 1.6s ease-in-out 1}#october-promo[open] .op-halo{animation:op-glow 4s ease-in-out 1}#october-promo[open] .op-star{animation:op-spark 3.8s ease-in-out 1}#october-promo[open] .op-regions,#october-promo[open] .op-details{animation:op-rise .75s .5s both}.op-apply::after{content:'';position:absolute;inset:-80% auto -80% -70%;width:40%;background:linear-gradient(90deg,transparent,#fff6,transparent);transform:rotate(25deg);animation:op-shine 3s 1s 1;pointer-events:none}
@keyframes op-enter{from{opacity:0;transform:translateY(48px) scale(.88)}to{opacity:1;transform:none}}@keyframes op-backdrop{from{opacity:0}to{opacity:1}}@keyframes op-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes op-pop{0%{opacity:0;transform:scale(.8)}65%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:none}}@keyframes op-photo{from{opacity:0;transform:translate(40px,-10px) rotate(9deg)}to{opacity:1;transform:none}}@keyframes op-food{from{opacity:0;transform:translate(35px,45px) scale(.8) rotate(-8deg)}to{opacity:1;transform:none}}@keyframes op-float{50%{transform:translateY(-6px) rotate(-1deg)}}@keyframes op-glow{50%{opacity:.65;transform:scale(1.06)}}@keyframes op-spark{50%{transform:rotate(90deg) scale(1.2)}}@keyframes op-shine{0%,65%{left:-70%}100%{left:150%}}
#october-promo.op-still,#october-promo.op-still *,#october-promo.op-still *::after{animation:none!important;transition:none!important}#october-promo.op-still::backdrop{animation:none!important}
@media(max-width:620px){#october-promo{container-type:inline-size}.op-hero{padding:18px 5cqw 20px}.op-header{margin-bottom:10px}.op-header b{font-size:18px}#october-title span{font-size:clamp(18px,4.6cqw,25px);line-height:1.5}#october-title strong{font-size:clamp(26px,7cqw,42px);line-height:1.35}.op-offer{grid-template-columns:46% 54%;gap:0;height:39cqw;min-height:146px}.op-benefit p{font-size:clamp(14px,4cqw,23px);line-height:1.4}.op-benefit .op-number{font-size:19cqw;line-height:1.08}.op-benefit>b{font-size:5.6cqw;line-height:1.25}.op-benefit small{font-size:clamp(9px,2.25cqw,13px);line-height:2}.op-collage{transform:scale(calc((100cqw - 10cqw) * .54 / 272px));transform-origin:left center}.op-regions{padding:15px 4cqw}.op-regions strong{font-size:clamp(22px,5cqw,28px);line-height:1.3}.op-regions b{font-size:clamp(12px,3cqw,17px);line-height:1.5}.op-details{padding:20px 5cqw;gap:16px}.op-details>p{font-size:clamp(12px,3cqw,17px);line-height:1.7}.op-apply{padding:14px;min-height:56px;font-size:clamp(13px,3.35cqw,19px)}.op-footer{padding:10px 5cqw}.op-footer label{font-size:11px}}
#october-promo .op-collage img{max-width:none}
@media(max-width:620px){.op-offer{grid-template-rows:minmax(0,1fr)}.op-collage{align-self:center}}
@media(prefers-reduced-motion:reduce){#october-promo,#october-promo *,#october-promo *::after,#october-promo::backdrop{animation:none!important;transition:none!important}}

/* Screenshot-matched layout: no additional labels or controls. */
.op-regions strong{color:var(--op-gold)}
#october-promo[open] .op-number{animation:op-discount 2s .6s 2;transform-origin:center}
@keyframes op-discount{0%,100%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.09);filter:brightness(1.15)}45%{transform:scale(.98)}65%{transform:scale(1.045)}80%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#october-promo[open] .op-number{animation:none!important}}

.op-logo{width:118px;height:60px;object-fit:contain;display:block}
/* Match current Figma 305:2 (600 × 828) at desktop size. */
.op-benefit{letter-spacing:-.8px}
.op-regions{height:116px}
.op-footer{height:48px;padding-top:0;padding-bottom:0}
.op-footer button{height:20px;line-height:20px;padding:0;color:#201c19}
#october-promo:focus{outline:none}
@media(max-width:620px){.op-regions{height:auto;min-height:104px}}