:root{
  /* palette from the brand guide: logo wine, cream, and the four pouch colors */
  --wine:#5C212D;
  --ink:#3B1820;
  --body:#5E3D44;
  --paper:#FFF4DF;
  --white:#FFFDF8;
  --accent:#E5574F;
  --frame:#3B1820;
  --sky:#C2E3F6;
  --butter:#F8D96B;
  --cream-butter:#FCEBB3;
  --pink:#F8CEC6;
  --lav:#DCD0F2;
  --coral:#F5695D;
  --blue:#00B5E8;
  --lime:#BBD839;
  --purple:#A571BE;
  --purple-deep:#8A5FA8;
  --display:'Fraunces', Georgia, serif;
  --script:'Yellowtail', cursive;
  --sans:'DM Sans', Arial, sans-serif;
  --ko:'Noto Serif KR', Georgia, serif;
  --line:2.5px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
  --pop-sm:3px 3px 0 var(--ink);
  --gutter:clamp(16px, 5vw, 88px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:12px;background:var(--frame);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100, "WONK" 1;margin:0;line-height:1;letter-spacing:-.02em}
h1{font-size:clamp(46px, 7vw, 100px);font-weight:900}
h2{font-size:clamp(36px, 5vw, 68px)}
h3{font-size:clamp(23px, 2.1vw, 29px)}
h2 em,.script{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:0;font-variation-settings:normal}
.script{color:var(--accent);display:inline-block;transform:rotate(-3deg);font-size:1.02em;line-height:1.15}
p{margin:0}
.red{color:var(--accent)}
.ko{font-family:var(--ko)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--white);border:var(--line);border-radius:999px;padding:6px 14px;margin-bottom:22px}
.lede{font-size:clamp(17px, 1.4vw, 20px);color:var(--body);max-width:48ch;margin-top:22px}
.small{font-size:13px;color:var(--body);opacity:.75}
.hangul{font-family:var(--ko);font-weight:700;font-size:16px;letter-spacing:.06em}

/* page frame */
.frame{background:var(--paper);border:var(--line);border-radius:24px;overflow:clip}
section{border-top:var(--line)}
.hero{border-top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:var(--ink);font-weight:700;padding:14px 26px;border-radius:999px;border:var(--line);box-shadow:var(--pop-sm);transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{background:var(--butter);color:var(--ink)}
.btn-small{padding:8px 18px;font-size:14px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 22px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px var(--gutter);background:var(--paper);border-bottom:var(--line)}
.nav-logo img{height:42px;width:auto;mix-blend-mode:multiply}
.nav-links{display:flex;align-items:center;gap:26px;font-weight:700;font-size:15px}
.nav-links a:not(.btn):hover{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:640px){.nav-links a:not(.btn){display:none}.nav-logo img{height:34px}}

/* hero */
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:1fr;padding:0 var(--gutter) 104px;background:#FDF2D8}
.hero-stage{position:relative;margin-inline:calc(var(--gutter) * -1);aspect-ratio:16/9;max-height:820px;display:flex;align-items:center;padding:40px var(--gutter) 110px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom}
.hero-text{position:relative;max-width:min(620px, 46%)}
.hero h1{font-size:clamp(40px, 4.6vw, 80px)}
.hero .lede{max-width:34ch}
.hero-art{position:relative;z-index:1;justify-self:center;width:min(100%, 1180px);margin-top:-90px}
.hero-frame{border:3px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);transform:rotate(1deg);background:var(--white)}
.hero-frame img{width:100%;height:auto}
.seal{position:absolute;left:-40px;bottom:-64px;width:150px;height:150px;border-radius:50%;background:var(--wine);color:#fff;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:var(--pop)}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.seal text{fill:#fff;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em}
.seal-ko{font-family:var(--ko);font-weight:900;font-size:40px;line-height:1}
.sticker{position:absolute;top:-26px;right:-22px;width:100px;height:100px;border-radius:50%;background:var(--butter);border:3px solid var(--ink);box-shadow:var(--pop-sm);display:grid;place-items:center;text-align:center;font-family:var(--script);font-size:24px;line-height:.95;transform:rotate(12deg)}
.spark{position:absolute;font-size:34px;line-height:1;color:var(--butter);-webkit-text-stroke:2px var(--ink);animation:wiggle 2.4s ease-in-out infinite}
.s1{top:10%;left:-44px}
.s2{top:44%;right:-40px;font-size:26px;color:var(--sky);animation-delay:.6s}
.s3{bottom:-44px;right:26%;font-size:28px;color:var(--pink);animation-delay:1.2s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg) scale(1.1)}}
@media (max-width:860px){
  .hero{padding-bottom:80px}
  .hero-stage{display:block;aspect-ratio:auto;max-height:none;padding:0}
  .hero h1{font-size:clamp(44px, 11vw, 64px)}
  .hero-bg{position:relative;height:auto;aspect-ratio:1/1;object-position:right bottom}
  .hero-text{max-width:none;padding:28px var(--gutter) 0}
  .hero-art{margin-top:48px}
  .hero-art{width:calc(100% - 12px)}
  .hero-frame{box-shadow:7px 7px 0 var(--ink)}
  .seal{left:-6px;bottom:-74px;width:84px;height:84px}
  .seal text{font-size:12.5px}
  .seal-ko{font-size:22px}
  .sticker{top:-34px;right:-6px;width:68px;height:68px;font-size:16px}
  .s1{left:-14px}.s2{right:-14px}
}

/* marquee */
.marquee{overflow:hidden;background:var(--lav);padding:14px 0}
.marquee-track{display:flex;width:max-content;align-items:center;gap:26px;animation:marquee 30s linear infinite;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:22px;white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--accent);font-size:18px}
.marquee-track .ko{font-size:19px}
@keyframes marquee{to{transform:translateX(calc(-50% - 13px))}}

/* section heads */
.section-head{display:flex;flex-direction:column;align-items:flex-start}
.hint{margin-top:16px;font-family:var(--script);font-size:26px;color:var(--accent)}
@media (hover:none){.hint{display:none}}

/* masks */
.masks{padding:100px var(--gutter);background:var(--cream-butter)}
.masks .eyebrow{background:var(--paper)}
.mask-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px}
.mask{--c:var(--coral);background:var(--white);border:3px solid var(--ink);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--pop);transition:transform .15s ease, box-shadow .15s ease}
.mask[data-color="blue"]{--c:var(--blue)}
.mask[data-color="green"]{--c:var(--lime)}
.mask[data-color="purple"]{--c:var(--purple)}
.mask:hover{transform:translate(-3px,-3px) rotate(-.8deg);box-shadow:10px 10px 0 var(--ink)}
.mask-media{position:relative;aspect-ratio:7/11;overflow:hidden;isolation:isolate;border-bottom:3px solid var(--ink);background:var(--c)}
.mask-pouch{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.mask-scene{position:absolute;inset:0;background:color-mix(in srgb, var(--c) 42%, var(--white));opacity:0;transition:opacity .25s ease}
.mask-scene img{width:100%;height:100%;object-fit:contain;object-position:bottom;mix-blend-mode:multiply;filter:saturate(1.1)}
.mask:hover .mask-scene{opacity:1}
.mask-num{position:absolute;top:12px;left:12px;z-index:2;width:42px;height:42px;display:grid;place-items:center;background:var(--white);border:var(--line);border-radius:50%;font-family:var(--display);font-weight:800;font-size:16px;line-height:1}
.mask-body{padding:22px 20px 26px;flex:1}
.mask .ing{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.mask .ing span{font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--c);border:2px solid var(--ink)}
.mask .line{font-family:var(--script);font-size:26px;line-height:1.1;color:var(--accent)}
.mask .desc{color:var(--body);font-size:15px;margin-top:6px}
@media (max-width:1100px){.mask-grid{gap:18px}.mask-body{padding:20px 16px 24px}}
@media (max-width:880px){.mask-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mask-grid{grid-template-columns:1fr;gap:22px}}

/* unnie */
.unnie{position:relative;overflow-x:clip;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:72px;padding:100px var(--gutter);background:var(--pink)}
.unnie .eyebrow{background:var(--paper)}
.unnie-art{position:relative;isolation:isolate;justify-self:center;width:min(100%, 500px)}
.unnie-blob{position:absolute;inset:4% 0 0;z-index:-1;background:var(--paper);border:3px solid var(--ink);border-radius:50%;box-shadow:var(--pop)}
.unnie-art img{width:100%;max-height:76vh;object-fit:contain;mix-blend-mode:multiply;clip-path:circle(50% at 50% 54%)}
.bubble{position:absolute;top:0;right:-4%;background:var(--white);border:var(--line);box-shadow:var(--pop-sm);font-family:var(--script);font-size:26px;padding:8px 20px;border-radius:22px 22px 22px 4px;transform:rotate(5deg);color:var(--accent)}
.promises{list-style:none;padding:0;margin:34px 0 0;counter-reset:p;display:grid;gap:12px}
.promises li{counter-increment:p;position:relative;padding:16px 18px 16px 64px;background:var(--white);border:var(--line);border-radius:16px;color:var(--body)}
.promises li::before{content:counter(p);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:var(--ink);border:2px solid var(--ink);font-family:var(--display);font-weight:800;font-size:16px}
.promises b{color:var(--ink)}
@media (max-width:860px){.unnie{grid-template-columns:1fr;gap:44px;padding-block:72px}.bubble{right:0;font-size:22px}}

/* how */
.how{display:grid;grid-template-columns:1.35fr .65fr;gap:28px 64px;align-items:center;padding:100px var(--gutter);background:var(--sky)}
.how .eyebrow{background:var(--paper)}
.how-head{grid-column:1}
.steps{grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.step{padding:24px 24px 26px;border-radius:18px;background:var(--white);border:3px solid var(--ink);box-shadow:var(--pop-sm)}
.step .num{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:48px;line-height:1;color:var(--accent);display:block;margin-bottom:12px}
.step h3{font-size:23px}
.step p{color:var(--body);font-size:15px;margin-top:8px}
.how-art{grid-column:2;grid-row:1/3;position:relative;justify-self:center;width:min(100%, 360px)}
.how-art img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 22px 22px;border:3px solid var(--ink);box-shadow:var(--pop);background:var(--white)}
.timer{position:absolute;left:-34px;bottom:36px;width:108px;height:108px;border-radius:50%;background:var(--butter);border:3px solid var(--ink);box-shadow:var(--pop-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg)}
.timer b{font-family:var(--display);font-weight:900;font-size:28px;letter-spacing:0;text-transform:none;line-height:1}
@media (max-width:860px){.how{grid-template-columns:1fr;padding-block:72px}.how-art{grid-column:1;grid-row:auto;order:3;width:min(100% - 40px, 320px)}.steps{grid-template-columns:1fr}.timer{left:-18px}}


/* signoff */
.signoff{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:64px;padding:96px var(--gutter);background:var(--purple-deep);color:#fff}
.signoff::before{content:"언니는 다 알지";position:absolute;inset:auto 0 -0.16em 0;text-align:center;font-family:var(--ko);font-weight:900;font-size:clamp(80px,16vw,230px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(0,0,0,.28);white-space:nowrap;pointer-events:none}
.polaroid{position:relative;background:var(--white);padding:12px 12px 50px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-5deg)}
.polaroid img{width:min(240px,38vw);border:2px solid var(--ink)}
.polaroid .caption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--script);font-size:26px;color:var(--accent)}
.signoff .xo{font-family:var(--script);font-size:clamp(64px,9vw,128px);line-height:1;transform:rotate(-4deg);text-shadow:4px 4px 0 var(--ink)}
.signoff .hangul{color:#fff;margin-top:18px;font-size:19px}
@media (max-width:640px){.signoff{flex-direction:column;gap:36px;text-align:center;padding-block:72px}.polaroid img{width:200px}}

/* footer */
.foot{padding:40px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px;font-size:14px;background:var(--paper);border-top:var(--line)}
.foot img{height:40px;width:auto;mix-blend-mode:multiply}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-weight:700}
.foot-links a:hover{color:var(--accent)}
.foot p{margin-left:auto;color:var(--body)}
@media (max-width:640px){.foot p{margin-left:0}body{padding:8px}.frame{border-radius:18px}}

/* product detail pages */
.pdp{--c:var(--coral);--c-soft:#FBD5CF}
.pdp[data-color="blue"]{--c:var(--blue);--c-soft:#CBE9F7}
.pdp[data-color="green"]{--c:var(--lime);--c-soft:#EEF4C4}
.pdp[data-color="purple"]{--c:var(--purple);--c-soft:#E8DAEF}
.pd-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;padding:64px var(--gutter) 88px;border-top:0}
.pd-media{position:relative;justify-self:center;width:min(100%, 460px);padding:18px;border-radius:26px;background:var(--c-soft);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);transform:rotate(-1.5deg)}
.pd-media img{width:100%;border:2.5px solid var(--ink);box-shadow:var(--pop-sm)}
.pd-media .mask-num{top:-18px;left:-18px;width:56px;height:56px;font-size:20px;box-shadow:var(--pop-sm)}
.pd-media .sticker{top:auto;bottom:-30px;right:-26px}
.crumb{font-size:14px;font-weight:700;color:var(--body);margin-bottom:18px}
.crumb a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.crumb a:hover{color:var(--accent)}
.pd-info h1{font-size:clamp(52px, 7vw, 104px)}
.pd-line{font-family:var(--script);font-size:clamp(28px, 3vw, 40px);color:var(--accent);transform:rotate(-2deg);transform-origin:left;margin-top:6px}
.pd-head{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:clamp(24px, 2.4vw, 34px);line-height:1.15;margin-top:22px;max-width:22ch}
.pd-facts{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px}
.pd-facts li{padding:12px 10px;border-radius:14px;background:var(--white);border:2.5px solid var(--ink);text-align:center;font-size:12.5px;color:var(--body);line-height:1.25}
.pd-facts b{display:block;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);margin-bottom:2px}
.pd-does{padding:96px var(--gutter);background:var(--c-soft)}
.pd-does .eyebrow,.pd-use .eyebrow,.pd-more .eyebrow{background:var(--paper)}
.pd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.pd-card{position:relative;padding:28px 26px 30px;border-radius:20px;background:var(--white);border:3px solid var(--ink);box-shadow:var(--pop)}
.pd-card-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);border:2.5px solid var(--ink);font-family:var(--display);font-weight:800;font-size:15px;margin-bottom:16px}
.pd-card p{color:var(--body);font-size:15.5px;margin-top:10px}
.pd-why{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center;padding:96px var(--gutter);background:var(--paper)}
.pd-why-art{position:relative;justify-self:center;width:min(100%, 380px)}
.pd-why-art img{width:100%;aspect-ratio:4/5;object-fit:contain;object-position:bottom;border-radius:999px 999px 22px 22px;border:3px solid var(--ink);box-shadow:var(--pop);background:var(--c-soft)}
.pd-why-art .pd-why-frame{border-radius:999px 999px 22px 22px;border:3px solid var(--ink);box-shadow:var(--pop);background:var(--c-soft);overflow:hidden}
.pd-why-art .pd-why-frame img{border:0;box-shadow:none;border-radius:0;mix-blend-mode:multiply}
.pd-why-text .lede{max-width:52ch}
.pd-ing{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;padding-top:28px;border-top:2.5px dashed var(--ink)}
.pd-ing h3{font-size:20px;margin-bottom:12px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14px;font-weight:700;padding:6px 13px;border-radius:999px;background:var(--c);border:2px solid var(--ink)}
.chips-quiet li{background:var(--white);font-weight:500}
.pd-use{padding:96px var(--gutter);background:var(--sky)}
.pd-steps{list-style:none;counter-reset:s;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pd-steps li{counter-increment:s;padding:24px 22px 26px;border-radius:18px;background:var(--white);border:3px solid var(--ink);box-shadow:var(--pop-sm);color:var(--body);font-size:15.5px}
.pd-steps li::before{content:"0" counter(s);display:block;font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:44px;line-height:1;color:var(--accent);margin-bottom:12px}
.pd-steps b{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);margin-bottom:6px}
.pd-tip{margin-top:34px;max-width:720px;padding:22px 26px;border-radius:22px 22px 22px 4px;background:var(--butter);border:3px solid var(--ink);box-shadow:var(--pop-sm);font-size:17px}
.pd-tip-label{font-family:var(--script);font-size:28px;line-height:1;color:var(--accent);margin-bottom:6px}
.pd-note{margin-top:10px;font-size:15px}
.pd-care{margin-top:22px}
.pd-more{padding:96px var(--gutter);background:var(--cream-butter)}
.mask-grid-3{grid-template-columns:repeat(3,1fr);max-width:960px}
.mask-more{margin-top:12px;font-weight:700;font-size:14.5px}
.mask-more span{display:inline-block;transition:transform .15s ease}
.mask:hover .mask-more span{transform:translateX(4px)}
a.mask{color:inherit}
.mask-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.mask{position:relative}
@media (max-width:1000px){.pd-steps{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .pd-hero{grid-template-columns:1fr;gap:56px;padding:40px var(--gutter) 72px}
  .pd-media{width:min(100% - 24px, 360px);padding:12px}
  .pd-facts{grid-template-columns:repeat(2,1fr)}
  .pd-does,.pd-why,.pd-use,.pd-more{padding-block:72px}
  .pd-cards{grid-template-columns:1fr}
  .pd-why{grid-template-columns:1fr;gap:44px}
  .pd-why-art{width:min(100% - 40px, 300px)}
  .pd-ing{grid-template-columns:1fr}
  .mask-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.pd-steps,.mask-grid-3{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d, 0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .seal svg,.spark,.marquee-track{animation:none}
}