/* モーダル背景オーバーレイはPHP内styleで指定済み */

/* モーダル本体 */
#conversion-modal-v2 {
    /* PHP内styleで基本設定済み */
  }
  
  /* モーダル本体 */
  #conversion-modal-v2 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    z-index: 1000;
    max-width: 800px; /* 幅を広げる */
    width: 80%;       /* モーダル全体の横幅を調整 */
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    border-radius: 8px;
  }
  
  /* コンテナ：左右パネルを横並びに */
  .conversion-container-v2 {
    display: flex;
    flex-direction: row;
    gap: 20px;       /* 左右の余白 */
    flex-wrap: nowrap; /* 折り返ししない */
  }
  
  /* 左パネル：入力・設定 */
  .conversion-left-v2 {
    flex: 1 1 50%;
    min-width: 260px;
    box-sizing: border-box;
    padding: 10px;
  }
  
  /* 右パネル：ボタン・結果 */
  .conversion-right-v2 {
    flex: 1 1 50%;
    min-width: 260px;
    box-sizing: border-box;
    padding: 10px;
  }

  /* 履歴エリアのスタイル（PHP側で直接指定済みですが、ここで上書き可能） */
  #conversion-history-v2 {
      margin-top: 15px;
      border: 1px solid #aaa;
      padding: 10px;
      max-height: 150px;
      overflow-y: auto;
      font-size: 0.9em;
      background-color: #f9f9f9;
  }  
  
  /* スマホ対応：画面幅768px以下は縦並び */
  @media (max-width: 768px) {
    .conversion-container-v2 {
      flex-direction: column;
    }
  }  
  
  #conversion-form-v2 label {
    display: block;
    margin-top: 10px;
  }
  
  #conversion-form-v2 input,
  #conversion-form-v2 select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  #conversion-form-v2 button {
    margin-top: 10px;
    margin-right: 5px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    background-color: #0056b3;
    color: #fff;
    cursor: pointer;
  }
  #conversion-form-v2 button:hover {
    background-color: #004494;
  }