:root {
    --background: hsl(0, 0%, 100%); --foreground: hsl(20, 14.3%, 4.1%); --muted: hsl(60, 4.8%, 95.9%);
    --muted-foreground: hsl(25, 5.3%, 44.7%); --popover: hsl(0, 0%, 100%); --popover-foreground: hsl(20, 14.3%, 4.1%);
    --card: hsl(0, 0%, 100%); --card-foreground: hsl(20, 14.3%, 4.1%); --border: hsl(20, 5.9%, 90%);
    --input: hsl(20, 5.9%, 90%); --primary: hsl(142, 76%, 36%); --primary-foreground: hsl(138, 100%, 99%);
    --secondary: hsl(60, 4.8%, 95.9%); --secondary-foreground: hsl(24, 9.8%, 10%); --accent: hsl(60, 4.8%, 95.9%);
    --accent-foreground: hsl(24, 9.8%, 10%); --destructive: hsl(0, 84.2%, 60.2%); --destructive-foreground: hsl(60, 9.1%, 97.8%);
    --ring: hsl(20, 14.3%, 4.1%); --radius: 0.5rem; --success: hsl(122, 39%, 49%); --warning: hsl(35, 91%, 62%); --error: hsl(0, 84%, 60%);
}

* { border-color: var(--border); }

/* 高齢者向け改善 */
body { font-family: 'Noto Sans JP', sans-serif; background-color: var(--background); color: var(--foreground);
    font-feature-settings: "rlig" 1, "calt" 1; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; font-size: 18px; line-height: 1.6; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

.header { background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border-bottom: 1px solid hsl(20, 5.9%, 90%); padding: 1rem 0; }

.header-content { display: flex; justify-content: space-between; align-items: center; }

.nav { display: flex; gap: 1rem; }

.nav-link { text-decoration: none; color: hsl(25, 5.3%, 44.7%); font-weight: 500; padding: 0.5rem 1rem;
    border-radius: 0.375rem; transition: all 0.3s; font-size: 0.875rem; }

.nav-link:hover { background-color: hsl(60, 4.8%, 95.9%); color: hsl(20, 14.3%, 4.1%); }

.nav-link.active { background-color: var(--primary); color: white; }

.logo { display: flex; align-items: center; gap: 0.75rem; }

.logo-icon { width: 2.5rem; height: 2.5rem; background-color: var(--primary); border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }

.logo-text h1 { font-size: 1.25rem; font-weight: 700; color: hsl(20, 14.3%, 4.1%); margin: 0; }

.logo-text p { font-size: 0.875rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }

.main { background-color: hsl(60, 4.8%, 95.9%); min-height: calc(100vh - 80px); padding: 2rem 0; }

.progress-indicator { margin-bottom: 2rem; }

.progress-steps { display: flex; justify-content: center; gap: 1rem; }

.step { display: flex; align-items: center; gap: 1rem; }

.step-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700; transition: all 0.3s; }

.step-circle.active { background-color: var(--primary); color: white; }

.step-circle.inactive { background-color: hsl(60, 4.8%, 95.9%); color: hsl(25, 5.3%, 44.7%); }

.step-title { font-size: 0.875rem; font-weight: 500; }

.step-title.active { color: hsl(20, 14.3%, 4.1%); }

.step-title.inactive { color: hsl(25, 5.3%, 44.7%); }

.step-connector { width: 4rem; height: 1px; background-color: hsl(60, 4.8%, 95.9%); }

.grid { display: flex; justify-content: center; align-items: flex-start; gap: 2rem; }

.card { margin: 0 auto; }

.card { background: white; border-radius: 0.5rem; border: 1px solid var(--border); overflow: hidden; }

.card-header { padding: 1.5rem; border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }

.card-title { font-size: 1.3rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.5rem 0; }

.card-description { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }

.card-content { padding: 1.5rem; }

.upload-area { border: 2px dashed hsl(20, 5.9%, 90%); border-radius: 0.5rem; padding: 2rem; text-align: center;
    cursor: pointer; transition: border-color 0.3s; }

.upload-area:hover { border-color: var(--primary); }

.upload-icon { width: 4rem; height: 4rem; background-color: hsl(60, 4.8%, 95.9%); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: hsl(25, 5.3%, 44.7%); font-size: 2rem; }

.upload-text { font-size: 1.3rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.25rem 0; }

.upload-subtext { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0 0 1rem 0; }

.upload-format { font-size: 1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }

.form-group { margin-bottom: 1.5rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }

.form-row:has(.form-group:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }

.form-row:has(.form-group:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }

.form-help { display: block; font-size: 1rem; color: hsl(25, 5.3%, 44.7%); margin-top: 0.25rem; }

.receipt-form label { font-size: 1.1rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin-bottom: 0.5rem; display: block; }

.receipt-form input, .receipt-form textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--input);
    border-radius: 0.375rem; font-size: 1.1rem; font-family: inherit; transition: border-color 0.3s; background: white; box-sizing: border-box; min-height: 3rem; }

.receipt-form input:focus, .receipt-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px hsl(207, 90%, 54%, 0.2); }

.receipt-form textarea { resize: vertical; min-height: 2.5rem; }

.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-weight: 500; font-size: 1.1rem; }

.alert-success { background-color: hsl(142, 76%, 95%); color: hsl(142, 76%, 36%); border: 1px solid hsl(142, 76%, 85%); }

.alert-error { background-color: hsl(0, 84%, 95%); color: hsl(0, 84%, 60%); border: 1px solid hsl(0, 84%, 85%); }

.search-form { margin-bottom: 1rem; }

.search-form .form-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }

.search-form .form-group { margin-bottom: 0; }

.search-input { padding: 0.8rem 1rem; border: 1px solid hsl(214, 32%, 91%); border-radius: 0.5rem; font-size: 1.1rem;
    transition: all 0.2s ease; background: white; min-width: 300px; flex: 1; min-height: 3rem; }

.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(142, 76%, 95%); }

.search-form .button { white-space: nowrap; min-width: auto; }

.receipts-list { display: flex; flex-direction: column; gap: 1rem; }

.receipt-item { background: white; border: 1px solid hsl(20, 5.9%, 90%); border-radius: 0.5rem; padding: 1rem; transition: box-shadow 0.3s; }

.receipt-item:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

.receipt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid hsl(60, 4.8%, 95.9%); }

.receipt-no { font-size: 1.3rem; color: var(--primary); }

.receipt-date { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); }

.receipt-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.receipt-info { flex: 1; }

.info-row { display: flex; margin-bottom: 0.5rem; font-size: 1.1rem; }

.info-row .label { font-weight: 500; color: hsl(25, 5.3%, 44.7%); min-width: 4rem; }

.info-row .value { color: hsl(20, 14.3%, 4.1%); flex: 1; }

.receipt-actions { display: flex; gap: 0.5rem; }

.label { font-size: 1.1rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin-bottom: 0.5rem; display: block; }

.input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--input); border-radius: 0.375rem;
    font-size: 1.1rem; transition: border-color 0.3s; background: white; min-height: 3rem; }

.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px hsl(207, 90%, 54%, 0.2); }

.select { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--input); border-radius: 0.375rem;
    font-size: 1.1rem; background: white; cursor: pointer; min-height: 3rem; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem;
    border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none;
    transition: all 0.3s; text-decoration: none; }

.button-primary { background-color: var(--primary); color: white; }

.button-primary:hover { background-color: hsl(207, 90%, 48%); }

.button-success { background-color: var(--success); color: white; }

.button-success:hover { background-color: hsl(122, 39%, 44%); }

.button-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }

.button-secondary:hover { background-color: hsl(60, 4.8%, 91%); }

.button-outline { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); }

.button-outline:hover { background-color: var(--primary); color: white; }

.button-danger { background-color: var(--destructive); color: white; }

.button-danger:hover { background-color: hsl(0, 84%, 50%); }

.button-small { padding: 0.375rem 0.75rem; font-size: 0.875rem; }

.button:disabled { opacity: 0.6; cursor: not-allowed; }

.button.loading { position: relative; color: transparent; pointer-events: none; }

.button.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem;
    margin: -0.5rem 0 0 -0.5rem; border: 2px solid transparent; border-top: 2px solid currentColor;
    border-radius: 50%; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.button.loading::before { content: '処理中...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: inherit; font-size: 1.2rem; }

.button.loading.button-primary::before { content: '情報を抽出中...'; }

.button.loading.button-success::before { content: '申請書作成中...'; }

.button-full { width: 100%; }

.preview-content { max-height: 600px; overflow-y: auto; }

.form-preview { font-family: 'Noto Sans JP', serif; font-size: 1.1rem; line-height: 1.6; }

.form-preview h1 { text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.1em; }

.stamp-area { text-align: right; margin-bottom: 1.5rem; }

.stamp { display: inline-block; border: 2px solid #000; padding: 0.5rem; font-size: 1rem; }

.form-section { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

.form-section:last-child { border-bottom: none; }

.form-row { display: grid; grid-template-columns: 1fr 3fr; gap: 0.5rem; margin-bottom: 0.5rem; align-items: start; }

.form-label { font-weight: 500; border-bottom: 1px solid #000; padding-bottom: 0.125rem; font-size: 1.1rem; }

.form-value { border-bottom: 1px solid #666; padding-bottom: 0.125rem; min-height: 1.25rem; font-size: 1.1rem; }

.section-title { font-size: 1.3rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; margin-top: 0; }

.sub-section { margin-left: 1.25rem; }

.action-buttons { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; }

.hidden { display: none; }

.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); }

.loading-overlay.hidden { display: none !important; }

.loading-overlay-content { background: white; padding: 3rem; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    text-align: center; max-width: 320px; width: 80%; }

.loading-overlay-spinner { width: 4rem; height: 4rem; border: 4px solid hsl(60, 4.8%, 95.9%); border-top: 4px solid var(--primary);
    border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1.5rem; }

.loading-overlay-text { font-size: 1.3rem; font-weight: 500; color: hsl(20, 14.3%, 4.1%); margin: 0 0 0.5rem 0; }

.loading-overlay-subtext { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); margin: 0; }

.limit-selector { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(214, 32%, 91%); display: flex; align-items: center; gap: 0.5rem; }

.limit-selector label { font-size: 1.1rem; color: hsl(25, 5.3%, 44.7%); font-weight: 500; }

.limit-selector select { padding: 0.8rem 1rem; border: 1px solid hsl(214, 32%, 91%); border-radius: 0.375rem;
    font-size: 1.1rem; background: white; cursor: pointer; transition: border-color 0.2s ease; min-height: 3rem; }

.limit-selector select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(142, 76%, 95%); }

.pagination { margin-top: 2rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
    padding: 0 0.75rem; border: 1px solid hsl(214, 32%, 91%); border-radius: 0.375rem; background: white;
    color: hsl(25, 5.3%, 44.7%); text-decoration: none; font-size: 1.1rem; font-weight: 500; transition: all 0.2s ease; }

.pagination-link:hover { border-color: var(--primary); color: var(--primary); background: hsl(142, 76%, 95%); }

.pagination-link.active { background: var(--primary); border-color: var(--primary); color: white; }

.pagination-link.active:hover { background: hsl(142, 76%, 36%); }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(2px); }

.modal-overlay.hidden { display: none !important; }

.modal-content { background: white; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }

.modal-header { padding: 1.5rem 1.5rem 0 1.5rem; border-bottom: 1px solid hsl(214, 32%, 91%); }

.modal-title { font-size: 1.3rem; font-weight: 600; color: hsl(20, 14.3%, 4.1%); margin: 0; }

.modal-body { padding: 1.5rem; }

.modal-body p { margin: 0 0 1rem 0; color: hsl(25, 5.3%, 44.7%); line-height: 1.6; font-size: 1.1rem; }

.modal-body p:last-child { margin-bottom: 0; font-weight: 500; color: hsl(20, 14.3%, 4.1%); }

.modal-footer { padding: 0 1.5rem 1.5rem 1.5rem; display: flex; gap: 1rem; justify-content: flex-end; }

.modal-footer .button { min-width: 100px; }

.dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }

.dialog-overlay.hidden { display: none; }

.dialog { background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 500px;
    width: 100%; max-height: 90vh; overflow-y: auto; }

.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border); }

.dialog-header h3 { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--foreground); }

.dialog-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted-foreground);
    padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border-radius: 0.25rem; transition: background-color 0.2s; }

.dialog-close:hover { background-color: var(--muted); }

.dialog-content { padding: 1.5rem; }

.dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid var(--border); background-color: var(--muted); }

.dialog .input { width: 100%; max-width: 420px; box-sizing: border-box; }

.header-actions { display: flex; gap: 0.75rem; align-items: center; }

.signature-area { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; background-color: var(--muted); }

#signatureCanvas { border: 1px solid var(--border); border-radius: 0.25rem; background-color: white; cursor: crosshair; display: block; margin-bottom: 0.75rem; }

.signature-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.card, .step-card { max-width: 700px; width: 100%; margin: 0 auto; }

.input-wide { width: 100%; min-width: 200px; max-width: 100%; box-sizing: border-box; }

.input-amount, #amount, #taxExcludedAmount, #consumptionTaxRate { width: 180px !important; min-width: 0 !important; max-width: 180px !important; }

.input-tax-rate, #taxRate { width: 80px !important; min-width: 0 !important; max-width: 80px !important; }

.confirmation-section, .confirmation-grid { max-width: 700px; width: 100%; margin: 0 auto; }

.amount-tax-row { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; }

.amount-tax-row label { min-width: 60px; margin-bottom: 0; }

.amount-tax-row input[type='number']#amount { flex: 6 1 0%; min-width: 0; }

.amount-tax-row input[type='number']#taxRate { flex: 4 1 0%; min-width: 0; }

.input-amount, .input-tax-rate { width: 100% !important; max-width: none !important; }

#amount, #taxRate, .input-amount, .input-tax-rate { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

#taxExcludedAmount, #consumptionTaxRate { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

.form-group { min-width: 0 !important; max-width: 100% !important; }

.form-row { min-width: 0 !important; max-width: 100% !important; }

.confirmation-section table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 1rem; }

.confirmation-section td { padding: 0.75rem; border: 1px solid #dee2e6; vertical-align: top; }

.confirmation-section td:first-child { width: 30%; background-color: #f8f9fa; font-weight: 600; color: #495057; }

.confirmation-section td:last-child { background-color: white; }

.confirmation-section .amount-cell { text-align: left; }

.confirmation-section .text-cell { white-space: pre-wrap; }

.tax-info-tooltip { position: fixed; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.8); color: white;
    padding: 12px 16px; border-radius: 8px; font-size: 1.1rem; line-height: 1.4; max-width: 300px; z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); }

.tax-info-icon { position: absolute; top: -8px; left: -8px; background: #007bff; border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; font-size: 12px; }

.tax-info-content { margin-left: 8px; }

.tax-info-header { font-weight: 600; margin-bottom: 4px; color: #ffd700; }

.tax-info-text { font-size: 1rem; opacity: 0.9; }

@media print {
    .no-print { display: none !important; }
    body * { visibility: hidden; }
    .print-form-content, .print-form-content * { visibility: visible; }
    .print-form-content { position: absolute; left: 0; top: 0; width: 100%; height: auto;
        max-height: calc(100vh - 30mm); page-break-inside: avoid; page-break-after: avoid; overflow: hidden;
        transform: scale(0.85); transform-origin: top left; width: 118% !important; }
    body { font-size: 9pt; line-height: 1.1; margin: 0; padding: 10mm; height: 100vh; overflow: hidden; }
    @page { size: A4; margin: 10mm; }
    .form-preview h1 { font-size: 12pt !important; margin-bottom: 0.5rem !important; letter-spacing: 1px !important; }
    .form-section { margin-bottom: 0.4rem !important; }
    .form-row { margin-bottom: 0.25rem !important; }
    .section-title { margin-bottom: 0.3rem !important; font-size: 8.5pt !important; }
    .stamp-area { margin-bottom: 0.5rem !important; }
    .stamp { padding: 0.25rem !important; font-size: 7pt !important; }
    .sub-section { margin-left: 0.75rem !important; }
    .form-value { min-height: 0.8rem !important; padding-bottom: 0.1rem !important; }
    .form-label { padding-bottom: 0.1rem !important; }
}

@media (max-width: 1024px) {
    .grid { grid-template-columns: 1fr; }
    .action-buttons { flex-direction: column; align-items: center; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .receipt-form .form-row { margin-bottom: 1rem; }
    .receipt-content { flex-direction: column; gap: 1rem; }
    .receipt-actions { justify-content: flex-start; }
    .nav { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 768px) {
    .search-form .form-row { flex-direction: column; align-items: stretch; }
    .search-input { min-width: auto; }
    .search-form .button { width: 100%; }
    .grid { flex-direction: column; gap: 1rem; }
    .card { max-width: 100%; }
    .pagination { gap: 0.25rem; }
    .pagination-link { min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.75rem; }
    .limit-selector { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .modal-content { margin: 1rem; width: calc(100% - 2rem); }
    .modal-footer { flex-direction: column; }
    .modal-footer .button { width: 100%; }
    .card, .step-card, .confirmation-section, .confirmation-grid { max-width: 100%; }
}

@media (max-width: 600px) { .amount-tax-row { flex-direction: column; gap: 0.5rem; align-items: stretch; } }