:root{--torder-red:#d42e1e;--torder-red-dark:#a92015;--torder-ivory:#f4f0e7;--torder-charcoal:#171412;--torder-cream:#fffaf0}
body.torder-page{background:var(--torder-ivory);padding-bottom:0}
.torder-page button,.torder-page a{touch-action:manipulation}
.torder-page .wrap{width:min(1080px,calc(100% - 40px))}
.torder-page .site-head{position:relative;z-index:20}
.torder-page .nav a[aria-current="page"]{color:#fff}
.torder-hero{position:relative;overflow:hidden;background:var(--torder-charcoal);color:#f8f3ea;padding:58px 0 66px;border-top:1px solid #2d2925}
.torder-hero:before{content:"";position:absolute;inset:-30% -10% auto 50%;height:560px;background:radial-gradient(circle,rgba(212,46,30,.27),transparent 67%);pointer-events:none}
.torder-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:44px;align-items:center}
.torder-kicker,.benefit-label,.section-label{font:600 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#f05443}
.campaign-lockup{display:flex;align-items:center;gap:14px;margin-bottom:25px;color:#fff}
.campaign-lockup img{width:116px;height:auto;display:block}
.campaign-lockup span{color:#776f67;font:400 20px/1 var(--sans)}
.campaign-lockup b{font:600 12px/1 var(--mono);letter-spacing:.18em}
.torder-hero h1{font:800 clamp(40px,4.5vw,55px)/1.14 var(--serif);letter-spacing:-.025em;margin:18px 0 18px;max-width:800px}
.hero-question{display:block}
.torder-hero h1 em{display:block;color:#eee7dc;font-style:normal}
.hero-brand-torder{color:#d6c39e}
.hero-brand-hwaggaesoo{color:#d8786b}
.hero-benefit-line{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,540px);margin:26px 0 18px;padding:13px 0;border-top:1px solid #443d38;border-bottom:1px solid #443d38}
.hero-benefit-line span{font-size:14px;color:#c9c2b8}
.hero-benefit-line strong{font:800 25px/1.1 var(--serif);color:#ff5c49;white-space:nowrap}
.hero-campaign-visual{position:relative;display:block;margin:0;border:1px solid #403832;overflow:hidden;background:#0b0908;box-shadow:14px 14px 0 rgba(212,46,30,.3)}
.hero-campaign-image{position:static;display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;filter:saturate(.9) contrast(1.02)}
.cta{min-height:52px;padding:14px 22px;border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;font-family:inherit}
.cta:hover{transform:translateY(-1px)}
.cta-primary{background:var(--torder-red);color:#fff;border-color:var(--torder-red)}
.cta-primary:hover{background:var(--torder-red-dark);border-color:var(--torder-red-dark)}
.cta-dark{background:var(--torder-charcoal);color:#fff;border-color:var(--torder-charcoal)}
.cta-outline{background:transparent;color:var(--torder-charcoal);border-color:#878078}
.cta[aria-disabled="true"],.cta:disabled{opacity:.52;cursor:not-allowed;transform:none}
.torder-section{padding:88px 0;border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:38px}
.section-head h2{font:800 clamp(32px,5vw,54px)/1.16 var(--serif);letter-spacing:-.04em;margin:13px 0 16px}
.section-head>p:last-child{color:var(--soft);font-size:18px}
.coupon-section{background:#ebe4d8}
.pin-label{font-size:13px;color:var(--soft);margin:0 0 8px}
.pin-box{display:flex;gap:10px;align-items:stretch}
.pin-value{flex:1;min-width:0;border:1px solid var(--line);background:#fff;padding:14px 16px;font:700 clamp(20px,4vw,28px)/1.2 var(--mono);letter-spacing:.09em;text-align:center;user-select:all;overflow-wrap:anywhere}
.coupon-actions{display:grid;gap:10px;margin-top:18px}
.coupon-help{font-size:14px;color:var(--soft);margin:18px 0 0}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.benefit-panel{background:var(--torder-ivory);padding:42px;display:flex;flex-direction:column;align-items:flex-start}
.benefit-panel p{color:var(--soft);margin:0 0 24px}
.benefit-number{font:800 38px/1 var(--serif);color:var(--torder-red);margin:3px 0 5px}
.kakao-coupon-visual{display:block;width:100%;height:auto;margin:4px 0 22px;border:1px solid #d8b818}
.benefit-panel .cta{margin-top:auto;width:100%}
.todo-note{font-size:12px;color:#7c756d;margin:9px 0 0;width:100%;text-align:center}
.media-section{background:var(--torder-charcoal);color:#f5f0e7}
.media-section .section-head>p:last-child{color:#bdb5aa}
.terminal-frame{border:1px solid #4a443e;background:#080808;padding:12px 12px 14px;border-radius:18px 18px 4px 4px;box-shadow:0 24px 50px rgba(0,0,0,.28);overflow:hidden}
.terminal-bar{min-height:46px;display:flex;align-items:center;justify-content:center;gap:11px;color:#f5f0e7;border-bottom:1px solid #332f2b;margin-bottom:12px}
.terminal-bar img{width:72px;height:auto;display:block}
.terminal-bar b{color:#777068}
.terminal-bar span{font:600 10px/1 var(--mono);letter-spacing:.18em}
.campaign-video{width:100%;height:auto;aspect-ratio:1280/800;background:#050505;border:0;display:block;object-fit:contain}
.faq-list details{border-top:1px solid var(--line);padding:20px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{font-weight:800;font-size:18px;cursor:pointer;padding-right:32px;position:relative;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";position:absolute;right:4px;top:0;color:var(--torder-red);font-size:24px}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{color:var(--soft);margin:13px 0 0;max-width:72ch}
.torder-footer{padding-bottom:92px}
.sticky-cta{position:fixed;z-index:50;left:50%;bottom:16px;transform:translateX(-50%);width:min(520px,calc(100% - 28px));box-shadow:0 12px 36px rgba(0,0,0,.3);transition:opacity .2s,visibility .2s,transform .2s}
.sticky-cta.is-hidden{opacity:0;visibility:hidden;transform:translate(-50%,18px);pointer-events:none}
.toast{position:fixed;z-index:80;left:50%;bottom:88px;transform:translate(-50%,12px);background:#171412;color:#fff;padding:13px 18px;box-shadow:0 8px 28px rgba(0,0,0,.25);font-weight:700;opacity:0;visibility:hidden;transition:.2s;text-align:center;max-width:calc(100% - 28px)}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:780px){
  .torder-page .wrap{width:min(100% - 28px,1080px)}
  .torder-hero{padding:44px 0 54px}
  .torder-hero-grid{grid-template-columns:1fr;gap:24px}
  .torder-hero h1{font-size:clamp(39px,12vw,57px);margin-top:14px}
  .torder-hero-copy{font-size:17px;margin-bottom:20px}
  .hero-benefit-line{margin:18px 0 16px;padding:11px 0}
  .hero-benefit-line span{font-size:13px}
  .hero-benefit-line strong{font-size:22px}
  .hero-campaign-visual{margin:14px 0 6px;box-shadow:8px 8px 0 rgba(212,46,30,.28)}
  .hero-campaign-image{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
  .torder-hero .cta{width:100%}
  .torder-section{padding:64px 0}
  .pin-box{flex-direction:column}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-panel{padding:30px 24px}
  .terminal-frame{padding:8px;border-radius:13px 13px 3px 3px}
  .torder-footer{padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,.sticky-cta,.toast{transition:none}}

/* T'order campaign: neon webtoon palette and comic-style surfaces. */
.torder-page{
  --torder-red:#f71962;
  --torder-red-dark:#cb0b4a;
  --torder-ivory:#fff8eb;
  --torder-charcoal:#191337;
  --torder-cream:#fffefa;
  --torder-yellow:#ffe22d;
  --torder-blue:#2d6dff;
  --torder-ink:#170f30;
  background:var(--torder-ivory);
}
.torder-hero{
  background:
    radial-gradient(circle at 15% 8%,rgba(45,109,255,.32),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(247,25,98,.32),transparent 40%),
    #191337;
  border-top:4px solid #110b26;
  border-bottom:6px solid #100a25;
  padding:66px 0 78px;
}
.torder-hero:before{
  inset:0;
  height:auto;
  background-image:radial-gradient(rgba(255,255,255,.24) 1px,transparent 1px);
  background-size:17px 17px;
  opacity:.35;
}
.torder-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px}
.campaign-lockup{
  width:fit-content;
  max-width:100%;
  padding:7px 13px;
  background:#fffefa;
  color:var(--torder-ink);
  border:3px solid #0d0920;
  border-radius:14px;
  box-shadow:5px 5px 0 var(--torder-yellow);
  transform:rotate(-2deg);
}
.campaign-lockup span{color:var(--torder-red)}
.campaign-lockup b{color:var(--torder-ink)}
.torder-hero h1{
  max-width:620px;
  font:900 clamp(38px,4.6vw,63px)/1.08 var(--sans);
  letter-spacing:-.055em;
  margin:28px 0 25px;
  text-shadow:3px 4px 0 #090719;
}
.torder-hero h1 em{color:#fffefa}
.hero-brand-torder{color:var(--torder-yellow)}
.hero-brand-hwaggaesoo{color:#ff6da0}
.hero-benefit-line{
  width:min(100%,570px);
  padding:16px 20px;
  margin:28px 0 25px;
  background:var(--torder-yellow);
  color:var(--torder-ink);
  border:3px solid #0d0920;
  border-radius:14px;
  box-shadow:8px 8px 0 #080617;
  transform:rotate(-1.5deg);
}
.hero-benefit-line span{color:var(--torder-ink);font-weight:800}
.hero-benefit-line strong{color:var(--torder-red);font:900 clamp(28px,3.4vw,43px)/1 var(--sans);letter-spacing:-.05em}
.hero-campaign-visual{
  border:5px solid #0c0820;
  border-radius:23px;
  background:#0c0820;
  box-shadow:15px 15px 0 var(--torder-yellow),0 0 38px rgba(247,25,98,.3);
  transform:rotate(1deg);
}
.hero-campaign-image{filter:saturate(1.08);width:100%;height:auto}
.hero-cash-promo .hero-campaign-image{aspect-ratio:1466/1073;object-fit:contain}
.hero-poster-link{display:block}
.hero-poster-link:focus-visible{outline:3px solid var(--torder-yellow);outline-offset:-5px}
.hero-cash-promo figcaption{padding:8px 10px;text-align:center;color:#fffefa;font:700 11px/1.35 var(--sans)}
.torder-page .cta{
  border-width:3px;
  border-color:#110b27;
  border-radius:13px;
  box-shadow:5px 5px 0 #110b27;
  font-weight:900;
}
.torder-page .cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #110b27}
.torder-page .cta-primary{background:var(--torder-red);color:#fff}
.torder-page .cta-primary:hover{background:var(--torder-red-dark);border-color:#110b27}
.torder-page .cta-dark{background:var(--torder-charcoal);color:#fff}
.torder-section{border-bottom:4px solid #1b1338}
.torder-kicker,.benefit-label,.section-label{color:var(--torder-red);font-weight:800}
.section-head h2{
  font-family:var(--sans);
  font-weight:900;
  letter-spacing:-.05em;
}
.coupon-section{
  background:
    radial-gradient(circle,rgba(247,25,98,.12) 1.5px,transparent 2px) 0 0/22px 22px,
    linear-gradient(130deg,#fff8dc 0%,#ffe6ec 100%);
}
.pin-value{border:2px solid var(--torder-ink);border-radius:10px}
.benefit-grid{gap:20px}
.benefit-panel{
  border:3px solid var(--torder-ink);
  border-radius:23px;
  box-shadow:8px 8px 0 var(--torder-ink);
  background:#fff4cc;
}
.benefit-panel:nth-child(2){background:#e5edff}
.benefit-number{font-family:var(--sans);font-weight:900;color:var(--torder-red)}
.kakao-coupon-visual{border:3px solid var(--torder-ink);border-radius:13px}
.media-section{
  background:radial-gradient(circle at 90% 12%,rgba(45,109,255,.36),transparent 33%),#191337;
}
.media-section .section-label{color:var(--torder-yellow)}
.terminal-frame{border:4px solid var(--torder-yellow);box-shadow:13px 13px 0 #050313;border-radius:20px 20px 8px 8px}
.media-section+.torder-section{background:#fff8eb}
.faq-list details{border-color:#b8afc7}
.faq-list details:last-child{border-color:#b8afc7}
.faq-list summary:after{color:var(--torder-red)}
.torder-page .sticky-cta{box-shadow:5px 5px 0 #110b27,0 12px 36px rgba(0,0,0,.3)}

@media(max-width:780px){
  body.torder-page .floating-site-actions{display:none}
  .torder-hero{padding:22px 0 55px}
  .torder-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero-campaign-visual{order:-1;margin:0 8px 6px 0;box-shadow:8px 8px 0 var(--torder-yellow)}
  .hero-campaign-image{height:min(58vw,265px);object-fit:cover;object-position:center 46%}
  .hero-cash-promo .hero-campaign-image{height:auto;object-fit:contain}
  .campaign-lockup{margin-bottom:14px}
  .torder-hero h1{font-size:clamp(37px,11vw,56px);margin:21px 0}
  .hero-benefit-line{margin:20px 5px 22px 0;padding:13px 16px}
  .hero-benefit-line strong{font-size:clamp(28px,8vw,38px)}
  .benefit-grid{gap:17px}
  .benefit-panel{box-shadow:6px 6px 0 var(--torder-ink)}
}

/* Three benefits share one row on desktop. */
.benefits-intro{max-width:800px;margin-bottom:30px}
.benefit-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.benefit-grid-three .benefit-panel{min-width:0;padding:30px 24px;background:#fff4cc}
.benefit-grid-three .benefit-panel:nth-child(2){background:#e5edff}
.benefit-grid-three .benefit-panel:nth-child(3){background:#ffe9f1}
.benefit-grid-three .benefit-label{margin:0 0 8px;font-size:11px}
.benefit-grid-three h3{font:900 clamp(23px,2.3vw,30px)/1.18 var(--sans);letter-spacing:-.045em;margin:10px 0 12px}
.benefit-grid-three .benefit-number{font:900 clamp(29px,2.7vw,36px)/1.1 var(--sans);letter-spacing:-.04em;white-space:nowrap;margin:0 0 20px}
.benefit-grid-three .benefit-panel>p:not(.benefit-label):not(.pin-label):not(.coupon-help):not(.todo-note){font-size:14px;line-height:1.55;margin:0 0 20px}
.coupon-panel .pin-label{margin:0 0 7px;font-size:12px}
.coupon-panel .pin-box{width:100%;display:flex;flex-direction:column;gap:8px}
.coupon-panel .pin-value{flex:none;width:100%;font-size:20px;padding:12px 10px}
.coupon-panel .pin-box .cta{width:100%;margin:0}
.coupon-panel .coupon-actions{width:100%;margin-top:10px}
.coupon-panel .coupon-actions .cta{width:100%;font-size:14px;padding:12px}
.coupon-panel .coupon-help{font-size:12px;line-height:1.5;margin:14px 0 0}
.benefit-grid-three .kakao-coupon-visual{margin:0 0 16px}
.benefit-grid-three .kakao-panel>.cta,.benefit-grid-three .signup-panel>.cta{margin-top:auto;width:100%}
.torder-footer{line-height:1.8}

@media(max-width:900px){
  .benefit-grid-three{grid-template-columns:minmax(0,1fr)}
  .benefit-grid-three .benefit-panel{padding:30px 24px}
  .benefit-grid-three h3{font-size:30px}
  .benefit-grid-three .benefit-number{font-size:38px}
}

/* Campaign headline and the three-benefit total. */
.torder-hero h1 .hero-event-name{
  display:block;
  margin-bottom:15px;
  color:#fffefa;
  font:900 clamp(21px,2.2vw,29px)/1.2 var(--sans);
  letter-spacing:-.025em;
  text-shadow:none;
}
.torder-hero h1 .hero-main-line{
  display:block;
  color:#fffefa;
  font:900 clamp(49px,5.2vw,72px)/1.06 var(--sans);
  letter-spacing:-.065em;
}
.torder-hero h1 .hero-main-line strong{color:var(--torder-yellow);white-space:nowrap}
.torder-hero h1 .hero-sub-line{
  display:block;
  margin-top:19px;
  color:#ff9ac4;
  font:900 clamp(23px,2.5vw,34px)/1.25 var(--sans);
  letter-spacing:-.045em;
  text-shadow:none;
}
.torder-hero h1 .hero-almost-free{color:var(--torder-yellow);font-style:italic;white-space:nowrap}
.hero-price-note{display:inline-flex;align-items:center;gap:8px;margin:0 0 2px;padding:8px 13px;border:2px solid var(--torder-yellow);border-radius:999px;color:#fffefa;font:800 14px/1.2 var(--sans)}
.hero-price-note strong{color:var(--torder-yellow);font-size:19px}
.hero-benefit-line{flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.hero-benefit-line span{font:800 14px/1.3 var(--sans)}
.hero-benefit-line strong{font:900 clamp(22px,2.4vw,30px)/1.1 var(--sans)}
.hero-benefit-note{max-width:520px;margin:0 0 24px;color:#d9cfe9;font-size:12px;line-height:1.5}

@media(max-width:780px){
  .torder-hero h1 .hero-event-name{font-size:22px}
  .torder-hero h1 .hero-main-line{font-size:clamp(46px,11vw,58px)}
  .torder-hero h1 .hero-sub-line{font-size:clamp(24px,6vw,30px)}
  .hero-benefit-line{margin-bottom:12px}
  .hero-benefit-line strong{font-size:25px}
}