/* ============================================================================
 * 各種建築物の限界耐力計算・保有水平耐力計算  スタイル
 *   T-ARK1.0 の配色・表組みの体裁を踏襲した最小構成（1ページ完結）。
 * ==========================================================================*/
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 14px;
    color: #333;
    background: #eef2f6;
    line-height: 1.6;
}
header.app-header {
    background: linear-gradient(135deg, #005a9c, #003f6e);
    color: #fff;
    padding: 12px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: 0;
    z-index: 100;
}
header.app-header h1 { margin: 0; font-size: 19px; font-weight: bold; letter-spacing: 0.02em; }
header.app-header .sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
header.app-header .hdr-actions { float: right; margin-top: -34px; }
header.app-header .hdr-actions button { margin-left: 6px; }

main { max-width: 1180px; margin: 0 auto; padding: 16px 16px 80px; }

section.card {
    background: #fff;
    border: 1px solid #d4dde6;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
section.card > h2 {
    margin: 0;
    padding: 9px 14px;
    font-size: 15px;
    background: #f2f6fa;
    border-bottom: 1px solid #d4dde6;
    color: #005a9c;
}
section.card > .body { padding: 14px; }

.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field > label { font-size: 12px; color: #55606b; }
.field.wide { flex: 1 1 260px; }

input[type="text"], input[type="number"], select, textarea {
    padding: 5px 8px;
    border: 1px solid #b9c6d2;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}
input[type="number"] { width: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #005a9c; box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.15); }
input:disabled, select:disabled { background: #f0f0f0; color: #888; }

button {
    padding: 6px 14px;
    border: 1px solid #005a9c;
    border-radius: 4px;
    background: #005a9c;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
button:hover { background: #00477c; }
button.secondary { background: #fff; color: #005a9c; }
button.secondary:hover { background: #eaf2f8; }
button.danger { background: #c62828; border-color: #c62828; }
button.danger:hover { background: #a51f1f; }
button.small { padding: 3px 8px; font-size: 12px; }
button:disabled { background: #b0bec5; border-color: #b0bec5; cursor: not-allowed; }

button.run {
    background: #e65100; border-color: #e65100; font-size: 15px; font-weight: bold; padding: 9px 26px;
}
button.run:hover { background: #bf4300; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border: 1px solid #cfd8e3; padding: 4px 8px; text-align: right; }
th { background: #eef3f8; text-align: center; font-weight: 600; white-space: nowrap; }
td.lbl, th.lbl { text-align: left; background: #f7f9fb; white-space: nowrap; }
tr:hover td { background: #f7fbff; }
table.compact th, table.compact td { padding: 2px 6px; font-size: 12px; }

/* バッジ（T-ARK1.0 と同一の見た目） */
.badge { display: inline-block; padding: 3px 8px; border-radius: 3px; font-weight: bold; font-size: 0.9em; color: white; }
.badge-ok { background: #28a745; }
.badge-ng { background: #dc3545; }
.badge-na { background: #90a4ae; }

.note { font-size: 12px; color: #667; line-height: 1.5; }
.warn { background: #fff8e1; border: 1px solid #ffca28; border-radius: 4px; padding: 8px 10px; font-size: 12.5px; color: #7a5900; margin: 8px 0; }
.err  { background: #ffebee; border: 1px solid #ef9a9a; border-radius: 4px; padding: 8px 10px; font-size: 12.5px; color: #b71c1c; margin: 8px 0; }
.ok   { background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 4px; padding: 8px 10px; font-size: 12.5px; color: #1b5e20; margin: 8px 0; }

.chart-wrap { position: relative; height: 340px; margin-top: 10px; }
.chart-wrap.small { height: 260px; }

details { border: 1px solid #d4dde6; border-radius: 6px; margin-top: 10px; background: #fafcfe; }
details > summary { cursor: pointer; padding: 7px 12px; font-weight: bold; color: #005a9c; font-size: 13px; user-select: none; }
details > div { padding: 0 12px 12px; }

.floor-block { border: 1px solid #d4dde6; border-radius: 6px; margin-bottom: 12px; }
.floor-block > .head {
    background: #f2f6fa; padding: 6px 12px; font-weight: bold; color: #005a9c;
    border-bottom: 1px solid #d4dde6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.floor-block > .inner { padding: 10px 12px; }

.pt-table td input { width: 100%; text-align: right; padding: 2px 5px; font-size: 12px; }
.pt-table td { padding: 2px 4px; }

#status-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: #263238; color: #fff; padding: 7px 16px; font-size: 13px;
    display: none;
}
#status-bar.show { display: block; }
#status-bar.error { background: #b71c1c; }
#status-bar.success { background: #1b5e20; }

/* ---- 計算書（印刷用） ---- */
#report { display: none; background: #fff; }
#report.show { display: block; }
#report .rp-page { padding: 14mm 12mm; border-bottom: 2px dashed #bbb; }
#report h1 { font-size: 18px; border-bottom: 2px solid #005a9c; padding-bottom: 4px; }
#report h2 { font-size: 15px; color: #005a9c; margin-top: 18px; }
#report table { margin-top: 6px; }

@media print {
    body { background: #fff; }
    header.app-header, main, #status-bar { display: none !important; }
    #report { display: block !important; }
    #report .rp-page { page-break-after: always; border-bottom: none; padding: 0; }
    #report .rp-page:last-child { page-break-after: auto; }
}

/* ============================================================================
 * 以下は T-ARK1.0 style.css からの移植（串団子モデル・結果表示・比較表・ログ表）
 *   クラス名・数値とも T-ARK と同一にし、tark_ui.js（T-ARK スライス）の出力が
 *   本体とまったく同じ見た目になるようにする。
 * ==========================================================================*/
:root { --primary: #005a9c; --secondary: #003f6e; --border: #ccc; }

.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 10px; }
.input-group { background: #fff; padding: 8px; border: 1px solid var(--border); border-radius: 3px; }
.input-group label { display: block; font-weight: bold; margin-bottom: 4px; font-size: 0.9em; color: #555; }
.input-group input, .input-group select { width: 95%; padding: 4px; border: 1px solid #999; text-align: right; }
.input-group select { text-align: left; }

.auto-weight-section { background:#fffbf0; border:2px solid #f0d060; border-radius:8px; padding:15px; margin:20px 0; }
.auto-weight-section h3 { margin:0 0 10px; color:#b8860b; font-size:1.05em; }

.split-summary-table { width: 100%; margin-bottom: 20px; page-break-inside: avoid; }
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 5px; font-size: 0.9em; background: #fff; }
.data-table th { background: #e0e0e0; border: 1px solid #999; padding: 4px; text-align: center; }
.data-table td { border: 1px solid #999; padding: 2px; text-align: center; }
.data-table input { width: 90%; border: none; text-align: right; font-family: inherit; }

.btn-sm { padding: 1px 6px; cursor: pointer; font-size: 0.85em; background: #ddd; border: 1px solid #999; border-radius: 2px; }
.btn-calc { display: block; width: 200px; margin: 20px auto; padding: 12px; font-size: 1.2em; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
.btn-calc:hover { background: var(--secondary); transform: translateY(-1px); }
.btn-sheet { background: #fff; border: 1px solid var(--primary); color: var(--primary); cursor: pointer; padding: 2px 8px; font-size: 0.85em; border-radius: 3px; }

.log-section { margin-top: 20px; border-top: 2px solid #ccc; padding-top: 10px; }
.log-wrapper { overflow: auto; border: 1px solid #999; max-height: 500px; background: #fff; position: relative; margin-bottom: 20px; }
.log-table { border-collapse: separate; border-spacing: 0; font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; white-space: nowrap; width: 100%; }
.log-table thead { position: sticky; top: 0; z-index: 10; }
.log-table th { background: #f0f0f0; border: 1px solid #ccc; padding: 4px 6px; text-align: center; }
.log-table td { border: 1px solid #ccc; padding: 2px 6px; text-align: right; }
.log-table tr:nth-child(even) { background: #f9f9f9; }

.result-box { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.result-panel { flex: 1; min-width: 450px; padding: 10px; border: 1px solid #ddd; border-top: 3px solid var(--primary); background: #fff; }
.chart-wrapper { height: 400px; position: relative; width: 100%; }
.result-box.vertical-layout { flex-direction: column; }
.result-box.vertical-layout .result-panel { width: 100%; min-width: auto; }

.story-2-only { transition: opacity 0.3s; }

/* 結果ブロックはカード外に置くため余白を揃える */
#result-summary { margin-bottom: 16px; }

/* モーダル（T-ARK1.0 と同一の見た目。本プログラムではページ内表示） */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background: #fff; padding: 15px; width: 800px; max-width: 95vw; max-height: 95vh; overflow: auto; display: flex; flex-direction: column; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* 入力グラフ（T-ARK1.0 と同一） */
.input-chart-wrapper { height: 250px; width: 100%; background: white; border: 1px solid #eee; margin-bottom: 5px; display: flex; flex-direction: column; box-sizing: border-box; }
.input-chart-wrapper canvas { width: 100% !important; flex: 1 1 auto; min-height: 0; display: block; }

/* ============================================================================
 * Ds算出グラフ: 本プログラムは1方向のみのため画面幅いっぱいに表示する
 *   （T-ARK の renderDsGraphs は X/Y 2枚並べる前提で wrapper に width:48% を
 *     インラインで書くため、!important で上書きする。スライスは無改変のまま）
 * ==========================================================================*/
#shear-ds-graph-container > div {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px !important;
    display: block !important;
}
/* 高さを効かせるのはグラフ枠（canvas を包む最後の div）だけ。
   1つ目の div は Ds・μ・Py 等の注記なので、ここに高さを当てるとグラフの上に空白ができる。 */
#shear-ds-graph-container > div > div:last-child {
    height: 440px !important;
}
#shear-ds-graph-container > div > div:first-child {
    height: auto !important;
    margin-bottom: 4px !important;
}

/* ============================================================================
 * T-ARK スライスが「計算書出力オプション」として表示状態を切り替える要素は、
 * 本プログラムにその UI が無いため常に隠す。
 *   ★toggleShearInput() が #span-rep-shear を inline-block へ戻すため、
 *     インラインの display:none だけでは復活してしまう（チェックボックスが二重に見える）。
 * ==========================================================================*/
#span-rep-shear,
#chk-skip-y,
#chk_compare_damper { display: none !important; }