/* ======================
   MENU アーカイブ（PRICE LIST）
   ====================== */

/* ページ全体 */
.page-menu {
  min-height: 100vh;
  padding: 50px 0 120px;
  background: #fff;
  color: #000;
}

/* 「PRICE LIST」見出し */
.page-menu__title {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin: 0 0 24px;
}

/* 上の注意書き 3 行 */
.menu-notice {
  margin: 0 0 24px;
  font-size: 12px;
  line-height: 1.9;
}

.menu-notice dd {
  margin: 0;
}

/* PRICE LIST 全体の箱（中央寄せ） */
.price-list {
  max-width: 720px;     /* 全体の横幅。広さは好みで調整OK */
  margin: 0 auto;
}

/* 区切り線（点線） */
.menu-divider {
  width: 920px;          /* 線の長さ。ここも好みで調整OK */
  border-bottom: 1px dotted #000;
  margin: 28px 0 32px;
}

/* ===== セクション（カテゴリーブロック＋メニューブロック） ===== */

/* 1セクション（BASE / COLOR ...）を2カラムに */
.menu-section {
  display: grid;
  grid-template-columns: 140px 360px; /* 左:カテゴリ 右:メニューエリア */
  column-gap: 60px;
  margin-bottom: 40px;
}

/* 左カラム：カテゴリ名 */
.menu-section__head {
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* カテゴリ名（BASE / COLOR …）は左カラム */
.menu-section__title {
  grid-column: 1;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* メニューリストは右カラム */
.menu-list {
  margin: 0;
  padding: 0;
}

/* メニュー1行：タイトル列と価格列を固定の位置にする */
.menu-item {
  display: grid;
  grid-template-columns: 220px 80px; /* ←ここで「タイトル」「価格」の列幅を決める */
  column-gap: 40px;                  /* タイトルと価格のあいだの空き */
  font-size: 12px;
  line-height: 1.8;
}

/* タイトル側（CUT / PERM など） */
.menu-item__title {
  margin: 0;
}

/* 価格側（¥ 5,000 など） */
.menu-item__price {
  margin: 0;
  text-align: left;   /* 「¥」を左詰めに */
  white-space: nowrap;
}

/* ￥マークを左に固定で付ける（position は使わない） */
.menu-item__price::before {
  content: "￥";
  margin-right: 4px;         /* ￥と数字の間隔。好みで調整 */
}

/* menu-item 内の dl を2列にする（確実に横並び） */
body.post-type-archive-menu .menu-item > dl {
  display: grid;
  grid-template-columns: 220px 80px;
  column-gap: 40px;
  align-items: baseline;
  margin: 0;
}

/* dt/dd の余計な余白を殺す */
body.post-type-archive-menu .menu-item > dl > dt,
body.post-type-archive-menu .menu-item > dl > dd {
  margin: 0;
}

/* ======================
   MENU：ダークテーマ調整
   ====================== */
body.theme-dark .page-menu {
  background: #1E2022;   /* ダーク背景 */
  color: #F3F3F3;
}

/* 区切り線を少しだけ明るめグレーに */
body.theme-dark .menu-divider {
  border-bottom-color: #444444;
}

/* 価格の￥マークも暗い背景で見やすく */
body.theme-dark .menu-item__price::before {
  color: #F3F3F3;
}

/* ======================
   MENU レスポンシブ（スマホ）
   ====================== */

@media (max-width: 768px) {

  .page-menu {
    padding-top: 100px;
  }

  /* page-menu__inner の横幅・パディングは style.css 側で共通管理 */

  .price-list {
    max-width: 100%;
  }

  /* スマホではカテゴリとメニューを縦並びに戻す */
  .menu-section {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .menu-item {
    max-width: 100%;
  }
}