:root{--red:#bd0611;--cream:#fcf2e3;--yellow:#ffc400;--display:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif}
@font-face{font-family:"Dunggeunmiso";src:url("dunggeunmiso-bold.otf") format("opentype");font-weight:700;font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--red);font:1rem/1.35 system-ui,sans-serif;padding-bottom:6rem}
[hidden]{display:none!important}
.shell{width:min(1120px,100%);margin-inline:auto}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:10px clamp(18px,4vw,45px);font-size:.8rem;letter-spacing:.06em}
.logo{font:700 clamp(1.3rem,3vw,2rem)/1 "Dunggeunmiso",var(--display);color:inherit;text-decoration:none}
.hero{background:#ca0009;color:var(--cream);overflow:hidden}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.hero-art{position:relative;--ribbon-width:max(0px,calc((100vw - 1120px)/2))}
.hero-art::before{
  content:"";
  position:absolute;
  inset:0 89.78% 0 auto;
  width:calc(var(--ribbon-width) + 10.22%);
  background:url("hero-ribbon.svg") right center / auto 100% no-repeat;
}
.photo{background-image:url("reference.png");background-repeat:no-repeat}
.hero-photo{
  aspect-ratio:385/328;
  background-size:199.48% 352.13%;
  background-position:0 5.2%;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 94%,transparent),
    linear-gradient(to bottom,transparent,#000 4%,#000 95%,transparent);
  mask-composite:intersect;
}
.offer{text-align:center;padding:clamp(20px,4vw,48px)}
.eyebrow{font-size:.73rem;letter-spacing:.13em;font-weight:800;margin:0 0 .4rem}
.headline,h1,h2,h3,.price,.timer,.cta{font-family:var(--display);font-weight:1000;letter-spacing:-.045em}
.headline{font-size:clamp(2.6rem,7vw,5.65rem);line-height:.95;margin:0}
h1{font-size:clamp(1.75rem,4vw,3.4rem);margin:.15em 0;line-height:1}
.offer-line{display:flex;align-items:center;justify-content:center;gap:clamp(.45rem,2vw,1.5rem);margin:.65rem 0;text-align:left}
.price{font-size:clamp(2.5rem,5vw,4.3rem);line-height:1}
.badge,.timer{border:2px solid currentColor;border-radius:18px;padding:.12em .58em;font-weight:900;white-space:nowrap}
.timer{font-size:clamp(1.8rem,4vw,3.6rem);font-variant-numeric:tabular-nums;line-height:1.05}
button{cursor:pointer;font:inherit}
button:disabled{cursor:default;opacity:.45}
.cta{border:0;border-radius:999px;background:var(--yellow);color:#a60009;padding:.52em 1em;font-size:clamp(1rem,2.4vw,2rem);line-height:1.2}
.cta:hover{background:#ffdb56}
.offer .cta{width:100%;margin:.25em 0}
.offer small{display:block}
.content{padding-inline:clamp(18px,5vw,55px)}
.deal-cards{
  width:min(1120px,calc(100% - 2 * clamp(16px,4vw,48px)));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,2vw,24px);margin:24px auto;
}
.deal-card{
  display:flex;align-items:center;gap:clamp(6px,1.5vw,16px);
  min-height:76px;padding:10px clamp(8px,2vw,20px);
  border:2px solid var(--red);border-radius:16px;background:var(--cream);
  color:var(--red);font-size:clamp(.82rem,1.9vw,1.25rem);line-height:1.15;
}
.deal-card svg{width:clamp(19px,3vw,28px);flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.deal-card small{display:block;margin-top:3px;font-size:.7em}
.deal-previous{text-decoration:none}
.deal-previous:hover{background:#fae8d1}
.deal-next svg{margin-left:auto}
.bottle{flex:0 0 50px;aspect-ratio:74/74;background-size:1037.84% 1560.81%;background-position:18.73% 36.22%;border-radius:8px}
h2{text-align:center;font-size:clamp(2rem,5vw,4rem);line-height:1;margin:38px 0 4px}
.intro{text-align:center;font-size:clamp(1rem,2.5vw,1.55rem);font-weight:700;margin:0 0 8px}
.details{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(12px,3vw,36px)}
.detail-photo{aspect-ratio:407/320;background-size:188.70% 360.94%;background-position:0 65.63%;border-radius:20px}
ul{list-style:none;padding:0;margin:0}
li{display:flex;align-items:center;gap:14px;padding:14px 0}
li+li{border-top:1px solid #e89892}
li svg{width:58px;flex:none;background:#f9e6cb;border-radius:17px;padding:10px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round}
h3{font-size:1.4rem;margin:0}
li p{margin:0}
footer.masthead{margin-top:24px;border-top:1px solid;padding-inline:0}
.purchase{position:fixed;z-index:1;bottom:10px;left:50%;transform:translateX(-50%);width:min(850px,calc(100% - 16px));display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--cream);border:2px solid var(--red);border-radius:16px;padding:10px clamp(8px,2vw,22px);box-shadow:0 2px 18px #46000738;line-height:1.1}
.purchase .cta{font-size:clamp(.75rem,2vw,1.3rem);white-space:nowrap}
.quantity{display:flex;align-items:center;border:1px solid;border-radius:10px;overflow:hidden}
.quantity button,.quantity output{width:30px;text-align:center;padding:6px 0}
.quantity button{border:0;background:transparent;color:inherit;font-weight:900}
.quantity output{border-inline:1px solid}
dialog{max-width:min(450px,calc(100% - 32px));background:var(--cream);color:var(--red);border:2px solid;border-radius:20px;padding:24px;text-align:center}
dialog h2{font-size:2rem;margin:0}
dialog::backdrop{background:#350007a8}
:focus-visible{outline:3px solid #2876bd;outline-offset:3px}
@media(max-width:570px){
  .hero-layout,.details{grid-template-columns:1fr}
  .hero-art{width:min(100%,360px);margin:auto;--ribbon-width:max(0px,calc((100vw - 360px)/2))}
  .offer{padding-top:0}
  .detail-photo{width:min(100%,390px);margin:auto}
  .deal-next .bottle{display:none}
  .purchase>div:first-child{font-size:.77rem}
}
.bag-showcase{
  width:min(1120px,calc(100% - 2 * clamp(16px,4vw,48px)));
  margin-inline:auto;
  border-radius:clamp(20px,3vw,36px);
  background:#ca0009;
  color:var(--cream);
}
.bag-layout{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:clamp(14px,3vw,34px);padding:clamp(22px,5vw,54px)}
.bag-copy{grid-column:1/-1;text-align:center}
.bag-copy h2{margin:0;font-size:clamp(2.3rem,5.5vw,4.5rem)}
.bag-viewer{min-width:0;text-align:center}
.bag-stage{
  display:grid;place-items:center;
  cursor:grab;touch-action:none;user-select:none;position:relative;
}
.bag-stage:active{cursor:grabbing}
.bag-stage::before{
  content:"";position:absolute;bottom:5%;width:60%;height:10%;
  background:radial-gradient(ellipse,#54000088,transparent 72%);pointer-events:none;
}
.bag-model{
  width:min(100%,420px);
  aspect-ratio:1;
  position:relative;
  filter:url(#bag-cutout);
  pointer-events:none;
}
.bag-frame{
  position:absolute;
  inset:0;
  background:url("bag-turntable.png") 0 0 / 400% 400% no-repeat;
}
.bag-motion{position:absolute;inset:0;width:100%;height:100%}
.bag-spin{
  position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:78px;height:78px;padding:6px;
  border:0;color:#fff;background:transparent;
  opacity:.52;
  filter:drop-shadow(0 1px 3px #39200070);
}
.bag-spin svg{width:100%;height:100%}
.bag-stage.is-rotating .bag-spin{opacity:0;pointer-events:none}
.bag-stage.is-rotating .bag-spin svg{visibility:hidden}
.bag-specs li+li{border-color:#fcf2e370}
.bag-specs svg{background:var(--cream);color:var(--red)}
.bag-specs p{max-width:36ch}
@media(max-width:650px){
  .bag-layout{grid-template-columns:1fr}
  .bag-model{max-width:345px}
}