.main-content:has(.kiosk) {
  padding: 0;
}

/* 全キオスク画面共通: ビューポート高に収める縦flexレイアウト。
   固定余白を使わず dvh ベースでスケールさせ、縦スクロールを不要にする */
.kiosk {
  box-sizing: border-box;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2dvh, 24px);
  background: #f4f7f8;
  color: #17323b;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.kiosk input,
.kiosk select {
  user-select: text;
  -webkit-user-select: text;
}

.kiosk__heading { cursor: default; }

.kiosk-scanner__clock {
  font-size: clamp(32px, 6dvh, 64px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kiosk__heading h1,
.kiosk--rescue h1 {
  margin: 0;
  font-size: clamp(24px, 4.2dvh, 46px);
}

.kiosk__heading p,
.kiosk--rescue > p {
  margin: 4px 0 0;
  font-size: clamp(15px, 2.2dvh, 22px);
}

/* スキャナは「残り高さ」いっぱいを使い、そこからアスペクト比で幅が決まる */
.kiosk-scanner-area {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(8px, 1.6dvh, 20px) 0;
}

.kiosk-scanner {
  position: relative;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: min(88vw, 760px);
  overflow: hidden;
  border-radius: 24px;
  background: #172126;
}

.kiosk-scanner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.kiosk-scanner__canvas { display: none; }

.kiosk-scanner__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(48%, 360px);
  aspect-ratio: 1;
  border: 8px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .22);
}

.kiosk-scanner__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kiosk-scanner__flash--active { animation: kiosk-flash .2s ease-out; }

@keyframes kiosk-flash {
  50% { background: rgba(100, 255, 175, .75); }
}

.kiosk-scanner__stopped {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  border: 0;
  background: rgba(10, 22, 28, .92);
  color: white;
  font-size: 24px;
}

.kiosk-scanner__stopped strong,
.kiosk-scanner__stopped span { display: block; margin: 12px; }

.kiosk__message,
.kiosk-stamp__message {
  min-height: clamp(26px, 3.4dvh, 34px);
  color: #b42318;
  font-size: clamp(18px, 2.4dvh, 24px);
  font-weight: 700;
}

.kiosk-logout {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kiosk-logout.is-open { display: flex; }
.kiosk-logout__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .65); }

.kiosk-logout__dialog {
  position: relative;
  width: min(560px, 100%);
  padding: 34px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  text-align: center;
}

.kiosk-logout__title { margin: 0 0 24px; color: #27313d; font-size: clamp(23px, 4vw, 32px); }
.kiosk-logout__form { margin: 0; }

.kiosk-logout__password {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 28px;
  padding: 14px;
  border: 2px solid #8993a3;
  border-radius: 12px;
  font-size: 28px;
  letter-spacing: .3em;
  text-align: center;
}

.kiosk-logout__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.kiosk-logout__button {
  min-height: 72px;
  border: 2px solid #8993a3;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

.kiosk-logout__button--submit { border-color: #b42318; color: #b42318; }
.kiosk-logout__button:focus,
.kiosk-logout__password:focus { outline: 4px solid rgba(59, 130, 246, .3); outline-offset: 2px; }

/* 区分選択画面 */
.kiosk--stamp { gap: clamp(2px, .8dvh, 10px); }

.kiosk-stamp__clock {
  font-size: clamp(44px, 9dvh, 92px);
  font-weight: 700;
  line-height: 1.1;
}

.kiosk-stamp__greeting {
  margin: clamp(6px, 2dvh, 24px) 0 0;
  font-size: clamp(19px, 2.8dvh, 28px);
}

.kiosk-stamp__name {
  margin: 0;
  font-size: clamp(36px, 7dvh, 78px);
  line-height: 1.2;
}

.kiosk-stamp__prompt {
  margin: 0;
  font-size: clamp(17px, 2.4dvh, 24px);
}

.kiosk-stamp__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(14px, 2.4dvh, 24px);
  width: min(100%, 1100px);
  margin: clamp(10px, 2.8dvh, 34px) auto;
}

.kiosk-stamp__action {
  position: relative;
  width: 100%;
  min-height: clamp(84px, 11dvh, 120px);
  border: 3px solid currentColor;
  border-radius: 20px;
  background: white;
  font-size: clamp(28px, 3.8dvh, 38px);
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.kiosk-stamp__action--clock-in,
.kiosk-stamp__action--break-end { color: #147d64; }
.kiosk-stamp__action--clock-out { color: #bd3b32; }
.kiosk-stamp__action--break { color: #c27615; }
.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(38, 63, 72, .32);
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color);
}
.kiosk-stamp__action--clock-in.kiosk-stamp__action--recommended,
.kiosk-stamp__action--break-end.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(20, 125, 100, .42);
  background: #147d64;
}
.kiosk-stamp__action--clock-out.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(189, 59, 50, .42);
  background: #bd3b32;
}
.kiosk-stamp__action--break.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(194, 118, 21, .42);
  background: #c27615;
}
.kiosk-stamp__action--recommended:not(:disabled),
.kiosk-stamp__self-report--recommended:not(:disabled) {
  animation: kiosk-recommended-pulse 1.5s ease-in-out infinite;
}
.kiosk-stamp__action:disabled { opacity: .5; animation: none; }

@keyframes kiosk-recommended-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 16px 12px var(--kiosk-pulse-color); }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-stamp__action--recommended:not(:disabled),
  .kiosk-stamp__self-report--recommended:not(:disabled) { animation: none; }
}

.kiosk-stamp__message--success { color: #147d64; }

.kiosk-stamp__action-group { display: flex; flex-direction: column; align-items: stretch; }
.kiosk-stamp__self-report-separator {
  margin: clamp(20px, 3dvh, 28px) 12px clamp(20px, 2.8dvh, 26px);
  border-top: 1px solid #d6a2a0;
}
.kiosk-stamp__self-report {
  min-height: 52px;
  border: 2px solid #b42318;
  border-radius: 12px;
  background: #fff;
  color: #b42318;
  font-size: clamp(17px, 2.2dvh, 22px);
  font-weight: 700;
}
.kiosk-stamp__self-report--recommended {
  --kiosk-pulse-color: rgba(180, 35, 24, .42);
  border-color: transparent;
  background: #b42318;
  color: white;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color);
}
.kiosk-stamp__self-report:disabled { opacity: .5; animation: none; }

.kiosk__finish-button {
  display: inline-block;
  margin-top: clamp(8px, 2.4dvh, 30px);
  padding: clamp(12px, 1.8dvh, 18px) 34px;
  border: 2px solid #60747c;
  border-radius: 14px;
  background: white;
  color: #263f48;
  font-size: clamp(18px, 2.2dvh, 22px);
  text-decoration: none;
}

/* 救済画面: スタッフ一覧が残り高さに収まるよう、ボタンは高さ方向に圧縮可能にする */
.kiosk--rescue { justify-content: flex-start; }
.kiosk--rescue .kiosk__finish-form { margin-top: auto; }

.kiosk--rescue h2 {
  margin: clamp(4px, 1dvh, 12px) 0 0;
  font-size: clamp(20px, 3dvh, 30px);
}

.kiosk-rescue__departments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(8px, 1.4dvh, 16px);
  width: min(100%, 960px);
  margin: clamp(10px, 2dvh, 28px) auto 0;
}

.kiosk-rescue__staffs {
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(8px, 1.4dvh, 16px);
  width: min(100%, 960px);
  margin: clamp(10px, 1.6dvh, 24px) auto 0;
}

.kiosk-rescue__department,
.kiosk-rescue__staff {
  padding: clamp(10px, 1.8dvh, 22px) 14px;
  border: 2px solid #9cabb0;
  border-radius: 14px;
  background: white;
  color: #17323b;
  font-size: clamp(18px, 2.3dvh, 23px);
  text-decoration: none;
}

.kiosk-rescue__department--selected { border-color: #147d64; background: #dff3ec; }
.kiosk-rescue__staff { min-height: 0; }
.kiosk-rescue__staff span { display: block; }
.kiosk-rescue__staff-number { color: #63757b; font-size: clamp(13px, 1.7dvh, 17px); }
.kiosk-rescue__staff-name { margin-top: 4px; font-size: clamp(19px, 2.6dvh, 26px); font-weight: 700; }