/* 星の家 sample homepage — light: no web fonts, no looping animation */
:root{--ink:#221b17;--muted:#6d625a;--line:#e6ddd2;--bg:#faf6f0;--card:#fff;--dark:#1d1714;--red:#b8412a;--red-dk:#8f2f1d;--gold:#d4a73a;--cream:#f3ebe0;
--serif:Georgia,"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;
--sans:system-ui,-apple-system,"Hiragino Sans","Apple SD Gothic Neo","Noto Sans JP","Noto Sans KR","Yu Gothic","Malgun Gothic",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
img{display:block;max-width:100%;-webkit-user-drag:none}
a{color:inherit}
.wrap{max-width:1080px;margin:auto;padding:0 18px}

/* sample notice */
.smp{background:var(--gold);color:#2b1d07;font-size:.82rem;font-weight:700;text-align:center;padding:6px 12px;line-height:1.5}
.smp a{color:#2b1d07}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--dark);color:#fff}
.hd .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#fff;flex:0 0 auto}
.logo b{font-family:var(--serif);font-size:1.45rem;letter-spacing:.08em;font-weight:700}
.logo small{font-size:.72rem;opacity:.7;letter-spacing:.12em}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-size:.9rem;padding:8px 12px;border-radius:8px;opacity:.85;white-space:nowrap}
.nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.nav a.on{opacity:1;color:var(--gold);font-weight:700}
.lg{display:flex;gap:2px;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:2px}
.lg button{border:0;background:none;color:#fff;font:inherit;font-size:.76rem;padding:4px 9px;border-radius:999px;cursor:pointer;opacity:.75}
.lg button.on{background:#fff;color:var(--dark);opacity:1;font-weight:700}
.mb{display:none;border:0;background:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 6px;margin-left:auto}
@media (max-width:860px){
  .mb{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--dark);flex-direction:column;padding:6px 12px 14px;border-top:1px solid rgba(255,255,255,.1)}
  .nav.open{display:flex}
  .nav a{padding:12px 8px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .lg{margin-left:0}
}

/* hero */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero .ph{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);opacity:.55}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,23,20,.95) 0%,rgba(29,23,20,.75) 45%,rgba(29,23,20,.25) 100%)}
.hero .in{position:relative;z-index:1;padding:88px 18px 92px;max-width:1080px;margin:auto}
.kick{display:inline-block;font-size:.8rem;letter-spacing:.2em;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:4px;margin-bottom:18px}
.hero h1{font-family:var(--serif);font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.25;margin:0 0 16px;font-weight:700;letter-spacing:.04em}
.hero p{max-width:30em;margin:0 0 26px;font-size:1.02rem;opacity:.92}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 22px;border-radius:999px;font-weight:700;text-decoration:none;font-size:.98rem;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{background:var(--red-dk)}
.btn.ln{border-color:rgba(255,255,255,.6);color:#fff}
.btn.ln:hover{background:rgba(255,255,255,.1)}
.btn.dk{border-color:var(--ink);color:var(--ink);background:#fff}
.btn.gr{background:#06c755;color:#fff}

/* sub-page title */
.pt{background:var(--dark);color:#fff;padding:46px 0 40px;position:relative;overflow:hidden}
.pt .wrap{position:relative}
.pt small{color:var(--gold);letter-spacing:.24em;font-size:.78rem;display:block;margin-bottom:6px}
.pt h1{font-family:var(--serif);margin:0;font-size:clamp(1.7rem,4.4vw,2.4rem);letter-spacing:.06em}
.crumb{font-size:.8rem;opacity:.65;margin-top:8px}
.crumb a{text-decoration:none}

/* sections */
.sec{padding:64px 0}
.sec.alt{background:var(--cream)}
.sh{text-align:center;margin-bottom:34px}
.sh small{display:block;color:var(--red);letter-spacing:.24em;font-size:.78rem;font-weight:700;margin-bottom:6px}
.sh h2{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2rem);margin:0;letter-spacing:.05em;line-height:1.4}
.sh p{color:var(--muted);margin:10px auto 0;max-width:34em}

/* recommended cards */
.rec{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.rec{grid-template-columns:repeat(2,1fr)}}
.rc{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.rc .im{aspect-ratio:4/3;background:var(--dark)}
.rc .im img{width:100%;height:100%;object-fit:cover}
.rc .tx{padding:12px 14px 14px}
.rc b{display:block;font-size:1.02rem;line-height:1.4}
.rc span{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;margin-top:2px}
.rc em{display:block;font-style:normal;font-weight:800;color:var(--red);margin-top:6px}

/* split block */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center}
.split .im{border-radius:16px;overflow:hidden;aspect-ratio:5/4;background:var(--dark)}
.split .im img{width:100%;height:100%;object-fit:cover}
.split h2{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,1.9rem);line-height:1.45;margin:0 0 14px}
.split p{color:var(--muted);margin:0 0 14px}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:22px}}

/* points */
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.pts{grid-template-columns:1fr}}
.pc{background:var(--card);border-radius:14px;padding:22px;border:1px solid var(--line)}
.pc i{font-style:normal;font-family:var(--serif);color:var(--red);font-size:1.6rem;font-weight:700;display:block;line-height:1}
.pc h3{font-size:1.08rem;margin:10px 0 6px}
.pc p{margin:0;color:var(--muted);font-size:.92rem}

/* info table */
.info{background:var(--card);border-radius:14px;border:1px solid var(--line);overflow:hidden}
.info .r{display:grid;grid-template-columns:8em 1fr;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.info .r:first-child{border-top:0}
.info .r b{color:var(--muted);font-size:.88rem;font-weight:700}
@media (max-width:520px){.info .r{grid-template-columns:1fr;gap:2px}}

/* 12-language menu banner */
.ml{display:flex;gap:18px;align-items:center;background:var(--dark);color:#fff;border-radius:16px;padding:22px 24px;flex-wrap:wrap}
.ml div{flex:1;min-width:220px}
.ml b{font-size:1.12rem;display:block}
.ml span{opacity:.8;font-size:.9rem}
.ml .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.ml .tags em{font-style:normal;font-size:.72rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:1px 8px;opacity:.85}

/* menu page */
.cats{position:sticky;top:62px;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats .wrap{display:flex;gap:6px;padding:10px 18px}
.cats a{flex:0 0 auto;text-decoration:none;font-size:.88rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px}
.cats a:hover{border-color:var(--red);color:var(--red)}
.mc{margin-top:40px;scroll-margin-top:130px}
.mc h2{font-family:var(--serif);font-size:1.4rem;margin:0 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mc h2 small{font-family:var(--sans);font-size:.8rem;color:var(--muted);font-weight:400}
.mc hr{border:0;border-top:2px solid var(--ink);margin:6px 0 16px;width:48px}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.mg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mg{grid-template-columns:1fr}}
.mi{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;align-items:center}
.mi .im{flex:0 0 88px;height:88px;border-radius:9px;overflow:hidden;background:var(--dark)}
.mi .im img{width:100%;height:100%;object-fit:cover}
.mi .tx{min-width:0;flex:1}
.mi b{display:block;line-height:1.4;font-size:.98rem}
.mi span{display:block;font-size:.78rem;color:var(--muted);line-height:1.45}
.mi em{font-style:normal;font-weight:800;color:var(--red);font-size:.98rem;white-space:nowrap}
.mi .hot{color:var(--red);font-size:.75rem;margin-left:4px}
.dr{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 18px}
@media (max-width:640px){.dr{grid-template-columns:1fr}}
.dr div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.dr div span{color:var(--muted);font-size:.78rem;display:block}
.dr em{font-style:normal;font-weight:700;white-space:nowrap}
.tax{color:var(--muted);font-size:.84rem;margin-top:14px}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1/1;background:var(--dark)}
.gal figure.w{grid-column:span 2;aspect-ratio:2/1}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:.82rem;font-weight:700}

/* map */
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#e9e3d9;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:var(--muted);padding:20px;
background-image:linear-gradient(#ddd4c6 1px,transparent 1px),linear-gradient(90deg,#ddd4c6 1px,transparent 1px);background-size:36px 36px}
.map b{display:block;color:var(--ink);font-size:1.05rem}
.map .pin{width:38px;height:38px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);margin:0 auto 12px;box-shadow:0 4px 10px rgba(0,0,0,.2)}

/* contact */
.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.cg{grid-template-columns:1fr}}
.cc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.cc i{font-style:normal;font-size:1.8rem;line-height:1}
.cc h3{margin:0;font-size:1.1rem}
.cc p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.cc .btn{width:100%}
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:12px;max-width:640px;margin:auto}
.form label{display:grid;gap:4px;font-weight:700;font-size:.9rem}
.form input,.form select,.form textarea{font:inherit;font-size:16px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fdfbf8;width:100%}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.form .two{grid-template-columns:1fr}}
.note{font-size:.82rem;color:var(--muted)}

/* footer */
.ft{background:var(--dark);color:#d8cfc6;padding:42px 0 24px;font-size:.88rem}
.ft .g{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px}
@media (max-width:760px){.ft .g{grid-template-columns:1fr}}
.ft b.n{font-family:var(--serif);font-size:1.3rem;color:#fff;display:block;margin-bottom:6px;letter-spacing:.06em}
.ft a{text-decoration:none;display:block;padding:2px 0}
.ft a:hover{color:#fff}
.ft .cp{border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:14px;font-size:.76rem;opacity:.7;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ft .cp a{display:inline;color:var(--gold)}

/* floating call bar (phone only) */
.fb{display:none}
@media (max-width:860px){
  .fb{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(29,23,20,.96)}
  .fb .btn{min-height:44px;font-size:.9rem;padding:8px}
  body{padding-bottom:64px}
}
.lg button{white-space:nowrap}
@media (max-width:420px){.logo small{display:none}.lg button{padding:4px 7px;font-size:.72rem}.hd .wrap{gap:8px}}
/* news */
.nws{display:grid;gap:12px}
.nw{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:16px 18px}
.nw time{font-size:.8rem;color:var(--red);font-weight:700;letter-spacing:.06em}
.nw h3{margin:2px 0 4px;font-size:1.05rem}
.nw p{margin:0;color:var(--muted);font-size:.92rem}
/* shop photo placeholders */
.gal figure.ph0{background:#efe7dc;border:2px dashed #cbbba7}
.gal figure.ph0 div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8a7763}
.gal figure.ph0 b{font-size:.9rem}
/* other languages */
.lgo{appearance:none;-webkit-appearance:none;border:0;background:none;color:#fff;font:inherit;font-size:.76rem;padding:4px 8px;border-radius:999px;cursor:pointer;opacity:.75;max-width:9.5em}
.lgo.on{background:#fff;color:var(--dark);opacity:1;font-weight:700}
.lgo option{color:#000;background:#fff}
html:lang(th) body,html:lang(vi) body{word-break:normal}
@media (max-width:420px){.lgo{max-width:5.2em;padding:4px 4px;font-size:.72rem}}
/* current category */
.cats a.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.cats a.on:hover{color:#fff}
/* reservation */
.own{background:#fff8e6;border:2px dashed var(--gold);border-radius:14px;padding:16px 18px}
.own b{display:block;font-size:1rem}
.own p{margin:6px 0 0;font-size:.88rem;color:var(--muted)}
.own .mx{color:var(--ink);font-weight:600;background:#fff;border-radius:10px;padding:10px 12px;margin-top:10px}
.mbx{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mbx button{font:inherit;font-size:.86rem;border:1px solid var(--gold);background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink)}
.mbx button.on{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:700}
.pol{background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:12px;padding:14px 18px;margin:0 auto 22px;max-width:820px}
.pol b{color:var(--red)}
.pol ul{margin:8px 0 0;padding-left:1.2em;font-size:.92rem}
.pol li{margin:3px 0}
.cg.c2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:auto}
@media (max-width:820px){.cg.c2{grid-template-columns:1fr}}
.rq{margin:0;background:#eef6ee;color:#1f5a2c;border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:700}
.err{margin:-4px 0 0;color:var(--red);font-weight:700;font-size:.88rem}
.form label.agr{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.form label.agr input{width:auto;margin-top:5px;flex:0 0 auto}
/* real shop: star logo, map */
.logo{align-items:center}
.logo .star{width:28px;height:28px;fill:#f0d33c;stroke:#e5482c;stroke-width:1.6;stroke-linejoin:round;flex:0 0 auto;align-self:center}
.cg.c1{grid-template-columns:1fr;max-width:420px;margin:auto}
.map.gm{padding:0;display:block;background:#e9e3d9}
.map.gm iframe{width:100%;height:100%;border:0;display:block}
/* daily lunch */
.lw{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.lw{grid-template-columns:1fr}}
.ld{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.ld .dw{flex:0 0 3.6em;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;background:var(--dark);color:#fff;border-radius:9px;font-size:1rem;line-height:1.2;padding:6px 2px;text-align:center}
.ld .dw small{font-size:.66rem;color:var(--gold);margin-top:3px}
.ld .im{flex:0 0 76px;height:76px;border-radius:9px;overflow:hidden;background:var(--dark)}
.ld .im img{width:100%;height:100%;object-fit:cover}
.ld .tx{min-width:0;flex:1}
.ld .tx b{display:block;line-height:1.4}
.ld .tx span{display:block;font-size:.78rem;color:var(--muted);line-height:1.45}
.ld.on{border:2px solid var(--red);box-shadow:0 2px 10px rgba(184,65,42,.15)}
.ld.on .dw{background:var(--red)}
.ld.off{background:#fdeee9;border-color:#f1c9bd;min-height:62px}
.ld.off .dw{background:var(--red)}
.ld.off .lx{color:var(--red);font-weight:800}
.lnote{margin:12px 0 0;background:#fff8e6;border:1px dashed var(--gold);border-radius:10px;padding:10px 14px;font-size:.88rem;line-height:1.7}
.ld .tx em{display:block;font-style:normal;font-weight:800;color:var(--red);margin-top:2px}
/* two-row header: logo + language on top, page menu on its own row (PC and phone) (2026-10-18) */
.hd .wrap{flex-wrap:wrap;min-height:0;row-gap:0;padding-top:8px}
.hd .lg{margin-left:auto}
.hd .mb{display:none!important}
.hd .nav,.hd .nav.open{order:3;flex:0 0 100%;display:flex;flex-direction:row;position:static;margin:6px 0 0;padding:2px 0;gap:2px;background:none;border-top:1px solid rgba(255,255,255,.12);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hd .nav::-webkit-scrollbar{display:none}
.hd .nav a{flex:0 0 auto;padding:9px 12px;font-size:.92rem;border-bottom:0}
.cats{top:var(--hdh,104px)}
html{scroll-padding-top:calc(var(--hdh,104px) + 10px)}
@media (max-width:860px){.hd .nav a{padding:9px 10px;font-size:.88rem}}
/* copy-link button */
.cpl{flex:0 0 auto;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;border-radius:999px;font:inherit;font-size:.76rem;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;margin-left:6px;white-space:nowrap}
.cpl:hover{background:rgba(255,255,255,.1)}
@media (max-width:560px){.cpl span{display:none}.cpl{padding:5px 8px;margin-left:4px}}
@media (max-width:860px){.hd .cpl{display:none}.fb{grid-template-columns:1fr 1fr auto}.fb .cplm{background:#fff;color:#1d1714;min-width:48px;padding:8px 12px;font-size:1.1rem}}
.fb .cplm{display:none}@media (max-width:860px){.fb .cplm{display:inline-flex}}