/* 配色: 黒 #000000 / 黄 #fbd802 / 薄いグレー #ebecf0 / グレー #767676 #b2b2b2 */
.ps-sim { max-width: 560px; margin: 24px auto; padding: 28px 24px; border-radius: 16px; background: #fbd802; color: #000; font-family: inherit; line-height: 1.6; box-sizing: border-box; }
.ps-sim * { box-sizing: border-box; }
.ps-sim h3 { display: inline-block; margin: 0 0 20px; padding: 6px 16px; background: #000; color: #fff; font-size: 1.15em; }
.ps-sim .ps-field { margin-bottom: 12px; padding: 16px; border-radius: 12px; background: #fff; }
.ps-sim .ps-label { display: block; font-weight: bold; margin-bottom: 8px; }
.ps-sim input[type="number"] { width: 140px; padding: 8px 10px; font-size: 1em; border: 2px solid #000; border-radius: 6px; background: #fff; color: #000; }
.ps-sim input[type="number"]:focus { outline: 3px solid #fbd802; outline-offset: 1px; }
.ps-sim .ps-unit { margin-left: 6px; }
.ps-sim .ps-options label { display: block; margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; background: #ebecf0; cursor: pointer; }
.ps-sim .ps-options label:last-child { margin-bottom: 0; }
.ps-sim .ps-options input { margin-right: 8px; accent-color: #000; }
.ps-sim .ps-options input:disabled + * , .ps-sim .ps-options label:has(input:disabled) { color: #767676; cursor: default; }
.ps-sim .ps-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.ps-sim .ps-level-value { font-weight: bold; }
.ps-sim .ps-level-value span { font-size: 1.5em; margin-right: 2px; }

/* シークバー（つまみの幅 22px を前提に目盛りの位置をそろえている） */
.ps-sim input[type="range"] { --ps-fill: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 8px 0 4px; background: transparent; cursor: pointer; }
.ps-sim input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #000 var(--ps-fill), #b2b2b2 var(--ps-fill)); }
.ps-sim input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 3px solid #000; border-radius: 50%; background: #fff; }
.ps-sim input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #b2b2b2; }
.ps-sim input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: #000; }
.ps-sim input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #000; border-radius: 50%; background: #fff; }
.ps-sim input[type="range"]:focus-visible { outline: 3px solid #fbd802; outline-offset: 2px; }
.ps-sim .ps-scale { display: flex; justify-content: space-between; padding: 0 11px; font-size: 0.8em; color: #767676; }
.ps-sim .ps-scale span { width: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.ps-sim .ps-scale b { color: #000; }

/* 文字数のボタン */
.ps-sim .ps-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ps-sim .ps-presets button { padding: 8px 4px; font: inherit; font-size: 0.9em; font-weight: bold; border: 2px solid #000; border-radius: 8px; background: #fff; color: #000; cursor: pointer; }
.ps-sim .ps-presets button.is-active { background: #000; color: #fbd802; }

/* －／＋ボタン */
.ps-sim .ps-stepper { display: flex; align-items: center; gap: 6px; }
.ps-sim .ps-stepper input[type="number"] { width: 80px; text-align: center; }
.ps-sim .ps-stepper button { width: 44px; height: 44px; padding: 0; font: inherit; font-size: 1.2em; font-weight: bold; border: 2px solid #000; border-radius: 8px; background: #fbd802; color: #000; cursor: pointer; }
.ps-sim .ps-presets button:focus-visible, .ps-sim .ps-stepper button:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

.ps-sim .ps-result { margin-top: 20px; padding: 20px; border-radius: 12px; background: #000; color: #fff; }
.ps-sim .ps-row { display: flex; justify-content: space-between; align-items: baseline; }
.ps-sim .ps-row + .ps-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid #767676; }
.ps-sim .ps-total { font-size: 1.6em; font-weight: bold; color: #fbd802; }
.ps-sim .ps-count-note { margin-left: 6px; font-size: 0.8em; color: #b2b2b2; }

/* 内訳 */
.ps-sim .ps-detail { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #767676; }
.ps-sim .ps-detail summary { cursor: pointer; font-size: 0.9em; font-weight: bold; color: #fbd802; }
.ps-sim .ps-breakdown { margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9em; color: #ebecf0; }
.ps-sim .ps-breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ps-sim .ps-breakdown li span:last-child { white-space: nowrap; }

/* スマホ: 合計金額を画面下に固定（シミュレーターが画面内にある間だけ） */
@media (max-width: 600px) {
  .ps-sim { padding: 20px 16px; }
  .ps-sim .ps-presets { gap: 4px; }
  .ps-sim .ps-presets button { padding: 8px 2px; font-size: 0.8em; white-space: nowrap; }
  .ps-sim .ps-result { position: sticky; bottom: 8px; z-index: 10; padding: 14px 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
  .ps-sim .ps-total { font-size: 1.4em; }
}