/* 天ぷら大黒天 黒門市場 — 見た目の決まりは docs/DESIGN.md */

:root {
  --sumi: #26211d;     /* 墨: 文字・主ボタン */
  --washi: #f8f7f3;    /* 天紙: 地 */
  --goma: #b97d12;     /* 胡麻油: 強調（少量） */
  --koromo: #e9d7a4;   /* 衣: 写真の下地 */
  --ai: #1d3557;       /* 藍: のれん */
  --shu: #b3322c;      /* 朱: 落款だけ */
  --muted: #5f564d;
  --rule: #e3ddd0;

  --brush: 'Yuji Boku', serif;
  --heading: var(--brush);
  --body: 'Shippori Mincho B1', serif;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
  --noren-h: 52px;
}

/* 言語ごとの書体（DESIGN.md §3） */
:root:lang(en) { --heading: 'Kaisei Decol', 'Shippori Mincho B1', serif; }
:root:lang(zh-Hans) { --heading: 'Long Cang', 'Noto Serif SC', serif; --body: 'Noto Serif SC', 'Shippori Mincho B1', serif; }
:root:lang(zh-Hant) { --heading: 'Yuji Boku', 'Noto Serif TC', serif; --body: 'Noto Serif TC', 'Shippori Mincho B1', serif; }
:root:lang(ko) { --heading: 'East Sea Dokdo', 'Gowun Batang', serif; --body: 'Gowun Batang', 'Shippori Mincho B1', serif; word-break: keep-all; }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 画面下ののれんがキーボード操作中の要素を隠さないように */
  scroll-padding-bottom: calc(var(--noren-h) + var(--s3));
}

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.85;
  padding-bottom: calc(var(--noren-h) + var(--s2));
}

a { color: inherit; touch-action: manipulation; }

/* 本文へ飛ぶリンク（キーボードで最初に止まったときだけ見える） */
.skip {
  position: absolute;
  left: var(--s2);
  top: -100px;
  padding: var(--s2) var(--s3);
  background: var(--sumi);
  color: var(--washi);
  z-index: 10;
}
.skip:focus { top: var(--s2); }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--goma);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }

/* 下書き表示 */
.draft {
  margin: 0;
  padding: var(--s2) var(--s3);
  background: var(--goma);
  color: var(--sumi);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* 言語の切替 */
.langs {
  display: flex;
  background: var(--sumi);
}
.langs a {
  flex: 1;
  padding: 10px 2px;
  color: #ece6da;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.langs a[aria-current="page"] { background: var(--goma); color: var(--sumi); font-weight: 700; }

main { max-width: 40rem; margin: 0 auto; }

/* 最初の画面: 店頭の写真を背景に敷き、中央にロゴ（2026-11-09 本人決定） */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(82svh, 640px);
  padding: var(--s5) var(--s3);
  overflow: hidden;
  background: var(--sumi);
  color: var(--washi);
  text-align: center;
}
.hero > .ph { background: var(--koromo); }
.hero-bg, .hero > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真を墨色で沈め、ロゴと店名を読みやすくする */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(38 33 29 / 0.68); /* 写真の真っ白な部分でも白文字が 4.5:1 以上 */
}
.hero-inner { position: relative; z-index: 1; max-width: 32rem; }
.logo {
  display: block;
  width: min(64vw, 280px);
  height: auto;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgb(248 247 243 / 0.15);
}
.seal {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: 8px 6px;
  writing-mode: vertical-rl;
  background: var(--shu);
  color: #fff;
  font-family: var(--brush);
  font-size: 28px;
  line-height: 1.1;
  border-radius: 3px;
}
.hero h1 {
  margin: 0 0 var(--s2);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}
.hero .lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}

/* ボタン */
.cta {
  display: flex;
  gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s5);
}
.cta a, a.secondary {
  flex: 1;
  display: inline-block;
  padding: 12px var(--s3);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 2px;
  line-height: 1.5;
}
.cta .primary { background: var(--sumi); color: var(--washi); }
a.secondary { border: 1.5px solid var(--sumi); }
.cta .primary:hover { background: #000; }
a.secondary:hover { background: var(--sumi); color: var(--washi); }
.langs a:hover:not([aria-current]) { color: #fff; text-decoration: underline; }
.noren a:hover { background: #142640; }

/* 区画 */
.sec {
  padding: var(--s5) var(--s3);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--s3);
}
.sec h2 {
  margin: 0 0 var(--s3);
  font-family: var(--heading);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  text-wrap: balance;
}
:root:lang(en) .sec h2 { font-weight: 700; font-size: 30px; }
:root:lang(ko) .sec h2 { font-size: 42px; line-height: 1.15; } /* East Sea Dokdo は字面が小さい */
.sec p { margin: 0 0 var(--s3); max-width: 38em; }
.note { color: var(--muted); font-size: 14px; }

/* 料理と店頭の写真: 2列。えび天・店頭は横いっぱい */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
}
.gallery figure { margin: 0; }
.gallery figure.wide { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--koromo); }
.gallery figure.wide img { aspect-ratio: 4 / 3; }
.gallery figcaption { margin-top: var(--s2); font-weight: 700; font-size: 15px; line-height: 1.5; }
.gallery figcaption small, .gallery figcaption span { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.gallery figcaption span { font-family: 'Shippori Mincho B1', serif; }
/* 税込価格: 料理名のすぐ下。大・小は横に並べる */
.prices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  margin: var(--s1) 0 0;
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* よくある質問 */
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
details p { color: var(--muted); }

/* 営業時間と場所 */
table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: var(--s4); }
th, td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { width: 7.5em; padding-right: var(--s3); font-weight: 700; white-space: nowrap; }
.pending { display: inline-block; margin-left: var(--s1); padding: 0 6px; background: var(--koromo); color: var(--sumi); font-style: normal; font-size: 13px; }

.sns { display: flex; gap: var(--s3); }

/* 画面下ののれん（3枚） */
.noren {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 4px;
  padding: 4px 4px 0;
  background: var(--washi);
}
.noren a {
  flex: 1;
  min-height: var(--noren-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ai);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 3px 3px;
}

/* パソコン幅: 1列のまま、最初の画面だけ広げる */
@media (min-width: 768px) {
  main { max-width: 48rem; }
  .hero h1 { font-size: 28px; }
  .noren { max-width: 48rem; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}