@charset "UTF-8";
/*
===============================================================================
 css/sub-product-modal.css — 商品詳細ポップアップ専用CSS（design-to-theme Stage4統合）
 2026-08-03 CSS分割（docs/plans/2026-08-02-css-js-php-refactor.plan.md Step4-5）:
 css/sub.cssから商品詳細ポップアップ（template-layout/layout-menu_grid.phpが出力する
 #product-modal-overlay一式。js/product-modal.jsが開閉制御）のセレクタをそのまま移設
 （セレクタ・プロパティ値は無変更）。layout-menu_grid.phpが使われるGRAND MENUカテゴリ
 商品一覧ページ（ANGUS/CLASSIC/SIDES/DESSERT。JP/EN計8ページ）でのみ読み込む。
 言語別font-family出し分け（.product-modal-name等）はcss/sub.css側に残置
 （.category-tab等menu側セレクタと同一ルールで定義されているため）。
===============================================================================
*/

/*
---product-modal（商品詳細ポップアップ）
---------------------------------------------------------------------------*/
.product-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* [ESTIMATE: rgba(0,0,0,0.6) / デザイン画像に暗幕の指定が無いための暫定値]
  2026-08-23実測メモ: ポップアップ版の等倍画像とその非ポップアップ版を、モーダル矩形(y=500..995/x=450..950)を
  除外して差分すると JP（アンガスpopup_pc.png vs jp/angus_burgers_pc.png）平均絶対差1.50/255・EN
  （eng/pc_popup.png vs eng/CJ_HP_menu_E_v1_pc.png）1.57/255 で、白背景(255,255,255)は両者とも255のまま。
  60%黒が乗っていれば102になるはずで、支給デザインには暗幕が描かれていないように見える。SP等倍(smp_popup.png)も同様。
  2026-08-24: 上記の実測にもかかわらず、暗幕は現状維持（rgba(0,0,0,0.6)）とする。前澤さん判断。
  支給PDFの指示ではなくデザイン画像の実測のみを根拠にした変更であり、かつ「デザイン画像に暗幕が
  描かれていないだけ」の可能性が残るため。採用する場合は background-color を transparent にするだけでよい。 */
}
.product-modal-overlay.is-open {
  display: flex;
}
.product-modal {
  position: relative;
  width: 490px; /* 出典: A-6 PC幅490px */
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 42.5px 35px 30px; /* 2026-08-24訂正: 独立検証でPC上端7.5px不足を指摘され、画素値レベルで
  再実測して確認した。前回(35px 35px 23px)はモーダル外枠を「角丸を除いた縦罫の直線部」y=508..983
  ＝491×476pxと誤読していたが、縦罫x=455/945は角丸の直線区間の座標にすぎず、外枠のバウンディングボックス
  は上下の横罫（半ピクセル境界の1px黒線、JP/ENとも y=500(127,127,127)/501(128,128,128) と
  y=990(128,128,128)/991(127,127,127)＝ライン中心はy=501.0とy=991.0）で決まる。よって正しい外枠高は
  991.0-501.0=490px（幅は縦罫の外側エッジ455.0..946.0で491px、中心線同士では455.5..945.5=490px
  で高さと一致＝正方形）。旧padding-bottom23pxのままだと外枠高476pxで15px不足していた。
  上35px→42.5px（+7.5）で仮確定した後、.product-modal-nameのmargin-topを2px→1pxへ1px減算した分
  総高が1px縮んだため、padding-bottomを30px→31pxへさらに+1pxして総高491px近傍を再度合わせ込んだ
  （Playwright実測: JP 490.97px/EN 490.5px、いずれも目標491pxの±1px以内）。左右35pxはデザインと一致のため不変。
  SPは下の@media(max-width:767px)で padding:25px 25px 18px を明示上書き済みのため不変。 */
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 10px; /* 出典: A-6 角丸PC10px */
}
.product-modal-close {
  /* 2026-08-23修正: 35px/35px/55×55px → 16px/29px/61×61px。2026-08-24訂正: topをさらに16px→24pxへ。
     等倍デザイン(JP/ENとも同値、実測: x=[493,537]/y=[534,578])の×インク外接矩形はモーダル外枠上端
     （border外側エッジ y=500.5、上記.product-modalの再実測を参照）からの相対で y=33.5..77.5＝44px、
     中心は外枠上端から相対55.5。×は45°回転した2本線の中心＝close要素自身の幾何中心（transform-originが
     デフォルトの50% 50%のため）。containing blockはモーダルのpadding box（border 1px内側）なので
     top＝中心相対55.5 - border1px - 要素高半分30.5 ＝ 24.0pxが単純計算値だが、Playwright実測で
     top:24pxを適用すると回転線(.product-modal-close-line)の外接中心が相対56.8になり0.8px超過して
     ずれた（許容±1pxに収まるがギリギリ）。原因は .product-modal-close-line が top:50%（=ボタン高の
     半分30.5px）に配置後、自身の高さ2.6pxぶん下に伸びる素の矩形を基準にtransform-origin(既定50% 50%)が
     決まるため、回転軸がボタン幾何中心(30.5)より1.3px下(31.8)にずれる構造的クセがあるため。
     これを打ち消すため top を 24.0-1.3＝22.7px に補正し、Playwright実測で中心相対55.4〜55.6・
     ×インク上端相対33.0前後（デザイン33.5と±1px）になることを確認して確定。
     left＝29pxは外枠左端からのxインセット38px相当（xInk中心の実測60.0とほぼ一致）で変更なし。
     線の太さ(.product-modal-close-line{height:2.6px})はデザインの45°断面幅4pxと整合するため据え置く。
     SPは下の@media(max-width:767px)で 18px/18px/38×38px を明示上書き済みのため不変。 */
  position: absolute;
  top: 22.7px;
  left: 29px;
  width: 61px;
  height: 61px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.product-modal-close-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.6px;
  background-color: var(--color-black);
}
.product-modal-close-line:nth-child(1) {
  transform: rotate(45deg);
}
.product-modal-close-line:nth-child(2) {
  transform: rotate(-45deg);
}
.product-modal-photo {
  display: block;
  width: 260px; /* 出典: A-6 商品写真 PC 260×193px */
  height: 193px;
  margin: 0 auto;
  object-fit: contain;
}
.product-modal-name {
  margin-top: 2px; /* 2026-08-23修正: 15px→2px（支給PDF「popup 写真と文字の間隔 空きすぎ」対応のPC版確定値）。
  2026-08-24再訂正: 独立検証がpadding-bottomを31px→30pxへ戻すのに合わせ、margin-topも2px（当初確定値）へ戻した。
  .product-modalのpadding修正（35px→42.5px, 31px→30px）後の実測でJP商品名インク上端が相対241.5px前後（±0.5px）に
  収まることをPlaywrightで確認済み（3回再現・安定）。
  SPは下の@media(max-width:767px)で margin-top:8px を明示上書き済みのため不変。 */
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.05rem;
  color: var(--color-black);
  text-align: center;
}
.product-modal-price {
  margin-top: 3px; /* 2026-08-23修正: 10px→3px。デザインの価格インク帯は相対280..292。下のline-height 1.28
  （＝20.48px）時のインク上端オフセットは4.96pxなので行ボックス上端の目標は相対275.0、
  商品名ボックス下端(相対231+41)との差が3px。SPは@media(max-width:767px)の margin-top:0 が上書きするため不変。 */
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.28; /* 2026-08-23追記: 宣言が無くbody継承の1.8（＝28.8px）で行送りが過大だった。
  商品名と同じ行送り 16px×1.28＝20.48px を明示して親のfont-sizeから独立させる（R3に従い単位なし）。 */
  color: var(--color-black);
  text-align: center;
}
.product-modal-desc {
  margin-top: 20px; /* 2026-08-23修正: 25px→20px。デザインの説明文1行目インク帯は相対321(JP)/322(EN)。
  line-height 25px時のインク上端オフセットは実測5.6pxなので行ボックス上端の目標は相対315.4、
  価格ボックス下端(相対275+20.48=295.5)との差が19.9≒20px。SPは@media(max-width:767px)の12pxが上書き。 */
  font-weight: 400;
  font-size: 1.4rem; /* 出典: 3-2 PC14px */
  line-height: 2.5rem;
  color: var(--color-black);
  text-align: left;
}
.product-modal-ingredients {
  margin-top: 12px; /* 2026-08-23修正: 25px→12px。デザインの原材料1行目インク帯は相対408（JP/EN同値）。
  行ボックス上端の目標は相対402.4、説明文ボックス下端(相対315.4+75)との差が12px。
  SPは@media(max-width:767px)の11pxが上書きするため不変。 */
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.5rem;
  color: var(--color-red); /* 原材料リストの文字色を赤(#C8102E)に */
  text-align: left;
}
/* ★このブロックは必ず @media (min-width: 768px) の中に置くこと: html[lang="en"] を前置すると詳細度が
   (0,2,1)以上になり、SP用の @media (max-width: 767px) 内の同名セレクタ(0,1,0〜0,2,0)を無言で潰して
   SPレイアウトが崩れる（実測でEN SPのページ全高が1509→1582pxに変化した）。 */
@media (min-width: 768px) {
  /* 2026-08-23追記: モーダル内テキストのPC寸法はJP/ENで異なるため言語スコープで分岐する（上の宣言はJP基準）。
     デザインのバンド位置（モーダル外枠上端からの相対）はJP/ENでほぼ同値だが、文字の実サイズが違う:
     商品名インク幅 JP 142/129px・EN 145/133px、価格「¥890」は両言語41px。ENは幅一致法で18px
     （ライブ16px時131px → 16×145/131＝17.7px）、JPは16px（html[lang="ja"] body の
     font-feature-settings:"palt" 1 で和文の字送りが詰まっているだけで字面は16pxが正）。
     ※詳細度は (0,1,1)+(0,1,0)=0,2,1 でベース(0,1,0)に勝つ。 */
  html[lang="en"] .product-modal-name {
    margin-top: 2px; /* 2026-08-24訂正: 3px→2px。デザインの商品名1行目インク帯 相対242.5(再実測値)。
    .product-modalのpadding修正（35px→42.5px）後の実測でENもJPと同様+1.5px下ぶれしていたため1px減算し、
    Playwright再実測で±1px以内に収まることを確認済み。 */
    font-size: 18px; /* 2026-08-23修正: 1.6rem(16px)→18px（R2でrem→px置換） */
    line-height: 1.1667; /* 2026-08-23修正: 2.05rem(20.5px)→1.1667(=21.0px)。デザインの行送りは 相対235→256＝21px。R3に従い単位なし */
  }
  html[lang="en"] .product-modal-price {
    margin-top: 3px; /* デザインの価格インク帯 相対280。商品名ボックス下端(232+42)＋3pxで行ボックス277 */
    font-size: 18px; /* 「¥890」のインク幅はデザイン41pxに対しライブ16px時36px → 16×41/36＝18.2px */
    line-height: 1.1667; /* 18px×1.1667＝21.0px。R3に従い単位なし */
  }
  html[lang="en"] .product-modal-desc {
    margin-top: 18px; /* デザインの説明文1行目インク帯 相対322。価格ボックス下端(277+21)＋18pxで行ボックス316→インク321.6 */
  }
  html[lang="en"] .product-modal-ingredients {
    margin-top: 11px; /* デザインの原材料1行目インク帯 相対408。説明文ボックス下端(316+75)＋11pxで行ボックス402→インク407.6 */
  }
}
@media (max-width: 767px) {
  .product-modal {
    width: 320px; /* 出典: A-6 SP幅320px */
    padding: 25px 25px 18px; /* 2026-08-23修正: 下のみ25px→18px。等倍デザイン(smp_popup.png)は
    外枠 y=319..700 に対し原材料リスト最終行のインク下端が677 → 下余白23.5px（ライブは30.3px）。
    原材料の行ボックス下端〜インク下端が5.34pxあるため 23.5-5.34 ≒ 18px。上下左右25pxのうち
    上・左右はデザインと一致済み（説明文インク左端52 vs 外枠27+border1+padding25=53）。 */
    border-radius: 5px;
  }
  .product-modal-close {
    /* 2026-08-23修正: 27×28px/25px→38×38px/18px。×は45°回転の2本線なのでインク外接矩形=(W+線幅)×cos45°。
       デザイン(smp_popup.png)の×インクは x=52..79 / y=344..372＝28×28px、線の断面幅4px（真の太さ約1.9px）
       → W=28/0.7071-1.9 ≒ 38px。中心(65.5, 358)はモーダル内側左上(x=28.5, y=320.5)から18px。
       PC(35px/55px)はSPスコープ外のため据え置く。 */
    top: 18px;
    left: 18px;
    width: 38px;
    height: 38px;
  }
  .product-modal-photo {
    width: 170px; /* 出典: A-6 商品写真 SP 170×122.5px */
    height: 122.5px;
  }
  .product-modal-name {
    margin-top: 8px; /* 2026-08-23修正: 15px→8px（PDF「popup 写真と文字の間隔 空きすぎ」対応）。
    等倍デザイン(smp_popup.png)の写真インク下端466.37→商品名1行目インク上端485.00＝18.63pxに対し
    ライブは318.30→344.00＝25.70px（−7.07px）。写真は同一アセットのスケール違いで
    インク縦横比がデザイン1.650・ライブ1.638と一致するため差分法が使える。 */
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
  .product-modal-price {
    margin-top: 0; /* 2026-08-23修正: 8px→0。デザインでは価格は商品名と同じ18px送りの「3行目」として
    連続している（インク上端 商品名L1 484 / L2 502 / 価格 521.85）。下のline-height 18.06pxとセットで
    名前L2インク下端→価格インク上端が約8px（デザイン8.75px）になる。 */
    font-size: 1.4rem;
    line-height: 1.29; /* 2026-08-23追記: 宣言が無くbody継承の1.8（＝25.2px）だったため行送りが過大だった。
    デザインの価格行は商品名と同じ18px送り → 14px×1.29＝18.06px。R3に従い単位なしで記述し、
    親のfont-size変更から独立させる。 */
  }
  .product-modal-desc {
    margin-top: 12px; /* 2026-08-23修正: 20px→12px。デザインの価格インク下端531.84→説明文1行目
    インク上端552.84＝21.00pxに対しライブ33.10px。上記の価格line-height変更で価格インク下端〜
    価格ボックス下端が8.60→4.24pxに縮むため 21.00=4.24+m+4.51 → m≒12px（価格の行高を変えない場合は8px）。 */
    font-size: 1.3rem;
    line-height: 2rem;
  }
  .product-modal-ingredients {
    margin-top: 11px; /* 2026-08-23修正: 20px→11px。デザインの説明文最終行インク下端604.13→
    原材料1行目インク上端624.72＝20.59pxに対しライブ29.74px（内訳 5.21+20+4.53）。
    20.59-5.21-4.53 ≒ 11px。行送り20pxはデザインと一致済みのため据え置く。 */
    font-size: 1.3rem;
    line-height: 2rem;
  }
}

/* モーダル表示中は背景スクロールを止める */
.is-modal-open {
  overflow: hidden;
}