/* 読取映像の共通調整と、職員のスマホ業務画面。
   受付・場内案内・受領の業務処理は変更しない。 */
.scanner-area {
  width: min(70vw, 65svh);
  aspect-ratio: auto;
}
.scanner-area > .scan-frame {
  /* 読取ライブラリーの実領域と、別寸法の飾り枠を重ねない。 */
  display: none;
}
.scanner-area #reader video {
  display: block;
  width: 100% !important;
  height: auto !important;
}
@media screen and (max-width: 600px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  html,
  body {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .app {
    height: auto;
    min-height: 100svh;
  }
  .screen {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .screen.active {
    flex-shrink: 0;
  }
  #scanner-screen {
    padding: 16px 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    gap: 16px;
  }
  .scanner-header {
    padding: 0 16px;
  }
  .scanner-title {
    font-size: 28px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .scanner-subtitle {
    font-size: 16px;
    line-height: 1.6;
  }
  .scanner-area {
    width: calc(100% - 32px);
    max-width: 480px;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    margin: auto;
  }
  .scanner-area #reader,
  .scan-area #reader {
    width: 100%;
    max-width: none;
    overflow: visible;
    border-radius: 0;
  }
  #reader video {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none;
  }
  .scanner-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    margin: 0;
    gap: 16px;
  }
  .scanner-controls .btn {
    flex: 1 1 120px;
    min-height: 52px;
    padding: 12px;
    font-size: 16px;
    white-space: normal;
  }
  .scan-header {
    padding: 12px 16px;
  }
  .scan-title {
    font-size: 18px;
  }
  .scan-area {
    padding: 16px;
    width: 100%;
    flex: 1;
  }
  #welcome,
  #loading,
  #error,
  #standby-screen,
  #processing-screen,
  #error-screen {
    padding: 24px 16px;
  }
  .standby-event-name {
    font-size: 26px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .standby-event-date {
    font-size: 18px;
    margin-bottom: 32px;
  }
  .standby-message {
    font-size: 22px;
  }
  .reception-result .result-content {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .reception-result .result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;
  }
  .reception-result .result-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin: 0;
  }
  .reception-result .result-icon .material-icons {
    font-size: 32px;
  }
  .reception-result .result-status-text {
    font-size: 20px;
    line-height: 1.5;
  }
  .reception-result .result-info {
    margin-bottom: 16px;
  }
  .reception-result .result-seat {
    margin-top: 12px;
  }
  .reception-result .result-message {
    padding: 16px;
    margin-bottom: 16px;
  }
  .reception-result .result-name {
    font-size: 32px;
  }
  .reception-result .result-room {
    max-width: 100%;
    padding: 16px 20px;
  }
  .reception-result .result-room .room-name {
    font-size: 26px;
  }
  .reception-result .seat-number {
    font-size: 48px;
  }
  /* GAS版の場内画面と同じく、案内先を一目で読み取れる大きさにする。 */
  .floor-mode .reception-result .result-room .room-name {
    font-size: clamp(28px, 10vw, 44px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .reception-result .result-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .reception-result .result-buttons .btn {
    width: 100%;
    min-height: 52px;
    min-width: 0;
    white-space: normal;
  }

  /* 受領・金額登録も全画面業務UIに揃える。装飾カードで幅を狭めない。 */
  .receipt-workflow main {
    width: 100%;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .receipt-workflow :is(#scan-panel, #person-panel, #receipt-panel) {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    margin: 24px 0 0;
  }
  .receipt-workflow.receiving header {
    display: none;
  }
  .receipt-workflow #person-panel > p {
    margin-block: 8px;
  }
  .receipt-workflow #person-panel .label-review {
    margin-block: 12px;
  }
  .receipt-workflow :is(#person-name, #receipt-name, #scan-person-name) {
    font-size: 28px;
    line-height: 1.5;
  }
  .receipt-workflow :is(#person-affiliation, #receipt-affiliation) {
    font-size: 16px;
  }
  .receipt-workflow #amount {
    font-size: 36px;
    min-height: 64px;
  }
  .receipt-workflow #amount-form .buttons button,
  .receipt-workflow #person-panel .buttons button,
  .receipt-workflow #next {
    min-height: 52px;
    font-size: 16px;
  }

  /* スキャン中はイベントと停止を上段へ。カメラ幅を削らずに収める。 */
  .receipt-workflow.camera-open main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "event stop"
      "progress progress"
      "message message"
      "person person"
      "help help"
      "reader reader"
      "restart restart";
    align-content: center;
    gap: 12px;
    min-height: 100svh;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .receipt-workflow.camera-open
    :is(
      header,
      h1,
      nav,
      footer,
      #scan-title,
      #scan-panel details,
      #scan-person .eyebrow
    ) {
    display: none;
  }
  .receipt-workflow.camera-open #scan-panel {
    display: contents;
  }
  .receipt-workflow.camera-open .event-name {
    grid-area: event;
    align-self: center;
    margin: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
  }
  .receipt-workflow.camera-open #receive-progress {
    grid-area: progress;
    margin: 0;
  }
  .receipt-workflow.camera-open #message {
    grid-area: message;
    margin: 0;
  }
  .receipt-workflow.camera-open #scan-person {
    grid-area: person;
    padding: 0;
    margin: 0;
    border: 0;
    text-align: center;
  }
  .receipt-workflow.camera-open #scan-person h2 {
    font-size: 26px;
    margin: 0;
  }
  .receipt-workflow.camera-open #scan-person-affiliation {
    font-size: 16px;
    margin: 4px 0 0;
  }
  .receipt-workflow.camera-open #scan-help {
    grid-area: help;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
  }
  .receipt-workflow.camera-open #reader {
    grid-area: reader;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .receipt-workflow.camera-open #reader video {
    width: 100% !important;
    height: auto !important;
    max-height: none;
  }
  .receipt-workflow.camera-open #scan {
    grid-area: stop;
    width: auto;
    min-height: 48px;
    font-size: 14px;
    padding: 10px 14px;
  }
  .receipt-workflow.camera-open #restart-receive {
    grid-area: restart;
    min-height: 52px;
    font-size: 16px;
    margin: 0;
  }

  /* 氏名検索での受付・確認ダイアログ。長い内容は普通にスクロールする。 */
  #staff-workspace {
    width: 100%;
    padding: 16px;
  }
  #staff-workspace :is(.guest-card, .guest-person, .guest-guide) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .reception-confirm .confirm-event-label {
    margin-top: 16px !important;
  }
  .reception-confirm .confirm-person {
    margin-top: 16px;
    padding: 16px 0;
  }
  .reception-confirm .confirm-actions {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
    gap: 32px;
  }
  .reception-confirm .confirm-guide {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
    gap: 12px;
  }
  .reception-confirm .confirm-actions .btn {
    width: 100%;
    min-height: 52px;
  }
}