:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif; font-size: 17px; color-scheme: light; --brand: #087f75; --brand-dark: #05655d; --brand-soft: #e7f5f3; --ink: #172b31; --muted: #65767b; --surface: #fff; --line: #d7e1e2; --danger: #b42318; --success: #087f5b; --background: #eef3f3; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--ink); background: var(--background); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.app-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px max(20px, calc((100vw - 1080px) / 2)); color: #fff; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); box-shadow: 0 3px 14px rgba(18,55,57,.16); }
.brand { display: flex; align-items: center; gap: 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; color: var(--brand); background: #fff; border-radius: 14px; font-size: 1.5rem; font-weight: 900; }
.brand h1, .brand p { margin: 0; }.brand h1 { font-size: 1.15rem; line-height: 1.2; letter-spacing: .03em; }.brand p { margin-top: 3px; font-size: .65rem; font-weight: 800; letter-spacing: .18em; opacity: .74; }
.header-actions, .network-status { display: flex; align-items: center; gap: 12px; }.network-status { gap: 7px; font-size: .8rem; font-weight: 700; }.status-dot { width: 9px; height: 9px; background: #75f1c6; border-radius: 50%; box-shadow: 0 0 0 3px rgba(117,241,198,.2); }.network-status.offline { opacity: .68; }.network-status.offline .status-dot { background: #d7dfe0; box-shadow: none; }
.app-main { width: min(100% - 32px, 920px); margin: 28px auto 46px; }
.ticket-card { padding: 34px; background: var(--surface); border: 1px solid rgba(205,219,220,.9); border-radius: 24px; box-shadow: 0 16px 44px rgba(31,64,67,.08); }
.intro { margin-bottom: 28px; text-align: center; }.intro h2 { margin: 8px 0 4px; font-size: clamp(1.45rem, 3vw, 2rem); }.intro p { margin: 0; color: var(--muted); }
.step-label { display: inline-block; color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.form-section { min-width: 0; margin: 0; padding: 0; border: 0; }.form-section + .form-section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }.form-section legend { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0; font-weight: 800; }
.step-number { display: inline-grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-weight: 900; }
.vehicle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.vehicle-option { position: relative; }.vehicle-option input { position: absolute; opacity: 0; }.vehicle-button { display: flex; min-height: 96px; flex-direction: column; align-items: center; justify-content: center; padding: 12px; background: #f7fafa; border: 2px solid var(--line); border-radius: 16px; transition: .15s; }.vehicle-button strong { font-size: 1.22rem; }.vehicle-button small { color: var(--muted); }.vehicle-option input:checked + .vehicle-button { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }.vehicle-option input:focus-visible + .vehicle-button { outline: 3px solid rgba(8,127,117,.25); outline-offset: 2px; }
.plate-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }.plate-section legend { grid-column: 1 / -1; }.plate-preview { display: flex; width: min(100%, 340px); aspect-ratio: 2 / 1; align-items: center; justify-content: center; justify-self: center; color: #14282a; background: #fff; border: 3px solid #263a3c; border-radius: 14px; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #b7c3c4; }.plate-preview strong { display: flex; align-items: baseline; gap: 22px; font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 900; }.plate-inputs { display: grid; grid-template-columns: .8fr 1.5fr; gap: 14px; align-content: center; }
label > span { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 750; }input, select { width: 100%; min-height: 54px; padding: 10px 14px; color: var(--ink); background: #fff; border: 1.5px solid #b9c8ca; border-radius: 12px; outline: none; }input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,127,117,.13); }label small { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; }
.confirmation { display: flex; align-items: center; gap: 13px; margin-top: 28px; padding: 15px 18px; background: #f4f8f8; border-radius: 14px; }.confirmation div small, .confirmation div strong { display: block; }.confirmation div small { color: var(--muted); }.confirmation div strong { font-size: 1.1rem; }
.form-message { min-height: 1.5em; margin: 16px 0 8px; color: var(--danger); font-size: .9rem; font-weight: 800; text-align: center; }.form-message.success { color: var(--brand); }
.primary-button, .secondary-button { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 14px; font-weight: 900; }.primary-button { color: #fff; background: var(--brand); border: 0; box-shadow: 0 8px 20px rgba(8,127,117,.2); }.primary-button:not(.start-button):hover { background: var(--brand-dark); }.primary-button:disabled { cursor: wait; opacity: .7; }.secondary-button { color: var(--ink); background: #fff; border: 1.5px solid var(--line); }.retry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.button-spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }.loading .button-spinner { display: block; }
.completion { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(12,33,35,.72); backdrop-filter: blur(3px); }.completion-card { width: min(100%, 560px); padding: 38px; text-align: center; background: #fff; border-radius: 24px; box-shadow: 0 25px 70px rgba(13,36,38,.3); }.completion-icon { display: block; width: 72px; height: 72px; margin: auto auto 18px; }.completion h2 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); }.completion p { color: var(--muted); }.completion .completion-guidance { margin: 18px 0; font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1.65; }.completion dl { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0; background: #f4f7f7; border-radius: 14px; }.completion dl div { padding: 13px; }.completion dt { color: var(--muted); font-size: .76rem; }.completion dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 900; }#nextCustomerButton:disabled { color: #5f6b6c; background: #dfe5e5; box-shadow: none; cursor: not-allowed; opacity: 1; }
.settings-dialog { width: min(92vw, 540px); max-height: 90vh; margin: auto; padding: 0; color: var(--ink); background: #fff; border: 0; border-radius: 22px; box-shadow: 0 25px 70px rgba(13,36,38,.3); }.settings-dialog:not([open]) { display: none; }.settings-dialog::backdrop { background: rgba(12,33,35,.55); }.settings-dialog form { padding: 28px; }.dialog-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 18px; }.dialog-heading h2 { margin: 5px 0 0; }.close-button { width: 40px; height: 40px; background: #eef3f3; border: 0; border-radius: 10px; font-size: 1.5rem; }.settings-dialog label { display: block; margin-top: 14px; }.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pin-dialog { width: min(92vw, 420px); }.pin-help { margin: 0; color: var(--muted); }.pin-input { font-size: 1.5rem; font-weight: 900; letter-spacing: .35em; text-align: center; }
.cache-controls { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }.cache-controls p { margin: 0 0 10px; color: var(--muted); font-size: .78rem; }.cache-clear-button { width: 100%; min-height: 48px; padding: 10px 16px; color: #8a3d13; background: #fff8f2; border: 1.5px solid #d7a27e; border-radius: 12px; font-weight: 800; }.cache-clear-button:hover, .cache-clear-button:focus-visible { color: #6d2d0c; background: #ffefe3; border-color: #b96f41; }.cache-clear-button:disabled { cursor: wait; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) { .app-header { min-height: 68px; padding: 9px 14px; }.brand-mark { width: 42px; height: 42px; }.brand h1 { font-size: 1rem; }.network-status { display: none; }.app-main { width: min(100% - 18px, 600px); margin: 12px auto 24px; }.ticket-card { padding: 22px 17px; border-radius: 19px; }.vehicle-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.vehicle-button { min-height: 78px; }.plate-section { display: block; }.plate-preview { margin: 0 auto 18px; }.plate-inputs { grid-template-columns: .8fr 1.5fr; }.confirmation { padding: 13px; }.completion-card { padding: 28px 20px; } }
@media (max-width: 400px) { .plate-inputs, .settings-grid, .retry-actions { grid-template-columns: 1fr; }.brand p { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; } }

/* 顧客用の画面遷移 */
.app-main { width: min(100% - 32px, 1080px); }
.ticket-card { min-height: 650px; }
.flow-screen { position: relative; min-width: 0; min-height: 520px; margin: 0; padding: 10px 22px 0; border: 0; animation: screen-in .2s ease-out; }
.flow-screen > legend { width: 100%; margin: 68px 0 8px; padding: 0; text-align: center; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 900; }
.screen-guide, .screen-heading p { margin: 0 0 28px; color: var(--muted); text-align: center; }
.screen-heading { padding-top: 68px; text-align: center; }
.screen-heading h2 { margin: 0 0 5px; font-size: clamp(1.45rem, 3vw, 2rem); }
.welcome-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; padding-bottom: 0; text-align: center; }
.welcome-screen[hidden] { display: none; }
.welcome-screen p { grid-row: 3; align-self: start; margin: 105px 0 0; color: var(--muted); font-size: 1.05rem; }
.start-action { position: relative; grid-row: 2; width: min(100%, 760px); }
.start-button { width: 100%; min-height: 190px; padding-inline: 110px; border-radius: 22px; font-size: clamp(2.5rem, 5vw, 3.25rem); }
/* 手の位置を設定 */
.tap-hand { position: absolute; z-index: 1; right: 20px; bottom: -80px; width: clamp(165px, 23%, 205px); height: auto; pointer-events: none; user-select: none; }

.flow-screen .vehicle-grid { margin: 38px auto 0; }
.flow-screen .vehicle-button { min-height: 148px; border-radius: 20px; }
.flow-screen .vehicle-button strong { font-size: 1.65rem; }
.flow-screen .vehicle-button small { margin-top: 5px; font-size: .9rem; }
.screen-actions { margin-top: 32px; }
.back-button { min-height: 58px; padding: 12px 25px; color: var(--muted); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; font-weight: 900; }
.back-button:hover { color: var(--ink); background: #f3f7f7; }
.screen-back { position: absolute; top: -16px; left: -12px; width: 154px; height: 58px; padding: 12px 20px; }
.next-button { min-height: 64px; font-size: 1.1rem; }

.kana-keyboard { display: flex; flex-direction: row-reverse; gap: 9px; max-width: 850px; margin: 10px auto 0; padding: 16px; overflow-x: auto; background: #f3f6f6; border: 1px solid var(--line); border-radius: 17px; }
.kana-column { display: flex; min-width: 66px; flex: 1 0 66px; flex-direction: column; gap: 9px; }
.kana-placeholder { min-height: 58px; visibility: hidden; }
.kana-keyboard button { min-height: 58px; padding: 8px; color: var(--ink); background: #fff; border: 1px solid #c4d4d4; border-radius: 13px; box-shadow: 0 3px 7px rgba(22,48,51,.07); font-size: 1.3rem; font-weight: 900; }
.kana-keyboard button:active { transform: translateY(1px); }
.kana-keyboard button.selected { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,127,117,.18); }

.plate-entry-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .72fr); gap: 34px; align-items: stretch; }
.plate-entry-main { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 14px 6px; }
.plate-entry-main .plate-preview { width: min(100%, 430px); margin: 0 auto 24px; }
.plate-entry-main .plate-inputs { grid-template-columns: .75fr 1.5fr; }
.plate-entry-main input[readonly] { color: var(--ink); background: #f7fafa; font-size: 1.3rem; font-weight: 900; letter-spacing: .08em; cursor: default; }
.number-keyboard { padding: 16px; background: #f3f6f6; border: 1px solid var(--line); border-radius: 17px; }
.number-keyboard > p { margin: 0 0 10px; color: var(--brand-dark); font-size: .85rem; font-weight: 900; text-align: center; }
.number-key-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.number-key-grid button { min-height: 64px; color: var(--ink); background: #fff; border: 1px solid #c4d4d4; border-radius: 13px; box-shadow: 0 3px 7px rgba(22,48,51,.07); font-size: 1.45rem; font-weight: 900; }
.number-key-grid button:active { color: #fff; background: var(--brand); transform: translateY(1px); }
.number-key-grid .key-command { color: var(--brand-dark); background: #f4f9f8; font-size: .84rem; }

.review-screen { text-align: center; }
.review-content { max-width: 720px; margin: 0 auto; }
.review-vehicle { display: flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 430px); margin: 2px auto 15px; padding: 12px 18px; background: var(--brand-soft); border-radius: 14px; }
.review-vehicle small { color: var(--muted); font-weight: 800; }
.review-vehicle strong { color: var(--brand-dark); font-size: 1.35rem; }
.review-plate { width: min(100%, 430px); margin: 0 auto 16px; }
.issue-button { min-height: 88px; border-radius: 20px; font-size: 1.45rem; }
.retry-actions + .issue-button { margin-top: 10px; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }

/* Keep every iPad flow step inside the same card footprint as the welcome screen. */
@media (min-width: 761px) {
  .ticket-card { height: 650px; }
  .flow-screen { height: 100%; min-height: 0; }

  .flow-screen[data-screen="kana"],
  .flow-screen[data-screen="plate"] { display: flex; flex-direction: column; }
  .flow-screen[data-screen="kana"] .screen-heading,
  .flow-screen[data-screen="plate"] .screen-heading { flex: 0 0 auto; padding-top: 48px; }
  .flow-screen[data-screen="kana"] .screen-heading p,
  .flow-screen[data-screen="plate"] .screen-heading p { margin-bottom: 12px; }
  .flow-screen[data-screen="kana"] .form-message,
  .flow-screen[data-screen="plate"] .form-message { min-height: 1.5em; margin: 6px 0; }
  .flow-screen[data-screen="kana"] .screen-actions,
  .flow-screen[data-screen="plate"] .screen-actions { margin-top: 6px; }

  .flow-screen[data-screen="kana"] .kana-keyboard { gap: 6px; margin-top: 0; padding: 10px; }
  .flow-screen[data-screen="kana"] .kana-column { gap: 6px; }
  .flow-screen[data-screen="kana"] .kana-keyboard button,
  .flow-screen[data-screen="kana"] .kana-placeholder { min-height: 48px; }

  .flow-screen[data-screen="plate"] .plate-entry-layout { gap: 24px; }
  .flow-screen[data-screen="plate"] .number-keyboard { padding: 11px; }
  .flow-screen[data-screen="plate"] .number-key-grid { gap: 7px; }
  .flow-screen[data-screen="plate"] .number-key-grid button { min-height: 54px; }

  .review-screen .review-content { display: flex; width: 100%; height: 100%; flex-direction: column; }
  .review-screen .screen-heading { flex: 0 0 auto; padding-top: 48px; }
  .review-screen .screen-heading p { margin-bottom: 12px; }
  .review-screen .review-vehicle { width: min(100%, 360px); margin: 0 auto 8px; padding: 8px 14px; }
  .review-screen .review-vehicle strong { font-size: 1.2rem; }
  .review-screen .review-plate { width: min(100%, 360px); margin-bottom: 8px; }
  .review-screen .form-message { min-height: 1.5em; margin: 4px 0; }
  .review-screen .retry-actions { width: min(100%, 560px); margin: 0 auto 6px; }
  .review-screen .issue-button { width: min(100%, 560px); min-height: 68px; margin: 0 auto; border-radius: 17px; font-size: 1.3rem; }
  .review-screen .retry-actions + .issue-button { margin-top: 0; }
}

@media (max-width: 760px) {
  .ticket-card { min-height: 0; padding: 22px 17px; }
  .flow-screen { min-height: 500px; padding-inline: 0; }
  .flow-screen > legend { margin-top: 68px; }
  .screen-back { left: -12px; }
  .flow-screen .vehicle-grid { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .flow-screen .vehicle-button { min-height: 105px; }
  .plate-entry-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr); gap: 14px; }
  .plate-entry-main .plate-inputs { grid-template-columns: 1fr; }
  .number-keyboard { padding: 11px; }
  .number-key-grid { gap: 7px; }
  .number-key-grid button { min-height: 58px; }
  .kana-keyboard { gap: 7px; padding: 11px; }
  .kana-column { min-width: 58px; flex-basis: 58px; gap: 7px; }
  .kana-keyboard button, .kana-placeholder { min-height: 54px; }
}
@media (max-width: 540px) {
  .welcome-screen p { margin-top: 82px; }
  .start-button { min-height: 160px; padding-inline: 36px; font-size: clamp(2rem, 10vw, 2.6rem); }
  .tap-hand { right: -12px; bottom: -82px; width: 150px; }
  .plate-entry-layout { grid-template-columns: 1fr; }
  .number-keyboard { order: 2; }
}