:root {
            --bg-color: #fdfcf8;
            --primary-color: #1a1a1a;
            --accent-color: #7a6950;
            --border-color: #333;
            --text-color: #222;
            --label-bg: #eeeeee;
            --zebra-color: #f0f0f0; /* 視認性を高めるため、少し濃いめのグレーに変更 */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e0e0e0;
            color: var(--text-color);
            font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
            padding: 40px 10px;
        }

        .paper {
            background-color: var(--bg-color);
            max-width: 1000px;
            margin: 0 auto;
            padding: 60px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            position: relative;
            min-height: 1200px;
        }

        .doc-title {
            text-align: center;
            font-size: 2.5rem;
            letter-spacing: 0.5em;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }

        .meta-info {
            text-align: right;
            margin-bottom: 40px;
            font-family: sans-serif;
            font-size: 0.9rem;
        }
        .meta-info div { margin-bottom: 5px; }
        .meta-info input {
            border: none;
            background: transparent;
            border-bottom: 1px solid #ccc;
            text-align: right;
            width: 150px;
        }

        /* 宛名と差出人エリア */
        .address-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
            align-items: flex-end;
        }

        .client-side {
            width: 50%;
        }
        .client-info-extra {
            margin-bottom: 10px;
        }
        .client-info-extra textarea {
            width: 100%;
            height: 60px;
            border: none;
            background: transparent;
            font-family: sans-serif;
            font-size: 0.85rem;
            resize: none;
            border-bottom: 1px dashed #ccc;
        }
        .client-main {
            border-bottom: 2px solid var(--primary-color);
            display: flex;
            align-items: baseline;
        }
        .client-main input {
            width: 80%;
            font-size: 1.5rem;
            border: none;
            background: transparent;
            padding: 5px;
            font-family: inherit;
        }
        .client-main select {
            border: none;
            background: transparent;
            font-size: 1.2rem;
            font-family: inherit;
        }

        .issuer-side {
            text-align: right;
            font-size: 0.9rem;
            line-height: 1.8;
            font-family: sans-serif;
        }
        .issuer-side textarea {
            width: 280px;
            height: 100px;
            border: none;
            background: transparent;
            resize: none;
            text-align: right;
            font-family: inherit;
        }

        /* お見積り金額・支払い条件エリア */
        .highlight-box {
            display: grid;
            grid-template-columns: 1fr 350px;
            border: 2px solid var(--primary-color);
            margin-bottom: 40px;
        }

        .total-display {
            display: flex;
            align-items: stretch;
            border-right: 2px solid var(--primary-color);
        }
        .total-display .label {
            background-color: var(--label-bg);
            width: 160px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 2px solid var(--primary-color);
            letter-spacing: 0.1em;
        }
        .total-display .amount-wrap {
            flex-grow: 1;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 一番上の「お見積金額」の入力枠（内枠）を消す */
        #displayGrandTotal {
            border: none !important;    /* 枠線を消す */
            outline: none !important;   /* クリックした時の青い枠も消す */
            background: transparent;    /* 背景を透明にする */
            width: 100%;
            font-size: 1.2rem;          /* 文字の大きさを調整（お好みで） */
            font-weight: bold;          /* 文字を太くする */
            font-family: inherit;       /* 他の箇所とフォントを合わせる */
            text-align: center;         /* 中央寄せ（左寄せが良ければ left に変更） */
        }
        .total-display .amount {
            font-size: 2.2rem;
            font-weight: bold;
            padding: 0 10px;
        }

        .conditions-display {
            font-family: sans-serif;
        }
        .cond-row {
            display: grid;
            grid-template-columns: 100px 1fr;
            border-bottom: 1px solid var(--primary-color);
            height: 50%;
        }
        .cond-row:last-child { border-bottom: none; }
        .cond-label {
            background: var(--label-bg);
            padding: 8px;
            font-size: 0.8rem;
            border-right: 1px solid var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cond-value { 
            padding: 5px; 
            display: flex;
            align-items: center;
        }
        .cond-value input {
            width: 100%;
            border: none;
            background: transparent;
            font-size: 0.9rem;
            text-align: center;
        }

        /* 商品一覧テーブル */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .items-table th {
            background: var(--label-bg);
            border: 2px solid var(--primary-color);
            padding: 10px;
            font-size: 0.85rem;
            text-align: center;
        }
        .items-table td {
            border: 1px solid var(--primary-color);
            padding: 8px;
        }
        
        /* 縞々模様の設定 */
        #itemList tr:nth-child(even) td:not(.col-action) {
            background-color: var(--zebra-color);
        }

        .items-table input {
            width: 100%;
            border: none;
            background: transparent;
            font-family: sans-serif;
            font-size: 1rem;
        }
        .col-name { width: 45%; }
        .col-qty { width: 12%; text-align: right; }
        .col-price { width: 18%; text-align: right; }
        .col-subtotal { width: 20%; text-align: right; font-weight: bold; }
        .col-action { width: 40px; text-align: center; border: none !important; background: transparent !important; }

        .in-qty { text-align: right; padding-right: 5px; }
        .in-price { text-align: right; }

        /* 集計行 */
        .summary-row td { border: none; background: transparent !important; }
        .summary-label {
            text-align: center;
            border: 1px solid var(--primary-color) !important;
            background: var(--label-bg) !important;
            font-size: 0.85rem;
        }
        .summary-value {
            text-align: right;
            border: 1px solid var(--primary-color) !important;
            font-weight: bold;
            padding-right: 15px !important;
        }
        .summary-value input {
            text-align: right;    /* 入力枠の中の文字を右寄せにする */
            border: none;         /* 入力枠の線を消す */
            background: transparent; /* 背景を透明にする */
            width: 100%;          /* セルの幅いっぱいに広げる */
            outline: none;        /* クリックした時の青い枠線を消す */
            /* font-weight: bold;    数字を太字にする */
        }
        /* 備考欄 */
        .remarks-section {
            margin-top: 40px;
            border: 1px solid var(--primary-color);
        }
        .remarks-header {
            background: var(--label-bg);
            padding: 5px 10px;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--primary-color);
            text-align: center;
        }
        .remarks-body textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: none;
            background: transparent;
            resize: none;
            font-family: inherit;
        }

        /* 操作系 */
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid var(--primary-color);
            background: white;
            font-family: sans-serif;
            transition: all 0.2s;
        }
        .btn:hover { background: #eee; }
        .btn-add { background: var(--primary-color); color: white; }
        .btn-add:hover { background: #333; }
        .btn-delete { color: #ccc; border: none; font-size: 1.2rem; cursor: pointer; }
        .btn-delete:hover { color: #d00; }
        .btn-hidden { visibility: hidden; } /* 削除不可の行用 */

        @media print {
            body { background: white; padding: 0; }
            .paper { box-shadow: none; width: 100%; margin: 0; padding: 40px; }
            .controls, .btn-delete, .col-action { display: none; }
            #itemList tr:nth-child(even) {
                background-color: var(--zebra-color) !important;
                print-color-adjust: exact;
            }
        }

        @media (max-width: 768px) {
            .paper { padding: 20px; }
            .address-section { flex-direction: column; align-items: flex-start; }
            .client-side, .issuer-side { width: 100%; text-align: left; margin-bottom: 20px; }
            .issuer-side textarea { text-align: left; width: 100%; }
            .highlight-box { grid-template-columns: 1fr; }
            .total-display { border-right: none; border-bottom: 2px solid var(--primary-color); }
            .total-display .label { width: 120px; }
        }