@font-face { font-family: "Meiji Invoice Sans"; src: url("/fonts/meiji-invoice-sans-tc.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.invoice-body .site-shell { overflow: clip; }
.invoice-page { position: relative; container-type: inline-size; padding-bottom: min(7vw, 52.5px); color: #111; font-family: "Meiji Invoice Sans", sans-serif; font-weight: 500; background: #fff4d7; }
.invoice-page-header { position: relative; height: 22.6667cqw; z-index: 20; }
.invoice-page-header .hero-nav { top: 3.5796cqw; }
.invoice-intro { position: relative; height: 55.7333cqw; }
.invoice-intro img { position: absolute; height: auto; }
.invoice-subtitle-art { top: 5.0667cqw; left: 25.6%; width: 47.8667%; }
.invoice-title-art { top: 13.3333cqw; left: 15.4667%; width: 68.9333%; }
.invoice-cookie-bamboo { top: 21.8667cqw; left: 2.6667%; width: 6.1333%; }
.invoice-cookie-mushroom { top: 4.9333cqw; left: 90.9333%; width: 6.2667%; }
.invoice-intro-copy { position: absolute; top: 32.8cqw; left: 3%; width: 94%; margin: 0; text-align: center; font-size: 4.2667cqw; line-height: 5.6cqw; letter-spacing: .05cqw; }
.invoice-party-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.0667cqw; width: 87.2%; margin: 1.6cqw auto 4.2667cqw; padding: 2.1333cqw 2.4cqw; border-radius: 2cqw; background: #ede0be; }
.invoice-party-tab { min-width: 0; padding: 0; height: 10.6667cqw; border-radius: .8cqw; background: transparent; color: #532400; cursor: pointer; font-size: 4.8cqw; font-weight: 750; line-height: 1; letter-spacing: .384cqw; white-space: nowrap; }
.invoice-party-tab[aria-selected="true"] { color: #fff; background: #532400; }
.invoice-page button:focus-visible, .invoice-page select:focus-visible, .invoice-page input:focus-visible, .invoice-page .invoice-file-label:focus-within { outline: 3px solid #1786bd; outline-offset: 3px; }
.invoice-campaign-card { width: 87.2%; margin: 0 auto; padding: 7.4667cqw 6.4cqw 5.4667cqw; border-radius: 2cqw; background-image: url("/img/invoice/0910/card-electronic.png"); background-size: 100% 100%; }
.invoice-campaign-card[data-invoice-mode="carrier"] { background-image: url("/img/invoice/0910/card-carrier.png"); }
.invoice-campaign-card[data-invoice-mode="traditional"] { background-image: url("/img/invoice/0910/card-traditional.png"); }
.invoice-entry-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.2667cqw; row-gap: 3.3333cqw; }
.invoice-required-note { position: absolute; top: .6cqw; right: 0; color: #ed0000; font-size: 3.2cqw; letter-spacing: .128cqw; }
.invoice-field { display: grid; grid-column: 1 / -1; gap: 1.4667cqw; min-width: 0; }
.invoice-field-label { display: block; font-size: 4.2667cqw; font-weight: 700; line-height: 5.6cqw; letter-spacing: .17cqw; }
.invoice-field-label em { color: #ed0000; font-style: normal; }
.invoice-field input, .invoice-field select { display: block; width: 100%; min-width: 0; height: 10.6667cqw; padding: 0 3.8667cqw; border: .5333cqw solid #4b0000; border-radius: 1.6cqw; background: white; color: #4b0000; font-size: 4.2667cqw; font-weight: 500; letter-spacing: .1cqw; line-height: normal; box-shadow: none; }
.invoice-field input::placeholder { color: #c9c7c7; opacity: 1; }
.invoice-field select { appearance: none; padding-right: 8cqw; background: #fff url("/img/invoice/0910/select-arrow.png") no-repeat right 1.6cqw center / 6.4cqw; }
.invoice-field select:invalid { color: #c9c7c7; }
.invoice-field select option { color: #4b0000; }
.invoice-field .is-invalid, .invoice-consent-field input.is-invalid, .invoice-upload-box.is-invalid { border-color: #d60000; }
.invoice-name-field { order: 1; }
.invoice-gender-field { order: 2; }
.invoice-age-field { order: 5; }
.invoice-phone-field { order: 6; }
.invoice-email-field { order: 7; }
.invoice-number-field { order: 8; }
.invoice-channel-field { order: 9; }
.invoice-code-field { order: 10; }
.invoice-date-field { order: 11; grid-column: 1; }
.invoice-random-field, .invoice-barcode-field { order: 12; grid-column: 2; }
.invoice-upload-field { order: 13; }
.invoice-raffle-field { order: 14; }
.invoice-campaign-card[data-invoice-mode="invoice"] [data-modes]:not([data-modes~="invoice"]), .invoice-campaign-card[data-invoice-mode="carrier"] [data-modes]:not([data-modes~="carrier"]), .invoice-campaign-card[data-invoice-mode="traditional"] [data-modes]:not([data-modes~="traditional"]) { display: none; }
.invoice-campaign-card[data-invoice-mode="traditional"] .invoice-date-field { order: 8; grid-column: 1 / -1; }
.invoice-password-wrap, .invoice-date-wrap { position: relative; display: block; min-width: 0; }
.invoice-password-wrap input { padding-right: 9cqw; }
.invoice-password-toggle { position: absolute; top: 0; right: 1.3333cqw; width: 6.4cqw; height: 100%; padding: 0; background: transparent url("/img/invoice/0910/eye.png") no-repeat center / contain; cursor: pointer; }
.invoice-password-toggle[aria-pressed="true"]::after { content: ""; position: absolute; width: 65%; height: .35cqw; background: #4b0000; top: 50%; left: 17%; transform: rotate(-45deg); }
.invoice-date-wrap input { position: relative; appearance: none; -webkit-appearance: none; background: #fff url("/img/invoice/0910/calendar.png") no-repeat right 1.6cqw center / 6.4cqw; padding: calc((10.6667cqw - 1.0666cqw - 1.5em) / 2) 7cqw calc((10.6667cqw - 1.0666cqw - 1.5em) / 2) 2.6667cqw; font-size: 3.65cqw; line-height: 1.5; text-align: left; }
/* Give the native mobile date value a full line box inside the centered padding. */
.invoice-date-wrap input::-webkit-date-and-time-value { min-width: 0; height: 1.5em; min-height: 1.5em; margin: 0; padding: 0; line-height: 1.5; text-align: left; }
.invoice-date-wrap input::-webkit-datetime-edit { display: block; margin: 0; padding: 0; line-height: 1.5; }
.invoice-date-wrap input::-webkit-datetime-edit-fields-wrapper,
.invoice-date-wrap input::-webkit-datetime-edit-year-field,
.invoice-date-wrap input::-webkit-datetime-edit-month-field,
.invoice-date-wrap input::-webkit-datetime-edit-day-field,
.invoice-date-wrap input::-webkit-datetime-edit-text { padding: 0; }
.invoice-date-wrap input:invalid { color: transparent; }
.invoice-date-wrap input:invalid::-webkit-datetime-edit { opacity: 0; }
.invoice-date-wrap input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.invoice-date-placeholder { position: absolute; left: 4.2667cqw; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 4.2667cqw; color: #c9c7c7; }
.invoice-date-wrap input:valid + .invoice-date-placeholder { display: none; }
.invoice-consent-field { order: 14; grid-column: 1 / -1; display: grid; grid-template-columns: 6.4cqw 1fr; gap: 2.2667cqw; margin-top: 2.2667cqw; font-size: 3.7333cqw; letter-spacing: .1cqw; line-height: 5.0667cqw; }
.invoice-consent-field input { appearance: none; width: 6.4cqw; height: 6.4cqw; margin: .4cqw 0 0; border: .5333cqw solid #4b0000; border-radius: .8cqw; background: #fff; cursor: pointer; }
.invoice-consent-field input:checked::after { content: ""; display: block; width: 3.9cqw; height: 2.4cqw; border: solid #4b0000; border-width: 0 0 .5cqw .5cqw; transform: translate(.6cqw, .7cqw) rotate(-45deg); }
.invoice-consent-highlight { color: #008add; text-decoration: underline; text-underline-offset: .5cqw; }
.invoice-code-field > .invoice-field-label { display: flex; align-items: center; }
.invoice-verification-help { margin-left: auto; font-size: max(12px, .78em); font-weight: 500; white-space: nowrap; }
.invoice-submit { order: 15; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 3.2cqw; height: 15.2cqw; margin-top: 1.7333cqw; border: 1.0667cqw solid #744400; border-radius: 9cqw; background: #532400; color: #fff; font-size: 5.3333cqw; font-weight: 700; letter-spacing: .4267cqw; cursor: pointer; }
.invoice-submit span { font-family: sans-serif; font-size: 9.6cqw; font-weight: 400; line-height: 1; margin-top: -1cqw; }
.invoice-submit:disabled { opacity: .4; cursor: not-allowed; }
.invoice-form-status { order: 16; grid-column: 1 / -1; margin: 0; font-size: 3.2cqw; line-height: 1.6; overflow-wrap: anywhere; }
.invoice-form-status:empty { display: none; }
.invoice-form-status.is-success { color: #145600; font-weight: 700; }
.invoice-form-status.is-error { color: #b60000; font-weight: 700; }
.invoice-delivery-notice { order: 17; grid-column: 1 / -1; margin: 1.2cqw 0 0; font-size: 3.2cqw; line-height: 4.2667cqw; letter-spacing: .128cqw; }
.invoice-upload-box { position: relative; display: grid; place-items: center; height: 34.2667cqw; border: .5333cqw dashed #4b0000; border-radius: 1.6cqw; background: white; }
.invoice-upload-open { width: 100%; height: 100%; padding: 3.2cqw 1cqw; background: none; color: #4b0000; cursor: pointer; }
.invoice-upload-open > span { display: flex; align-items: center; justify-content: center; gap: 1cqw; font-size: 4.2667cqw; letter-spacing: .17cqw; }
.invoice-camera-icon { width: 6.4cqw; height: 6.4cqw; }
.invoice-upload-open small { display: block; margin-top: 3.2cqw; font-size: 3.2cqw; line-height: 4.2667cqw; letter-spacing: .128cqw; }
.invoice-upload-preview { position: relative; height: 28cqw; max-width: 90%; }
.invoice-photo-enlarge { padding: 0; background: none; height: 100%; cursor: zoom-in; }
.invoice-photo-enlarge img { width: 100%; height: 100%; max-width: 54cqw; object-fit: contain; }
.invoice-photo-remove { position: absolute; top: -3.2cqw; right: -3.2cqw; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #4b0000; cursor: pointer; }
.invoice-upload-error { margin: 0; color: #b60000; font-size: 3.2cqw; }
.invoice-photo-dialog { width: min(100%, 750px); max-width: 100%; max-height: 95dvh; padding: 0; border: 0; border-radius: 2cqw; background: #fff4d7; color: #111; }
.invoice-photo-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.invoice-dialog-close { position: absolute; z-index: 3; top: max(8px, 1.6cqw); right: max(8px, 1.6cqw); display: grid; place-items: center; width: clamp(36px, 8cqw, 60px); height: clamp(36px, 8cqw, 60px); padding: 0; border: 0; border-radius: 50%; background: #532400; color: white; cursor: pointer; }
.invoice-dialog-close::before, .invoice-dialog-close::after,
.invoice-photo-remove::before, .invoice-photo-remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 55%; height: max(2px, .6cqw); border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.invoice-dialog-close::after, .invoice-photo-remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
.invoice-photo-guide { padding: 8cqw 4cqw 4cqw; text-align: center; }
.invoice-photo-guide h2 { font-size: 4.2667cqw; font-weight: 500; line-height: 5.6cqw; margin: 0 0 3.2cqw; }
.invoice-photo-example { width: 69.7333cqw; max-width: 100%; height: auto; margin: auto; }
.invoice-photo-actions { display: flex; justify-content: center; gap: 2cqw; margin: 4cqw auto 2cqw; }
.invoice-photo-actions button, .invoice-file-label { position: relative; display: block; padding: 2cqw 4cqw; background: #532400; border-radius: 1cqw; color: white; font-size: 3.7333cqw; cursor: pointer; }
.invoice-file-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.invoice-photo-hint, .invoice-page #invoiceCameraStatus { margin: 1cqw 0; font-size: 2.9333cqw; line-height: 1.5; }
.invoice-page #invoiceCameraStatus { color: #b60000; }
.invoice-camera-stage { position: relative; height: min(133.3333cqw, 72dvh); overflow: hidden; background: #111; }
.invoice-camera-stage video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.invoice-photo-dialog[open].is-camera-active { display: flex; flex-direction: column; height: 95dvh; overflow: hidden; }
.invoice-photo-dialog.is-camera-active .invoice-camera-stage { flex: 1 1 0; min-height: 0; height: auto; }
.invoice-photo-dialog.is-camera-active .invoice-photo-guide { flex: 0 0 auto; padding: min(5.8667cqw, 24px) min(4cqw, 20px) min(4cqw, 18px); border-radius: min(2cqw, 12px) min(2cqw, 12px) 0 0; background: #fff4d7; }
.invoice-photo-dialog.is-camera-active .invoice-photo-guide h2 { margin-bottom: min(2cqw, 10px); font-size: clamp(12px, 4.2667cqw, 22px); line-height: 1.4; }
.invoice-photo-dialog.is-camera-active .invoice-photo-example { width: 69.7333cqw; height: auto; max-width: 100%; max-height: 22dvh; object-fit: contain; }
.invoice-photo-dialog.is-camera-active .invoice-photo-actions,
.invoice-photo-dialog.is-camera-active .invoice-photo-hint { display: none; }
.invoice-photo-dialog.is-camera-active #invoiceCameraStatus { margin: 0; font-size: clamp(10px, 2.9333cqw, 14px); line-height: 1.4; }
.invoice-page #invoiceCameraStatus:empty { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .invoice-photo-dialog.is-camera-active .invoice-photo-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "example title" "example status"; column-gap: 12px; align-items: center; padding: 10px 16px; }
  .invoice-photo-dialog.is-camera-active .invoice-photo-example { grid-area: example; width: auto; height: clamp(64px, 25dvh, 116px); max-height: none; }
  .invoice-photo-dialog.is-camera-active .invoice-photo-guide h2 { grid-area: title; margin: 0; font-size: 14px; line-height: 1.3; }
  .invoice-photo-dialog.is-camera-active #invoiceCameraStatus { grid-area: status; font-size: 11px; }
}
.invoice-page #invoiceTakePhoto { position: absolute; bottom: 3cqw; left: 50%; transform: translateX(-50%); width: 16cqw; height: 16cqw; border: 1cqw double white; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1cqw #999; cursor: pointer; }
.invoice-full-photo { width: 100%; max-height: 70dvh; object-fit: contain; background: #222; }
.invoice-noscript { margin: 4cqw; font-size: 4cqw; }


.invoice-page .invoice-field-error { display: block; font-size: 3.2cqw; line-height: 1.5; letter-spacing: 0; }
.invoice-page .invoice-field-error { color: #b00020; }

body.invoice-result-open { overflow: hidden; }
.invoice-body .invoice-result-dialog { font-family: "Meiji Invoice Sans", sans-serif; box-sizing: border-box; width: min(87.2vw, 560px); max-height: 85dvh; margin: auto; padding: 64px 24px 28px; border: 0; border-radius: 16px; background: #fff4d7; color: #320000; text-align: center; }
.invoice-result-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.invoice-result-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 4px; background: transparent; border: 0; cursor: pointer; }
.invoice-result-close img { width: 100%; height: 100%; object-fit: contain; }
.invoice-result-dialog h2 { margin: 0 0 16px; font-size: clamp(24px, 6vw, 36px); }
.invoice-result-dialog p { margin: 0 0 24px; font-size: clamp(16px, 4vw, 22px); line-height: 1.6; overflow-wrap: anywhere; }
.invoice-result-confirm { min-width: 60%; padding: 12px 24px; border: 0; border-radius: 999px; background: #4b0000; color: white; font-size: 20px; cursor: pointer; }

.invoice-page .invoice-code-field > .invoice-field-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 2cqw; row-gap: .6cqw; }
.invoice-code-title { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.invoice-code-description { grid-column: 1 / -1; display: block; white-space: nowrap; font-size: 3.2cqw; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.invoice-code-field .invoice-verification-help { justify-self: end; margin-left: 0; }