body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #f0f4f8; color: #333; margin: 0; padding: 10px; }
.app-container { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h2, h3 { color: #2c3e50; }
.input-section { margin-bottom: 25px; }
label { font-weight: bold; font-size: 14px; color: #555; }

/* 💡修正：textareaも同じデザインになるように追加 */
input, select, textarea { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ccd1d9; border-radius: 6px; box-sizing: border-box; font-size: 16px; font-family: inherit; }
textarea { resize: vertical; } /* 縦方向のみサイズ変更可能に */

.item-card { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.item-row { display: flex; gap: 10px; margin-bottom: 5px; }
.item-row > * { margin-bottom: 0; }
.item-row.col-3 > * { flex: 1; }
.item-date { flex: 0.4; }
.item-name { flex: 1; }
.item-note { flex: 1; }
.action-buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.add-btn { flex: 2; padding: 12px; background-color: #f1f3f5; color: #333; border: 1px dashed #adb5bd; border-radius: 6px; font-size: 14px; cursor: pointer; }
.clear-btn { flex: 1; padding: 12px; background-color: #fff; color: #dc3545; border: 1px solid #dc3545; border-radius: 6px; font-size: 14px; cursor: pointer; }
.main-btn { width: 100%; padding: 15px; background-color: #92c021; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; }

#preview-container { display: block; background: #333333; min-height: 100vh; padding: 20px 10px 100px 10px; overflow-x: auto; margin: -10px; }
.preview-actions { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10000; background: rgba(0,0,0,0.8); padding: 15px 20px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 90%; max-width: 400px; justify-content: center; }
.preview-actions button { padding: 12px 15px; border: none; border-radius: 25px; font-size: 15px; font-weight: bold; cursor: pointer; flex: 1; }
.cancel-btn { background: #ffffff; color: #333; }
.share-btn { background: #92c021; color: white; }

.invoice-box { display: block; margin: 0 auto; width: 800px; min-width: 800px; padding: 50px; background: white; color: black; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.invoice-title { text-align: center; letter-spacing: 10px; border-bottom: 2px solid #92c021; padding-bottom: 10px; margin-bottom: 40px; }
.header-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
.client-info h2 { border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 20px; font-size: 24px; }
.total-box { background: #92c021; padding: 15px 30px; font-size: 24px; font-weight: bold; color: white; margin-top: 20px; display: inline-block; }
.my-info p, .my-info h3 { margin: 5px 0; text-align: right; font-size: 14px; }
.item-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.item-table th, .item-table td { border: 1px solid #333; padding: 10px; text-align: center; vertical-align: middle; }
.item-table th { background: #92c021; color: white; }
.item-table tfoot td { border: 1px solid #333; }
.text-right { text-align: right !important; padding-right: 20px !important; }
.fw-bold { font-weight: bold; }
.total-color { color: #92c021; }
.pdf-note { font-size: 11px; color: #666; margin-top: 4px; text-align: left; }
.pdf-name { font-weight: bold; text-align: left; }

/* 💡新たに追加：PDF下の自由記入欄（改行を維持し、枠線で囲む） */
.pdf-free-text {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 14px;
    white-space: pre-wrap; /* 改行をそのまま反映する魔法のコード */
    line-height: 1.6;
    text-align: left;
}