/* マルコナ v4 の動かない枠（3案共通、色は各案の --bg・--ink・--accent・--line を使う）
   Ichiro 10/24：左上にアクセス、右上に言葉の切り替え。下は「予約する」（押すとネット／電話）と「地図」。写真は押すと大きく。飾りは手書きのひとこと */
.frame-top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.frame-left { justify-self: start; display: flex; gap: 14px; }
.frame-access { font-family: var(--head); font-weight: 700; font-size: 13.5px; letter-spacing: .1em; color: var(--ink); text-decoration: none;
  padding: 8px 2px; border-bottom: 1px solid var(--accent); line-height: 1.2; }
.frame-mark { justify-self: center; display: block; }
.frame-mark img { height: 34px; width: auto; }
.lang { justify-self: end; position: relative; }
.lang-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; letter-spacing: .04em; padding: 6px 10px; border-radius: 2px; cursor: pointer; }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); min-width: 150px; }
.lang-list button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 10px; cursor: pointer; }
.lang-list button[aria-current="true"] { font-weight: 700; color: var(--accent); }
main { padding-top: 56px; }
/* Jumps from the fixed bar (アクセス, メニュー) land below it, not under it */
section[id] { scroll-margin-top: 60px; }
@media (min-width: 1000px) { section[id] { scroll-margin-top: 68px; } }
/* Japanese phrase chunks never break inside; Korean keeps words whole */
.ph { display: inline-block; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

/* The shop closed today from its edit screen: the line stands out, with the next opening day under it */
.today-off .today-label { color: var(--accent); font-weight: 700; font-size: 17px; }
/* 11/3 返事Eの予行: the owner's own word, quoted right under the intro (M.ownerWord) */
.owner-word { margin: 16px 0 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent); font-size: 16px; line-height: 1.8; }
.sample-note { margin: 14px 0 0; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: 8px; font-size: 13px; line-height: 1.7; color: var(--accent); }
.today-open .today-label { color: var(--ink, inherit); font-weight: 700; font-size: 15px; }
.today-next { margin: 4px 0 0; font-size: 15px; }

/* Bottom: one button to book (it opens the two ways to book) and the map */
.bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.bar .btn { flex: 1; min-height: 48px; padding: 0 10px; white-space: nowrap; }
.bar .btn-main { flex: 1.6; border: 0; cursor: pointer; }
.sheet { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); }
.sheet[hidden] { display: none; }
.sheet .btn { min-height: 52px; }
.btn-line { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.sheet-close { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 6px; cursor: pointer; }

/* Photos open large */
[data-zoom] { cursor: zoom-in; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(14, 10, 8, .9); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox img { max-width: calc(100vw - 24px); max-height: calc(100vh - 110px); object-fit: contain; }
.lightbox p { margin: 0; color: #F4EDE3; font-size: 14px; text-align: center; padding: 0 16px; }
.lightbox button { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; cursor: pointer; }

/* Decoration: a handwritten word by each title, like the guests' signatures on the shop's wall. It writes itself in as it appears */
.scrib { font-family: "Caveat", cursive; font-weight: 500; letter-spacing: .01em; line-height: 1; pointer-events: none; white-space: nowrap; }
html.motion .scrib { clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 1.6s cubic-bezier(.45,0,.2,1) .25s, opacity .6s ease .25s; }
html.motion .scrib.in { clip-path: inset(0 0 0 0); }

/* The full menu: groups with a dotted leader-free list of names and prices */
.menu-list, .menu-col { display: grid; gap: 26px; align-content: start; }
/* The row of section names above the menu (Ichiro 10/28). It stays under the top bar while the menu is on screen;
   on a phone it scrolls sideways, on a PC every name fits on one or two lines */
.menu-jump { position: sticky; top: 56px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 22px; padding: 10px 0;
  background: var(--sec-bg, var(--bg)); border-bottom: 1px solid var(--line); }
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu-jump a:hover { border-color: var(--accent); color: var(--accent); }
.menu-jump-part { display: contents; }
.menu-jump-sep { flex: none; width: 1px; margin: 4px 4px; background: var(--line); }
/* 案1 (Ichiro 10/28): on a phone the drinks start folded under one wide button; on a PC both columns always show */
.menu-list:not(.drinks-open) .menu-drinks { display: none; }
.drinks-toggle { display: block; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; letter-spacing: .06em; cursor: pointer; }
.drinks-toggle::after { content: " ▾"; color: var(--accent); }
.drinks-toggle[aria-expanded="true"]::after { content: " ▴"; }
/* A jump lands below both the top bar and the row of names */
.menu-group { scroll-margin-top: 118px; }
.menu-group h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: .1em; color: var(--accent); }
.menu-group dl { margin: 0; }
.menu-group div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; }
.menu-group dt { min-width: 0; }
.menu-desc { display: block; font-size: .85em; opacity: .75; }
/* 11/3 スイッチ menuTabs: on a phone (640px or less) the menu is split into tabs (料理・コース・ドリンク). The tab row and the
   row of names stay together under the top bar. Only a page with its script running gets .tabbed, so the HTML written ahead
   of time, the admin screen and a PC show everything as before */
.menu-sticky { display: contents; }
.menu-tabs { display: none; }
@media (max-width: 640px) {
  .menu-sticky { display: block; position: sticky; top: 56px; z-index: 5; margin: 0 0 18px; background: var(--sec-bg, var(--bg)); border-bottom: 1px solid var(--line); }
  .menu-sticky .menu-jump { position: static; margin: 0; padding: 8px 0; border-bottom: 0; }
  .menu-sticky .menu-jump-sep { display: none; }
  .menu-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding-top: 6px; border-bottom: 1px solid var(--line); }
  .menu-tabs button { min-width: 0; min-height: 48px; padding: 6px 4px 7px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent;
    color: var(--muted, var(--ink)); font: inherit; line-height: 1.25; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
  .menu-tab-name { font-size: 15px; letter-spacing: .06em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .menu-tab-from { font-size: 11px; letter-spacing: .02em; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .menu-tabs [aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
  .menu-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Only the open tab's groups and names; the drinks button is not needed */
  .menu-list.tabbed { scroll-margin-top: 170px; }
  .menu-list.tabbed .drinks-toggle { display: none; }
  .menu-list.tabbed .menu-drinks { display: grid; }
  .menu-list.tabbed[data-tab="drink"] .menu-col:not(.menu-drinks), .menu-list.tabbed:not([data-tab="drink"]) .menu-drinks { display: none; }
  .menu-list.tabbed[data-tab="food"] .menu-group:not([data-tab="food"]), .menu-list.tabbed[data-tab="course"] .menu-group:not([data-tab="course"]),
  .menu-list.tabbed[data-tab="drink"] .menu-group:not([data-tab="drink"]) { display: none; }
  .menu-sticky[data-tab="food"] .menu-jump a:not([data-tab="food"]), .menu-sticky[data-tab="course"] .menu-jump a:not([data-tab="course"]),
  .menu-sticky[data-tab="drink"] .menu-jump a:not([data-tab="drink"]) { display: none; }
  .menu-list.tabbed .menu-group { scroll-margin-top: 170px; }
  .menu-list.tabbed .menu-group div { padding: 6px 0; }
}
/* The shop's fixed recommended slots above the full menu. Fixed shape whatever the shop writes: the photo is always 4:3,
   the text is cut after five lines, and a slot without content is not drawn, so the page never breaks */
.slots { display: grid; gap: 14px; margin-bottom: 28px; }
@media (min-width: 700px) { .slots { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.slot { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--accent); }
.slot:not(:has(.slot-img)) { grid-template-columns: 1fr; }
.slot-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slot-body p { margin: 0; }
/* 11/2 Ichiro「ほかのメニューの見出しのような感じに」: the label is drawn exactly like a menu section heading (.menu-group h3),
   and the dish under it in the same heading font, a little larger, in the ink colour */
.slot-body .slot-tag { margin: 0 0 8px; font-family: var(--head); font-weight: 700; font-size: 16px; letter-spacing: .1em; color: var(--accent); }
.slot-body h3 { margin: 0 0 6px; font-family: var(--head); font-weight: 700; font-size: 18px; line-height: 1.5; letter-spacing: .08em; }
.slot-body .slot-text { margin: 0; font-size: 14.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.slot-body .slot-price { margin-top: 6px; font-variant-numeric: tabular-nums; }
.slot-off { opacity: .45; border-style: dashed; }
.menu-group dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
/* Approximate amount in the visitor's currency, on its own line under the yen prices */
.fx { display: block; font-size: 12px; color: var(--muted); }
/* Inside a sentence the converted amount stays on the line, so the sentence is not broken up */
.lead .fx, .qa .fx { display: inline; font-size: .85em; }
.fx-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.fx-note a { color: inherit; }
/* PC: food on the left, drinks on the right, each read top to bottom (no row gaps between unequal sections) */
@media (min-width: 1000px) {
  .menu-list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .drinks-toggle { display: none; }
  .menu-list:not(.drinks-open) .menu-drinks { display: grid; }
  /* The food names sit over the food column and the drink names over the drink column */
  .menu-jump { top: 64px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; overflow: visible; }
  .menu-jump-part { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
  .menu-jump-sep { display: none; }
  /* the names take two rows (three in some languages) */
  .menu-group { scroll-margin-top: 200px; }
}
/* A menu name that has a photo: a quiet dotted underline and a small camera mark; tapping opens the photo */
.menu-photo { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: zoom-in;
  text-decoration: underline dotted; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.menu-photo .cam { display: inline-block; width: 15px; height: 12px; margin-left: 6px; vertical-align: -1px; color: var(--accent); }
.menu-photo:hover { color: var(--accent); }
/* The small floating preview beside the pointer (mouse only) */
.menu-peek { position: fixed; z-index: 50; left: 0; top: 0; width: 180px; height: 135px; object-fit: cover; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; }
.menu-peek.on { opacity: 1; }
.menu-peek:not([src]) { display: none; }

/* Spanish cooking with Japanese ingredients */
.japan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.japan figure { margin: 0; }
.japan img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.japan figcaption { display: grid; gap: 2px; padding-top: 10px; }
/* 11/2 Ichiro「レイアウトまだ悪い」「余白が多い」: one Japanese-ingredient dish closes the dishes section (m4.js japanSolo):
   a large photo first, then a small label, name and price on one line, and the short story. Side by side on wide screens */
.japan-solo { margin: 20px 0 0; }
.japan-solo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
.japan-solo figcaption { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding-top: 12px; }
.japan-solo .japan-label { grid-column: 1 / -1; font-size: 14px; letter-spacing: .1em; margin-bottom: 2px; color: var(--accent, #8b1e2b); }
.japan-solo .dish-desc { grid-column: 1 / -1; margin-top: 2px; line-height: 1.7; }
@media (min-width: 900px) {
  .japan-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px; align-items: center; }
  .japan-solo figcaption { padding-top: 0; }
}
html.motion .japan figure { opacity: 0; transform: translateY(26px); transition: opacity 1.3s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
html.motion .japan figure:nth-child(2) { transition-delay: .18s; }
html.motion .japan figure.in { opacity: 1; transform: none; }

@media (min-width: 1000px) {
  .frame-top { height: 64px; padding: 0 32px; }
  .frame-mark img { height: 42px; }
  main { padding-top: 64px; }
  .sheet { left: 50%; right: auto; width: 380px; transform: translateX(-50%); bottom: 96px; }
}

/* 11/2 Ichiro「21がよこになってる」: digits in vertical headings stand upright (縦中横). No effect in horizontal text */
/* チェッカー：見出しの字間(.3em)が数字の箱の中にも入って潰れて片寄っていた → 中は字間0、少し大きく、年との間を外で足す */
.tcy { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: 0; font-size: 1.12em; font-weight: 700; font-variant-numeric: lining-nums; margin-inline-end: .27em; }