@font-face{font-family:"KoHangul";src:url("fonts/RIDIBatang.woff") format("woff");unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;font-display:swap}
@font-face{font-family:"RIDIBatang";src:url("fonts/RIDIBatang.woff") format("woff");font-weight:400;font-display:swap}
:root{--bg:#120d0b;--card:#1e1613;--card2:#2a1f1a;--ink:#fff6ee;--mute:#c9b6a8;--red:#e2462f;--gold:#f2b544;--ko:#ff9b85;--line:#3a2b24;
  --top:calc(56px + env(safe-area-inset-top));--bottom:calc(64px + env(safe-area-inset-bottom))}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:"KoHangul",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;line-height:1.45;padding-top:var(--top);padding-bottom:var(--bottom)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--top);padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;gap:10px;background:rgba(18,13,11,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;font-size:22px;font-weight:800;letter-spacing:.5px}
.logo svg{height:26px;width:auto;margin:0 3px}
.iconbtn{margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:16px}
.iconbtn.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,181,68,.2)}
.top select{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 10px;font-size:14px;max-width:150px}

/* bottom tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--bottom);padding-bottom:env(safe-area-inset-bottom);display:flex;background:rgba(18,13,11,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--mute);gap:2px}
.tabs a span{font-size:21px;filter:grayscale(1);opacity:.7}
.tabs a.on{color:var(--gold)}
.tabs a.on span{filter:none;opacity:1}

main{max-width:900px;margin:0 auto;padding:0 16px 28px;outline:none}
.pagehead{padding:20px 0 6px}
.pagehead h1{font-size:30px;line-height:1.1}
.pagehead p{color:var(--mute);margin-top:6px}
section{margin-top:26px;scroll-margin-top:calc(var(--top) + 10px)}
h2{font-size:21px;margin-bottom:12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
h2 small{color:var(--mute);font-size:14px;font-weight:500}
h2 a{color:var(--gold);font-size:14px;font-weight:600}
.sub{color:var(--mute);font-size:14px;margin:-6px 0 12px}

/* names: English big, Spanish gold, Korean small */
.en{font-weight:800}
.es{color:var(--gold);font-weight:600}
.ko{color:var(--ko)}

/* hero & cards */
.hero{position:relative;margin-top:16px;border-radius:26px;overflow:hidden;aspect-ratio:5/4;background:var(--card)}
@media(min-width:720px){.hero{aspect-ratio:16/9}}
.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.05);transition:opacity .25s}
.hero .t{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hero .t .en{font-size:30px;line-height:1.1;display:block}
.hero .t .es{font-size:18px;display:block}
.hero .t .ko{font-size:15px;display:block}
.hero .kicker{display:inline-block;background:var(--red);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;margin-bottom:8px}
.hero .count{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);border-radius:999px;padding:4px 10px;font-size:13px}
.hero .nav{position:absolute;top:45%;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:22px;cursor:pointer}
.hero .prev{left:10px}.hero .next{right:10px}
.thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.thumbs button{flex:0 0 66px;height:66px;border-radius:12px;border:2px solid transparent;padding:0;background:var(--card2) center/cover;cursor:pointer;opacity:.7}
.thumbs button.on{border-color:var(--gold);opacity:1}

.row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scroll-padding-left:16px;margin:0 -16px;padding-left:16px;padding-right:16px}
.row::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 72%;max-width:300px;aspect-ratio:5/4;border-radius:22px;overflow:hidden;background:var(--card);scroll-snap-align:start;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.05)}
.card .t{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));text-shadow:0 2px 6px rgba(0,0,0,.6)}
.card .en{font-size:20px;display:block;line-height:1.15}.card .es{font-size:14px;display:block}.card .ko{font-size:13px;display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid .card{flex:none;max-width:none;width:100%}
.grid .card .en{font-size:17px}

.tile{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:18px;padding:14px;margin-bottom:10px}
.tile .ic{flex:0 0 54px;height:54px;border-radius:16px;background:var(--card2);display:grid;place-items:center;font-size:28px;background-size:cover;background-position:center}
.tile .en{display:block;font-size:17px}.tile .ko{font-size:13px}
.tile .d{color:var(--mute);font-size:13px;margin-top:2px}
.tile .go{margin-left:auto;color:var(--mute);font-size:22px}

.seg{display:flex;background:var(--card);border-radius:999px;padding:4px;margin:14px 0 4px}
.seg a{flex:1;text-align:center;padding:9px 6px;border-radius:999px;font-weight:700;font-size:14px;color:var(--mute)}
.seg a.on{background:var(--gold);color:#1a1009}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip{flex:0 0 auto;background:var(--card);border:1px solid transparent;border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer}
.chip.on{border-color:var(--gold);color:var(--gold)}
.search{width:100%;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:12px 16px;color:var(--ink);font-size:16px;margin:14px 0 10px}

.btn{display:block;text-align:center;border-radius:999px;padding:15px;font-weight:700;font-size:16px;margin-top:10px;border:0;width:100%;cursor:pointer}
.btn.main{background:var(--red);color:#fff}
.btn.sub{background:transparent;border:1px solid var(--line)}
.tools{display:flex;gap:8px;margin-top:12px}
.tools button{flex:1;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:11px 6px;font-weight:700;font-size:13px;cursor:pointer}
.tools button.on{border-color:var(--gold);color:var(--gold)}
.lead{color:var(--mute);font-size:17px;margin:14px 2px 0}
.jump{display:flex;gap:8px;overflow-x:auto;margin:14px 0 0;padding-bottom:4px}
.jump a{flex:0 0 auto;background:var(--card);border-radius:999px;padding:8px 13px;font-size:13px}

/* steam */
.steam{position:absolute;left:8%;right:8%;top:0;height:70%;pointer-events:none}
.steam i{position:absolute;bottom:0;width:22%;height:70%;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.75),rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 70%);filter:blur(12px);opacity:0;animation:rise 5s ease-out infinite}
.steam i:nth-child(1){left:12%}.steam i:nth-child(2){left:32%;animation-delay:1s;width:26%}.steam i:nth-child(3){left:50%;animation-delay:2s}.steam i:nth-child(4){left:22%;animation-delay:3s;width:18%}.steam i:nth-child(5){left:62%;animation-delay:4s;width:20%}
@keyframes rise{0%{transform:translate(0,30%) scale(.6,.8);opacity:0}20%{opacity:.9}50%{transform:translate(-14%,-25%) scale(1,1.1) skewX(-6deg)}100%{transform:translate(12%,-80%) scale(1.5,1.4) skewX(8deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.steam i{animation:none;opacity:.35}}

/* versions, videos, ads */
.ver{flex:0 0 76%;max-width:300px;scroll-snap-align:start;background:var(--card);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.ver.paid{border-color:var(--gold)}
.ver .ph{aspect-ratio:5/4;background:var(--card2) center/cover}
.ver .in{padding:12px 14px 14px}
.ver .nm{font-weight:800}.ver .ct{color:var(--mute);font-size:13px}
.ver .meta{display:flex;justify-content:space-between;margin:8px 0 10px}
.ver .price{color:var(--gold);font-weight:800}
.ver .order{display:block;text-align:center;background:var(--red);border-radius:999px;padding:10px;font-weight:700;font-size:14px}
.ver.add{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;border-style:dashed;min-height:230px}
.ver.add b{color:var(--gold);font-size:18px;margin:8px 0}
.vid{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.85}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:64px;height:46px;border-radius:14px;background:var(--red);display:grid;place-items:center;font-size:20px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.more{display:flex;gap:8px;margin-top:8px}.more .vid{flex:1;border-radius:12px}.more .play span{width:38px;height:27px;font-size:12px;border-radius:8px}
.stars{display:grid;gap:14px}
@media(min-width:720px){.stars{grid-template-columns:1fr 1fr}}
.star .sn{padding:8px 4px}.star .sn b{display:block}.star .sn span{color:var(--mute);font-size:13px}
.ad{margin-top:26px;border-radius:18px;padding:16px;background:linear-gradient(135deg,#3b1d12,#22140e);border:1px solid var(--line);display:flex;gap:12px;align-items:center}
.ad .tag{font-size:11px;color:var(--mute);letter-spacing:.6px;text-transform:uppercase}
.ad b{display:block;font-size:16px;margin:2px 0}
.ad .s{color:var(--mute);font-size:13px}
.ad .go{margin-left:auto;flex:0 0 auto;background:var(--gold);color:#1a1009;border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px}
.ing{display:flex;flex-wrap:wrap;gap:6px}
.ing button{background:var(--card2);border:1px solid transparent;border-radius:999px;padding:7px 12px;font-size:15px;cursor:pointer}
.ing button.in{border-color:var(--gold)}
.steps{list-style:none;counter-reset:s;display:grid;gap:10px}
.steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;font-size:16px}
.steps li::before{content:counter(s);flex:0 0 28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.tip{background:var(--card2);border-radius:16px;padding:14px 16px;font-size:16px}
.tip b{color:var(--gold)}
.empty{color:var(--mute);background:var(--card);border-radius:16px;padding:16px;text-align:center}
.rev{background:var(--card);border-radius:16px;padding:14px 16px;margin-bottom:8px}
.timeline{border-left:3px solid var(--red);margin-left:8px;padding-left:16px}
.timeline .ev{position:relative;margin-bottom:18px}
.timeline .ev::before{content:"";position:absolute;left:-24px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--gold)}
.timeline .ev b{display:block}.timeline .ev .ko{font-size:13px}
.timeline .ev p{color:var(--mute);margin-top:4px}
.manner{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:16px;padding:14px;margin-bottom:8px;font-size:16px}
.manner span{font-size:28px}
.list li{list-style:none;display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:6px}
.list li input{width:20px;height:20px;accent-color:var(--gold)}
.list li.done span{text-decoration:line-through;color:var(--mute)}
.list li button{margin-left:auto;background:none;border:0;color:var(--mute);font-size:18px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(var(--bottom) + 16px);transform:translateX(-50%);background:var(--gold);color:#1a1009;padding:10px 18px;border-radius:999px;font-weight:800;z-index:50}
.foot{color:var(--mute);font-size:12px;text-align:center;padding:26px 0 6px;border-top:1px solid var(--line);margin-top:34px}
.foot b{color:var(--ink)}.foot a{text-decoration:underline}

/* printable recipe card */
#printCard{display:none}
@media print{
  @page{size:letter;margin:14mm}
  html,body{background:#fff!important;color:#111;padding:0}
  .top,.tabs,main{display:none!important}
  #printCard{display:block;font-family:Georgia,"Apple SD Gothic Neo",serif;color:#111}
  #printCard .ptop{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #e2462f;padding-bottom:8px}
  #printCard .plogo{font:800 26px -apple-system,Arial,sans-serif;color:#111;display:flex;align-items:center}
  #printCard .plogo svg{height:28px;margin:0 3px}
  #printCard h1{font-size:30px;margin:14px 0 0}
  #printCard .es{color:#b07a12;font-size:18px}#printCard .ko{color:#c4442d;font-size:16px}
  #printCard .pimg{width:100%;height:250px;object-fit:cover;border-radius:10px;margin:12px 0}
  #printCard .cols{display:grid;grid-template-columns:1fr 1.4fr;gap:20px}
  #printCard h3{font:700 14px -apple-system,Arial,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#e2462f;margin:8px 0}
  #printCard ul,#printCard ol{padding-left:20px;font-size:15px;line-height:1.6}
  #printCard .pfoot{margin-top:18px;border-top:1px solid #ccc;padding-top:8px;font:12px -apple-system,Arial,sans-serif;color:#555;display:flex;justify-content:space-between;align-items:center;gap:12px}
  #printCard .pfoot a{color:#e2462f}
  #printCard .qr img,#printCard .qr canvas{width:84px;height:84px}
}

/* history: left-to-right timeline, image under each point */
.htl{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;margin:0 -16px;padding:0 16px 10px;position:relative}
.htl::-webkit-scrollbar{display:none}
.hev{flex:0 0 78%;max-width:320px;scroll-snap-align:start;position:relative}
.hev::before{content:"";position:absolute;top:15px;left:0;right:-14px;height:3px;background:var(--red)}
.hev:last-child::before{right:50%}
.hdot{position:relative;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1a1009;display:grid;place-items:center;font-weight:800;margin-bottom:10px;box-shadow:0 0 0 5px var(--bg)}
.hev b{display:block;font-size:17px}.hev .ko{font-size:13px}
.himg{aspect-ratio:4/3;border-radius:18px;background:var(--card2) center/cover;margin:10px 0}
.hev p{color:var(--mute);font-size:15px}
.hcr{display:block;color:var(--mute);font-size:11px;margin-top:6px;text-decoration:underline}
@media(min-width:720px){.hev{flex-basis:300px}}

/* brand */
.brand{display:block;margin-top:16px;border-radius:26px;overflow:hidden;background:#fff}
.brand img{display:block;width:100%;max-width:420px;margin:0 auto}
.splash{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;transition:opacity .6s}
.splash img{width:min(84vw,420px)}
.splash.out{opacity:0}

/* name block: EN bold + KO, light taste line */
.nm{display:block;line-height:1.15}
.nm .ko{font-family:"RIDIBatang","Apple SD Gothic Neo",serif;font-weight:400;color:var(--ink);font-size:.9em!important}
.nm .en::before{content:"·";margin:0 .12em;font-weight:800}
.feel{display:block;font-weight:300;color:rgba(255,246,238,.88);margin-top:3px}
.hero .t .nm{font-size:30px}.hero .t .nm .en,.hero .t .nm .ko{font-size:30px;display:inline}
.hero .t .feel{font-size:16px}
.card .nm{font-size:20px}.card .nm .en,.card .nm .ko{font-size:20px;display:inline}
.card .feel{font-size:13px}
.grid .card .nm,.grid .card .nm .en,.grid .card .nm .ko{font-size:17px}
.tile .nm,.tile .nm .en,.tile .nm .ko{font-size:17px;display:inline}


/* Korean names: RIDI Batang (bundled in fonts/) */
.ko{font-family:"RIDIBatang","Apple SD Gothic Neo",serif;font-weight:400}

/* pronunciation: regular weight, never split across lines */
.nm .en{font-weight:400;white-space:nowrap}
.nm .en::before{font-weight:400}

/* layout: Korean name on top, pronunciation smaller below (no dot) */
.nm .ko{font-size:1em!important}
.nm .en{display:block!important;font-size:.55em!important;font-weight:400;margin-top:2px;opacity:.95}
.nm .en::before{content:none!important}

/* English dish name in Black weight */
.feel .enname{font-weight:900;color:var(--ink)}

/* Korean name turns red (KDINNER.COM red) on hover / tap */
.nm .ko{transition:color .2s}
a:hover .nm .ko,a:active .nm .ko,a:focus-visible .nm .ko,.hero:hover .nm .ko,.nm .ko:hover{color:#FF1616!important}

/* Korean name bold (RIDI Batang has one weight, so the browser thickens it) */
.nm .ko{font-weight:700!important;font-synthesis:weight}

/* blur only the photo area behind the dish name, fading into the sharp photo */
.card .t,.hero .t{isolation:isolate}
.card .t::before,.hero .t::before{content:"";position:absolute;inset:0;z-index:-1;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%)}
.card .t,.hero .t{background:linear-gradient(transparent,rgba(0,0,0,.55))}
/* stronger bold for single-weight RIDI Batang */
.nm .ko{-webkit-text-stroke:.035em currentColor;paint-order:stroke fill}

/* YouTube link address under each video */
.vidwrap{min-width:0}.more .vidwrap{flex:1}
.ytlink{display:block;color:var(--mute);font-size:12px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline}

/* make it at home: product cards with store buttons */
.prods{display:grid;gap:10px}
@media(min-width:720px){.prods{grid-template-columns:1fr 1fr}}
.prod{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.prod .pb{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.prod .pn{font-size:16px;font-weight:700;margin:2px 0 10px}
.prod .ps{display:flex;gap:6px;flex-wrap:wrap}
.prod .ps a{background:var(--card2);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}

/* all buttons: deep yellow background, dark text */
:root{--btn:#E8A200;--btn2:#C98A00;--btnText:#1a1009}
.btn.main,.btn.sub,.tools button,.prod .ps a,.ver .order,.ad .go,.jump a,.chip,.seg a,.iconbtn,.ing button,.hero .nav,.top select{background:var(--btn)!important;color:var(--btnText)!important;border-color:var(--btn)!important;font-weight:700}
.seg{background:var(--card)}
.seg a{background:transparent!important;color:var(--mute)!important}
.seg a.on{background:var(--btn)!important;color:var(--btnText)!important}
.tools button.on,.chip.on,.ing button.in,.iconbtn.on{background:var(--btn2)!important;box-shadow:0 0 0 2px #fff}
.btn.main:active,.btn.sub:active,.tools button:active,.prod .ps a:active,.chip:active,.jump a:active{background:var(--btn2)!important}

/* buttons: square corners, tighter padding & margins */
.btn,.tools button,.prod .ps a,.ver .order,.ad .go,.jump a,.chip,.seg,.seg a,.iconbtn,.ing button,.hero .nav,.top select,.kicker{border-radius:0!important}
.btn{padding:10px 12px!important;margin-top:6px!important;font-size:15px!important}
.tools{gap:6px!important;margin-top:8px!important}
.tools button{padding:8px 6px!important;font-size:13px!important}
.jump{gap:6px!important;margin-top:10px!important}
.jump a,.chip{padding:6px 10px!important;font-size:13px!important}
.chips{gap:6px!important}
.prod .ps{gap:4px!important}
.prod .ps a{padding:6px 10px!important;font-size:12px!important}
.ad .go,.ver .order{padding:8px 10px!important}
.seg{padding:3px!important}.seg a{padding:7px 4px!important}

/* other buttons: slightly rounded; Order = biggest, square */
.btn,.tools button,.prod .ps a,.ver .order,.ad .go,.jump a,.chip,.seg,.seg a,.iconbtn,.ing button,.hero .nav,.top select,.kicker{border-radius:6px!important}
.btn.order{border-radius:0!important;padding:17px 14px!important;font-size:19px!important;font-weight:900!important;margin-top:10px!important;letter-spacing:.2px}

/* order "doorbell": big square on the left, other actions stacked on the right */
.actrow{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.bell{flex:0 0 46%;aspect-ratio:1/1;max-width:220px;background:var(--btn);color:var(--btnText);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 0 0 6px #C98A00,0 6px 0 #8a5d00;transition:transform .08s,box-shadow .08s}
.bell:active{transform:translateY(4px);box-shadow:inset 0 0 0 6px #C98A00,0 2px 0 #8a5d00}
.bell-btn{width:58%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#F5C542 45%,#C98A00);box-shadow:0 4px 0 #8a5d00,inset 0 -4px 8px rgba(0,0,0,.25);display:grid;place-items:center}
.bell-ic{font-size:clamp(28px,9vw,48px)}
.bell b{font-size:22px;font-weight:900;letter-spacing:1px;line-height:1}
.bell small{font-size:13px;font-weight:700}
.tools.stack{flex:1;flex-direction:column;margin-top:0!important}
.tools.stack button{flex:1;font-size:15px!important}
/* doorbell: exact square box, square inner bell */
.actrow{display:grid;grid-template-columns:46% 1fr;gap:8px;align-items:stretch}
.bell{max-width:none;width:100%;aspect-ratio:1/1;align-self:start;border-radius:0!important}
.bell-btn{border-radius:8px!important;width:56%}
.tools.stack{height:100%}

/* order: clean flat square */
.bell{box-shadow:none!important;gap:6px}
.bell:active{transform:none;background:var(--btn2)!important}
.bell b{font-size:34px;letter-spacing:2px}
.bell small{font-size:14px;font-weight:600}

.bell-logo{display:flex;align-items:center;font-size:17px;font-weight:800;letter-spacing:.5px;color:var(--btnText)}
.bell-logo svg{height:19px;width:auto;margin:0 2px}
.bell small{font-size:11px;opacity:.8}

/* iPhone-style icon grid: Order = 2x2 square, all others equal rounded-square tiles */
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.igrid .bell{grid-column:1/3;grid-row:1/3;width:100%;aspect-ratio:1/1}
.igrid .ic{aspect-ratio:1/1;border:0;border-radius:22%!important;background:var(--btn)!important;color:var(--btnText)!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:clamp(20px,6.5vw,30px);line-height:1;cursor:pointer;padding:0}
.igrid .ic span{font-size:11px;font-weight:800;letter-spacing:.2px}
.igrid .ic.on{background:var(--btn2)!important;box-shadow:0 0 0 2px #fff}
.igrid .ic:active{transform:scale(.94)}
@media(min-width:720px){.igrid{grid-template-columns:repeat(6,1fr)}}

/* hover on buttons: lift + brighter + shadow */
.igrid .ic,.igrid .bell,.btn,.prod .ps a,.chip,.ad .go,.ver .order,.iconbtn{transition:transform .15s,box-shadow .15s,background-color .15s,filter .15s}
@media(hover:hover){
  .igrid .ic:hover,.igrid .bell:hover,.btn:hover,.prod .ps a:hover,.chip:hover,.ad .go:hover,.ver .order:hover,.iconbtn:hover{
    transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 8px 18px rgba(0,0,0,.45)}
  .igrid .bell:hover b{color:#FF1616}
}

/* keep tiles phone-sized on wide screens */
.igrid{max-width:480px}
@media(min-width:720px){.igrid{grid-template-columns:repeat(4,1fr)}}

/* draw the eye to ORDER: soft pulsing glow + light sweep */
.igrid .bell{position:relative;overflow:hidden;animation:orderPulse 2.4s ease-in-out infinite}
.igrid .bell::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:orderShine 3.2s ease-in-out infinite}
@keyframes orderPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,22,22,.0)}50%{box-shadow:0 0 0 6px rgba(255,22,22,.35),0 0 26px 6px rgba(232,162,0,.55)}}
@keyframes orderShine{0%,55%{left:-60%}85%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.igrid .bell,.igrid .bell::after{animation:none}}
/* ORDER: rounded like the icon tiles */
.igrid .bell{border-radius:11%!important}

.bell-logo-img{width:88%;height:auto;display:block;margin:2px 0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.igrid .bell b{font-size:30px}

/* footer logo */
.footlogo{display:block;margin:0 auto 12px;width:min(62%,260px)}
.footlogo img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* top bar logo = Kdinner wordmark */
.logo img{height:44px;width:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.top{--top:calc(60px + env(safe-area-inset-top))}

/* logo: white sticker outline on the dark brown bar */
.logo img{height:48px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.footlogo{width:min(66%,270px)}
.footlogo img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}

/* Korean everywhere = title font; pronunciation shown beside it */
.ko{font-family:"KoHangul","RIDIBatang",serif}
.pr{font-weight:400;font-size:.8em;color:var(--mute);margin-left:.35em;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

.ko{color:var(--ink)!important;font-weight:700}

/* culture tip cards between content */
.tipcard{display:flex;gap:12px;align-items:center;margin-top:22px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#2b1c12,#1e1613);border-left:4px solid var(--btn)}
.tipcard .te{font-size:30px}
.tipcard .tk{color:var(--btn);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:2px}
/* shop items */
.slist .sitem{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.sitem .sh{display:flex;gap:12px;align-items:center}
.sitem .se{font-size:34px;width:52px;height:52px;display:grid;place-items:center;background:var(--card2);border-radius:14px}
.sitem .nm .ko{font-size:22px}
.sitem .sen{font-weight:700;font-size:15px}
.sitem p{color:var(--mute);margin:8px 0 4px;font-size:15px}
.sitem .sb{font-size:13px;color:var(--gold)}
.sitem .ps{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.sitem .ps a{background:var(--btn);color:var(--btnText);border-radius:6px;padding:6px 10px;font-size:12px;font-weight:800}
.tabs a{font-size:10px}

/* my orders */
.olog{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.olog .d{color:var(--mute);font-size:13px}
.olog .ostat{margin-left:auto;flex:0 0 auto;background:var(--btn);color:var(--btnText);border-radius:6px;padding:8px 10px;font-weight:800;font-size:13px}

.also{margin-top:10px;font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.also .bellx{background:var(--btn);color:var(--btnText);border-radius:6px;padding:6px 10px;font-weight:800}