*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#0a0908;color:#f5f0e8;font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.intro{position:fixed;inset:0;background:#050505;z-index:1000;display:grid;place-items:center;animation:introFade 1s ease 2.65s forwards}.intro-food{position:absolute;inset:0;background:radial-gradient(ellipse at 74% 50%,#302016 0%,#0a0807 58%,#050505 100%);opacity:1}.intro-food:after{content:"";position:absolute;inset:0;background:url("assets/koko-loading-screen.png") center center/cover no-repeat;opacity:0;transform:scale(1.035);animation:introFoodReveal 2.2s ease .15s forwards;filter:contrast(1.08) saturate(1.08)}.intro-title{position:relative;z-index:2;font:500 clamp(48px,8vw,100px) "Playfair Display",serif;letter-spacing:.22em;color:#f3eee6;opacity:0;animation:wordmarkReveal 1.2s ease 1.05s forwards;text-shadow:0 3px 30px #000}.intro-caption{position:absolute;z-index:2;top:calc(50% + 70px);font-size:8px;letter-spacing:5px;color:#d7c6ad;opacity:0;animation:wordmarkReveal 1s ease 1.45s forwards}.site{opacity:0;animation:siteReveal 1.2s ease 2.7s forwards}@keyframes introFoodReveal{to{opacity:1;transform:scale(1)}}@keyframes wordmarkReveal{to{opacity:1}}@keyframes introFade{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes siteReveal{to{opacity:1}}.topline{text-align:center;background:#a52c22;color:#fff;font-size:8px;letter-spacing:3px;padding:8px}
.header{height:88px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;background:#0b0a09eF;border-bottom:1px solid #ffffff18;backdrop-filter:blur(14px)}.brand,.footer-brand{display:flex;flex-direction:column;align-items:center;gap:4px}.brand strong{font:500 27px "Playfair Display",serif;letter-spacing:.2em;color:#f2ece2}.brand span,.footer-brand span{font-size:7px;letter-spacing:2.5px;color:#c9b99f}.nav{display:flex;gap:clamp(18px,3vw,44px)}.nav a{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#eee7dc;transition:color .25s}.nav a:hover,.nav a.active{color:#c9a36c}.header-order{font-size:9px;letter-spacing:1.7px;border-bottom:1px solid #b99663;padding:10px 0;color:#d6bd97}.header-order b{margin-left:9px}.nav-toggle{display:none;color:#eee;background:none;border:0;font-size:23px}
.hero{height:min(790px,78vw);min-height:610px;position:relative;overflow:hidden;display:flex;align-items:center;background:#0d0b09}.hero-image{position:absolute;inset:0;background:radial-gradient(ellipse at 77% 50%,#392719 0%,#17100b 37%,#080706 78%);z-index:0}.hero-dish{position:absolute;z-index:1;right:-1.5%;top:50%;width:min(76%,1250px);height:112%;object-fit:contain;object-position:right center;transform:translateY(-50%) scale(1.015);filter:contrast(1.12) saturate(1.12) brightness(1.05) drop-shadow(-18px 12px 32px #0009);animation:dishCinematicZoom 18s ease-in-out infinite alternate}.hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#080706 0%,#080706 22%,#080706d9 34%,#08070666 48%,transparent 68%),linear-gradient(0deg,#08070655,transparent 28%)}@keyframes dishCinematicZoom{from{transform:translateY(-50%) scale(1.015)}to{transform:translateY(-50%) scale(1.105)}}.hero-content{position:relative;z-index:3;margin-left:6.5%;max-width:39%}.eyebrow{display:flex;align-items:center;gap:13px;color:#e4ded4;font-size:12px;letter-spacing:6px}.eyebrow i{display:block;width:0;height:1px;background:#b79661}.hero h1{font:400 clamp(62px,7.5vw,104px)/1.02 "Playfair Display",serif;margin:25px 0 22px;letter-spacing:.13em;color:#f4eee6;white-space:nowrap}.hero-rule{width:98px;height:1px;background:#b99b70;margin:0 0 34px}.hero-tagline{font:italic 500 clamp(21px,2.2vw,30px)/1.55 "Playfair Display",serif;letter-spacing:.01em;color:#f0e9df}.hero-scroll{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:8px;letter-spacing:3px;color:#e8dfd2}.hero-scroll span{font-size:19px;animation:arrowBob 1.8s ease infinite}@keyframes arrowBob{50%{transform:translateY(6px)}}
.story{display:grid;grid-template-columns:1.05fr .95fr;min-height:500px;background:#f1eadf;color:#211912}.story-photo{min-height:500px;overflow:hidden}.story-photo img{width:100%;height:100%;min-height:500px;object-fit:cover;object-position:center;filter:brightness(.83) saturate(.75)}.story-copy{display:flex;flex-direction:column;justify-content:center;padding:70px 12%;background:radial-gradient(ellipse at 90% 90%,#e5d8c5 0,transparent 45%),#f1eadf}.section-kicker{font-size:9px;letter-spacing:4px;color:#9a7045;text-transform:uppercase}.story-copy h2{font:600 clamp(32px,4vw,52px)/1.5 "Noto Serif KR","Playfair Display",serif;margin:24px 0 18px;letter-spacing:-1px}.story-copy h2 em{font-style:normal;color:#a52c22}.story-en{font:italic 17px "Playfair Display",serif;color:#765b3d;margin:0}.story-rule{width:48px;height:1px;background:#b68b57;margin:30px 0 17px}.story-small{font-size:8px;letter-spacing:2.8px;color:#8b7a68}
.menu-section{background:#f5efe5;color:#201912;padding:95px 6.5% 80px;position:relative}.menu-heading{text-align:center;margin-bottom:44px}.menu-heading .section-kicker{color:#a52c22}.menu-heading h2{font:600 48px "Noto Serif KR","Playfair Display",serif;margin:12px 0 8px}.menu-heading h2 em{font:italic 19px "Playfair Display",serif;color:#a27c51;margin-left:12px}.menu-heading p{font:14px "Playfair Display",serif;color:#837465}.menu-nav-wrap{position:sticky;top:88px;z-index:30;background:#f5efe5eb;backdrop-filter:blur(10px);border-top:1px solid #d7c9b7;border-bottom:1px solid #d7c9b7;margin-bottom:42px}.menu-nav{display:flex;justify-content:center;gap:0;overflow-x:auto;scrollbar-width:none}.menu-nav::-webkit-scrollbar{display:none}.menu-nav button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;padding:18px 20px 15px;color:#665747;font-size:10px;letter-spacing:1px;cursor:pointer;transition:.25s}.menu-nav button:hover,.menu-nav button.active{color:#a52c22;border-bottom-color:#a52c22}.menu-nav button:focus-visible,.nav a:focus-visible,.order-card:focus-visible{outline:2px solid #a52c22;outline-offset:4px}.menu-sections{max-width:1320px;margin:auto}.menu-category{scroll-margin-top:155px;margin:0 0 70px}.category-title{display:flex;align-items:center;gap:20px;margin-bottom:27px}.category-title h3{font:600 24px "Noto Serif KR","Playfair Display",serif;margin:0;white-space:nowrap}.category-title span{font:italic 15px "Playfair Display",serif;color:#9b8060}.category-title:after{content:"";height:1px;background:#d4c6b4;flex:1}.dish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 25px;align-items:start}.dish-card{text-align:center;min-width:0}.dish-photo{width:min(100%,210px);aspect-ratio:1/1;margin:0 auto 16px;overflow:hidden;border-radius:50%;background:#e8dfd2;box-shadow:0 8px 24px #2c1c1018;border:1px solid #d8cbbb;padding:0}.dish-photo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:none}.dish-card:hover .dish-photo img{transform:scale(1.045)}.dish-card.text-only{padding:16px 12px 18px;border-bottom:1px solid #ded3c5;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:132px}.dish-card.text-only .dish-description{min-height:0}.dish-card.has-photo{padding-bottom:4px}.dish-name{font:600 16px "Noto Serif KR","Playfair Display",serif;margin:0 0 4px;color:#2b2017}.dish-korean{font-size:10px;color:#9b8060;margin-bottom:7px}.dish-description{font-size:10px;line-height:1.55;color:#85796d;min-height:31px;max-width:240px;margin:0 auto 7px}.dish-price{font:500 17px "Playfair Display",serif;color:#2c2118}.menu-bottom-note{text-align:center;font-size:8px;letter-spacing:3px;color:#9a8875;margin-top:20px}
.gallery{padding:95px 7% 100px;background:#15120f}.gallery-heading{text-align:center;margin-bottom:42px}.gallery h2{font:500 clamp(37px,4.6vw,58px)/1.15 "Playfair Display",serif;margin:20px 0}.gallery-images{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:15px}.gallery-images figure{margin:0;overflow:hidden;position:relative}.gallery-images img{width:100%;height:310px;object-fit:cover;filter:brightness(.8) saturate(.75);transition:transform .7s,filter .7s}.gallery-images figure:hover img{transform:scale(1.07);filter:brightness(.95) saturate(1)}.gallery-images figcaption{position:absolute;bottom:18px;left:20px;font-size:8px;letter-spacing:2.5px;color:#fff}
.visit{display:grid;grid-template-columns:.85fr 1.15fr;background:#eee6d9;color:#241b13;min-height:450px}.visit-copy{padding:75px 12%;display:flex;flex-direction:column;justify-content:center}.visit h2{font:500 50px/1.12 "Playfair Display",serif;margin:19px 0 27px}.visit h2 em{color:#9c6d3e}.visit-info span{font-size:8px;letter-spacing:2.5px;color:#9b754b}.visit-info p{font-size:13px;line-height:1.8;margin:6px 0 18px}.direction-link{font-size:9px;letter-spacing:2px;color:#8e5f35;border-bottom:1px solid #b9966c;padding-bottom:9px;align-self:flex-start;margin-top:10px}.map{min-height:450px;filter:grayscale(.85) sepia(.12)}.map iframe{width:100%;height:100%;min-height:450px;border:0}
.order{padding:90px 7% 95px;background:radial-gradient(ellipse at 50% 0,#2b2118 0,#100e0c 65%);text-align:center}.order-inner{max-width:950px;margin:auto}.order h2{font:500 clamp(43px,5vw,64px) "Playfair Display",serif;margin:17px 0 10px}.order>div>p{font-size:13px;color:#bdb2a5;margin:0}.order-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}.order-card{min-height:235px;border:1px solid #ffffff24;background:linear-gradient(145deg,#ffffff0d,#ffffff04);padding:28px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .35s,border-color .35s,background .35s}.order-card:hover{transform:translateY(-6px);border-color:#c8a36d;background:#ffffff0c}.platform-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:700;font-size:24px;margin-bottom:13px}.platform-mark.dd{color:#ef4b18}.platform-mark.ue{color:#079c68;font-size:13px;line-height:1}.platform-name{font:600 21px "Playfair Display",serif}.platform-desc{font-size:11px;color:#bdb2a5;margin:8px 0 18px}.order-action{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;max-width:280px;padding:14px 12px;background:#ec4b17;color:white;font-size:9px;font-weight:700;letter-spacing:1.1px}.ubereats .order-action{background:#06a66c}.order-action b{font-size:15px}.order-card:hover .order-action{filter:brightness(1.12)}
footer{background:#090807;text-align:center;padding:42px 20px 28px;border-top:1px solid #ffffff15}.footer-brand img{width:62px;height:62px;object-fit:contain;background:transparent}footer p{font-size:10px;color:#a99d8f;margin:18px 0}footer small{font-size:8px;letter-spacing:1.5px;color:#746b61}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.dish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dish-photo{width:min(100%,190px)}.header{padding:0 4%}.nav{gap:18px}.header-order{font-size:8px}}
@media(max-width:680px){html{scroll-padding-top:70px}.topline{font-size:7px;letter-spacing:2px}.header{height:72px;padding:0 5%}.brand strong{font-size:23px;letter-spacing:.16em}.brand span{font-size:6px;letter-spacing:1.7px}.nav-toggle{display:block}.nav{display:none;position:absolute;top:72px;left:0;right:0;padding:22px 7%;background:#0b0a09;flex-direction:column;gap:21px;border-top:1px solid #ffffff18}.nav.open{display:flex}.nav a{font-size:11px}.header-order{display:none}.hero{height:760px;min-height:0;align-items:flex-end}.hero-image{background:radial-gradient(ellipse at 75% 42%,#392719 0%,#0b0908 72%)}.hero-dish{width:100%;height:68%;right:-4%;top:39%;object-position:center right;transform:translateY(-50%) scale(1.02);animation:dishMobileZoom 18s ease-in-out infinite alternate}.hero-vignette{background:linear-gradient(0deg,#080706 0%,#080706ee 30%,#08070622 70%,#08070655 100%)}.hero-content{margin:0;padding:0 8% 95px;max-width:100%;width:100%}.hero h1{font-size:54px;letter-spacing:.1em;margin:22px 0 18px}.hero-tagline{font-size:22px}.hero-scroll{bottom:22px}@keyframes dishMobileZoom{from{transform:translateY(-50%) scale(1.02)}to{transform:translateY(-50%) scale(1.12)}}.story{grid-template-columns:1fr}.story-photo,.story-photo img{min-height:280px;height:280px}.story-copy{padding:50px 9% 58px}.story-copy h2{font-size:34px}.story-en{font-size:15px}.menu-section{padding:70px 5% 60px}.menu-heading{margin-bottom:32px}.menu-heading h2{font-size:40px}.menu-nav-wrap{top:72px;margin:0 -5% 35px;padding:0 4%}.menu-nav{justify-content:flex-start}.menu-nav button{padding:15px 13px 13px;font-size:9px}.menu-category{scroll-margin-top:140px;margin-bottom:50px}.category-title h3{font-size:20px}.dish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}.dish-photo{width:min(100%,165px);border-width:1px;margin-bottom:12px}.dish-card.text-only{min-height:118px;padding:12px 6px}.dish-name{font-size:14px}.dish-korean{font-size:9px}.dish-description{font-size:9px;min-height:0}.dish-price{font-size:15px}.gallery{padding:68px 6%}.gallery-images{grid-template-columns:1fr 1fr;gap:10px}.gallery-images figure:last-child{display:none}.gallery-images img{height:190px}.visit{grid-template-columns:1fr}.visit-copy{padding:60px 8%}.visit h2{font-size:44px}.map,.map iframe{min-height:270px;height:270px}.order{padding:68px 6%}.order h2{font-size:45px}.order-cards{grid-template-columns:1fr;gap:13px;margin-top:28px}.order-card{min-height:205px;padding:25px 20px}.footer-brand img{width:56px;height:56px;background:transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* V7 MENU SYSTEM — classic circular dish photos + clean text-only listings */
.menu-section{padding-left:clamp(22px,5.5vw,88px);padding-right:clamp(22px,5.5vw,88px)}
.menu-sections{max-width:1240px}
.menu-category{margin-bottom:82px;scroll-margin-top:145px}
.category-title{gap:22px;margin-bottom:34px}
.category-title h3{font-size:clamp(22px,2.2vw,29px);letter-spacing:.01em}
.category-title span{font-size:16px;white-space:nowrap}
.dish-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 34px;align-items:flex-start}
.dish-card.has-photo{display:flex;flex:0 1 calc((100% - 68px)/3);flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0 8px 12px}
.dish-photo{width:clamp(170px,18vw,224px);height:auto;aspect-ratio:1/1;margin:0 auto 18px;border:0;background:transparent;box-shadow:none;overflow:visible}
.dish-photo img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;filter:none;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s}
.dish-card.has-photo:hover .dish-photo img{transform:scale(1.035);filter:brightness(1.04)}
.dish-name{font-size:clamp(17px,1.5vw,20px);line-height:1.3;margin:0 0 5px}
.dish-korean{font-size:12px;margin-bottom:8px}
.dish-description{font-size:12px;line-height:1.65;min-height:0;max-width:290px;margin:0 auto 10px}
.dish-price{font-size:20px;margin-top:1px}
.menu-text-wrap{max-width:1000px;margin:36px auto 0;padding-top:23px;border-top:1px solid #d9cbbb}
.menu-text-heading{font-size:9px;letter-spacing:2.6px;color:#9b8060;margin:0 0 13px;text-align:left}
.menu-text-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:42px}
.menu-text-item{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:13px 0;border-bottom:1px solid #e1d7ca}
.menu-text-main{min-width:0}
.menu-text-main h4{font:600 15px "Noto Serif KR","Playfair Display",serif;color:#2b2017;margin:0 0 3px}
.menu-text-main span{font-size:11px;color:#9b8060}
.menu-text-main p{font-size:11px;line-height:1.5;color:#85796d;margin:5px 0 0}
.menu-text-item>strong{font:500 16px "Playfair Display",serif;color:#2c2118;white-space:nowrap;padding-top:1px}
.menu-category:not(:has(.dish-grid)) .menu-text-wrap{margin-top:0;padding-top:0;border-top:0}
.menu-category:not(:has(.dish-grid)) .menu-text-list{max-width:1050px;margin:auto}
@media(max-width:900px){
.dish-grid{gap:42px 22px}.dish-card.has-photo{flex-basis:calc((100% - 22px)/2)}
.dish-photo{width:clamp(160px,26vw,210px)}
.menu-text-list{column-gap:24px}
}
@media(max-width:580px){
.menu-section{padding:70px 18px 62px}
.menu-heading h2{font-size:40px}
.menu-nav-wrap{top:72px;margin-left:-18px;margin-right:-18px}
.menu-nav{justify-content:flex-start;padding:0 10px}
.menu-nav button{padding:15px 13px 13px;font-size:9px}
.menu-category{margin-bottom:60px;scroll-margin-top:130px}
.category-title{gap:12px;margin-bottom:25px}
.category-title h3{font-size:19px}
.category-title span{font-size:13px}
.dish-grid{gap:34px 12px}.dish-card.has-photo{flex-basis:calc((100% - 12px)/2)}
.dish-card.has-photo{padding:0 2px 8px}
.dish-photo{width:min(100%,168px);margin-bottom:12px}
.dish-name{font-size:15px}
.dish-korean{font-size:10px}
.dish-description{font-size:10px;line-height:1.5}
.dish-price{font-size:18px}
.menu-text-wrap{margin-top:25px;padding-top:18px}
.menu-text-list{grid-template-columns:1fr;column-gap:0}
.menu-text-item{padding:12px 0}
.menu-text-main h4{font-size:14px}
}
/* V9: More deliberate hierarchy for secondary appetizer items. */
.menu-category.is-appetizers .dish-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px 30px;
max-width:1120px;
margin:0 auto;
align-items:start;
}
.menu-category.is-appetizers .dish-card{padding:0 8px 10px}
.menu-category.is-appetizers .dish-photo{
width:min(100%,148px);
margin:0 auto 11px;
box-shadow:0 5px 16px #2c1c1012;
}
.menu-category.is-appetizers .dish-name{font-size:15px;margin-bottom:3px}
.menu-category.is-appetizers .dish-korean{font-size:9px;margin-bottom:5px}
.menu-category.is-appetizers .dish-description{
font-size:9px;line-height:1.45;min-height:25px;max-width:190px;margin-bottom:5px;
}
.menu-category.is-appetizers .dish-price{font-size:15px}
.menu-category.is-appetizers .menu-text-wrap{max-width:1040px;margin:24px auto 0}
.menu-category.is-appetizers .menu-text-heading{font-size:8px;letter-spacing:2px}
/* Full plate photography: square/rectangular serving dishes must not be clipped by circular masks. */
.dish-photo.dish-photo-plate{
width:min(100%,280px);
aspect-ratio:1.4/1;
border-radius:10px;
background:transparent;
border:0;
box-shadow:none;
overflow:visible;
margin:0 auto 14px;
}
.dish-photo.dish-photo-plate img{
width:100%;height:100%;object-fit:contain;border-radius:0;
}
.dish-card:hover .dish-photo.dish-photo-plate img{transform:scale(1.025)}
@media(max-width:900px){
.menu-category.is-appetizers .dish-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px}
.menu-category.is-appetizers .dish-photo{width:min(100%,138px)}
.dish-photo.dish-photo-plate{width:min(100%,260px)}
}
@media(max-width:580px){
.menu-category.is-appetizers .dish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}
.menu-category.is-appetizers .dish-photo{width:min(100%,145px)}
.menu-category.is-appetizers .dish-name{font-size:14px}
.dish-photo.dish-photo-plate{width:min(100%,250px)}
}
/* V10: Japchae and Yaki Soba share identical transparent PNG canvas dimensions. */
.menu-category#category-5 .dish-photo.dish-photo-plate{
width:min(100%,280px);
height:200px;
aspect-ratio:auto;
margin:0 auto 14px;
display:flex;
align-items:stretch;
justify-content:center;
}
.menu-category#category-5 .dish-photo.dish-photo-plate img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
}
/* V11: Use the original DoorDash red mark inside the existing white platform badge. */
.platform-mark.dd img{
display:block;
width:40px;
height:40px;
object-fit:contain;
}
/* V12: Intro animation is full-bleed at every viewport ratio; no uncovered edges. */
.intro{width:100%;height:100vh;height:100dvh;overflow:hidden}
.intro-food{position:absolute;inset:0;width:100%;height:100%}
.intro-food:after{
background-size:cover;
background-position:75% center;
background-repeat:no-repeat;
will-change:opacity,transform;
}
/* V14 image consistency + deliberate Korean Entrees feature layout */
.menu-category .dish-photo{
width:min(100%,210px);
height:auto;
aspect-ratio:1/1;
margin:0 auto 16px;
border-radius:50%;
overflow:visible;
background:transparent;
border:0;
box-shadow:none;
padding:0;
}
.menu-category .dish-photo img{
width:100%;
height:100%;
object-fit:contain;
border-radius:0;
display:block;
filter:none;
}
.menu-category .dish-card:hover .dish-photo img{transform:scale(1.025)}
.menu-category.is-entrees .dish-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:34px 26px;
align-items:start;
}
.menu-category.is-entrees .dish-card.entree-featured{
grid-column:1/-1;
display:grid;
grid-template-columns:minmax(280px,38%) minmax(0,1fr);
grid-template-rows:auto auto auto auto;
align-items:center;
text-align:left;
gap:0 34px;
padding:26px 5.5%;
margin:0 0 4px;
border:1px solid #d9cbbb;
background:linear-gradient(115deg,#eee5d8 0%,#f8f3eb 70%);
border-radius:4px;
}
.menu-category.is-entrees .entree-featured .dish-photo{
grid-column:1;
grid-row:1/5;
width:min(100%,340px);
justify-self:center;
margin:0;
}
.menu-category.is-entrees .entree-featured .dish-name{
grid-column:2;
font:600 clamp(28px,3vw,40px)/1.15 "Noto Serif KR","Playfair Display",serif;
margin:0 0 8px;
}
.menu-category.is-entrees .entree-featured .dish-korean{
grid-column:2;
font-size:13px;
margin-bottom:14px;
}
.menu-category.is-entrees .entree-featured .dish-description{
grid-column:2;
max-width:520px;
font-size:15px;
line-height:1.65;
color:#76695d;
margin:0 0 18px;
}
.menu-category.is-entrees .entree-featured .dish-price{
grid-column:2;
font:600 26px "Playfair Display",serif;
color:#a52c22;
}
.menu-category.is-entrees .menu-text-wrap{
max-width:1040px;
margin:28px auto 0;
}
.menu-category.is-entrees .menu-text-heading{
text-align:center;
font-size:9px;
letter-spacing:2.4px;
color:#9a7654;
margin-bottom:12px;
}
@media(max-width:900px){
.menu-category.is-entrees .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px}
.menu-category.is-entrees .dish-card.entree-featured{grid-template-columns:minmax(220px,38%) minmax(0,1fr);padding:22px 4%}
.menu-category.is-entrees .entree-featured .dish-photo{width:min(100%,280px)}
}
@media(max-width:680px){
.menu-category .dish-photo{width:min(100%,210px);margin-bottom:12px}
.menu-category.is-entrees .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px}
.menu-category.is-entrees .dish-card.entree-featured{
grid-template-columns:minmax(120px,42%) minmax(0,1fr);
gap:0 14px;
padding:14px 10px;
}
.menu-category.is-entrees .entree-featured .dish-photo{width:100%;max-width:180px}
.menu-category.is-entrees .entree-featured .dish-name{font-size:21px;margin-bottom:5px}
.menu-category.is-entrees .entree-featured .dish-korean{font-size:10px;margin-bottom:7px}
.menu-category.is-entrees .entree-featured .dish-description{font-size:10px;line-height:1.45;margin-bottom:8px}
.menu-category.is-entrees .entree-featured .dish-price{font-size:19px}
}
/* Keep appetizer, chicken and soup image frames consistent across categories. */
.menu-category.is-appetizers .dish-photo{width:min(100%,210px)}
.menu-category.is-chicken .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
@media(max-width:900px){
.menu-category.is-chicken .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px}
}
@media(max-width:680px){
.menu-category.is-chicken .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px}
}
/* V15: noodles are an intentional 2x2 composition; retain the existing photo size. */
.menu-category.is-noodles .dish-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:38px 28px;
align-items:start;
max-width:1120px;
margin-left:auto;
margin-right:auto;
}
.menu-category.is-noodles .dish-card{
width:100%;
}
.menu-category.is-noodles .dish-photo{
width:min(100%,210px);
}
@media(max-width:680px){
.menu-category.is-noodles .dish-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px 12px;
}
.menu-category.is-noodles .dish-photo{
width:min(100%,210px);
}
}
/* V16: paired representative rice bowls, with the remaining bowls listed below. */
.menu-category.is-rice .dish-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:42px 54px;
align-items:start;
max-width:1040px;
margin:0 auto;
}
.menu-category.is-rice .dish-card{
width:100%;
}
.menu-category.is-rice .dish-photo{
width:min(100%,270px);
margin-left:auto;
margin-right:auto;
}
.menu-category.is-rice .dish-card .dish-name{
margin-top:18px;
}
@media(max-width:680px){
.menu-category.is-rice .dish-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:26px 14px;
}
.menu-category.is-rice .dish-photo{
width:min(100%,270px);
}
}
@media(max-width:640px){
.intro-food:after{background-position:center center;background-size:cover}
}
/* V18: slightly enlarge only the Seolleongtang artwork inside its existing photo frame. */
.dish-photo-seolleongtang img{transform:scale(1.10)}
.dish-card.has-photo:hover .dish-photo-seolleongtang img{transform:scale(1.14)}
/* V19 MOBILE POLISH — mobile-only refinements; desktop styling remains unchanged. */
@media (max-width: 680px) {
body { overflow-x: hidden; }
.header { padding-left: 5%; padding-right: 5%; }
.nav { max-height: calc(100dvh - 72px); overflow-y: auto; }
.hero { height: min(720px, 112svh); min-height: 600px; }
.hero-content { padding-left: 7%; padding-right: 7%; }
.hero h1 { font-size: clamp(45px, 12vw, 56px); }
.hero-tagline { max-width: 18em; }
.story-photo, .story-photo img { height: clamp(240px, 68vw, 330px); min-height: 0; }
.story-copy { padding: 44px 8% 50px; }
.menu-section { padding-left: 5%; padding-right: 5%; }
.menu-heading h2 { font-size: clamp(34px, 9vw, 40px); }
.menu-nav-wrap { padding-left: 2%; padding-right: 2%; }
.menu-nav button { min-height: 48px; }
.category-title { flex-wrap: nowrap; }
.category-title h3 { font-size: clamp(16px, 4.5vw, 19px); }
.category-title span { white-space: nowrap; }
/* Keep food cards readable: two columns instead of cramped three-column rows. */
.menu-category.is-entrees .dish-grid,
.menu-category.is-chicken .dish-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 12px;
}
.menu-category.is-entrees .dish-card.entree-featured {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
gap: 0 14px;
padding: 16px 12px;
}
.menu-category.is-entrees .entree-featured .dish-photo {
width: 100%;
max-width: 190px;
}
.menu-category.is-entrees .entree-featured .dish-name {
font-size: clamp(19px, 5.4vw, 23px);
overflow-wrap: anywhere;
}
.menu-category.is-entrees .entree-featured .dish-description {
font-size: 10px;
line-height: 1.5;
}
.menu-category.is-chicken .dish-photo,
.menu-category.is-entrees .dish-card:not(.entree-featured) .dish-photo {
width: min(100%, 190px);
}
.menu-category.is-noodles .dish-photo.dish-photo-plate {
height: clamp(135px, 42vw, 175px);
}
.menu-category.is-rice .dish-photo { width: min(100%, 230px); }
.dish-name { overflow-wrap: anywhere; }
.dish-description { max-width: 28em; }
.menu-text-list { grid-template-columns: 1fr; }
.gallery { padding: 62px 5% 68px; }
.gallery-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-images figure:last-child { display: block; }
.gallery-images img { height: clamp(145px, 43vw, 205px); }
.visit-copy { padding: 52px 8%; }
.order { padding-left: 5%; padding-right: 5%; }
.order-card { min-height: 170px; }
footer { padding-left: 6%; padding-right: 6%; text-align: center; }
}
@media (max-width: 390px) {
.topline { font-size: 6px; letter-spacing: 1.5px; }
.brand strong { font-size: 21px; }
.hero { min-height: 570px; height: 650px; }
.hero-content { padding-bottom: 82px; }
.hero h1 { font-size: 44px; }
.hero-tagline { font-size: 19px; }
.menu-section { padding-left: 16px; padding-right: 16px; }
.menu-category.is-entrees .dish-card.entree-featured {
grid-template-columns: 1fr;
text-align: center;
gap: 10px;
}
.menu-category.is-entrees .entree-featured .dish-photo {
grid-column: 1;
grid-row: auto;
width: min(100%, 190px);
justify-self: center;
}
.menu-category.is-entrees .entree-featured .dish-name,
.menu-category.is-entrees .entree-featured .dish-korean,
.menu-category.is-entrees .entree-featured .dish-description,
.menu-category.is-entrees .entree-featured .dish-price {
grid-column: 1;
}
.dish-name { font-size: 13px; }
.dish-price { font-size: 16px; }
}
/* LA Galbi featured card: use the full plated dish photo, not the circular crop. */
.menu-category.is-entrees .entree-featured .dish-photo {
width: 100%;
max-width: none;
aspect-ratio: 5 / 3;
height: auto;
border-radius: 4px;
overflow: hidden;
background: #080706;
box-shadow: 0 8px 24px #2c1c1022;
}
.menu-category.is-entrees .entree-featured .dish-photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 0;
transform: none;
}
.menu-category.is-entrees .entree-featured:hover .dish-photo img {
transform: none;
}
@media (max-width: 680px) {
.menu-category.is-entrees .dish-card.entree-featured {
grid-template-columns: minmax(0, 1fr);
}
.menu-category.is-entrees .entree-featured .dish-photo {
grid-column: 1;
grid-row: auto;
width: 100%;
max-width: none;
aspect-ratio: 5 / 3;
justify-self: stretch;
}
}
@media (max-width: 390px) {
.menu-category.is-entrees .entree-featured .dish-photo {
width: 100%;
max-width: none;
}
}
/* V22: use the restaurant interior in the home hero and keep menu cutouts roomy. */
.hero-image {
background:
linear-gradient(90deg, rgba(8, 7, 6, .40), rgba(8, 7, 6, .08) 78%),
url("assets/restaurant-interior.jpg") center 54% / cover no-repeat;
}
.hero-dish { display: none; }
.story-photo img { object-position: center 54%; }
.menu-category.is-entrees .entree-featured .dish-photo { background: transparent; }
.dish-photo.dish-photo-tteokbokki img { transform: scale(1.25); }
.dish-card.has-photo:hover .dish-photo.dish-photo-tteokbokki img { transform: scale(1.30); }
.menu-category.is-drinks .menu-subcategory-heading {
grid-column: 1 / -1;
width: 100%;
margin: 22px 0 2px;
padding: 0 0 8px;
border-bottom: 1px solid #d7c9b7;
color: #a52c22;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.8px;
text-align: left;
}
.menu-category.is-drinks .menu-subcategory-heading:first-child { margin-top: 0; }
@media (max-width: 680px) {
.hero-image { background-position: 42% center; }
.menu-category.is-drinks .menu-subcategory-heading { margin-top: 18px; }
}
/* V23: approved right-shifted restaurant crop and mobile-first refinements. */
.hero-image {
background-image:
linear-gradient(90deg, rgba(8, 7, 6, .10), rgba(8, 7, 6, .04) 66%, transparent 100%),
url("assets/restaurant-interior.jpg");
background-size: 100% 100%, 127% auto;
background-position: center, calc(50% + 20%) 54%;
background-repeat: no-repeat;
}
.hero-vignette {
background:
linear-gradient(90deg, rgba(8, 7, 6, .78) 0%, rgba(8, 7, 6, .56) 23%, rgba(8, 7, 6, .24) 42%, rgba(8, 7, 6, .06) 62%, transparent 76%),
linear-gradient(0deg, rgba(8, 7, 6, .35), transparent 30%);
}
.story-photo img {
filter: none;
object-position: 56% center;
}
.nav-toggle:focus-visible,
.header-order:focus-visible,
.hero-scroll:focus-visible,
.direction-link:focus-visible {
outline: 2px solid #c9a36c;
outline-offset: 4px;
}
@media (max-width: 680px) {
html { scroll-padding-top: 76px; }
.header { min-height: 72px; }
.nav-toggle {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 22px;
touch-action: manipulation;
}
.nav { top: 72px; padding: 18px 7% 24px; gap: 6px; }
.nav a { min-height: 44px; display: flex; align-items: center; }
.hero {
height: min(760px, calc(100svh - 72px));
min-height: 580px;
}
.hero-image {
background-image:
linear-gradient(0deg, rgba(8, 7, 6, .84) 0%, rgba(8, 7, 6, .42) 37%, rgba(8, 7, 6, .04) 72%),
url("assets/restaurant-interior.jpg");
background-size: 100% 100%, auto 108%;
background-position: center, left 42%;
}
.hero-vignette {
background: linear-gradient(0deg, rgba(8, 7, 6, .58) 0%, rgba(8, 7, 6, .12) 38%, transparent 66%);
}
.hero-content { padding-bottom: 88px; }
.hero h1 { font-size: clamp(46px, 12vw, 58px); }
.hero-tagline { font-size: clamp(20px, 5.5vw, 23px); }
.hero-scroll { bottom: 18px; }
.story-photo, .story-photo img { height: clamp(250px, 72vw, 340px); }
.story-copy { padding: 42px 8% 48px; }
.menu-section { padding-top: 60px; }
.menu-heading { margin-bottom: 26px; }
.menu-nav-wrap {
top: 72px;
margin-bottom: 30px;
-webkit-overflow-scrolling: touch;
}
.menu-nav { scroll-snap-type: x proximity; }
.menu-nav button {
min-height: 50px;
padding: 14px 14px 12px;
scroll-snap-align: start;
touch-action: manipulation;
}
.menu-category { scroll-margin-top: 132px; }
.menu-category.is-chicken .dish-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 12px;
}
.menu-category.is-chicken .dish-photo { width: min(100%, 190px); }
.menu-category.is-appetizers .dish-photo { width: min(100%, 170px); }
.dish-name { font-size: clamp(13px, 3.6vw, 15px); }
.dish-description { font-size: 10px; line-height: 1.5; }
.gallery-images { gap: 12px; }
.gallery-images img { border-radius: 3px; }
.visit-copy { padding: 48px 8%; }
.direction-link { min-height: 48px; display: inline-flex; align-items: center; }
.map, .map iframe { height: 300px; min-height: 300px; }
.order { padding-top: 62px; padding-bottom: 62px; }
.order-card { min-height: 190px; border-radius: 4px; }
footer { padding-top: 36px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
.hero { height: min(690px, calc(100svh - 72px)); min-height: 560px; }
.hero-content { padding-bottom: 82px; }
.hero h1 { font-size: 44px; }
.menu-nav button { padding-left: 12px; padding-right: 12px; }
.menu-category.is-chicken .dish-grid { gap: 22px 8px; }
}
@media (prefers-reduced-motion: reduce) {
.menu-nav { scroll-behavior: auto; }
}