/* ======================================================
 * tab04-components-price.css
 * 【部品】価格表示システム（flex-group / v-group）
 * 【役割】価格・金額表示システム（単一価格/多連価格/縦並び価格）の制御
 * ------------------------------------------------------
 * ・価格表示コンテナの基本配置（中央揃え・アクセントカラー・文字シャドウ）
 * ・横並び多連価格（.flex-group）におけるPC用自動区切り縦線の制御
 * ・縦一列並び専用（.v-group）および会席プラン用のゴールド区切り点線の生成
 * ・ラベル、金額数値、単位、税込注釈のフォントサイズ比率（em）の個別最適化
 * ・レスポンシブ（PC2カラム時等）における文字縮小対策と上下マージン微調整
 * ====================================================== */

/* --- 5. 金額・価格表示システム (PCデフォルト) --- */
.menu-price-container {
  display: flex;
  align-items: baseline; 
  justify-content: center !important; 
  width: 100%;
  color: var(--color-accent);
  text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.05);
}

/* 旧food-section用価格シンプルスタイル定義の安全確保 */
.menu-item-price {
  font-size: 22px;
  font-family: "Georgia", serif;
  color: var(--color-accent);
  font-weight: bold;
}

.menu-item-price span {
  font-size: 12px;
  color: #888;
}

.menu-price-container.flex-group {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 12px 24px !important; 
  overflow: visible !important;
}

.flex-group .price-pair {
  font-size: clamp(24px, 3.2vw, 34px) !important; 
}

.price-pair {
  display: inline-flex !important;
  align-items: baseline !important;
  white-space: nowrap !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  position: relative;
}

/* PC表示用：多連価格の自動区切り縦線 */
.price-pair:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 0.75em;
  border-right: 1px solid rgba(197, 160, 89, 0.4);
  display: inline-block;
  user-select: none;
}

.price-slash {
  display: none !important;
}

/* 価格パーツ構成フォント */
.menu-price-label {
  font-size: 16px !important;
  margin-right: 10px;
  color: var(--color-text-sub);
  font-weight: 600;
}

.price-pair .menu-price-label {
  font-size: 0.5em !important;
}

.menu-price-value {
  font-family: 'Century Gothic', 'Futura', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 34px !important; 
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em; 
  font-feature-settings: "palt"; 
}

/* 価格(数字部分) - 拡大倍率の適用 */
.price-pair .menu-price-value {
  font-size: 1.3em !important;
}

.menu-price-unit {
  font-size: 18px !important;
  margin-left: 2px;
  font-weight: 700;
}

.price-pair .menu-price-unit {
  font-size: 0.55em !important;
}

.menu-price-tax {
  font-size: 12px !important;
  color: #888;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.price-pair .menu-price-tax {
  font-size: 0.35em !important;
}

/* ======================================================
   追加：縦一列並び専用システム（.v-group）PCデフォルト
   ====================================================== */
.menu-price-container.v-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important; /* 線を引くため隙間は0、paddingで余白を作ります */
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* 縦並びの時はPC用の「自動区切り縦線」を完全に無効化 */
.v-group .price-pair::after,
.v-group .price-pair:not(:last-child)::after {
  display: none !important;
  content: "" !important;
}

/* 縦一列並び用の価格ペアスタイル修正 */
.v-group .price-pair {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* 💡【文字縮小対策】縮小を防ぐために、v-group内でも基準サイズをしっかり定義 */
  font-size: 28px !important; /* ← ここで全体の大きさをガツンと保証します */
  
  /* 💡【ゴールドの横線】他と同じ dotted（点線）で綺麗に下線を引く */
  border-bottom: 1px dotted var(--color-accent) !important;
  padding: 8px 0 !important; /* 上下に程よい余白 */
}

/* 最後の価格だけは、下に横線がいらないので消去 */
.v-group .price-pair:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ======================================================
   追加：会席・プラン（2カラム時）専用の価格縦並び＆ゴールド横線
   ====================================================== */
@media (min-width: 769px) { /* ← PC（2カラム）の画面幅のときだけ適用 */

  /* 会席グリッドの中にある flex-group を一時的に縦並びに変形 */
  .menu-grid--kaiseki .menu-price-container.flex-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* 縦並びになるので、PC用のデフォルト縦区切り線を非表示に */
  .menu-grid--kaiseki .flex-group .price-pair::after {
    display: none !important;
  }

  /* 各価格に縮小防止サイズとゴールドの横線を付与 */
  .menu-grid--kaiseki .flex-group .price-pair {
    width: 100% !important;
    justify-content: center !important;
    font-size: 28px !important; /* 文字が小さくなるのを徹底ガード */
    border-bottom: 1px dotted var(--color-accent) !important; /* ゴールド点線 */
    padding: 8px 0 !important;
  }

  /* 最後の価格（夜）の下線だけは消去 */
  .menu-grid--kaiseki .flex-group .price-pair:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* ======================================================
   追加：メニュータイトル（牛ステーキ御膳など）の下マージン調整
   ====================================================== */
.menu-item-header .menu-item-title {
  margin-bottom: -10px !important; /* 金額とのすき間（好みに応じて数値を変更してください） */
}