/* ==========================================================================
   theme-modern.css
   デザインパターン: 「モダン・クール」
   配色: ダーク基調(電光ブルー×ネオンティール) / フォント: 幾何学サンセリフ
   写真量: 無機質・都会的 / レイアウト: 幾何学グリッド

   base.css・main.js はシンプルパターンと完全共通(コピーしただけで無編集)。
   このファイルの値+末尾の幾何学グリッド装飾だけで雰囲気を変えている。
   ========================================================================== */

:root {
  /* ---- ベースカラー(ダーク・クール系) ---- */
  --color-bg: #101114;           /* ページ背景:ほぼ黒に近いクールグレー */
  --color-surface: #1B1E26;      /* カード等の背景:一段明るいダークグレー */
  --color-text: #E7E9ED;         /* 本文文字色:クールホワイト */
  --color-text-sub: #8B92A0;     /* 補足文字色:クールグレー */
  --color-border: #2B2F3A;       /* 罫線・区切り線:ダークグレーの罫線 */

  /* ---- キーカラー(電光ブルー×ネオンティール) ---- */
  --color-primary: #4B7BFF;      /* ボタン・強調:電光ブルー */
  --color-accent: #00E5C7;       /* アイコン・価格・アクセント:ネオンティール */

  /* ---- ヒーロー(ファーストビュー) ---- */
  --color-hero-overlay: rgba(0, 0, 0, 0.55);
  --color-hero-text: #F2F4F8;

  /* ---- フッター ---- */
  --color-footer-bg: #05060A;
  --color-footer-text: #C7CCD6;

  /* ---- フォント ----
     幾何学サンセリフを想定。「Zen Kaku Gothic New」を指定(角ばった直線的な和文ゴシック)。
     本番導入時は google Fonts の <link> をheadに追加すること
     (このパターンではNoto Sans JPではなくZen Kaku Gothic Newに変更している)。 */
  --font-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---- 形状・余白・影 ---- */
  --radius: 4px;                  /* ほぼ直角。シャープな幾何学的輪郭 */
  --spacing-unit: 1rem;           /* 密度高めのタイトなグリッド感 */
  --shadow-style: 0 0 0 1px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.55);
  --image-filter: grayscale(15%) contrast(1.15) brightness(0.92) saturate(1.1); /* 無機質・都会的なトーン */
}

/* モダン・クールパターン固有の微調整 */
body {
  font-weight: 400;
}
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* セクションラベルに小さな四角マーカーを付けて幾何学的な印象を強める */
.section__label {
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.section__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5em;
  background: var(--color-accent);
  vertical-align: -1px;
}

/* ダーク背景では黒影が沈むため、カード類は極細ボーダー+ネオン気味の影で輪郭を出す */
.menu-card,
.reviews__card,
.reasons__item,
.shop-link-card,
.reservation-form,
.line-cta,
.reviews-full {
  border: 1px solid var(--color-border);
}
.line-cta {
  background: var(--color-surface);
}

/* ==========================================================================
   幾何学グリッド:ヒーローに極細グリッド線のテクスチャを重ねる
   ========================================================================== */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* ギャラリー・SNSフィードは隙間を詰めて、無機質な密集グリッドに見せる */
.gallery__grid,
.sns-feed__grid {
  gap: 2px;
}
.gallery__item,
.sns-feed__item,
.menu-card__photo {
  border-radius: 0; /* 写真は完全な直角トリミングで都会的な硬さを出す */
}

/* ロゴを幾何学的に大文字・字間広めで表示 */
.site-header__logo {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.15rem;
}