/**
 * マイホームの資産価値シミュレーター 固有スタイル
 * プレフィックス: aod- (asset-or-debt)
 *
 * 共通スタイルは以下から継承:
 * - common/style.css - グローバルスタイル
 * - common/common.css - 共通レイアウト
 * - common/calculator-common.css - 計算機共通スタイル
 *
 * このファイルには、資産価値シミュレーターでのみ使用される
 * 固有のスタイルのみを定義しています。
 */

/* ========================================
   ページ全体のフォント統一（削除：入力フィールドのフォントを上書きしないため）
   ======================================== */

/* ========================================
   カラーパレット
   ======================================== */

:root {
    /* ケース① */
    --case1-header-bg: #D6EAF8;        /* 水色 */
    --case1-header-text: #2874A6;      /* 濃い青 */

    /* ケース② */
    --case2-header-bg: #FCE5CD;        /* オレンジベージュ */
    --case2-header-text: #D35400;      /* オレンジ */
    --case2-input-bg: #F0F0F0;         /* グレー */
    --case2-input-text: #666666;       /* グレー */

    /* ボタン */
    --calc-button-bg: #D9735B;         /* オレンジ */
    --copy-button-bg: #5DADE2;         /* 明るい青 */

    /* 詳細条件バー */
    --detail-bar-start: #3E7B91;       /* グラデーション開始 */
    --detail-bar-end: #5A9AB5;         /* グラデーション終了 */

    /* グラフ色 */
    --graph-purchase: #3498DB;         /* 青色 */
    --graph-value: #E74C3C;            /* 赤色 */
    --graph-loan: #F39C12;             /* 黄色 */
    --graph-asset: #2ECC71;            /* 緑色 */
    --graph-case1: #5DADE2;            /* 明るい青 */
    --graph-case2: #E67E22;            /* オレンジ */
}

/* ========================================
   シミュレーションヘッダー
   ======================================== */

/* シミュレーションヘッダーは calculator-common.css から継承
   固有のスタイルは定義しない（共通スタイルを使用） */

/* ========================================
   2ケース比較レイアウト
   ======================================== */

.case {
    display: block;
    width: 100%;
}

.case table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

/* ケース①とケース②のヘッダー */
.case table tr:first-child td {
    padding: 10px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

/* ケース①のヘッダー */
.case table tr:first-child td.case1 {
    background: var(--case1-header-bg);
    color: var(--case1-header-text);
}

/* ケース②のヘッダー */
.case table tr:first-child td.case2 {
    background: var(--case2-header-bg);
    color: var(--case2-header-text);
}

/* テーブルセルの基本スタイル */
.case table td {
    padding: 8px 10px;
    vertical-align: middle;
}

/* 空のセル（左端の列） */
.case table td:first-child {
    width: 30px;
    text-align: center;
}

/* 質問項目のセル（2列目） */
.case table td:nth-child(2) {
    width: auto;
    padding-right: 10px;
    text-align: left;
    border-right: 1px solid #ddd;
}

/* th要素のレイアウト調整（共通CSSからの差分のみ） */
.case table th {
    padding-right: 10px; /* 共通CSS: 7px 2px に padding-right を追加 */
    text-align: left;
    border-right: 1px solid #ddd;
}

/* ケース①の入力セル（3列目） */
.case table td.case1 {
    width: 280px;
    text-align: right;
    border-right: 1px solid #ddd;
}

/* ケース②の入力セル（4列目） */
.case table td.case2 {
    width: 280px;
    text-align: right;
}

/* 単位の配置は calculator-common.css の .unit を使用 */

/* 入力フィールドを右寄せで揃える */
.case table td.case1 input[type="number"],
.case table td.case1 .txtNum,
.case table td.case2 input[type="number"],
.case table td.case2 .txtNum {
    text-align: right;
}

/* ========================================
   コピーボタン
   ======================================== */

#btnCopy {
    background-color: var(--copy-button-bg);
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

#btnCopy:hover {
    background-color: #3498DB;
}

/* ========================================
   詳細条件の折りたたみ
   ======================================== */

/* 詳細条件ボタンの行（tr要素）に高さを設定 */
#detailToggleRow {
    height: 100px;
}

#detailmsg {
    cursor: pointer;
    text-align: center;
}

/* OFF状態（デフォルト）- 白背景 */
#detailmsg a {
    display: block;
    background: white;
    border: 2px solid var(--detail-bar-start);
    color: var(--detail-bar-start);
    padding: 12px 20px;
    border-radius: 25px;
    margin: 0 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* ON状態（active時）- 背景色 */
#detailmsg.active a {
    background: linear-gradient(to right, var(--detail-bar-start), var(--detail-bar-end));
    color: white;
    border-color: var(--detail-bar-start);
}

#detailmsg a:hover {
    opacity: 0.8;
}

/* 詳細条件の行（初期状態は表示） */
tr.detail {
    display: table-row;
}

/* 折りたたまれた状態（JavaScriptで制御） */
tr.detail.hidden {
    display: none;
}

/* ========================================
   計算ボタン
   ======================================== */

.button-container {
    text-align: center;
    margin: 20px 0;
}

#btnCalc,
.calc-button {
    background-color: var(--calc-button-bg);
    color: white;
    font-size: 18px;
    padding: 15px 60px;
    border: none;
    border-radius: 0px;  /* 角丸なし */
    cursor: pointer;
    display: inline-block;
    min-width: 170px;
    transition: background-color 0.2s ease;
}

#btnCalc:hover,
.calc-button:hover {
    background-color: #C85542;
}

#btnCalc:active,
.calc-button:active {
    transform: translateY(2px);
}

/* ========================================
   入力フィールド
   ======================================== */

/* ケース①の入力フィールド */
.case1 input[type="number"],
.case1 .txtNum {
    background: white;
    color: #000;
    font-weight: bold;
}

/* ケース②の入力フィールド */
.case2 input[type="number"],
.case2 .txtNum {
    background: white;
    color: #000;
    font-weight: bold;
}

/* 注: 入力不要フィールドのグレーアウトは .disabled-field クラスで動的に管理されます */

/* 借入金額（自動計算結果表示） */
.calc-result-text {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    display: inline-block;
    min-width: 80px;
    text-align: right;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
}

/* ========================================
   結果表示エリア
   ======================================== */

#ans {
    margin-top: 30px;
}

/* グラフコンテナ */
#ans > div {
    margin-bottom: 30px;
}

/* キャンバス */
canvas {
    max-width: 100%;
    height: auto;
}

/* キャプション */
.caption {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

/* 結果メッセージ */
#ans label {
    font-weight: bold;
    color: #CC1F03;
}

/* ========================================
   解説アイコン
   ======================================== */

.help img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* ========================================
   ジャンプリンク
   ======================================== */

.jump {
    text-align: right;
    margin-top: 20px;
}

.jump a {
    color: #3FA9F5;
    text-decoration: none;
    font-size: 14px;
}

.jump a:hover {
    text-decoration: underline;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media screen and (max-width: 1024px) {
    .case table td.case1,
    .case table td.case2 {
        width: 200px;
    }
}

@media screen and (max-width: 768px) {
    /* テーブルを縦並びに */
    .case table {
        display: block;
    }

    .case table tbody,
    .case table tr,
    .case table td {
        display: block;
        width: 100% !important;
    }

    /* ヘッダーは calculator-common.css のレスポンシブスタイルを使用 */

    /* 計算ボタンを全幅に */
    #btnCalc,
    .calc-button {
        width: 100%;
        max-width: 300px;
    }
}

/* ========================================
   ヘルパークラス
   ======================================== */

/* 結果エリアの表示制御 */
#ans.hidden {
    display: none;
}

/* エラーメッセージ */
.error-message {
    color: #d9534f;
    font-size: 14px;
    margin-top: 5px;
}

/* ローディング状態 */
.loading {
    opacity: 0.6;
    pointer-events: none;
}