/* =========================================
   PLUME HOMME（メンズ）料金シミュレーター専用のスタイル：白・グレー・黒のモノトーン
   ・土台は女性用の ../../simulator/simulator.css をそのまま読み込み、ここで色と一部だけ上書きする
   ・このファイルはメンズのシミュレーターだけが読み込むので、女性用ページには影響しない
   ========================================= */
:root {
  --homme-ink: #231f20;     /* メインカラー：チャコールブラック（ロゴ画像の背景色と同じ） */
  --homme-mid: #888888;     /* 補助色：ミディアムグレー */

  --ivory: #f7f7f6;         /* メイン背景：オフホワイト */
  --ivory-dark: #eeeeec;    /* セクション背景：ライトグレー */
  --beige: #eeeeec;
  --beige-line: #d6d6d4;    /* 境界線：薄いシルバーグレー */
  --wood: #231f20;
  --wood-dark: #231f20;
  --text: #2e2a2b;
  --text-sub: #6e6e6e;
  --white: #ffffff;

  /* 選択したメニューの色（女性用のピンクの代わりにグレー） */
  --pink: #dcdcda;
  --pink-strong: #231f20;
  --pink-soft: #eeeeec;
}

/* ヘッダー：メンズLPと同じチャコールブラック（ロゴ画像の背景色と同じ）。戻るリンクは白文字・下線あり */
.sim-header {
  background: var(--homme-ink);
  border-bottom: none;
}
.sim-back { color: #fff; }

/* ヘッダーでは背景と同じ色なので、角丸なしでなじませる */
.sim-header .homme-logo { border-radius: 0; }

/* フッター：チャコールブラック＋白文字 */
.sim-footer { background: var(--homme-ink); color: #fff; }

/* 正式ロゴ（元画像そのまま）。角を丸めた小さな「エンブレム」として置く。mens/mens.css と同じ */
.homme-logo {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: 750 / 330;
  overflow: hidden;
  line-height: 0;
  border-radius: 6px;
}

.homme-logo img {
  position: absolute;
  width: 147.47%;
  max-width: none;
  height: auto;
  left: -22.67%;
  top: -72.73%;
}

/* 選んだメニュー：グレーの背景にチャコールの枠 */
.part-btn.is-selected { background: var(--pink); border-color: var(--homme-ink); color: var(--homme-ink); }
.part-btn.is-blocked { background: #f0f0ee; border-color: var(--beige-line); color: #a8a8a6; }
.block-msg { background: var(--ivory-dark); }

/* 戻るボタン（下部）：チャコールの枠線 */
.sim-bottom-back__btn { border-color: var(--homme-ink); color: var(--homme-ink); }

/* 未確定情報の目印（目立つよう、あえて別の色） */
.tbd {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f3e3c7;
  color: #6b4a1e;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6;
}

.tbd-box {
  border: 1px dashed var(--beige-line);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.8;
}

.small-note { font-size: 12px; }

/* ---------- 人体図（メンズ：mens-diagram.js） ---------- */
/* からだ：初めは色なし。選ぶとチャコールの半透明（イラストの線が透けて見える濃さ） */
.diagram--mens .zone.is-selected { fill: var(--homme-ink); fill-opacity: 0.32; }
.diagram--mens .zone.is-blocked { cursor: not-allowed; }

/* ヒゲ：からだと同じモノトーン。ふだんは薄いグレーと境界線で部位の区分を見せ、選ぶと濃いチャコール */
.diagram--mens .zone--face { fill: var(--homme-ink); fill-opacity: 0.12; stroke: var(--homme-ink); stroke-opacity: 0.45; stroke-width: 1.6; }
.diagram--mens .zone--face.is-selected { fill-opacity: 0.6; stroke-opacity: 1; stroke-width: 2.4; }
.diagram--mens .zone--face.is-blocked { fill-opacity: 0.05; stroke-dasharray: 4 3; }
/* 選んだ範囲（からだ・ヒゲ全体）はチャコールの線で囲む */
.diagram--mens .zone.is-selected { stroke: var(--homme-ink); stroke-width: 2; }

/* VIO（正面のパンツの部分）：未選択はイラストの元のグレーのまま。V・I・Oのどれかを選ぶと、
   パンツの少し内側の範囲（mens-diagram.js の briefsInner）を、上の .zone.is-selected（ヒップなどと同じチャコールの半透明＋線）で濃く塗る。
   腰・ヒップは背面の図だけにあるので、正面のVIOの範囲と同じ図に並ばない */

/* 人体図の上に開くV・I・Oの選択パネル（mens-app.js の placeVioPop がパンツの近くに置く） */
.diagram-wrap--mens { position: relative; }
.vio-pop {
  position: absolute;
  z-index: 5;   /* 人体図の上。画面下の選択中トレイよりは下 */
  width: 232px;
  max-width: calc(100% - 16px);
  padding: 10px 12px 10px;
  background: #fff;
  border: 1px solid var(--homme-ink);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(35, 31, 32, 0.22);
}
.vio-pop[hidden] { display: none; }
.vio-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vio-pop__title { font-size: 14px; font-weight: bold; color: var(--homme-ink); }
.vio-pop__close {
  width: 32px;
  height: 32px;
  margin: -6px -6px -6px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--homme-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.vio-pop__close:hover { background: #f0f0ee; }
.vio-pop__list li + li { margin-top: 6px; }
.vio-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid #c4c4c2;
  border-radius: 10px;
  background: #fff;
  color: var(--homme-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* チェック欄：未選択は空の丸、選択中は白地にチャコールの ✓ */
.vio-pop__check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #9a9a98;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
}
.vio-pop__name { flex: 1; font-size: 15px; font-weight: bold; }
.vio-pop__state { flex: none; font-size: 12px; font-weight: bold; color: var(--text-sub); }
.vio-pop__item.is-selected { background: var(--homme-ink); border-color: var(--homme-ink); color: #fff; }
.vio-pop__item.is-selected .vio-pop__check { background: #fff; border-color: #fff; color: var(--homme-ink); }
.vio-pop__item.is-selected .vio-pop__state { color: #fff; }
.vio-pop__note { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--text-sub); }

/* 部位名ボタン・線：モノトーン */
.diagram--mens .leader { stroke: #b8b8b6; }
.diagram--mens .leader-dot { fill: #9a9a98; }
.diagram--mens .leader.is-selected { stroke: var(--homme-ink); }
.diagram--mens .leader-dot.is-selected { fill: var(--homme-ink); }
.diagram--mens .part-label.is-selected rect { fill: var(--homme-ink); stroke: var(--homme-ink); }
.diagram--mens .part-label.is-selected text { fill: #fff; }
.diagram--mens .part-label.is-blocked rect { fill: #f0f0ee; stroke: #d6d6d4; }
.diagram--mens .part-label.is-blocked text { fill: #a8a8a6; }

/* 料金が未入力のあいだは、部位ボタンの料金欄を出さない */
.wax-btn__price:empty { display: none; }

/* ---------- 部位の一覧から選ぶ（女性用と同じ開閉・2列のボタン。大きさは女性用のまま、色だけモノトーン） ---------- */
.part-list summary { color: var(--homme-ink); }
.mens-menu__note,
.part-list__note { margin: 4px 0 6px; font-size: 11px; line-height: 1.6; color: var(--text-sub); }
.part-list__group + .part-list__note { margin-top: -2px; }

/* 選んだ部位：チャコールに白文字（選ぶ前との違いがはっきり分かるように） */
#mensMenu .part-btn.is-selected { background: var(--homme-ink); border-color: var(--homme-ink); color: #fff; }
#mensMenu .part-btn.is-selected .part-btn__desc { color: #e6e6e4; }
/* 選んだボタン（黒地）の料金も読めるように薄いグレーの白文字 */
#mensMenu .part-btn.is-selected .wax-btn__price { color: #e6e6e4; }
/* セットメニュー（一覧の外。一覧と同じ枠の箱に、女性用ワックスと同じ見出し・説明・2列のボタン） */
.mens-sets { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--beige); border-radius: 12px; }
.mens-sets .part-list__group { margin-top: 0; font-size: 14px; color: var(--homme-ink); }
.part-btn__desc { font-size: 10px; font-weight: normal; color: var(--text-sub); }

/* ---------- VIOの範囲の図解（一覧の中で開閉） ---------- */
.vio-guide { margin-top: 12px; }
.vio-guide > summary {
  display: inline-block;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: bold;
  color: var(--homme-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.vio-guide > summary::-webkit-details-marker { display: none; }
.vio-guide__svg { display: block; width: 100%; max-width: 320px; margin: 6px auto 0; }
.vio-guide__line { fill: none; stroke: #9a9a98; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vio-guide__line--soft { stroke-dasharray: 3 3; }
.vio-guide__area { fill: var(--homme-ink); fill-opacity: 0.18; stroke: var(--homme-ink); stroke-opacity: 0.5; }
.vio-guide__area--dark { fill-opacity: 0.45; }
.vio-guide__leader { stroke: #9a9a98; stroke-width: 1; }
.vio-guide__key { font-size: 15px; font-weight: bold; fill: var(--homme-ink); text-anchor: middle; }
.vio-guide__cap { font-size: 12px; fill: var(--text-sub); text-anchor: middle; }
.vio-guide__note { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--text-sub); text-align: center; }

/* 選んだ部位に含まれる部位（お腹上のへそ上、ヒゲ全体の首など）：選んだ部位と同じ濃さ */
.diagram--mens .zone.is-included { fill: var(--homme-ink); fill-opacity: 0.32; }
.diagram--mens .zone--face.is-included { fill-opacity: 0.6; stroke-opacity: 1; }

/* ---------- デリケートゾーン（VIO）の説明カード（一覧の外・正面のときだけ） ---------- */
.vio-card {
  margin-top: 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  background: #fff;
}
.vio-card__title { font-size: 14px; font-weight: bold; color: var(--homme-ink); }
.vio-card__lead { margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--text-sub); }
.vio-card__list { margin-top: 8px; }
.vio-card__list li + li { margin-top: 6px; }
.vio-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--beige-line);
  border-radius: 10px;
  background: #fff;
  color: var(--homme-ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vio-card__key {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ivory-dark);
  font-size: 14px;
  font-weight: bold;
}
.vio-card__text { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.vio-card__name { font-size: 14px; font-weight: bold; }
.vio-card__desc { font-size: 12px; color: var(--text-sub); }
.vio-card__state { flex: none; font-size: 12px; font-weight: bold; color: var(--text-sub); }
.vio-card__item.is-selected { background: var(--homme-ink); border-color: var(--homme-ink); color: #fff; }
.vio-card__item.is-selected .vio-card__key { background: #fff; color: var(--homme-ink); }
.vio-card__item.is-selected .vio-card__desc,
.vio-card__item.is-selected .vio-card__state { color: #e6e6e4; }
.vio-card .vio-guide { margin-top: 8px; }
/* 選択中の V・I・O の一覧（カードの上）と、解除のしかたの案内（ボタンの下） */
.vio-card__status { margin-top: 8px; font-size: 12px; font-weight: bold; color: var(--text-sub); }
.vio-card__status.is-on { color: var(--homme-ink); }
.vio-card__item.is-selected .vio-card__state { color: #fff; }
.vio-card__hint { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--text-sub); }

/* ---------- 光脱毛：回数・コース・結果（女性用の光脱毛と同じ部品に、メンズ用の小さな追加だけ） ---------- */
/* 回数・コースの「からだ・VIO」「ヒゲ」の小見出し */
.count-label { margin: 14px 0 6px; font-size: 13px; font-weight: bold; color: var(--homme-ink); }
.sim-step + .count-label,
.preset-skip + .count-label { margin-top: 10px; }
.preset-grid + .count-label { margin-top: 14px; }

/* からだ・VIOとヒゲを両方選んだときのプラン名（1行ずつ） */
.pay__area { display: block; }

/* 料金の内訳の「からだ・VIO（6回コース）」「ヒゲ（3回コース）」の見出し行 */
.rows li.rows__head { padding-top: 10px; border-bottom: 1px solid var(--beige-line); font-size: 13px; font-weight: bold; color: var(--homme-ink); }
.rows li.rows__head:first-child { padding-top: 0; }

/* ヒゲ全体コースの延長料金の案内（計算には入れない補足） */
.pay__note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--ivory-dark); font-size: 12px; line-height: 1.7; color: var(--text); text-align: left; }