/* ========================================
   物件購入可能額シミュレーション専用スタイル
   プレフィックス: pa- (purchase-amount)

   共通スタイルは以下から継承:
   - common/style.css - グローバルスタイル
   - common/common.css - 共通レイアウト
   - common/calculator-common.css - 計算機共通スタイル
     - 操作メニュー、結果表示
     - シミュレーションヘッダー
     - ダイアログ関連（保存・呼出）
     - 印刷対応

   このファイルには、購入可能額計算機でのみ使用される
   固有のスタイルのみを定義しています。
   ======================================== */

/* 注: 以下のスタイルはcalculator-common.cssで定義済み
 * - #ope (操作メニュー)
 * - #openName (現在のデータ表示)
 * - .calc (計算ボタンエリア)
 * - .calc-button (計算ボタン)
 * - .btnReCalc (再計算ボタン)
 * - ダイアログ関連スタイル
 * - 保存サブメニュー
 */

/* ========================================
   見出しスタイル
   ======================================== */

/* calculator-common.cssで定義済みのスタイル:
   .calc-section-title / .midashi - セクション見出し
   .calc-section-desc / .midashires - 見出し下の説明文
   必要に応じてこれらのクラスを使用できます */

/* 現在のデータ表示（購入可能額固有） */
.pa-current-data-display {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-left: 4px solid #cc9232;
    color: #333;
    padding: 8px 15px;
    margin: 10px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-current-data-display .data-label {
    color: #666;
    font-weight: normal;
}

.pa-current-data-display .data-title {
    color: #cc9232;
    font-weight: bold;
}

/* 呼出ダイアログのタイトル編集スタイル（calculator-common.cssに移動済み） */

/* 基本レイアウト（calculator-common.cssに移動済み） */
/* body.sim-pageクラスで共通化済み */

/* ページ固有のスタイル（sim1用） */
body#sim1 {
    /* 固有のスタイルがある場合はここに追加 */
}

/* ページ固有のラッパースタイル */
/* ヘッダーとフッターのラッパーはstyle.cssで定義 */

/* タイトルバー（calculator-common.cssに移動済み） */

/* シミュレーションヘッダーは calculator-common.css で定義済み */

/* 操作メニューはcalculator-common.cssで定義済み */

.pa-open-name {
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

/* 比較エリアの基本レイアウトは calculator-common.css から継承 */
/* .compareArea, .compare の基本スタイルは共通定義を使用 */

/* 購入可能額計算固有の調整 */
.pa-compare {
    /* 共通の .compare スタイルを継承し、固有の調整のみ追加 */
}

.pa-compare table {
    width: 100%;
}

.pa-compare caption {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
}

.pa-compare caption div {
    font-size: 18px;
    font-weight: bold;
}

/* 左側パネル（借入可能額） */
.pa-compare-area .pa-compare:first-child {
    border: 2px solid #3FA9F5;
}

.pa-compare-area .pa-compare:first-child caption {
    border-color: #3FA9F5;
}

/* 右側パネル（返済可能額） */
.pa-compare-area .pa-compare:last-child {
    border: 2px solid #C8911D;
}

.pa-compare-area .pa-compare:last-child caption {
    border-color: #C8911D;
}

/* 入力フィールド（購入可能額固有） */
.pa-compare tr {
    height: 50px;
}

.pa-compare td {
    padding: 7px 0px 7px 4px;
    vertical-align: middle;
}

.pa-compare td:first-child {
    width: 30px;
}

.pa-compare td:nth-child(2) {
    /* font-size: 16px; は calculator-common.css から継承 */
    padding-right: 10px;
}

.pa-compare td:last-child {
    position: relative;
    white-space: nowrap;
}

/* 数値入力フィールドスタイル（calculator-common.cssに移動済み） */
/* 利用可能なユーティリティクラス:
   .txtNum--small (60px) - コンパクトな入力用
   .txtNum--medium (80px) - 中サイズ入力用
   .txtNum--default (110px) - 標準サイズ入力用
*/

/* フォーカス管理（calculator-common.cssに移動済み） */

/* 入力フィールドと単位のレイアウト調整 */
/* .unit の基本スタイルは calculator-common.css から継承 */

.input-group {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* input-group内の単位は共通スタイルを微調整 */
.input-group .unit {
    margin-left: 2px;  /* input-groupのみ狭い間隔 */
    color: #333;
    white-space: nowrap;
}

/* インライン入力フィールド用のスタイル */
/* 基本スタイルはcalculator-common.cssから継承
   必要に応じてユーティリティクラス(.txtNum--small等)を使用 */
span.input-group {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

span.input-group .txtNum {
    width: 80px !important;  /* .txtNum--mediumと同じ幅 */
    padding: 1px 5px !important;
    font-size: 20px !important;
}

span.input-group .unit {
    font-size: 16px;
    line-height: 1.5;
}

/* 共通項目エリアは calculator-common.css の .common-items を使用 */

/* 計算ボタンエリアはcalculator-common.cssで定義済み */
/* btnCalcは既存コード互換性のため残す、calc-buttonと併用 */

/* 結果表示エリア
   .pa-result のbackgroundとpaddingはcalculator-common.cssの#ans .ansで定義済み
   ページ固有の調整が必要な場合のみここで定義 */
.pa-result {
    /* calculator-common.cssの#ans .ansスタイルを継承 */
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.pa-result-item {
    margin-bottom: 30px;
}

.pa-chart {
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
    display: block;
}

/* 再計算ボタンはcalculator-common.cssで定義 */

/* 結果ラベル（購入可能額固有） */
.pa-result-amount {
    font-size: 20px;
    font-weight: bold;
    color: #DC6552;
    margin: 0 5px;
}

/* ダイアログ固有スタイル（calc-dialogと併用） */

/* 保存ダイアログは calculator-common.css で定義済み */

/* ダイアログフッター関連は calculator-common.css で定義済み */

/* オーバーレイとローディング（calculator-common.cssに移動済み） */

/* 呼出ダイアログは calculator-common.css で定義済み */

/* ダイアログデータテーブル（calculator-common.cssに移動済み） */

/* ダイアログデータボディ（calculator-common.cssに移動済み） */

/* ヘルプアイコン（calculator-common.cssに移動済み） */

/* ジャンプリンク（calculator-common.cssに移動済み） */

/* エラー表示（calculator-common.cssに移動済み） */

/* レスポンシブ対応（calculator-common.cssに移動済み） */

/* 印刷対応は calculator-common.css で定義済み
   ※pa固有の要素は共通CSSで対応済み */

/* ========================================
   結果メッセージ内の入力フィールド
   ======================================== */

/* 結果メッセージ内の入力フィールド - rent-vs-buyのローン換算額と同じスタイル */
.result-text input[type="number"],
.result-text .txtNum {
    width: 100px !important;
    padding: 4px 20px 4px 8px !important;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
    font-size: 26px !important;
    line-height: 1.4;
    text-align: right;
    background: #fff;
    margin: 0 3px;
    box-sizing: border-box;
}

/* 結果メッセージ内の単位 - 標準スタイルを解除してインラインテキストとして表示 */
.result-text .unit {
    width: auto !important;
    margin-left: 0 !important;
    display: inline !important;
}