:root {
  color-scheme: light;
  font-family: "Yu Gothic UI", "Meiryo", sans-serif;
  color: #1d2924;
  background: #f3f5f4;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f3f5f4; }
button, input { font: inherit; }

.app-header { background: #17352b; color: #fff; border-bottom: 4px solid #d7a629; }
.header-inner { max-width: 1180px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.organization { margin: 0 0 3px; font-size: 12px; font-weight: 700; color: #c6d9d1; }
h1 { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: 0; }
.privacy-note { margin: 0; padding-left: 18px; position: relative; color: #dce8e3; font-size: 13px; white-space: nowrap; }
.privacy-note::before { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border: 2px solid #d7a629; border-radius: 50%; }

main { max-width: 1180px; margin: 0 auto; padding: 34px 24px 48px; }
.input-section, .result-section { background: #fff; border: 1px solid #d9dfdc; border-radius: 6px; }
.input-section { padding: 26px; }
.result-section { margin-top: 24px; overflow: hidden; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.section-heading h2 { margin: 1px 0 0; font-size: 20px; line-height: 1.4; }
.section-heading > p { margin: 0; color: #5f6d67; font-size: 13px; }
.step-label { margin: 0; color: #1f6b50; font-size: 11px; font-weight: 800; }

.file-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.file-field { min-height: 148px; padding: 18px 16px; border: 1px dashed #91a59c; border-radius: 6px; background: #fafcfb; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: border-color 120ms ease, background 120ms ease; }
.file-field:hover, .file-field:focus-within { border-color: #1f6b50; background: #f3faf7; }
.file-field.has-file { border-style: solid; border-color: #1f6b50; background: #f0f8f4; }
.file-field input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-kind { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 800; }
.file-action { display: inline-block; padding: 7px 10px; border: 1px solid #527166; border-radius: 4px; background: #fff; color: #24473a; font-size: 12px; font-weight: 700; }
.file-name { display: block; width: 100%; margin-top: 11px; color: #64716c; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.has-file .file-name { color: #1f6b50; font-weight: 700; }

.form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.primary-button, .download-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 4px; font-weight: 800; text-decoration: none; cursor: pointer; }
.primary-button { min-width: 180px; border: 0; padding: 0 22px; background: #1f6b50; color: #fff; }
.primary-button:hover { background: #17563f; }
.primary-button:disabled { cursor: wait; opacity: .65; }
.message { margin-top: 16px; padding: 12px 14px; border-radius: 4px; font-size: 13px; }
.error { color: #8a201b; background: #fff0ef; border: 1px solid #eab7b3; }

.result-heading { margin: 0; padding: 24px 26px 18px; }
.period-label { padding: 5px 9px; border: 1px solid #aab9b3; border-radius: 4px; color: #254a3c !important; font-weight: 700; }
.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e0e5e2; border-bottom: 1px solid #e0e5e2; background: #f8faf9; }
.status-strip > div { min-height: 82px; padding: 17px 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #e0e5e2; }
.status-strip > div:last-child { border-right: 0; }
.status-strip span { color: #68756f; font-size: 12px; }
.status-strip strong { margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
.ok-text { color: #1f6b50; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #edf2ef; color: #31423b; font-size: 12px; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid #e0e5e2; white-space: nowrap; }
td:not(:first-child), th:not(:first-child) { text-align: right; }
.summary-table tbody tr:last-child td { border-bottom: 0; }
.review-value { color: #8a5c00; font-weight: 800; background: #fff8dd; }

.review-section { border-top: 8px solid #f3f5f4; }
.review-heading { padding: 21px 26px 15px; display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.review-heading h3 { margin: 0; font-size: 16px; }
.review-heading p { margin: 4px 0 0; color: #68756f; font-size: 12px; }
.review-badge { min-width: 48px; padding: 5px 8px; border-radius: 4px; color: #7a4e00; background: #fff1c2; font-size: 12px; font-weight: 800; text-align: center; }
.review-table th, .review-table td { vertical-align: top; }
.review-table td:nth-child(2), .review-table th:nth-child(2), .review-table td:nth-child(5), .review-table th:nth-child(5) { text-align: right; }
.review-table td:nth-child(4), .review-table td:nth-child(6) { min-width: 260px; white-space: normal; }
.empty-state { margin: 0 26px 22px; padding: 18px; border: 1px solid #dbe3df; border-radius: 4px; color: #66736d; background: #fafcfb; text-align: center; font-size: 13px; }

.download-band { padding: 20px 26px; border-top: 8px solid #f3f5f4; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.download-band div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.download-band strong { overflow-wrap: anywhere; }
.download-band span { color: #67736e; font-size: 12px; }
.download-button { flex: 0 0 auto; min-width: 220px; padding: 0 18px; background: #17352b; color: #fff; }
.download-button:hover { background: #0f271f; }
.download-button span { color: #fff; font-size: 18px; }

footer { padding: 22px; color: #65726c; text-align: center; font-size: 11px; }

@media (max-width: 860px) {
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-band { align-items: stretch; flex-direction: column; }
  .download-button { width: 100%; }
}

@media (max-width: 560px) {
  .header-inner { padding: 17px 16px; align-items: flex-start; }
  h1 { font-size: 19px; }
  .privacy-note { display: none; }
  main { padding: 20px 12px 34px; }
  .input-section { padding: 18px 14px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .file-grid { grid-template-columns: 1fr; }
  .file-field { min-height: 126px; }
  .form-actions, .primary-button { width: 100%; }
  .result-heading { padding: 20px 16px 14px; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > div { min-height: 68px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid #e0e5e2; }
  .status-strip > div:last-child { border-bottom: 0; }
  .review-heading { padding: 18px 16px 12px; }
  .empty-state { margin: 0 16px 18px; }
  .download-band { padding: 18px 16px; }
  th, td { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}