:root {
  --metal-1: #7e7e7e;
  --metal-2: #e9e9e9;
  --metal-3: #b8b8b8;
  --screen: #020202;
  --red: #ff3525;
  --arrow: #ff6747;
  --mint: #66f4d2;
  --off: #8a8a8a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #9d9d9d;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Arial, sans-serif;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
}

.panel {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  padding:
    max(env(safe-area-inset-top), 10px)
    max(env(safe-area-inset-right), 12px)
    max(env(safe-area-inset-bottom), 12px)
    max(env(safe-area-inset-left), 12px);
  display: grid;
  grid-template-rows: minmax(0, 54fr) minmax(0, 46fr);
  align-items: stretch;
  justify-items: stretch;
  background:
    linear-gradient(90deg,
      #707070 0%,
      #dcdcdc 7%,
      #eeeeee 17%,
      #b8b8b8 44%,
      #e8e8e8 70%,
      #a9a9a9 90%,
      #747474 100%);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.20) 0,
    rgba(255,255,255,.20) 1px,
    rgba(0,0,0,.06) 1px,
    rgba(0,0,0,.06) 2px
  );
  mix-blend-mode: overlay;
}

.display-shell {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(6px, 2.1vh, 18px) clamp(3px, 2vw, 12px) clamp(6px, 1.7vh, 14px);
  z-index: 1;
}

.display {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 46dvh;
  border: clamp(3px, .9vw, 5px) solid #343434;
  background: var(--screen);
  overflow: hidden;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.95),
    0 1px 1px rgba(255,255,255,.28),
    0 5px 12px rgba(0,0,0,.20);
}

.display[data-online="false"] {
  filter: saturate(.35) brightness(.72);
}

.direction {
  position: absolute;
  left: clamp(6px, 3.6vw, 18px);
  top: 20%;
  bottom: 20%;
  width: 23%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .14s ease;
}

.direction.show { opacity: 1; }
.direction .chevrons { display: none; width: 100%; height: 100%; fill: var(--arrow); filter: drop-shadow(0 0 8px rgba(255,88,55,.68)); }
.direction.up .up { display: block; }
.direction.down .down { display: block; }

.floor-wrap {
  position: absolute;
  left: 25%;
  right: 1.5%;
  top: 3%;
  bottom: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.floor {
  display: inline-block;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(128px, 39vw, 235px);
  font-weight: 500;
  line-height: .78;
  letter-spacing: clamp(-18px, -3.4vw, -10px);
  color: var(--red);
  transform: scaleX(.74);
  transform-origin: center;
  text-shadow:
    0 0 5px #ff2a1d,
    0 0 12px rgba(255,42,29,.95),
    0 0 27px rgba(255,42,29,.48);
  white-space: nowrap;
}

.floor.multi {
  font-size: clamp(105px, 31vw, 190px);
  transform: scaleX(.70);
}

.floor.basement {
  font-size: clamp(90px, 27vw, 160px);
  transform: scaleX(.74);
  letter-spacing: clamp(-12px, -2.7vw, -7px);
}

.status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8px, 2.4vh, 20px);
  text-align: center;
  font-size: clamp(15px, 4.1vw, 24px);
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.button-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.2vh, 18px);
  padding-top: clamp(7px, 2.0vh, 18px);
}

.call-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1px, .4vh, 4px);
}

.call-button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: min(43vw, 18dvh, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(3px, 1vw, 6px) solid rgba(245,245,245,.72);
  padding: 0;
  background:
    radial-gradient(circle at 34% 28%,
      #fafafa 0%,
      #d6d6d6 14%,
      #aaaaaa 33%,
      #767676 57%,
      #565656 66%,
      #d0d0d0 73%,
      #9a9a9a 84%,
      #676767 100%);
  box-shadow:
    0 9px 15px rgba(0,0,0,.42),
    inset 0 0 17px rgba(255,255,255,.78),
    inset 0 -8px 14px rgba(0,0,0,.23);
  transition: transform .08s ease, filter .15s ease;
}

.call-button:active { transform: translateY(2px) scale(.985); }
.call-button[disabled] { opacity: .72; }

.button-inner {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.13), rgba(0,0,0,.13) 72%);
}

.call-number {
  color: var(--off);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(44px, 12vw, 78px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.08em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: color .16s ease, filter .16s ease;
}

.call-button.pending .call-number {
  color: var(--mint);
  filter:
    drop-shadow(0 0 5px rgba(102,244,210,1))
    drop-shadow(0 0 13px rgba(102,244,210,.88));
}


.toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(max(env(safe-area-inset-bottom), 10px) + 10px);
  transform: translate(-50%, 18px);
  max-width: 88%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* iPhone 15 Pro / Galaxy Ultra 계열 세로 화면 최적화 */
@media (min-width: 390px) and (min-height: 800px) {
  .panel { padding-left: 14px; padding-right: 14px; }
  .display-shell { padding-top: 10px; }
}

@media (orientation: landscape) {
  .panel {
    width: min(460px, 100vw);
    margin: 0 auto;
    grid-template-rows: 55fr 45fr;
  }
  body { background: #222; }
}