/* ======================================================
 * tab05-components-menu-list.css
 * 【部品】御品書きテーブル構造/お献立アコーディオン制御
 * 【役割】御品書き（お献立）のリスト構造および開閉システムの制御
 * ------------------------------------------------------
 * ・御品書きテーブル（.menu-details）の2段ドット線・カラム構造
 * ・PC表示時における項目名（章・内容）の開始位置の強制横揃え
 * ・コースタイトル、料理名、補足文（small）のフォント・余白調整
 * ・アコーディオン（お献立開閉）のトリガーおよびプラス・マイナスアイコン変形
 * ・PC表示における特定メニュー（.default-open）の初期開閉挙動の制御
 * ====================================================== */

/* --- 6. リスト・御品書きテーブル構造 --- */
.menu-details {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  border-top: 1px dotted #ccc;
  display: block;
  overflow: visible; 
  clear: both;
}

.menu-details li {
  padding: 8px 0; /* 👈 15px から 8px に変更 */
  border-bottom: 1px dotted #ccc;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.menu-details:last-of-type {
  margin-bottom: 20px;
}

.menu-details li span.chapter,
.menu-details li span { /* 旧仕様マークアップのフォールバック担保 */
  font-weight: bold;
  color: var(--color-primary);
  width: 85px;
  flex-shrink: 0;
  display: block;
}

.menu-details li span {
  width: 80px; /* 旧レイアウトの幅を維持 */
  display: inline-block;
}

/* ワイドバリエーション */
.menu-details--wide li {
  justify-content: center; 
}

.menu-details--wide li span.chapter {
  width: auto;                                                   
  min-width: 120px;              
  margin-right: 15px;            
  flex-shrink: 0;
  font-size: 18px;              
}

/* PC表示（769px以上）のときだけ、何が何でも開始位置をカチッと揃える */
@media screen and (min-width: 769px) {
  
  /* 💡「.menu-details--wide」を頭につけて、優先度をガツンと上げます */
  .menu-details--wide.menu-details li span.chapter { 
    width: 290px !important;         /* 👈 (税・サ込)が収まるように少し幅を広げます */
    text-align: left !important;
    display: inline-flex !important; /* 👈 block から inline-flex に変更して横並びを死守 */
    align-items: center !important;
    white-space: nowrap !important;
  }
  
  .menu-details--wide.menu-details .menu-content {
    flex: 0 1 500px !important;
    text-align: left !important;
  }
}


.menu-details--wide .menu-content {
  flex: 0 1 auto;              
  text-align: left;
}

/* コンテンツ内部テキスト構造 */
.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-course-intro .menu-content,
.menu-subtitle .menu-content {
  text-align: center;
}

.course-main-title {
  font-weight: bold;
  color: var(--color-primary);
  font-size: 17px;
  margin-bottom: 5px;
  line-height: 1.4;
}

.menu-title {
  font-weight: bold;
  margin: 0;
  font-size: 15px;
  color: var(--color-text-main);
}

.menu-content small {
  display: block;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  font-style: italic;
  margin: 2px 0;
}

.dish-name {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* --- 7. お献立アコーディオン制御 --- */
.menu-details-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: var(--color-bg-light);
  border: 1px solid var(--border-color);
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 0;
  transition: background 0.3s ease;
}

.menu-details-trigger:hover {
  background: #eee;
}

.menu-details-trigger .icon-plus {
  display: block;
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform 0.3s ease;
}

.menu-details-trigger .icon-plus::before,
.menu-details-trigger .icon-plus::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.menu-details-trigger .icon-plus::before { width: 100%; height: 2px; }
.menu-details-trigger .icon-plus::after { width: 2px; height: 100%; }

.menu-details-trigger.is-active .icon-plus::after {
  opacity: 0;
}
.menu-details-trigger.is-active .icon-plus {
  transform: rotate(180deg);
}

.menu-details-target {
  display: none;
  padding: 0 15px;
  border: 1px solid var(--border-color);
  border-top: none;
  background: #fff;
  margin-bottom: 20px;
}

.menu-example-note {
  text-align: right;
  padding: 0 15px 15px 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-alert);
}

@media screen and (min-width: 769px) {
  .default-open .menu-details-target {
    display: block; 
  }
  .default-open .menu-details-trigger {
    background: #eee;
  }
}

/* ======================================================
   御品書き章（chapter）内部の金額注釈リセット & 縦位置中央揃え
   ====================================================== */
/* ① 親要素の並びを「横並び・改行絶対禁止」に強制ロック */
.menu-details li span.chapter {
  display: inline-flex !important;
  align-items: center !important;  /* プラン名と(税・サ込)の縦中央を揃える */
  white-space: nowrap !important;  /* 👈 スマホ画面でも絶対に途中で改行させない */
}

/* ② 中の注釈の見た目を調整（line-heightのズレを排除） */
.menu-details li span.chapter .chapter-tax {
  color: var(--color-text-main) !important; /* メインの通常文字色に強制変更 */
  font-weight: normal !important;           /* 太字を解除して通常の太さに */
  font-size: 14px !important;               /* 親の大きな文字サイズから適正サイズに微調整 */
  margin-left: 6px;                         /* コース名との間に程よい隙間を確保 */
  line-height: 1 !important;                /* 行高による上下の浮き沈みをリセット */
  display: inline-block !important;
  white-space: nowrap !important;           /* 注釈単体でも絶対に文字を割らない */
}