:root {
  --paper: #FBFAF6;
  --ink: #1E2A44;
  --ink-deep: #141D31;
  --yamabuki: #F5B517;
  --yamabuki-deep: #D99A00;
  --yamabuki-text: #8F6400;
  --line: #E5E1D8;
  --white: #FFFFFF;
  --muted: #6D7380;
  --sans: "Zen Kaku Gothic New", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.7; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--yamabuki-deep); outline-offset: 3px; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { min-height: 76px; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: baseline; gap: 16px; text-decoration: none; }
.brand-mark, .footer-brand { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.brand-product { padding-left: 16px; border-left: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.button { min-height: 52px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; border: 1px solid transparent; text-decoration: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--yamabuki); color: var(--ink-deep); }
.button-primary:hover { background: var(--yamabuki-deep); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--ink-deep); }
.button-small { min-height: 40px; padding: 8px 17px; font-size: 12px; }
.eyebrow, .panel-kicker { margin: 0; color: var(--yamabuki-text); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .11em; line-height: 1.4; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.045em; }
h1 { margin-bottom: 26px; font-size: clamp(42px, 6.3vw, 82px); font-weight: 900; }
h1 span, h2 span { color: var(--yamabuki-text); }
h2 { margin-bottom: 22px; font-size: clamp(34px, 4.5vw, 56px); font-weight: 900; }
.hero { min-height: 660px; padding-top: 116px; padding-bottom: 116px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); align-items: center; gap: 90px; }
.hero-lead { margin-bottom: 38px; color: var(--muted); font-size: 17px; }
.hero-sign { min-height: 360px; padding: 29px 32px; position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--ink); box-shadow: 14px 14px 0 var(--yamabuki); transform: rotate(2.2deg); }
.sign-topline, .sign-meta { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.sign-lines { width: 70%; height: 1px; margin-top: 33px; background: var(--ink); opacity: .4; }
.sign-label { margin: 34px 0 18px; font-size: 31px; font-weight: 900; letter-spacing: .12em; }
.sign-total { width: 78%; margin-top: 38px; padding-top: 17px; border-top: 1px solid var(--line); }
.sign-total small { display: block; color: var(--muted); font-size: 10px; }
.sign-total strong { font-family: var(--mono); font-size: 30px; letter-spacing: -.06em; }
.sign-stamp { padding: 8px 10px; position: absolute; right: 32px; bottom: 30px; border: 1px solid var(--yamabuki-deep); color: var(--yamabuki-text); font-family: var(--mono); font-size: 9px; font-weight: 500; line-height: 1.25; transform: rotate(-7deg); }
.reason-section { padding: 114px 0 120px; background: var(--ink); color: var(--paper); }
.reason-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: 60px; }
.reason-section .eyebrow { color: var(--yamabuki); }
.section-lead { max-width: 620px; color: #C6CCD8; font-size: 17px; }
.proof-note { margin-top: 40px; display: flex; align-items: center; gap: 11px; color: #E6E8ED; font-family: var(--mono); font-size: 11px; }
.proof-dot { width: 9px; height: 9px; display: inline-block; background: var(--yamabuki); border-radius: 50%; }
.steps-section { padding-top: 122px; padding-bottom: 126px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 53px; }
.section-heading h2 { margin-bottom: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { min-height: 260px; padding: 26px; border-top: 1px solid var(--ink); background: var(--white); }
.step-card.step-highlight { background: var(--yamabuki); border-color: var(--yamabuki); }
.step-number { font-family: var(--mono); font-size: 12px; }
.step-card h3 { margin: 58px 0 10px; font-size: 27px; font-weight: 900; }
.step-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.step-highlight p { color: var(--ink); }
.faq-section { padding-bottom: 114px; }
.faq-section .section-heading { margin-bottom: 34px; }
.faq-section .section-heading h2 { font-size: clamp(32px, 4vw, 48px); }
.faq-list { border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: 22px 42px 22px 0; position: relative; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; top: 19px; right: 5px; color: var(--yamabuki-text); font-family: var(--mono); font-size: 20px; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-item p { max-width: 780px; margin: -3px 42px 22px 0; color: var(--muted); font-size: 13px; }
.final-cta { padding: 82px 0 114px; display: flex; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); gap: 30px; }
.final-cta h2 { margin-bottom: 0; }
.site-footer { padding: 48px 0 22px; background: var(--ink-deep); color: var(--paper); }
.footer-main { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.footer-main p { margin-bottom: 0; font-size: 13px; }
.footer-brand { margin-bottom: 10px !important; color: var(--yamabuki); }
.footer-link { color: var(--paper); font-size: 13px; text-decoration: none; }
.footer-link:hover { color: var(--yamabuki); }
.footer-bottom { margin-top: 58px; padding-top: 16px; display: flex; justify-content: space-between; color: #8E97A8; border-top: 1px solid #354057; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; }

/* Maker */
.app-header { background: var(--white); }
.back-link { font-size: 12px; text-decoration: none; }
.back-link:hover { color: var(--yamabuki-text); }
.maker-main { padding-top: 70px; padding-bottom: 100px; }
.maker-intro { margin-bottom: 62px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.maker-intro h1 { margin: 14px 0 0; font-size: clamp(38px, 5vw, 64px); }
.maker-intro > p:last-child { max-width: 290px; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.workspace { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); align-items: start; gap: 36px; }
.form-panel, .preview-panel { min-width: 0; }
.form-panel { padding: 27px 28px 30px; background: var(--white); border: 1px solid var(--line); }
.panel-heading { margin-bottom: 28px; }
.panel-heading h2 { margin: 7px 0 0; font-size: 24px; letter-spacing: -.04em; }
fieldset { margin: 0; padding: 0 0 27px; border: 0; }
fieldset + fieldset { padding-top: 25px; border-top: 1px solid var(--line); }
legend { margin-bottom: 12px; padding: 0; font-size: 13px; font-weight: 700; }
legend em, .field em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 400; }
.choice-row { display: flex; gap: 7px; }
.choice-card { flex: 1; position: relative; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; }
.choice-card span { min-height: 43px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--line); font-size: 12px; transition: border-color .2s ease, background-color .2s ease; }
.choice-card input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.choice-card input:focus-visible + span { outline: 3px solid var(--yamabuki-deep); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 11px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > span { font-size: 11px; font-weight: 500; }
.field b { margin-left: 3px; color: var(--yamabuki-text); font-size: 9px; font-weight: 500; }
.field input, .field textarea, .item-field input { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font-size: 13px; }
.field input::placeholder, .field textarea::placeholder, .item-field input::placeholder { color: #666E80; }
.field input:focus, .field textarea:focus, .item-field input:focus { border-color: var(--ink); outline: none; }
.field textarea { resize: vertical; line-height: 1.6; }
.items-list { display: grid; gap: 10px; }
.item-row { padding: 11px; position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) 65px 95px 24px; gap: 7px; background: var(--paper); border: 1px solid var(--line); }
.item-field { display: flex; flex-direction: column; gap: 4px; }
.item-field label { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.item-field input { padding: 7px 8px; background: var(--white); font-size: 12px; }
.remove-item { align-self: end; width: 24px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
.remove-item:hover { color: var(--ink); }
.add-item { margin-top: 10px; padding: 7px 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.add-item:hover { color: var(--yamabuki-text); }
.preview-heading { padding-left: 2px; }
.invoice-preview { width: 100%; min-height: 710px; padding: 42px 45px 36px; background: var(--white); color: #20242D; box-shadow: 0 8px 25px rgba(30, 42, 68, .08); }
.invoice-header { display: flex; justify-content: space-between; gap: 20px; }
.invoice-eyebrow { margin-bottom: 8px; color: #646C7A; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.invoice-header h3 { margin: 0; color: #17233C; font-size: 36px; font-weight: 900; }
.invoice-number-block { padding-top: 6px; display: flex; flex-direction: column; align-items: end; gap: 2px; }
.invoice-number-block span, .invoice-meta span, .issuer-block > span, .notes-block > span { color: #646C7A; font-size: 10px; }
.invoice-number-block strong { font-family: var(--mono); font-size: 10px; font-weight: 500; }
.invoice-rule { height: 3px; margin: 25px 0 26px; background: var(--yamabuki); }
.invoice-meta { display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-bottom: 33px; }
.invoice-meta > div, .issuer-block { display: flex; flex-direction: column; gap: 2px; }
.recipient-block strong { font-size: 17px; }
.date-block { text-align: right; }
.date-block strong { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.issuer-block { margin-bottom: 30px; padding: 14px 16px; border: 1px solid #E7E9ED; }
.issuer-block strong { font-size: 13px; }
.issuer-block p { margin: 0; color: #646C7A; font-size: 10px; white-space: pre-line; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.invoice-table th { padding: 9px 8px; background: #F2F3F5; color: #606878; font-size: 9px; font-weight: 500; text-align: left; }
.invoice-table th:not(:first-child), .invoice-table td:not(:first-child) { text-align: right; }
.invoice-table td { padding: 12px 8px; border-bottom: 1px solid #E7E9ED; }
.invoice-table td:nth-child(2) { font-family: var(--mono); }
.invoice-summary { width: min(260px, 100%); margin: 22px 0 0 auto; }
.invoice-summary > div { padding: 6px 0; display: flex; justify-content: space-between; font-size: 11px; }
.invoice-summary strong { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.invoice-summary .grand-total { margin-top: 7px; padding: 12px 0; border-top: 2px solid #20242D; border-bottom: 2px solid #20242D; font-weight: 700; }
.invoice-summary .grand-total strong { font-size: 17px; }
.notes-block { min-height: 65px; margin-top: 33px; padding-top: 12px; border-top: 1px solid #E7E9ED; }
.notes-block p { margin: 4px 0 0; color: #606878; font-size: 10px; white-space: pre-line; }
.invoice-footer { margin-top: 37px; color: #9AA0AB; font-family: var(--mono); font-size: 8px; text-align: center; }
.preview-actions { margin-top: 21px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.preview-actions .button { flex-shrink: 0; }
.pdf-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.pdf-note strong { color: var(--ink); font-size: 11px; }
.form-error { margin: 12px 0 0; color: #B3261E; font-size: 13px; font-weight: 700; }
.compact-footer { padding-top: 24px; }
.compact-footer .footer-bottom { margin-top: 0; }
.sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 55px; padding-top: 80px; padding-bottom: 90px; }
  .hero-sign { width: min(100%, 510px); justify-self: center; }
  .reason-grid { grid-template-columns: 1fr; gap: 22px; }
  .section-heading { display: block; }
  .section-heading h2 { margin-top: 18px; }
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { grid-row: 1; }
  .form-panel { grid-row: 2; }
  .invoice-preview { min-height: 0; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 30px, 1160px); }
  .site-header { min-height: 64px; padding: 13px 15px; }
  .brand { gap: 8px; }
  .brand-mark { font-size: 11px; }
  .brand-product { padding-left: 8px; font-size: 10px; }
  .button-small { padding: 7px 11px; font-size: 10px; }
  .back-link { font-size: 10px; }
  .hero { min-height: auto; padding-top: 68px; padding-bottom: 76px; }
  h1 { font-size: clamp(39px, 12vw, 58px); }
  .hero-lead { font-size: 15px; }
  .hero-sign { min-height: 280px; padding: 23px 22px; box-shadow: 8px 8px 0 var(--yamabuki); }
  .sign-label { margin-top: 27px; font-size: 27px; }
  .sign-total { margin-top: 27px; }
  .sign-total strong { font-size: 24px; }
  .sign-stamp { right: 22px; bottom: 22px; }
  .reason-section { padding: 75px 0 80px; }
  h2 { font-size: 38px; }
  .section-lead { font-size: 15px; }
  .steps-section { padding-top: 80px; padding-bottom: 84px; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; }
  .step-card { min-height: 0; padding: 21px; }
  .step-card h3 { margin-top: 32px; }
  .faq-section { padding-bottom: 78px; }
  .faq-section .section-heading { margin-bottom: 26px; }
  .faq-item summary { padding: 18px 36px 18px 0; font-size: 14px; }
  .faq-item summary::after { top: 17px; right: 2px; }
  .faq-item p { margin: -2px 36px 18px 0; font-size: 13px; }
  .final-cta { padding: 61px 0 78px; display: block; }
  .final-cta .button { margin-top: 28px; }
  .footer-main { display: block; }
  .footer-link { margin-top: 29px; display: inline-block; }
  .footer-bottom { margin-top: 39px; }
  .maker-main { padding-top: 49px; padding-bottom: 70px; }
  .maker-intro { display: block; margin-bottom: 37px; }
  .maker-intro h1 { margin-top: 12px; font-size: 39px; }
  .maker-intro > p:last-child { margin-top: 20px; }
  .form-panel { padding: 23px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .item-row { grid-template-columns: minmax(0, 1fr) 57px 82px 20px; gap: 4px; padding: 8px; }
  .item-field input { padding: 7px 5px; font-size: 11px; }
  .invoice-preview { padding: 28px 19px 25px; }
  .invoice-header h3 { font-size: 29px; }
  .invoice-number-block strong { font-size: 8px; }
  .invoice-meta { margin-bottom: 25px; }
  .recipient-block strong { font-size: 14px; }
  .invoice-table { font-size: 10px; }
  .invoice-table th, .invoice-table td { padding-left: 4px; padding-right: 4px; }
  .preview-actions { display: block; }
  .preview-actions .button { width: 100%; }
  .pdf-note { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .button:hover { transform: none; }
}

@page { size: A4; margin: 12mm; }
@media print {
  html, body { width: 100%; background: var(--white); }
  .site-header, .maker-intro, .form-panel, .preview-heading, .preview-actions, .compact-footer { display: none !important; }
  .maker-main, .container { width: 100%; max-width: none; margin: 0; padding: 0; }
  .workspace { display: block; }
  .preview-panel { display: block; }
  .invoice-preview { width: 100%; min-height: 0; padding: 0; box-shadow: none; }
  .invoice-footer { margin-top: 26px; }
}