/* Jjamppong Zizon — one stylesheet */
:root{
  --red:#C8141E;--red-t:#A8101A;--ink:#141414;--cream:#FFF7EC;--paper:#fff;--gold:#F0A830;
  --muted:#4A4540;--rule:#E6D9C6;
  --display:'Oswald','Noto Sans KR',Impact,sans-serif;
  --sans:'Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--red-t);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.05;margin:0 0 .4em;letter-spacing:.01em;text-wrap:balance;text-transform:uppercase}
h1{font-size:clamp(2rem,5.5vw,3.6rem)}
h2{font-size:1.4rem;margin-top:1.1em}
h2:first-child{margin-top:0}
p{margin:0 0 1em}
.kr{display:block;font-family:var(--sans);font-weight:400;font-size:.5em;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:.3em}
.wrap{width:min(1040px,calc(100% - 40px));margin:0 auto}
.eyebrow{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--red-t);margin-bottom:.6em}
.lede{font-size:1.15rem;max-width:34em;color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}
.big{font-family:var(--display);font-size:1.9rem;font-weight:700;text-decoration:none;color:var(--ink)}
.big:hover{color:var(--red-t)}

/* skip + focus */
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;font-weight:700;padding:12px 18px;border-radius:999px}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,iframe:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--gold)}
.hero a:focus-visible,.page-head a:focus-visible,footer a:focus-visible,.nav a:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--gold)}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;padding:.8em 1.5em;border-radius:999px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--pop),box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
.btn.order{background:var(--red);color:#fff}
.btn.order:hover{color:#fff}
.btn.ghost{background:transparent}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:1.2em 0 0}

/* announce + nav */
.announce{background:var(--gold);color:var(--ink);text-align:center;padding:9px 16px;font-size:.95rem}
.announce p{margin:0}
.announce b{font-family:var(--display);font-size:1.15em}
.announce a{color:var(--ink);font-weight:700}
.nav{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--red)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em}
.brand img{width:44px;height:44px;border-radius:50%}
.brand em{font-style:normal;color:var(--gold)}
.nav nav{display:flex;align-items:center;gap:20px}
.nav nav a{color:#fff;text-decoration:none;font-family:var(--display);font-weight:500;letter-spacing:.06em;font-size:1rem;font-variant-numeric:tabular-nums}
.nav nav a:hover{color:var(--gold)}
.nav .btn{box-shadow:4px 4px 0 var(--gold);border-color:var(--gold);padding:.5em 1.1em;font-size:.95rem}
.nav .btn:hover{box-shadow:6px 6px 0 var(--gold);color:#fff}

/* hero */
.hero{background:var(--ink);color:#fff;padding:clamp(36px,6vw,72px) 0 clamp(40px,6vw,64px);text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-10%;width:70vw;max-width:820px;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(200,20,30,.5),transparent 65%);pointer-events:none}
.hero .wrap{position:relative;max-width:760px}
.hero-logo{display:block;width:min(62vw,300px);margin:0 auto 22px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.hero h1{color:#fff}
.hero h1 .kr{color:#E8DED0}
.hero .lede{color:#E8DED0;margin:0 auto .6em}
.prices{font-family:var(--display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-size:1rem}
.hero .btn.ghost{color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--gold)}
.hero .btn.ghost:hover{color:#fff;box-shadow:6px 6px 0 var(--gold)}

/* photos */
.photos{padding:0;background:var(--ink)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.grid.n1,.grid.n2,.grid.n4{grid-template-columns:repeat(2,1fr)}
.grid li{margin:0;aspect-ratio:1}
.grid img{width:100%;height:100%;object-fit:cover;display:block}

/* where */
.where{padding:clamp(40px,6vw,72px) 0}
.where .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.addr{font-size:1.1rem}
.map iframe{width:100%;aspect-ratio:4/3;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);display:block;background:#ddd}
.map .small{margin-top:.8em}

/* subpage head + prose */
.page-head{background:var(--ink);color:#fff;padding:clamp(36px,6vw,64px) 0 clamp(28px,4vw,44px);border-bottom:6px solid var(--red)}
.page-head .eyebrow{color:var(--gold)}
.page-head .lede{color:#E8DED0}
.page-head .cta{justify-content:flex-start;margin-bottom:0}
.page-head .btn.ghost{color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--gold)}
.page-head .btn.ghost:hover{color:#fff;box-shadow:6px 6px 0 var(--gold)}
.prose{padding:clamp(28px,4vw,56px) 0 56px;max-width:720px}
.prose h2{margin-top:1.6em}
.prose li{margin-bottom:.4em}

/* footer */
footer{background:var(--ink);color:#E8DED0;padding:26px 0 24px;border-top:3px solid var(--red)}
footer a{color:#fff}
footer a:hover{color:var(--gold)}
footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.85rem}
footer .bottom p{margin:0}
footer .sig{margin-left:auto;display:inline-flex;align-items:center;gap:10px;opacity:.9;text-decoration:none;transition:transform 200ms var(--pop),opacity 160ms}
footer .sig b{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#E8DED0}
footer .sig img{height:34px;width:auto;display:block}
footer .sig:hover{opacity:1;transform:rotate(-4deg) scale(1.08)}

/* accessibility widget */
.a11y{position:fixed;left:16px;bottom:16px;z-index:90}
.a11y-btn{width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;cursor:pointer}
.a11y-btn:hover{background:var(--gold)}
.a11y-panel{position:absolute;left:0;bottom:64px;width:250px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);padding:14px 16px;gap:9px;font-size:15px;display:none}
.a11y-panel.open{display:grid}
.a11y-panel[hidden]{display:none!important}
.a11y-panel b{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em}
.a11y-panel label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:400;line-height:1.35}
.a11y-panel input{width:19px;height:19px;accent-color:var(--red);flex:none}
.a11y-reset{justify-self:start;background:none;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.a11y-reset:hover{background:var(--gold)}
.a11y-panel>a{font-size:.8rem}
.a11y-bigtext{font-size:118%}
.a11y-nomotion *,.a11y-nomotion *::before,.a11y-nomotion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
.a11y-spacing body{line-height:1.85;letter-spacing:.03em;word-spacing:.12em}
.a11y-spacing p,.a11y-spacing li{margin-bottom:1em}
/* high contrast */
.a11y-contrast body,.a11y-contrast main,.a11y-contrast .where,.a11y-contrast .prose{background:#fff!important;color:#000!important}
.a11y-contrast .hero,.a11y-contrast .page-head,.a11y-contrast .nav,.a11y-contrast footer,.a11y-contrast .photos{background:#000!important;color:#fff!important}
.a11y-contrast .hero::before{display:none}
.a11y-contrast .announce{background:#fff!important;color:#000!important;border-bottom:2px solid #000}
.a11y-contrast .announce a{color:#000!important;text-decoration:underline}
.a11y-contrast h1,.a11y-contrast h2,.a11y-contrast p,.a11y-contrast li,.a11y-contrast .kr,.a11y-contrast .eyebrow,.a11y-contrast .lede,.a11y-contrast .small,.a11y-contrast .prices,.a11y-contrast .big{color:inherit!important}
.a11y-contrast .hero *,.a11y-contrast .page-head *,.a11y-contrast .nav *,.a11y-contrast footer *{color:#fff!important}
.a11y-contrast a{text-decoration:underline!important}
.a11y-contrast .btn,.a11y-contrast .btn.order,.a11y-contrast .btn.ghost{background:#000!important;color:#fff!important;border-color:#fff!important;box-shadow:0 0 0 2px #000!important}
.a11y-contrast .hero .btn,.a11y-contrast .page-head .btn,.a11y-contrast .nav .btn{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:0 0 0 2px #fff!important}
.a11y-contrast .hero-logo{animation:none;filter:none}
.a11y-contrast .skip{background:#000!important;color:#fff!important}
.a11y-contrast .a11y-btn,.a11y-contrast .a11y-panel{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:3px 3px 0 #000!important}
.a11y-contrast .a11y-panel *{color:#000!important}
.a11y-contrast .map iframe{border-color:#000!important;box-shadow:none!important}

/* motion + forced colors */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.btn,.a11y-btn,.a11y-panel,.map iframe{border:2px solid CanvasText}}

/* mobile */
@media (max-width:800px){
  .where .wrap{grid-template-columns:1fr;gap:28px}
  .grid,.grid.n4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{width:min(1040px,calc(100% - 32px))}
  .brand span{display:none}
  .nav nav{gap:12px}
  .nav nav a{font-size:.95rem}
  .cta .btn{width:100%;text-align:center;white-space:normal}
  footer .bottom{justify-content:center;text-align:center}
  footer .sig{margin-left:0}
  footer .sig img{height:28px}
  .a11y{left:12px;bottom:12px}.a11y-btn{width:46px;height:46px}
  .a11y-panel{width:min(250px,calc(100vw - 24px))}
}

/* v2: split hero on cream + promo section */
.hero{background:var(--cream);color:var(--ink);padding:0;text-align:left;display:grid;grid-template-columns:1.05fr 1fr;min-height:min(78vh,720px)}
.hero::before{display:none}
.hero-txt{padding:clamp(32px,5vw,72px) clamp(20px,5vw,72px);display:flex;flex-direction:column;justify-content:center;max-width:680px;justify-self:end;width:100%}
.hero-logo{display:block;width:min(100%,460px);margin:0 0 22px;filter:none;animation:none}
.hero h1{color:var(--ink);font-size:clamp(1.9rem,4vw,3rem)}
.hero .lede{color:var(--muted);margin:0 0 .6em}
.prices{color:var(--red-t)}
.hero .cta{justify-content:flex-start}
.hero .btn.ghost{color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hero .btn.ghost:hover{color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.hero a:focus-visible{outline-color:var(--ink)}
.hero-photo{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.promo{background:var(--ink);color:#fff;padding:clamp(36px,5vw,64px) 0;border-top:6px solid var(--red)}
.promo .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.promo .eyebrow{color:var(--gold)}
.promo h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-top:0}
.promo h2 .kr{color:#E8DED0}
.promo p{color:#E8DED0}
.promo img{border-radius:14px;border:3px solid #fff;box-shadow:6px 6px 0 var(--gold);display:block}
.promo a:focus-visible{outline-color:#fff}
.photos{background:var(--cream);padding:4px 0 0}
.grid.n8,.grid.n7,.grid.n5,.grid.n6{grid-template-columns:repeat(4,1fr)}
.a11y-contrast .hero{background:#fff!important;color:#000!important}
.a11y-contrast .hero *{color:#000!important}
.a11y-contrast .hero .btn{background:#000!important;color:#fff!important;border-color:#000!important;box-shadow:0 0 0 2px #fff!important}
.a11y-contrast .promo{background:#000!important}
.a11y-contrast .promo *{color:#fff!important}
.a11y-contrast .promo .btn{background:#fff!important;color:#000!important;border-color:#fff!important}
.a11y-contrast .promo img{border-color:#fff!important;box-shadow:none!important}
@media (max-width:800px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;aspect-ratio:16/10;min-height:0;height:auto}
  .hero-txt{justify-self:stretch;max-width:none;text-align:center;align-items:center}
  .hero-logo{margin:0 auto 18px;width:min(80%,360px)}
  .hero .cta{justify-content:center}
  .promo .wrap{grid-template-columns:1fr}
  .grid.n8,.grid.n7,.grid.n5,.grid.n6{grid-template-columns:repeat(2,1fr)}
}

body{min-height:100vh;display:flex;flex-direction:column}main{flex:1}

/* v3: delivery button, two-location cards, promo modal */
.btn small{display:block;font-size:.6em;font-weight:500;letter-spacing:.12em;opacity:.9;line-height:1}
.btn.delivery{background:var(--gold);color:var(--ink)}
.btn.delivery:hover{color:var(--ink)}
.where h2 .kr{display:inline;font-size:.55em;margin-left:.4em}
.where .wrap{display:block}
.locs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:8px 0 28px}
.loc{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:22px 24px;box-shadow:6px 6px 0 var(--ink)}
.loc.soon{background:var(--cream);box-shadow:6px 6px 0 var(--gold)}
.loc h3{font-family:var(--display);font-size:1.7rem;text-transform:uppercase;margin:0 0 .4em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 10px;border-radius:999px}
.tag.open{background:var(--red);color:#fff}
.loc .cta{justify-content:flex-start;margin-top:.6em}
.loc .cta .btn{font-size:.95rem;padding:.65em 1.2em}
.map iframe{aspect-ratio:21/9}
.modal{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none!important}
.modal-box{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--red);width:min(560px,90vw);max-height:90vh;max-height:90dvh;overflow:auto;padding:22px 22px 24px;text-align:center;animation:pop .35s var(--pop)}
@keyframes pop{from{transform:scale(.88);opacity:0}}
.modal-box img{display:block;width:100%;border-radius:10px;border:2px solid var(--ink);margin-bottom:14px}
.modal-box h2{font-size:clamp(1.7rem,5vw,2.4rem);margin:0 0 .3em}
.modal-box .cta{justify-content:center;margin-top:.8em}
.modal-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.modal-close:hover{background:var(--gold)}
body.modal-open{overflow:hidden}
.a11y-contrast .btn.delivery{background:#000!important;color:#fff!important}
.a11y-contrast .loc,.a11y-contrast .loc.soon,.a11y-contrast .modal-box{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:4px 4px 0 #000!important}
.a11y-contrast .loc *,.a11y-contrast .modal-box *{color:#000!important}
.a11y-contrast .loc .btn,.a11y-contrast .modal-box .btn{background:#000!important;color:#fff!important}
.a11y-contrast .tag,.a11y-contrast .tag.open{background:#000!important;color:#fff!important}
.a11y-contrast .modal-close{background:#fff!important;color:#000!important;border-color:#000!important}
.a11y-contrast .modal{background:rgba(0,0,0,.85)!important}
@media (max-width:800px){.locs{grid-template-columns:1fr}.map iframe{aspect-ratio:4/3}}
@media (max-width:600px){.modal-box{padding:18px 16px 20px}.modal-box .cta .btn{width:100%}.loc .cta .btn{width:100%;text-align:center}}
.hero h1 .kr{color:var(--muted)}
.modal-box:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;box-shadow:8px 8px 0 var(--red)}