@font-face{font-family:"Paperlogy";src:url(/assets/fonts/Paperlogy-4Regular.kr.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Paperlogy";src:url(/assets/fonts/Paperlogy-7Bold.kr.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f5ede0; --paper2:#efe4d2; --ink:#1f1612; --ink2:#5b4a3f; --line:#d9c9b2;
  --red:#b3261e; --red2:#8f1d17; --brass:#b8873b; --celadon:#6f9686; --lacquer:#1c0f08;
  --f-cine:"cofo-cinema1909",Georgia,serif;
  --f-head:"richmond-display",Georgia,serif;
  --f-ital:"ogg",Georgia,serif;
  --f-mark:"bc-vajgar",Georgia,serif;
  --f-label:"mencken-std",Georgia,serif;
  --f-ko:"Paperlogy",sans-serif;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-head);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(120,90,60,.06) 1px,transparent 1px);background-size:4px 4px}
[lang="ko"],.ko,.jar-ko{font-family:var(--f-ko)}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px clamp(18px,4vw,48px);
  background:rgba(245,237,224,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(31,22,18,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:30px;height:30px}
.brand span{font-family:var(--f-mark);font-size:26px;letter-spacing:.01em}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a,.lang{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink2)}
.nav a:hover,.lang:hover{color:var(--red)}
.lang{border:1px solid var(--line);border-radius:999px;padding:6px 14px}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,64px) clamp(18px,4vw,48px) 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.kicker{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.hero h1{font-family:var(--f-cine);font-weight:100;font-size:clamp(54px,7.4vw,112px);line-height:.92;letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .h-b{font-family:var(--f-ital);font-style:italic;font-weight:400;color:var(--red);font-size:.9em;margin:.04em 0 .02em}
.lede{font-size:clamp(18px,1.5vw,21px);color:var(--ink2);max-width:34em;margin:26px 0 30px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border-radius:999px;padding:14px 24px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff8ef}
.btn.primary:hover{background:var(--red2)}
.btn.text{border-color:transparent;padding-left:6px;padding-right:6px;color:var(--ink2)}
.hero-table{position:relative}
.table{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 40px 80px -30px rgba(40,18,6,.55),0 8px 20px -10px rgba(40,18,6,.4)}
.bowl{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;outline:none}
.bowl:not(.deco):hover,.bowl:not(.deco):focus-visible{transform:translateY(-8px) scale(1.045)}
.bowl:focus-visible{filter:drop-shadow(0 0 10px rgba(255,214,140,.9))}
.bowl-shadow{transition:opacity .35s}
.cap{font-family:var(--f-label);font-weight:700;font-size:20px;letter-spacing:.06em;fill:#f3dfba;opacity:.0;transition:opacity .3s;pointer-events:none}
.hero-table:hover .cap{opacity:.55}
.hero-table .cap.on{opacity:1}
.bowl{animation:set .9s cubic-bezier(.2,.8,.2,1) backwards}
.bowl:nth-of-type(2){animation-delay:.08s}.bowl:nth-of-type(3){animation-delay:.16s}.bowl:nth-of-type(4){animation-delay:.24s}
.bowl:nth-of-type(5){animation-delay:.32s}.bowl:nth-of-type(6){animation-delay:.4s}.bowl:nth-of-type(7){animation-delay:.48s}.bowl:nth-of-type(8){animation-delay:.56s}
@keyframes set{from{opacity:0;transform:translateY(-24px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bowl{animation:none}html{scroll-behavior:auto}}

/* sections */
section{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,110px) clamp(18px,4vw,48px)}
.sec-head{max-width:760px;margin-bottom:38px}
.sec-head h2{font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.01em}
.sec-head p:not(.kicker){color:var(--ink2);margin:16px 0 0}
.center{text-align:center;margin-top:36px}

/* decoder */
.decoder{background:var(--lacquer);color:#f3e6d2;max-width:none;border-radius:0}
.decoder>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.decoder .sec-head p:not(.kicker){color:#cdb79a}
.decoder .kicker{color:#e8b765}
.dec-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
.dec-in textarea{width:100%;min-height:230px;resize:vertical;border-radius:18px;border:1px solid rgba(232,200,134,.3);background:#2a1910;color:#fff3e2;
  font:400 22px/1.6 var(--f-ko);padding:20px 22px;outline:none}
.dec-in textarea:focus{border-color:#e8b765;box-shadow:0 0 0 4px rgba(232,183,101,.15)}
.dec-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.decoder .btn{border-color:#f3e6d2;color:#f3e6d2}
.decoder .btn.primary{border-color:var(--red);color:#fff8ef}
.decoder .btn.text{color:#cdb79a;border-color:transparent}
.dec-note{font-size:15px;color:#a8917a;margin:0}
.dec-out{min-height:230px;border-radius:18px;background:#f5ede0;color:var(--ink);padding:10px 22px}
.dec-empty{color:#8a7563;font-style:italic;font-family:var(--f-ital);font-size:22px;padding:70px 0;text-align:center;margin:0}
.line{padding:16px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.line-ko{font-family:var(--f-ko);font-weight:700;font-size:24px}
.line-price{font-family:var(--f-label);font-weight:700;font-size:14px;color:var(--ink2);letter-spacing:.06em}
.line-en{font-size:20px;margin:4px 0 8px}
.parts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.parts li{font-size:14px;background:var(--paper2);border-radius:8px;padding:3px 9px}
.parts li b{font-family:var(--f-ko);font-weight:700;margin-right:6px}
.parts li.unk{background:transparent;border:1px dashed var(--line);color:#8a7563}
.flag{display:inline-block;font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;margin:2px 6px 2px 0;background:#ece0cd;color:var(--ink)}
.f-pork{background:#f2cfd0;color:#7c1f22}.f-beef{background:#e8d0c3;color:#6b2e17}.f-chicken{background:#f5e1b8;color:#6e4a0d}
.f-seafood{background:#cfe1e6;color:#1f4d5a}.f-egg{background:#f6ebb8;color:#6b5a0a}.f-alcohol{background:#ddd2ea;color:#4a2f6b}
.f-spicy{background:var(--red);color:#fff}.f-raw{background:#1f1612;color:#f5ede0}.f-dairy{background:#e7e4dc;color:#3b3a35}.f-lamb,.f-duck{background:#e3d6c6}

/* dishes */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.chip{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink2)}
.chip span{font-family:var(--f-ko);letter-spacing:0;text-transform:none;opacity:.7;margin-left:4px}
.chip.on,.chip:hover{border-color:var(--ink);color:var(--ink);background:#fffaf2}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.dish{background:#fffaf2;border:1px solid rgba(31,22,18,.07);border-radius:20px;padding:24px 24px 20px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.dish:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(60,30,10,.45)}
.dish[hidden]{display:none}
.dish-cat{font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.dish h3{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.dish h3 .ko{font-weight:700;font-size:30px;line-height:1.15}
.dish h3 .rom{font-family:var(--f-ital);font-style:italic;font-size:22px;color:var(--ink2)}
.dish-txt{margin:0 0 16px;font-size:17.5px;flex:1}
.dish-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--ink2);margin-bottom:8px}
.heat{display:inline-flex;align-items:center;gap:3px}
.heat i{width:9px;height:9px;border-radius:50%;background:#e5d6c1}
.heat i.on{background:var(--red)}
.heat em{font-style:normal;margin-left:6px}
.veg{font-size:14px}
.veg.v-yes{color:#3f6a2a}.veg.v-ask{color:#7a5a20}.veg.v-no{color:#8a7563}
.has{margin:4px 0 0;font-size:13px}
.has b{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-right:8px}
.dish.flash{animation:flash 1.2s}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(179,38,30,.6)}100%{box-shadow:0 0 0 18px rgba(179,38,30,0)}}

/* regions */
.region-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.region{padding:26px 22px 30px 0;border-bottom:1px solid var(--line);counter-increment:reg}
.region-list{counter-reset:reg}
.region::before{content:counter(reg,decimal-leading-zero);font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--red)}
.r-place{font-size:28px;margin:8px 0 6px}
.r-place span{font-size:16px;color:var(--ink2);margin-left:6px}
.r-dish{margin:0 0 8px}
.r-dish span{font-weight:700;font-size:20px}
.r-dish em{font-family:var(--f-ital);font-size:19px;color:var(--ink2);margin-left:4px}
.r-txt{margin:0;font-size:16.5px;color:var(--ink2)}

/* diet */
.diet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.diet-card{background:#fffaf2;border-radius:20px;padding:28px;border-top:4px solid var(--celadon)}
.diet-card h3{font-size:30px;margin-bottom:12px}
.diet-card p{margin:0;font-size:17.5px}

/* pantry */
.pantry{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.jar{background:#fffaf2;border-radius:24px 24px 14px 14px;padding:26px 22px;border:1px solid rgba(31,22,18,.07);position:relative;overflow:hidden}
.jar::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:linear-gradient(90deg,var(--brass),#d8b06b)}
.jar-ko{display:block;font-weight:700;font-size:28px;margin-top:6px}
.jar-en{display:block;font-family:var(--f-ital);font-style:italic;font-size:22px;color:var(--red);margin-bottom:8px}
.jar-txt{display:block;font-size:16.5px;color:var(--ink2)}

/* manners */
.man-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;counter-reset:m}
.man-list li{padding:22px 0;border-top:1px solid var(--ink);counter-increment:m}
.man-list li::before{content:counter(m);font-family:var(--f-cine);font-weight:100;font-size:54px;line-height:1;display:block;color:var(--red)}
.man-list b{display:block;font-size:24px;font-weight:400;margin:6px 0}
.man-list span{color:var(--ink2);font-size:17px}


/* worlds (home: eleven groups) */
.worlds{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.world{display:flex;flex-direction:column;height:100%;text-decoration:none;background:#fffaf2;border:1px solid rgba(31,22,18,.07);border-radius:22px;padding:22px 22px 20px;transition:transform .25s,box-shadow .25s,background .25s}
.world:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(60,30,10,.45);background:#fff}
.w-count{font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.w-name{font-size:27px;line-height:1.1;margin:10px 0 2px}
.w-ko{font-weight:700;font-size:15px;color:var(--ink2)}
.w-txt{font-size:16px;color:var(--ink2);margin:12px 0 14px;flex:1}
.w-sample{font-size:14px;color:#8a7563;border-top:1px solid var(--line);padding-top:10px}
.worlds li:first-child .world{background:var(--lacquer);color:#f3e6d2}
.worlds li:first-child .w-ko,.worlds li:first-child .w-txt,.worlds li:first-child .w-sample{color:#cdb79a}
.worlds li:first-child .w-count{color:#e8b765}

/* encyclopedia index */
.index{padding-top:clamp(28px,4vw,48px)}
a.dish{text-decoration:none;color:inherit}
.page-h{font-family:var(--f-cine);font-weight:100;font-size:clamp(46px,6vw,88px);line-height:.95;letter-spacing:-.01em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 26px;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--red)}
.finder{position:sticky;top:62px;z-index:5;background:rgba(245,237,224,.94);backdrop-filter:blur(8px);padding:14px 0 6px;margin-bottom:24px}
.finder input{width:100%;max-width:560px;font:400 20px var(--f-head);padding:13px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fffaf2;color:var(--ink);outline:none;margin-bottom:14px}
.finder input:focus{border-color:var(--ink)}
.finder .chips{margin-bottom:6px}
.chip span{font-size:12px}
.group{margin:0 0 54px}
.group[hidden]{display:none}
.g-head{font-size:clamp(28px,3vw,40px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:18px}
.g-ko{font-family:var(--f-ko);font-weight:700;font-size:.5em;color:var(--ink2)}
.g-head em{font-family:var(--f-label);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--red);margin-left:auto}
.g-txt{color:var(--ink2);margin:6px 0 20px}
.none{font-family:var(--f-ital);font-style:italic;font-size:24px;color:var(--ink2);text-align:center;padding:40px 0}

/* dish page */
.dish-page{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) clamp(18px,4vw,48px) 0}
.dp-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(30px,5vw,60px)}
.dp-head h1{display:flex;flex-direction:column;gap:4px}
.dp-head h1 .ko{font-weight:700;font-size:clamp(56px,8vw,112px);line-height:1}
.dp-head h1 .rom{font-family:var(--f-ital);font-style:italic;font-size:clamp(30px,3.6vw,48px);color:var(--red)}
.dp-lede{font-size:clamp(20px,1.8vw,25px);max-width:30em;margin:22px 0 0}
.dp-bowl{background:radial-gradient(circle at 45% 42%,#5a3420,#1c0f08 75%);border-radius:28px;padding:clamp(18px,3vw,36px);box-shadow:0 40px 80px -30px rgba(40,18,6,.55)}
.bowl-one{width:100%;height:auto;display:block}
.bowl.one{cursor:default;animation:set .9s cubic-bezier(.2,.8,.2,1) backwards}
.dp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:start;border-top:1px solid var(--ink);padding-top:30px}
.dp-main h2{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.dp-main p{font-size:clamp(19px,1.5vw,21px);margin:0 0 34px;max-width:36em}
.dp-main .tip{font-family:var(--f-ital);font-style:italic;font-size:clamp(24px,2.2vw,30px);line-height:1.3;border-left:4px solid var(--red);padding-left:20px}
.facts{background:#fffaf2;border:1px solid rgba(31,22,18,.07);border-radius:22px;padding:22px 24px;position:sticky;top:84px}
.facts-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 14px;font-size:16px}
.facts-row b{font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);width:100%}
.say{background:var(--lacquer);color:#f3e6d2;border-radius:16px;padding:16px 18px;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.say b{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e8b765}
.say span{font-size:15px;color:#cdb79a}
.say strong{font-family:var(--f-ko);font-size:28px;margin-top:4px}
.related{max-width:none;padding:clamp(56px,7vw,90px) 0}
.related h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:24px}

/* footer */
.foot{background:var(--lacquer);color:#e9d9c0;padding:0 clamp(18px,4vw,48px) 40px;overflow:hidden}
.foot .wrap{max-width:var(--max);margin:0 auto}
.small{max-width:var(--max);margin:8px auto;font-size:14px;color:#a8917a}

/* responsive */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr}
  .dec-grid{grid-template-columns:1fr}
  .region-list,.pantry{grid-template-columns:repeat(2,1fr)}
  .diet-grid,.man-list{grid-template-columns:1fr}
  .worlds{grid-template-columns:repeat(2,1fr)}
  .dp-head,.dp-grid{grid-template-columns:1fr}
  .dp-bowl{max-width:420px}
  .facts{position:static}
  .nav{display:none}
  .lang{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:18px}
  .region-list,.pantry,.worlds{grid-template-columns:1fr}
  .finder{top:56px}
  .cap{font-size:24px}
}