:root {
  color-scheme: dark;
  --bg: #171411;
  --panel: #211d19;
  --panel-2: #2a241f;
  --text: #f6f0e7;
  --muted: #bfb4a6;
  --line: #40372f;
  --accent: #c54f36;
  --accent-soft: #6d3024;
  --gold: #d7b574;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(197,79,54,.12), transparent 34rem), var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans KR", sans-serif;
  line-height: 1.5;
}
body.cart-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: max(1.4rem, env(safe-area-inset-top)) 1.1rem 1rem; max-width: 1100px; margin: 0 auto; }
.eyebrow { margin: 0 0 .25rem; color: var(--gold); letter-spacing: .16em; font-size: .74rem; font-weight: 800; }
.hero h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.8rem); letter-spacing: -.025em; }
.hero-note { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }
.lang-button { border: 1px solid var(--line); background: rgba(33,29,25,.92); border-radius: 999px; padding: .65rem .85rem; display: inline-flex; gap: .5rem; align-items: center; white-space: nowrap; cursor: pointer; }
main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 6.5rem; }
.toolbar { position: sticky; top: 0; z-index: 10; padding: .75rem 0 .7rem; background: linear-gradient(var(--bg) 82%, transparent); backdrop-filter: blur(7px); }
.search-box { height: 46px; border: 1px solid var(--line); background: var(--panel); border-radius: 13px; display: flex; align-items: center; gap: .65rem; padding: 0 .9rem; }
.search-box span { color: var(--muted); font-size: 1.2rem; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 16px; }
.search-box input::placeholder { color: #8f857a; }
.categories { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .7rem 0 .1rem; }
.categories::-webkit-scrollbar { display: none; }
.category-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: .55rem .85rem; cursor: pointer; font-size: .88rem; color: var(--muted); }
.category-chip.active { border-color: var(--accent); background: var(--accent-soft); color: #fff; }
.result-summary { color: var(--muted); font-size: .83rem; min-height: 1.7rem; }
.category-section { margin: 1.3rem 0 2rem; }
.category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; margin-bottom: .65rem; }
.category-heading h2 { margin: 0; font-size: 1.25rem; }
.category-heading span { color: var(--muted); font-size: .8rem; }
.category-notice { margin: -.2rem 0 .8rem; padding: .75rem .85rem; border: 1px solid #554936; border-radius: 11px; background: rgba(215,181,116,.08); color: #e9d5ad; font-size: .88rem; }
.cards { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.menu-card { border: 1px solid var(--line); background: linear-gradient(145deg, var(--panel), #1e1a17); border-radius: 15px; padding: .95rem; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.card-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.menu-card h3 { margin: 0; font-size: 1.04rem; line-height: 1.35; }
.price { flex: 0 0 auto; color: #fff; font-size: 1.08rem; font-weight: 800; text-align: right; white-space: nowrap; }
.price small { display: block; color: var(--muted); font-size: .64rem; font-weight: 500; }
.description { margin: .45rem 0 .75rem; color: #d5ccc2; font-size: .9rem; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: .28rem .55rem; padding-top: .65rem; border-top: 1px dashed #443b34; font-size: .8rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: #e8e0d6; }
.card-bottom { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(64,55,47,.65); display: flex; align-items: center; gap: .7rem; justify-content: space-between; }
.product-id { min-width: 0; color: #8d8379; font-size: .7rem; letter-spacing: .03em; }
.product-id span { color: #c8bdb1; letter-spacing: 0; font-weight: 600; }
.add-cart-button { flex: 0 0 auto; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 10px; padding: .55rem .7rem; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .78rem; font-weight: 800; }
.add-cart-button.has-items { background: var(--accent-soft); }
.add-cart-button:active { transform: translateY(1px); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 1.1rem; }
footer { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem max(5.5rem, calc(2rem + env(safe-area-inset-bottom))); border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
footer p { margin: .2rem 0; }

.floating-cart { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, calc(.65rem + env(safe-area-inset-bottom))); z-index: 35; border: 1px solid #d0644b; background: var(--accent); color: #fff; border-radius: 999px; min-height: 52px; padding: .7rem .8rem .7rem 1rem; display: flex; align-items: center; gap: .55rem; font-weight: 800; cursor: pointer; box-shadow: 0 14px 35px rgba(0,0,0,.34); }
.cart-icon { font-size: 1.05rem; }
.cart-count { min-width: 25px; height: 25px; padding: 0 .35rem; display: grid; place-items: center; background: #fff; color: #442019; border-radius: 999px; font-size: .76rem; }
.cart-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(5,4,3,.68); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(100%, 480px); background: #1c1815; border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(0,0,0,.35); transform: translateX(102%); transition: transform .24s ease; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .6rem; border-bottom: 1px solid var(--line); }
.cart-header h2 { margin: 0; font-size: 1.55rem; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.cart-staff-note { margin: .85rem 1rem .4rem; padding: .72rem .8rem; border: 1px solid #5a4c35; background: rgba(215,181,116,.08); border-radius: 11px; color: #e8d4ad; font-size: .82rem; }
.cart-items { overflow-y: auto; padding: .5rem 1rem 1rem; flex: 1 1 auto; }
.cart-item { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: .85rem; margin-bottom: .65rem; }
.cart-item-main { position: relative; padding-right: 5.2rem; }
.cart-item-code { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.cart-item h3 { margin: .15rem 0; font-size: .98rem; line-height: 1.35; }
.cart-japanese { margin: .18rem 0 0; color: #fff; font-size: .86rem; font-weight: 800; }
.cart-line-price { position: absolute; top: .05rem; right: 0; color: #fff; font-weight: 800; font-size: .92rem; }
.cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px dashed #443b34; }
.quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.quantity-control button { width: 38px; height: 34px; border: 0; background: var(--panel-2); cursor: pointer; font-size: 1.05rem; }
.quantity-control span { min-width: 38px; text-align: center; font-weight: 800; }
.remove-button { border: 0; background: transparent; color: #dba99e; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .78rem; }
.cart-empty { flex: 1 1 auto; display: grid; place-content: center; text-align: center; padding: 2rem; color: var(--muted); }
.cart-empty strong { color: var(--text); }
.cart-empty p { margin: .3rem 0; font-size: .86rem; }
.cart-footer { flex: 0 0 auto; padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #181411; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cart-total-row span { color: var(--muted); font-size: .85rem; }
.cart-total-row strong { font-size: 1.3rem; }
.cart-total-note { margin: .25rem 0 .65rem; color: var(--muted); font-size: .72rem; }
.clear-cart-button { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 11px; padding: .7rem; cursor: pointer; font-size: .82rem; }
.clear-cart-button:disabled { opacity: .45; cursor: default; }

.language-gate { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 1rem; background: rgba(12,10,8,.94); backdrop-filter: blur(9px); }
.language-gate.open { display: grid; }
.language-card { width: min(100%, 470px); border: 1px solid var(--line); background: var(--panel); border-radius: 22px; padding: 1.4rem; box-shadow: var(--shadow); text-align: center; }
.brand-mark { width: 56px; height: 56px; border: 1px solid #695543; border-radius: 50%; margin: 0 auto .85rem; display: grid; place-items: center; color: var(--gold); font-family: serif; font-size: 1.65rem; }
.language-card h1 { margin: .15rem 0; font-size: 1.55rem; }
.language-help { margin: .25rem 0 1rem; color: var(--muted); font-size: .85rem; }
.language-grid { display: grid; gap: .6rem; }
.language-option { width: 100%; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); padding: .9rem 1rem; cursor: pointer; font-weight: 700; }
.language-option:hover, .language-option:focus-visible { border-color: var(--accent); outline: none; }

@media (min-width: 720px) {
  .hero { padding-inline: 1.5rem; }
  main { padding-inline: 1.5rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { display: grid; grid-template-columns: minmax(250px, .8fr) 1.2fr; gap: .8rem; align-items: center; }
  .categories { padding: 0; }
}
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .card-bottom { align-items: stretch; flex-direction: column; }
  .add-cart-button { justify-content: center; width: 100%; }
}