* { box-sizing: border-box; }
:root { color-scheme: light; font-family: "Approval Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #293e35; background: #f8f8f2; }
body { margin: 0; line-height: 1.6; letter-spacing: -.015em; }
a { color: #285d48; text-decoration: none; }
button,input,select { font: inherit; }
button,a,input,select { touch-action: manipulation; }
button { cursor: pointer; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid #8aae99; outline-offset: 2px; }
.mp-shell { width: min(100% - 32px, 450px); margin-inline: auto; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.mp-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce4d8; gap: 16px; }
.mp-brand { display: inline-flex; align-items: center; gap: 7px; color: #244a3b; font-size: 16px; font-weight: 690; }
.mp-help,.mp-link-button { color: #517358; font-size: 12px; font-weight: 570; }
.mp-link-button { background: none; border: 0; min-height: 40px; padding: 8px 1px; display: inline-flex; align-items: center; }
.mp-heading { margin: 29px 0 17px; }
.mp-heading h1 { font-size: clamp(20px,5.2vw,25px); line-height: 1.42; letter-spacing: -.045em; margin: 0; font-weight: 710; }
.mp-heading p,.mp-card p,.mp-options p { font-size: 13px; color: #61736a; line-height: 1.75; margin: 5px 0 12px; }
.mp-card { border: 1px solid #d9e3d6; border-radius: 12px; background: #fffefa; padding: 20px 17px; display: grid; gap: 14px; }
.mp-card h2 { font-size: 16px; margin: 0; }
.mp-field { display: grid; gap: 6px; min-width: 0; color: #456450; font-size: 12px; font-weight: 610; }
.mp-field input,.mp-field select { width: 100%; min-width: 0; padding: 10px 11px; font-size: 16px; color: #263f30; background: #fff; border: 1px solid #cbdac6; border-radius: 7px; min-height: 45px; }
.mp-field input[readonly] { color: #637a5f; background: #f6f8ef; }
.mp-button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 15px; min-height: 45px; font-weight: 640; font-size: 14px; border-radius: 8px; border: 1px solid #155e56; background: #155e56; color: #fff; }
.mp-button.secondary { background: #fff; border-color: #b9cbb8; color: #345b42; }
button:disabled { opacity: .55; cursor: default; }
.mp-form { display: grid; gap: 12px; }
.mp-optional summary,.mp-options summary { cursor: pointer; color: #526f55; min-height: 42px; padding: 10px 0; font-size: 12px; }
.mp-options { margin-top: 22px; }
.mp-options details { border-top: 1px solid #dce5d6; padding: 2px 0; }
.mp-options details[open] { padding-bottom: 12px; }
.mp-options details > .mp-form { padding-block: 3px 8px; }
.mp-options p { font-size: 12px; margin-block: 5px; }
.mp-followup { display: inline-flex; padding: 11px 0; font-size: 12px; }
.mp-demo,.mp-tag { background: #e8f0e3; color: #456b4b; border-radius: 5px; font-size: 11px; padding: 5px 8px; }
.mp-tag { justify-self: start; }
.mp-demo { margin: 0 0 12px; }
.mp-purposes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 0; margin: 0; padding: 0; gap: 7px; }
.mp-purposes legend { font-size: 12px; color: #456450; font-weight: 610; margin-bottom: 7px; }
.mp-purposes label { position: relative; }
.mp-purposes input { width: 1px; height: 1px; position: absolute; opacity: 0; }
.mp-purposes span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 4px; border: 1px solid #d2dfcc; background: #fff; color: #5e725e; border-radius: 7px; font-size: 14px; cursor: pointer; }
.mp-purposes input:checked + span { border-color: #638e6c; background: #e9f1e1; color: #2b6445; font-weight: 640; }
.mp-purposes input:focus-visible + span { outline: 3px solid #9bbb9e; outline-offset: 2px; }
.mp-card .mp-hint { font-size: 12px; margin: 0; }
.mp-hint:empty,.mp-error:empty,[hidden] { display: none !important; }
.mp-card .mp-error,.mp-error { color: #8c4d35; background: #fff2e7; padding: 10px 11px; border-radius: 6px; font-size: 12px; margin: 0; }
.mp-ticket { text-align: center; gap: 7px; }
.mp-ticket .mp-tag,.mp-ticket .mp-kind { justify-self: center; }
.mp-ticket > strong { font-size: clamp(36px,11vw,56px); font-weight: 720; color: #155e46; line-height: 1.28; letter-spacing: -.045em; }
.mp-kind { color: #57714e; font-size: 12px; margin-top: 6px; }
.mp-receipt-stats { display: flex; justify-content: center; gap: 18px; border-block: 1px solid #e3eadc; margin-block: 8px 11px; padding: 11px 0; font-size: 12px; color: #647b62; }
.mp-station { text-align: center; justify-items: center; }
.mp-station #station-qr { width: min(100%,280px); min-height: 90px; background: #fff; padding: 0; }
.mp-station #station-qr svg { display: block; width: 100%; height: auto; }
.mp-station > span,.mp-station > small { color: #617a5e; font-size: 12px; }
.mp-station > strong { font-size: 32px; color: #214c39; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.mp-station p { font-size: 12px; margin-block: 2px; }
.mp-loading,#mobile-status { font-size: 13px; color: #586f60; line-height: 1.8; margin-top: 17px; }
#mobile-status:not(:empty) { background: #edf3e7; border-radius: 8px; padding: 11px 13px; }
.mp-skip { position: fixed; top: -80px; left: 12px; background: #155e56; color: white; padding: 10px 14px; }
.mp-skip:focus { top: 10px; }