/* =========================================
       CSS: ベーススタイル・レイアウト
       過度な装飾は避け、素朴で分かりやすいUIを目指す
    ========================================= */
    :root {
        --color-bg-gray: #f0f0f0;
        --color-border: #ccc;
        --color-text: #333;
        --color-primary: #0056b3;
        --color-danger: #d9534f;
    }

    body {
        font-family: sans-serif;
        color: var(--color-text);
        line-height: 1.5;
        margin: 0;
        padding: 0;
        background-color: #fafafa;
    }

    .container {
        max-width: 900px;
        margin: 0 auto;
        padding: 10px;
        background-color: #fff;
    }

    /* 最上部タイトル */
    .app-title {
        text-align: center;
        font-size: 1.8rem;
        margin: 20px 0;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--color-border);
    }

    /* セクション共通 */
    .section-box {
        border: 1px solid var(--color-border);
        padding: 15px;
        margin-bottom: 20px;
        background-color: #fff;
    }

    h2 {
        font-size: 1.2rem;
        margin-top: 0;
        border-left: 4px solid var(--color-border);
        padding-left: 8px;
    }

    /* フォーム要素 */
    .form-group {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .form-group label {
        width: 140px;
        font-weight: bold;
    }

    input[type="text"] {
        padding: 5px;
        border: 1px solid var(--color-border);
        width: 200px;
    }

    input.short { width: 80px; }
    input.long { width: 300px; }

    button {
        padding: 5px 12px;
        cursor: pointer;
        background-color: #eee;
        border: 1px solid #999;
        color: #333;
    }

    button:hover { background-color: #ddd; }
    button.primary { background-color: var(--color-primary); color: #fff; border-color: #004085; }
    button.primary:hover { background-color: #004085; }
    button.danger { background-color: var(--color-danger); color: #fff; border-color: #c9302c; }
    button.danger:hover { background-color: #c9302c; }

    /* 中央のデータ管理エリア（追従表示） */
    .management-bar {
        position: sticky;
        top: 0;
        background-color: var(--color-bg-gray);
        border: 1px solid #aaa;
        padding: 12px;
        margin-bottom: 20px;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .management-left, .management-right {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .current-data-name {
        font-weight: bold;
        color: var(--color-primary);
        background: #fff;
        padding: 2px 8px;
        border: 1px solid #ccc;
    }

    /* 修正・表示エリア（帳票） */
    .display-area {
        background-color: #fff;
    }

    /* 見積書のヘッダーレイアウト */
    .estimate-title-area {
        text-align: center;
        margin-bottom: 30px;
    }
    .estimate-name { 
        font-size: 1.6rem; 
        font-weight: bold; 
        letter-spacing: 0.1em;
        border-bottom: 1px solid #000;
        display: inline-block;
        padding-bottom: 5px;
        min-width: 200px;
    }

    .document-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .header-left { flex: 1; }
    .header-right { flex: 1; text-align: right; }

    .customer-name { font-size: 1.4rem; text-decoration: underline; margin-bottom: 10px; }
    .company-name { font-size: 1.1rem; }

    /* テーブル表示 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    th, td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }

    th { background-color: #f9f9f9; }
    .num-align { text-align: right; }
    
    .category-row {
        background-color: #f0f0f0;
        font-weight: bold;
    }

    .item-row.indent td:first-child {
        padding-left: 20px;
    }

    /* 集計テーブルは右寄せで小さく */
    .summary-table {
        width: 50%;
        margin-left: auto;
    }

    /* ボタングループ */
    .action-cell { width: 120px; text-align: center; }
    .action-cell button { padding: 2px 5px; font-size: 0.9rem; }

    .bottom-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding-top: 15px;
        border-top: 1px dashed var(--color-border);
    }

    /* 印刷・PDF出力時のスタイル */
    @media print {
        body { background-color: #fff; }
        .no-print { display: none !important; }
        .container { max-width: 100%; padding: 0; margin: 0; }
        .display-area { border: none; padding: 0; margin: 0; }
        table th, table td { padding: 6px; }
        @page { margin: 15mm; }
    }