
:root{
  --red:#D62E25; --paper:#FFFFFF; --paper-2:#F4F2EE; --ink-2:#4A4A4A; --ink:#141414;
  --lemon:#FFD23F; --blue:#2F6BDE; --green:#36B26B; --pink:#FF8FB8;
  --display:'Bagel Fat One', 'Pretendard', sans-serif;
  --text:'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  
  --step-small:0.875rem;                                   
  --step-body:1.0625rem;                                   
  --step-lead:clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem);   
  --step-head:clamp(2rem, 1.2rem + 2.8vw, 4rem);           
  --step-display:clamp(4rem, 9vw, 10rem);                  
  
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;
  --gut:clamp(16px, 2.2vw, 32px);
  --sec:clamp(64px, 9vw, 144px);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --t-press:140ms; --t-hover:180ms; --t-ui:280ms; --t-reveal:720ms;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; -webkit-tap-highlight-color:rgba(20,20,20,0.12); }
a,button,input,select,label,summary{ touch-action:manipulation; }
body{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:var(--step-body); line-height:1.5; word-break:keep-all; overflow-wrap:break-word; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button,input,select{ font:inherit; color:inherit; }
:root{ --stick:96px; --ring:var(--ink); --halo:var(--paper); }
html{ scroll-padding-top:calc(var(--stick) + 16px); }

[data-rise]{ scroll-margin-top:24px; }

.motionbtn{ position:absolute; right:24px; bottom:24px; z-index:2; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--paper); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; transition:background-color var(--t-hover) ease; }
.motionbtn:hover{ background:var(--lemon); }
body[data-theme="mombbae"] .motionbtn{ border-radius:0; }
body[data-theme="mombbae"] .motionbtn:hover{ background:#E8FF3A; }

:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; box-shadow:0 0 0 7px var(--halo); } 
.on-red, .awning{ --ring:var(--paper); --halo:var(--ink); }

.on-red :is(.pack-body, .card-body, .kit, .notice, .panel-state, .notify, .receipt, .gifts), .awning .chips-m, .site-head .searchbar{ --ring:var(--ink); --halo:var(--paper); }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--gut); top:8px; z-index:100; background:var(--ink); color:var(--paper); padding:14px 22px; font-weight:700; text-decoration:none; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus{ width:auto; height:auto; clip:auto; }
.disp{ font-family:var(--display); font-weight:400; letter-spacing:-0.01em; line-height:0.95; }
h1,h2,h3,.disp{ text-wrap:balance; }
.num{ font-variant-numeric:tabular-nums; }
.head{ font-size:var(--step-head); }
.lead{ font-size:var(--step-lead); line-height:1.4; }
.small{ font-size:var(--step-small); }
.wrap{ padding-left:var(--gut); padding-right:var(--gut); }
.sec{ padding:var(--sec) var(--gut); position:relative; }
.on-red{ background:var(--red); color:var(--paper); }


.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border:0; border-radius:999px; background:var(--ink); color:var(--paper); font-family:var(--text); font-weight:700; font-size:var(--step-body); line-height:1.2; text-decoration:none; text-align:center; cursor:pointer; transition:transform var(--t-press) var(--ease-out); }
.btn:hover{ transform:translateY(-2px); background:#000; }
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn.sm{ min-height:44px; padding:0 18px; font-size:var(--step-small); }
.btn.block{ width:100%; }
.link{ font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.on-red .link{ color:var(--paper); }



.notice-bar{ background:var(--ink); color:var(--paper); text-align:center; font-size:var(--step-small); font-weight:700; padding:8px var(--gut); }
.site-head{ position:relative; z-index:20; }
.awning{ background:var(--red); color:var(--paper); position:relative; }
.awning-in{ display:flex; align-items:center; gap:36px; padding:16px var(--gut) 12px; }
.mark{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--paper); flex:none; }
.mark .disp{ font-size:1.875rem; }
.mark .ko{ font-size:1.5rem; }
.awning-in nav{ margin-right:auto; }
.cats{ display:flex; flex-wrap:wrap; gap:4px 26px; }
.cats a{ font-weight:800; font-size:1.0625rem; text-decoration:none; color:var(--paper); display:inline-block; padding:8px 0; transition:transform var(--t-hover) var(--ease-out); }
.cats a:hover, .cats a[aria-current]{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px; }
.cats a:hover{ transform:translateY(-2px); }
.scallop{ display:block; width:100%; height:22px; position:absolute; left:0; top:100%; pointer-events:none; }
.bagbtn{ flex:none; }
.count{ display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 7px; border-radius:999px; background:var(--lemon); color:var(--ink); font-size:var(--step-small); font-weight:800; }
.chips-m{ display:none; }


.crumbs{ padding:44px var(--gut) 0; font-size:var(--step-small); font-weight:600; color:var(--ink-2); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px 10px; }
.crumbs li+li::before{ content:'/'; margin-right:10px; }
.crumbs a{ color:var(--ink); }


.machine{ position:relative; aspect-ratio:560/900; }
.machine > svg{ position:absolute; inset:0; width:100%; height:100%; }
.fall{ transform-box:fill-box; transform-origin:center; }
html.js .ready .fall{ animation:capFall 900ms var(--ease-out) both; animation-delay:calc(var(--i) * 55ms + 120ms); }
@keyframes capFall{ from{ transform:translateY(-300px); opacity:0; } 40%{ opacity:1; } to{ transform:none; opacity:1; } }
.lever{ position:absolute; left:55.36%; top:65.56%; width:22.14%; aspect-ratio:1; border:0; padding:0; border-radius:50%; background:transparent; cursor:pointer; }
.lever svg{ width:100%; height:100%; }
.lever:focus-visible{ outline-width:4px; outline-offset:4px; }
.lever-tag{ position:absolute; left:58.9%; top:80.4%; width:15%; height:3.4%; display:grid; place-items:center; background:var(--lemon); color:var(--ink); border-radius:999px; font-weight:800; font-size:clamp(0.8125rem, 0.6rem + 0.5vw, 1.0625rem); pointer-events:none; }
.chute{ position:absolute; left:35%; top:85.33%; width:30%; height:8%; overflow:hidden; border-radius:16px; }
.out{ position:absolute; left:50%; top:50%; width:38%; aspect-ratio:1; margin:-19% 0 0 -19%; transform:translateY(-160%); opacity:0; }
.out .top{ transform-box:fill-box; transform-origin:100% 100%; }

.slip{ background:var(--lemon); color:var(--ink); padding:22px 26px 24px; display:flex; flex-direction:column; gap:10px; justify-content:center; clip-path:polygon(0 0,100% 0,100% calc(50% - 12px),calc(100% - 12px) 50%,100% calc(50% + 12px),100% 100%,0 100%,0 calc(50% + 12px),12px 50%,0 calc(50% - 12px)); }
.slip .disp{ font-size:2rem; }
.slip .row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:4px; }
.slip.secret{ background:var(--ink); color:var(--paper); }
.slip.secret .btn{ background:var(--paper); color:var(--ink); }
.slip.secret .again{ color:var(--paper); }
.again{ background:none; border:0; padding:10px 4px; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; cursor:pointer; }


.pegs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:88px 24px; }
.pegs > li{ display:flex; }
.pegs > li:nth-child(even) .pack{ margin-top:40px; }
.pack{ position:relative; display:flex; flex-direction:column; width:100%; transform-origin:50% 0; transition:transform 260ms var(--ease-out); }
.pack:hover{ transform:rotate(1.4deg); }
.peg{ position:absolute; left:50%; top:-30px; width:8px; height:52px; margin-left:-4px; background:var(--ink); border-radius:4px; z-index:3; }
.band{ height:84px; background:var(--c); color:var(--ink); display:flex; align-items:baseline; justify-content:center; padding-top:42px; position:relative;
  clip-path:polygon(0 0, calc(50% - 0px) 0, calc(50% - 0px) 12px, calc(50% + 0.00px) 12.00px, calc(50% + -2.23px) 12.25px, calc(50% + -4.34px) 12.99px, calc(50% + -6.23px) 14.18px, calc(50% + -7.82px) 15.77px, calc(50% + -9.01px) 17.66px, calc(50% + -9.75px) 19.77px, calc(50% + -10.00px) 22.00px, calc(50% + -9.75px) 24.23px, calc(50% + -9.01px) 26.34px, calc(50% + -7.82px) 28.23px, calc(50% + -6.23px) 29.82px, calc(50% + -4.34px) 31.01px, calc(50% + -2.23px) 31.75px, calc(50% + -0.00px) 32.00px, calc(50% + 2.23px) 31.75px, calc(50% + 4.34px) 31.01px, calc(50% + 6.23px) 29.82px, calc(50% + 7.82px) 28.23px, calc(50% + 9.01px) 26.34px, calc(50% + 9.75px) 24.23px, calc(50% + 10.00px) 22.00px, calc(50% + 9.75px) 19.77px, calc(50% + 9.01px) 17.66px, calc(50% + 7.82px) 15.77px, calc(50% + 6.23px) 14.18px, calc(50% + 4.34px) 12.99px, calc(50% + 2.23px) 12.25px, calc(50% + 0.00px) 12.00px, calc(50% + 0px) 12px, calc(50% + 0px) 0, 100% 0, 100% 100%, 0 100%); }
.band .disp{ font-size:2rem; line-height:1; }
.band .per{ font-size:var(--step-small); font-weight:700; margin-left:8px; }
.band.dark{ color:var(--paper); }
.staple{ position:absolute; top:18px; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.staple.l{ left:18px; } .staple.r{ right:18px; }
.band.dark .staple{ background:var(--paper); }
.pack-body{ background:var(--paper); color:var(--ink); padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ph{ position:relative; aspect-ratio:1; background:var(--paper-2); display:grid; place-items:center; padding:14px; text-align:center; font-size:var(--step-small); font-weight:700; color:var(--ink-2); }
.ph.tall{ aspect-ratio:3/4; }
.ph-wrap{ position:relative; }
.badges{ position:absolute; left:10px; top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.badge{ display:inline-block; padding:4px 8px; font-size:0.8125rem; font-weight:800; line-height:1.2; background:var(--ink); color:var(--paper); }
.badge.few{ background:var(--red); color:var(--paper); }
.badge.secret{ background:var(--ink); color:var(--lemon); }
.pack h3{ font-size:var(--step-body); font-weight:700; line-height:1.35; }
.pack h3 a{ text-decoration:none; }
.pack h3 a:hover{ text-decoration:underline; }
.pack .meta{ font-size:1rem; font-weight:600; color:var(--ink-2); }
.pack .meta i{ color:var(--ink); }
.pack .add{ margin-top:auto; width:100%; }


.scrim{ border:0; padding:0; margin:0; cursor:default; }
.scrim{ position:fixed; inset:0; background:rgba(20,20,20,0.55); opacity:0; visibility:hidden; transition:opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); z-index:60; }
.drawer{ position:fixed; top:0; right:0; width:min(460px, 100%); height:100svh; overflow:auto; z-index:61; transform:translateX(105%); visibility:hidden; transition:transform 360ms var(--ease-out), visibility 0s linear 360ms; overscroll-behavior:contain; }
.open-cart .scrim{ opacity:1; visibility:visible; transition:opacity var(--t-ui) var(--ease-out); }
.open-cart .drawer{ transform:none; visibility:visible; transition:transform 360ms var(--ease-out); }
.receipt{ background:var(--paper); color:var(--ink); padding:26px 28px 52px; min-height:calc(100% - 20px); display:flex; flex-direction:column; gap:24px;
  clip-path:polygon(0 0, 100% 0, 100.000% 100%, 95.833% calc(100% - 14px), 91.667% 100%, 87.500% calc(100% - 14px), 83.333% 100%, 79.167% calc(100% - 14px), 75.000% 100%, 70.833% calc(100% - 14px), 66.667% 100%, 62.500% calc(100% - 14px), 58.333% 100%, 54.167% calc(100% - 14px), 50.000% 100%, 45.833% calc(100% - 14px), 41.667% 100%, 37.500% calc(100% - 14px), 33.333% 100%, 29.167% calc(100% - 14px), 25.000% 100%, 20.833% calc(100% - 14px), 16.667% 100%, 12.500% calc(100% - 14px), 8.333% 100%, 4.167% calc(100% - 14px), 0.000% 100%); }
.r-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.r-top .disp{ font-size:2rem; }
.r-top p{ font-size:var(--step-small); font-weight:600; }
.r-close{ background:var(--ink); color:var(--paper); border:0; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; cursor:pointer; flex:none; }

.r-ship{ background:var(--lemon); margin:0 -28px; padding:16px 28px 18px; display:flex; flex-direction:column; gap:10px; }
.r-ship p{ font-weight:800; }
.bar{ height:12px; background:var(--paper); border-radius:999px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--ink); border-radius:999px; transform-origin:0 50%; transition:transform 420ms var(--ease-out); }
.r-items{ display:flex; flex-direction:column; gap:18px; }
.r-items li{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; }
.r-items .r-undo{ display:flex; justify-content:space-between; align-items:center; background:var(--paper-2); margin:0 -12px; padding:4px 12px; font-weight:600; }
.r-items .nm{ font-weight:700; line-height:1.35; }
.r-items .amt{ font-weight:800; text-align:right; }
.r-items .ctl{ display:flex; align-items:center; gap:10px; font-size:var(--step-small); font-weight:600; grid-column:1 / -1; }
.qbtn{ width:36px; height:36px; border-radius:50%; border:0; background:var(--paper-2); color:var(--ink); font-weight:800; cursor:pointer; font-size:1.125rem; line-height:1; }
.rm{ background:none; border:0; padding:8px 4px; margin-left:auto; font-size:var(--step-small); font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.r-items .r-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:8px 0 4px; }
.r-empty .disp{ font-size:1.625rem; }
.r-empty .row{ display:flex; flex-wrap:wrap; gap:10px; }
.r-rec{ background:var(--paper-2); margin:0 -28px; padding:20px 28px; }
.r-rec h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; margin-bottom:12px; }
.r-rec ul{ display:flex; flex-direction:column; gap:10px; }
.r-rec li{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; line-height:1.35; }
.r-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:700; }
.r-total .disp{ font-size:2rem; }
.r-foot{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.r-foot p{ font-size:var(--step-small); font-weight:600; color:var(--ink-2); }


.thumbbar{ display:none; }


.foot{ background:var(--paper); padding:96px var(--gut) 28px; display:grid; grid-template-rows:auto 1fr auto auto auto; min-height:88svh; gap:56px; }
.foot-cols{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:32px; }
.foot-cols h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; margin-bottom:10px; }
.foot-cols ul{ display:flex; flex-direction:column; gap:6px; }
.foot-cols a{ text-decoration:none; font-weight:600; }
.foot-cols a:hover{ text-decoration:underline; }
.foot-cols p{ font-weight:600; max-width:26ch; }
.lang{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.lang [aria-current]{ font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.lang button{ background:none; border:0; padding:0; text-align:left; font-weight:600; color:var(--ink-2); cursor:not-allowed; }
.bigname{ align-self:end; color:var(--red); font-size:21.3vw; line-height:0.86; letter-spacing:-0.02em; white-space:nowrap; margin-left:-0.04em; padding-bottom:0.1em; }
.legal{ font-size:var(--step-small); font-weight:600; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }




.stamp{ display:inline-block; background:var(--red); color:var(--paper); font-family:var(--display); font-weight:400; font-size:1.25rem; line-height:1; padding:8px 12px 9px; transform:rotate(-6deg); }
.stamps{ position:absolute; right:8px; bottom:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:none; }
.stamps .stamp + .stamp{ margin-top:-10px; transform:rotate(4deg); }
.clock{ display:inline-block; background:var(--ink); color:var(--lemon); font-family:var(--display); font-weight:400; line-height:1; padding:6px 10px 7px; font-variant-numeric:tabular-nums; }
.pack .st{ font-size:1rem; font-weight:600; line-height:1.5; }
.pack .st b{ font-weight:800; }
.pack .st .clock{ font-size:1rem; padding:3px 7px 4px; margin-left:2px; }
.ph-wrap.pic img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--paper-2); }
.ph-wrap.pic.sq img{ aspect-ratio:1; }
.ph-wrap.pic.tall img{ aspect-ratio:3/4; }
.slip-row{ display:flex; gap:16px; align-items:center; }
.slip-img{ width:112px; height:112px; object-fit:cover; background:var(--paper); flex:none; }
.r-items .r-line{ grid-template-columns:56px 1fr auto; }
.r-items .r-line .ctl{ grid-column:2 / -1; }
.thumb{ width:56px; height:70px; object-fit:cover; background:var(--paper-2); grid-row:1 / span 2; }
.ph-t{ display:block; }
.r-items .pre{ display:block; font-size:var(--step-small); font-weight:700; color:var(--ink-2); margin-top:2px; }
.notify{ display:flex; flex-direction:column; gap:8px; }
.notify label{ font-weight:700; }
.nf-row{ display:flex; gap:8px; flex-wrap:wrap; }
.notify input{ flex:1 1 200px; min-height:52px; padding:0 16px; border:1px solid #141414; border-radius:0; background:var(--paper); font-size:var(--step-body); }
.nf-msg{ font-size:var(--step-small); font-weight:700; min-height:1.2em; }
.tbc{ background:var(--lemon); color:var(--ink); padding:2px 6px; font-weight:700; }
.demo-note{ background:var(--lemon); color:var(--ink); padding:18px max(var(--gut), calc((100% - 72ch) / 2)); font-size:var(--step-body); font-weight:700; text-align:center; text-wrap:balance; }
@media (max-width: 760px){ .stamp{ font-size:1.1875rem; } .slip-img{ width:88px; height:88px; } .pack .st, .pack .meta{ font-size:0.875rem; } }



.searchbar{ position:sticky; top:0; z-index:19; background:var(--paper); height:var(--stick); padding:32px var(--gut) 10px; margin-bottom:-12px; }
.sform{ display:flex; align-items:center; gap:8px; max-width:720px; margin:0 auto; background:var(--paper-2); border-radius:999px; padding:4px 4px 4px 20px; }
.sfield{ position:relative; flex:1; min-width:0; }
.sform input{ width:100%; min-height:44px; border:0; background:transparent; font-size:var(--step-body); font-weight:600; color:var(--ink); outline-offset:6px; }
.sform input::placeholder{ color:transparent; }
.sform input::-webkit-search-cancel-button{ cursor:pointer; }
.sprompt{ position:absolute; left:0; top:50%; transform:translateY(-50%); font-weight:600; color:var(--ink-2); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; transition:opacity 240ms ease; }
.sform input:not(:placeholder-shown) + .sprompt{ visibility:hidden; }
.sprompt.swap{ opacity:0; }
.sbtn{ flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--lemon); display:grid; place-items:center; cursor:pointer; transition:transform var(--t-press) var(--ease-out); }
.sbtn:hover{ transform:scale(1.06); } .sbtn:active{ transform:scale(0.96); }
.sbtn svg{ width:22px; height:22px; }
.sform:focus-within{ background:#ECE9E3; }
.search-sec{ padding:40px var(--gut) 56px; }
.sform.big{ max-width:960px; padding:8px 8px 8px 28px; }
.sform.big input{ min-height:60px; font-size:var(--step-lead); }
.sform.big .sprompt{ font-size:var(--step-lead); }
.sform.big .sbtn{ width:60px; height:60px; } .sform.big .sbtn svg{ width:28px; height:28px; }

.gift-rows{ display:flex; flex-direction:column; gap:22px; }
.grow{ display:grid; grid-template-columns:120px 1fr; gap:12px 20px; align-items:center; }
.glabel{ font-family:var(--display); font-size:1.5rem; line-height:1; }
.gtags{ display:flex; flex-wrap:wrap; gap:12px; }
.gtag{ display:inline-flex; align-items:center; min-height:48px; padding:0 22px 0 38px; background:var(--lemon); color:var(--ink); font:inherit; font-weight:800; text-decoration:none; border:0; cursor:pointer; transform:rotate(-1deg); transition:transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease;
  clip-path:polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%, 17px 50%, calc(17.24px) calc(50% + -1.55px), calc(17.95px) calc(50% + -2.94px), calc(19.06px) calc(50% + -4.05px), calc(20.45px) calc(50% + -4.76px), calc(22.00px) calc(50% + -5.00px), calc(23.55px) calc(50% + -4.76px), calc(24.94px) calc(50% + -4.05px), calc(26.05px) calc(50% + -2.94px), calc(26.76px) calc(50% + -1.55px), calc(27.00px) calc(50% + -0.00px), calc(26.76px) calc(50% + 1.55px), calc(26.05px) calc(50% + 2.94px), calc(24.94px) calc(50% + 4.05px), calc(23.55px) calc(50% + 4.76px), calc(22.00px) calc(50% + 5.00px), calc(20.45px) calc(50% + 4.76px), calc(19.06px) calc(50% + 4.05px), calc(17.95px) calc(50% + 2.94px), calc(17.24px) calc(50% + 1.55px), calc(17.00px) calc(50% + 0.00px), 17px 50%); }
.gtags li:nth-child(2n) .gtag{ transform:rotate(1.2deg); }
.gtag:hover{ transform:rotate(0) translateY(-2px); }
.gtag[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.gift-rows.compact{ gap:12px; } .gift-rows.compact .grow{ grid-template-columns:96px 1fr; } .gift-rows.compact .glabel{ font-size:1.125rem; } .gift-rows.compact .gtag{ min-height:42px; font-size:0.9375rem; }

.pack .edit{ font-size:1rem; font-weight:600; font-style:italic; line-height:1.4; color:var(--ink); }
.pack .src, .pick .src{ font-size:var(--step-small); font-weight:700; color:var(--ink-2); }
.pick .edit{ font-style:italic; font-weight:600; }

.heart{ position:absolute; right:8px; top:8px; width:40px; height:40px; border:0; border-radius:50%; background:var(--paper); display:grid; place-items:center; cursor:pointer; z-index:2; transition:transform var(--t-press) var(--ease-out); }
.heart svg, .save-btn svg{ width:22px; height:22px; fill:transparent; transition:fill var(--t-hover) ease; }
.heart:hover{ transform:scale(1.08); }
.heart[aria-pressed="true"] svg, .save-btn[aria-pressed="true"] svg{ fill:var(--red); }
.save-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--paper-2); font-weight:700; cursor:pointer; transition:background-color var(--t-hover) ease; }
.save-btn:hover{ background:var(--lemon); }
.price-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.pricetag.sale .was{ font-weight:700; } .pricetag.sale s{ text-decoration-thickness:2px; }
.r-saved{ margin:0 -28px; padding:20px 28px; }
.r-saved h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; margin-bottom:12px; }
.r-saved ul{ display:flex; flex-direction:column; gap:14px; }
.r-saved li{ display:grid; grid-template-columns:48px 1fr; gap:4px 12px; align-items:center; }
.r-saved .thumb{ width:48px; height:60px; grid-row:1 / span 2; }
.r-saved .nm{ font-weight:700; line-height:1.3; }
.r-saved .acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media (max-width: 760px){
  :root{ --stick:86px; }
  
  html{ scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
  .searchbar{ padding:24px var(--gut) 8px; }
  .sform{ padding-left:16px; }
  .search-sec{ padding:24px var(--gut) 40px; }
  .sform.big{ padding-left:20px; } .sform.big input, .sform.big .sprompt{ font-size:var(--step-body); } .sform.big input{ min-height:48px; } .sform.big .sbtn{ width:48px; height:48px; }
  .grow, .gift-rows.compact .grow{ grid-template-columns:1fr; gap:8px; }
  .r-saved{ margin:0 -20px; padding:20px; }
}
@media (prefers-reduced-motion: reduce){ .sprompt{ transition:none; } }



.mark .slot{ display:inline-block; overflow:hidden; vertical-align:bottom; height:1.12em; line-height:1.12; }
.mark .slot-in{ display:inline-block; color:var(--lemon); }
.bigname .slot, .mword .slot{ color:inherit; }
.mword .slot{ color:var(--lemon); }
html.js .mark .slot-in{ animation:slotroll 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
@keyframes slotroll{ from{ transform:translateY(105%); } to{ transform:none; } }
.mark .disp{ font-size:1.875rem; white-space:nowrap; }
.bigname{ font-size:11.6vw; }


body[data-theme="mombbae"]{ --red:#C8102E; --ink-deep:#0E0E0E; --neon:#E8FF3A; --display:'Anton', 'Pretendard', sans-serif; }
body[data-theme="mombbae"] .disp{ letter-spacing:0.004em; line-height:0.92; }
body[data-theme="mombbae"] .btn, body[data-theme="mombbae"] .count, body[data-theme="mombbae"] .r-close, body[data-theme="mombbae"] .chips-m a, body[data-theme="mombbae"] .save-btn, body[data-theme="mombbae"] .sform, body[data-theme="mombbae"] .sbtn{ border-radius:0; }
body[data-theme="mombbae"] .scallop{ display:none; }
body[data-theme="mombbae"] .awning{ background:var(--ink-deep); }
body[data-theme="mombbae"] .awning .cats a[aria-current]{ text-decoration-color:var(--neon); }
body[data-theme="mombbae"] .mark .slot-in{ color:var(--neon); }
body[data-theme="mombbae"] .pricetag{ background:var(--neon); }
body[data-theme="mombbae"] .ph-wrap.pic img, body[data-theme="mombbae"] .gallery img{ filter:contrast(1.12) saturate(1.08); }
body[data-theme="mombbae"] .mark .disp{ font-size:2rem; }

body[data-theme="desk"]{ --red:#181715; --paper-2:#DCDBD5; --lemon:#D4DE3F; --display:'Bricolage Grotesque', 'Pretendard', sans-serif; }


.r-top .rh{ font-weight:800; font-size:1.375rem; letter-spacing:0.02em; font-variant-numeric:tabular-nums; line-height:1.2; }
.tape{ overflow:hidden; background:var(--lemon); color:var(--ink); margin:0 calc(-1 * var(--gut)); padding:10px 0; transform:rotate(-1deg); }
.tape span{ display:block; white-space:nowrap; font-family:var(--display); font-size:1.5rem; letter-spacing:0.12em; }
body[data-theme="mombbae"] .tape{ background:#E8FF3A; }


.r-coupons{ background:var(--lemon); margin:0 -28px; padding:16px 28px; }
.r-coupons h3{ font-family:var(--display); font-weight:400; font-size:1.375rem; margin-bottom:10px; }
.r-coupons ul{ display:flex; flex-direction:column; gap:10px; }
.r-coupons li{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:600; }
.r-coupons small{ font-weight:600; }
.r-disc{ display:flex; justify-content:space-between; font-weight:800; }
.phase-link, .on-red .phase-link, .on-red .pack-body .phase-link{ align-self:flex-start; color:var(--ink); }
@media (max-width: 760px){ .r-coupons{ margin:0 -20px; padding:16px 20px; } }

html.js [data-rise]{ opacity:0; transform:translateY(22px); }
html.js [data-rise].in{ opacity:1; transform:none; transition:opacity 600ms var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay:calc(var(--d, 0) * 75ms); }
html.js [data-hang]{ opacity:0; transform:translateY(-30px) rotate(-3deg); }
html.js [data-hang].in{ opacity:1; transform:none; transition:opacity 480ms var(--ease-out), transform 760ms var(--ease-out); transition-delay:calc(var(--d, 0) * 70ms); }

@media (max-width: 1100px){
  .awning-in{ flex-wrap:wrap; gap:6px 12px; }
  .awning-in nav{ order:3; flex:0 0 100%; margin:0; }
  .bagbtn{ margin-left:auto; }
  .pegs{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .foot-cols{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px){
  :root{ --gut:16px; }
  .notice-bar{ padding:7px var(--gut); }
  .awning-in{ padding:12px var(--gut) 8px; }
  .mark .disp{ font-size:1.75rem; } .mark .ko{ font-size:1.375rem; }
  .awning .bagbtn{ min-height:44px; padding:0 16px; }
  .awning-in nav{ display:none; }
  .nb-more{ display:none; }
  
  .chips-m{ display:flex; gap:8px; overflow-x:auto; padding:2px var(--gut) 10px; scrollbar-width:none; }
  .chips-m::-webkit-scrollbar{ display:none; }
  .chips-m a{ flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:var(--paper); color:var(--ink); font-weight:700; font-size:0.9375rem; text-decoration:none; }
  .chips-m a[aria-current]{ background:var(--ink); color:var(--paper); }
  .scallop{ height:16px; }
  .crumbs{ padding-top:32px; }
  .pegs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px 12px; }
  .pegs > li:nth-child(even) .pack{ margin-top:32px; }
  .band{ height:78px; padding-top:40px; }
  .band .disp{ font-size:1.5rem; }
  .band .per{ font-size:0.8125rem; margin-left:5px; }
  .staple.l{ left:12px; } .staple.r{ right:12px; }
  .pack-body{ padding:10px 10px 12px; gap:8px; }
  .ph{ font-size:0.8125rem; padding:10px; }
  .badges{ left:6px; top:6px; gap:4px; }
  .pack h3{ font-size:1rem; }
  .pack .meta{ font-size:0.8125rem; }
  .receipt{ padding:22px 20px 48px; }
  .r-ship, .r-rec{ margin:0 -20px; padding-left:20px; padding-right:20px; }
  .thumbbar{ display:flex; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:50; gap:8px; align-items:center; transform:translateY(160%); visibility:hidden; transition:transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
  .thumbbar.show{ transform:none; visibility:visible; transition:transform var(--t-ui) var(--ease-out); }
  .thumbbar .btn{ flex:1; min-height:56px; }
  .foot{ min-height:0; gap:15svh; padding:72px var(--gut) 96px; }
  .foot-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 16px; }
  .foot-cols .wide{ grid-column:1 / -1; }
  .bigname{ font-size:11.4vw; }
  .legal{ font-size:0.8125rem; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html.js [data-rise], html.js [data-hang]{ opacity:1; transform:none; }
}

.r-best{ background:var(--paper-2); padding:10px 12px; font-weight:700; font-size:var(--step-small); line-height:1.45; }


.btn[aria-disabled="true"]{ background:var(--ink-2); cursor:not-allowed; transform:none; }
