/* ==========================================================================
   かもす「本日の日本酒」Web 版（camos.sakeee.com）のスタイル。generate-web.mjs が web-out/ に写す。
   sakeee（~/opt/sakeee/src/main/resources/site-assets/site.css）の設計の値・暖簾・フッター・罫の部品を写した最小限。
   配色は染付（藍・呉須・白磁）。フォントは端末の明朝とゴシックだけ（Web フォント・JS は使わない）。
   sakeee 側の見た目を変えたら、:root の値をここにも写す。
   ========================================================================== */

/* ---------- 設計の値（sakeee と同じ） ---------- */
:root {
  --c-ai: #1b2b4b;               /* 藍: 暖簾・フッター */
  --c-ai-shadow: rgba(6, 12, 26, .55);
  --c-undyed: #eef0ea;           /* 染め抜きの白: 藍の上の文字 */
  --c-undyed-muted: #b3bdd0;
  --c-gosu: #2a4c9f;             /* 呉須: リンク・番号 */
  --c-gosu-soft: rgba(42, 76, 159, .18);
  --c-gosu-faint: rgba(42, 76, 159, .06);
  --c-paper: #f4f5f2;            /* 地 */
  --c-porcelain: #ffffff;        /* 器の白 */
  --c-ink: #23262c;              /* 墨: 本文 */
  --c-ink-muted: #5b616c;
  --c-line: #d6dae0;             /* 罫 */

  /* 味わいタグ（フルーティー・甘口・甘酸は塗りで目立たせ、ほかは線だけで控えめに） */
  --c-beni: #a8344b;      --c-beni-bg: #f7e4e7;      /* 紅: フルーティー */
  --c-kaki: #8f5a12;      --c-kaki-bg: #f5ebd7;      /* 黄土: 甘口 */
  --c-nadeshiko: #973a68; --c-nadeshiko-bg: #f4e3ec; /* 撫子: 甘酸 */
  --c-moegi: #3d6b4a;                                /* 萌黄: 低アル */
  --c-nezumi: #4f5965;                               /* 鼠: 辛口 */

  --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", sans-serif;

  --fs-xs: .75rem;
  --fs-s: .875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  --gutter: 20px;
  --container: 880px;
  --radius: 3px;
}

@media (min-width: 960px) {
  :root { --gutter: 40px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-gothic);
  font-size: var(--fs-m);
  line-height: 1.8;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  text-wrap: pretty;
}

p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { max-width: 100%; }

a {
  color: var(--c-gosu);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--c-gosu);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--c-porcelain);
  color: var(--c-gosu);
}
.skip-link:focus { top: 8px; }

/* ---------- 暖簾（sakeee のトップと同じ布。切れ目を2本入れて3枚に見せる） ---------- */
.noren {
  --noren-split: 70%;
  position: relative;
  overflow: hidden;
  color: var(--c-undyed);
  background-color: var(--c-ai);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px);
}
.noren::before,
.noren::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: var(--noren-split);
  bottom: 0;
  width: 6px;
  background: var(--c-paper);
  box-shadow: 0 0 10px 2px var(--c-ai-shadow);
}
.noren::before { left: calc(100% / 3 - 3px); }
.noren::after { left: calc(100% / 3 * 2 - 3px); }

.noren-inner {
  position: relative;
  z-index: 1;
  min-height: 300px;
  padding: 48px var(--gutter) 0;
  text-align: center;
}
.noren-crest {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
}
/* 紋は利き猪口の蛇の目: 外の細い輪（器の縁）と内の太い輪 */
.crest-rim,
.crest-ring {
  fill: none;
  stroke: currentColor;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50px 50px;
}
.crest-rim {
  stroke-width: 2.5;
  stroke-dasharray: 290;
  animation: crest-draw-rim 1.4s cubic-bezier(.65, 0, .35, 1) .15s both;
}
.crest-ring {
  stroke-width: 13;
  stroke-dasharray: 177;
  animation: crest-draw-ring 1.4s cubic-bezier(.65, 0, .35, 1) .45s both;
}
.menu-title { font-weight: 400; letter-spacing: 0; }
.menu-shop {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .12em;
  text-indent: .12em;
}
.menu-kind {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-s);
  letter-spacing: .32em;
  text-indent: .32em;
  line-height: 1.6;
}

@media (min-width: 960px) {
  .noren-inner { min-height: 380px; padding-top: 72px; }
  .noren-crest { width: 88px; height: 88px; margin-bottom: 24px; }
  .menu-kind { font-size: var(--fs-l); margin-top: 18px; }
}

/* ---------- 本日の日本酒 ---------- */
.menu-head {
  padding-top: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-ink);
}
.menu-updated {
  font-size: var(--fs-s);
  color: var(--c-ink-muted);
  letter-spacing: .04em;
}
.menu-lead {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-size: var(--fs-l);
  line-height: 1.9;
  letter-spacing: .04em;
}

.menu-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 14px;
  padding: 26px 0 24px;
  border-bottom: 1px solid var(--c-line);
}
.menu-no {
  font-family: var(--font-mincho);
  font-size: var(--fs-4xl);
  line-height: 1;
  text-align: center;
  color: var(--c-gosu);
}
.menu-body { min-width: 0; }
.menu-name {
  font-size: var(--fs-xl);
  line-height: 1.45;
  letter-spacing: .06em;
}
.menu-origin {
  margin-top: 4px;
  font-size: var(--fs-s);
  color: var(--c-ink-muted);
}
.menu-origin .sep { margin: 0 .4em; }

.flavor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.flavor {
  display: inline-block;
  padding: 2px 11px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-porcelain);
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .04em;
}
.flavor-fruity { border-color: var(--c-beni-bg); background: var(--c-beni-bg); color: var(--c-beni); }
.flavor-sweet  { border-color: var(--c-kaki-bg); background: var(--c-kaki-bg); color: var(--c-kaki); }
.flavor-amazu  { border-color: var(--c-nadeshiko-bg); background: var(--c-nadeshiko-bg); color: var(--c-nadeshiko); }
.flavor-spark  { border-color: var(--c-gosu-soft); background: var(--c-gosu-faint); color: var(--c-gosu); }
.flavor-low    { border-color: var(--c-moegi); color: var(--c-moegi); }
.flavor-dry    { border-color: var(--c-nezumi); color: var(--c-nezumi); }

.menu-desc {
  margin-top: 10px;
  line-height: 1.8;
}

/* 価格: 器の白の上に3つ並べる（グラス・1合・2合） */
.menu-prices {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  background: var(--c-porcelain);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.menu-prices div {
  padding: 8px 6px 7px;
  text-align: center;
}
.menu-prices div + div { border-left: 1px solid var(--c-line); }
.menu-prices dt {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  letter-spacing: .04em;
}
.menu-prices dd {
  font-family: var(--font-mincho);
  font-size: var(--fs-l);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.menu-more {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-s);
}

@media (min-width: 960px) {
  .menu-head { padding-top: 56px; }
  .menu-lead { font-size: var(--fs-xl); }
  .menu-item {
    grid-template-columns: 4rem minmax(0, 1fr) 19rem;
    column-gap: 24px;
    align-items: start;
    padding: 30px 0 28px;
  }
  .menu-no { font-size: 3.75rem; }
  .menu-name { font-size: var(--fs-2xl); }
  .menu-prices {
    grid-column: 3;
    grid-row: 1;
    margin-top: 6px;
  }
}

.menu-notes {
  margin-top: 32px;
  font-size: var(--fs-s);
  color: var(--c-ink-muted);
}
.note-list li { padding-left: 1em; text-indent: -1em; }
.note-list li::before { content: "・"; }
.note-list li + li { margin-top: 4px; }

/* ---------- 404 ---------- */
.page-head { padding-top: 48px; }
.page-title { font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
.page-body { margin-top: 16px; }

/* ---------- フッター（sakeee と同じ藍） ---------- */
.site-footer {
  margin-top: 72px;
  background: var(--c-ai);
  color: var(--c-undyed);
}
.site-footer :focus-visible { outline-color: var(--c-undyed); }
.site-footer a { color: var(--c-undyed); }
.footer-inner {
  display: grid;
  gap: 18px;
  padding-block: 40px 36px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mincho);
  font-size: var(--fs-xl);
  letter-spacing: .08em;
}
.footer-brand svg { width: 22px; height: 22px; flex: none; }
.footer-link { font-size: var(--fs-s); }
.footer-copy { font-size: var(--fs-xs); color: var(--c-undyed-muted); }

/* ---------- 動き ---------- */
@keyframes crest-draw-rim {
  from { stroke-dashoffset: 290; }
  to { stroke-dashoffset: 0; }
}
@keyframes crest-draw-ring {
  from { stroke-dashoffset: 177; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crest-rim,
  .crest-ring { animation: none; }
}