/* 1 to 50 — 디자인 장르: 엘리베이터 버튼판
 * 브러시드 스틸 판 + 둥근 백라이트 버튼(호박색 1개 포인트) + 붉은 7세그먼트 층 표시기.
 * UI 간격·글자·반경은 공용 토큰, 금속·조명 같은 재질 색만 --art-* 로 둔다. */
:root {
  --brand: #f59f00;
  --brand-pressed: #d98a00;
  --brand-soft: #fff4d6;
  --brand-on: #1f1300;

  --font-display: "Gothic A1", var(--font-sans);
  --art-num: "Archivo", "Gothic A1", var(--font-sans);

  --art-steel-hi: #f4f6f8;
  --art-steel-1: #d5dade;
  --art-steel-2: #b4bbc2;
  --art-steel-3: #8c949c;
  --art-steel-dark: #5b636b;
  --art-engrave: #252a30;
  --art-engrave-2: #4c535b;
  --art-lit: #ffb547;
  --art-lit-hot: #fff3d1;
  --art-lit-ink: #7a3d00;
  --art-led: #ff4632;
  --art-led-off: rgba(255, 70, 50, 0.09);
  --art-lcd: #140807;
  --art-miss: #e8432e;
  --art-acrylic: #fbfbf8;

  --art-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --art-press: cubic-bezier(0.3, 0, 0.2, 1);
  /* 가로 결 노이즈 (브러시드 메탈) */
  --art-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background-color: var(--art-steel-1);
  background-image: var(--art-brush), linear-gradient(180deg, var(--art-steel-hi), var(--art-steel-1) 30%, var(--art-steel-2));
  background-attachment: fixed;
  color: var(--art-engrave);
}

body.is-playing .seo,
body.is-playing #more,
body.is-playing .site-footer {
  display: none;
}
body.is-playing {
  overscroll-behavior: none;
}

/* ============ 금속 판 공통 ============ */
.cab {
  position: relative;
  padding: var(--sp-16);
  border-radius: var(--r-16);
  background-color: var(--art-steel-2);
  background-image: var(--art-brush), linear-gradient(180deg, var(--art-steel-1), var(--art-steel-2) 55%, var(--art-steel-3));
  box-shadow: inset 0 1px 0 var(--art-steel-hi), inset 0 -1px 0 var(--art-steel-dark), var(--shadow-m);
}
.screw {
  position: absolute;
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--r-full);
  background: linear-gradient(45deg, transparent 43%, var(--art-steel-dark) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, var(--art-steel-hi), var(--art-steel-3));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.screw:nth-child(1) { left: var(--sp-6); top: var(--sp-6); }
.screw:nth-child(2) { right: var(--sp-6); top: var(--sp-6); }
.screw:nth-child(3) { left: var(--sp-6); bottom: var(--sp-6); }
.screw:nth-child(4) { right: var(--sp-6); bottom: var(--sp-6); }

/* ============ 층 표시기 (7세그먼트) ============ */
.indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  height: 64px;
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-8);
  background: var(--art-lcd);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 0 var(--art-steel-hi);
}
.indicator__seg {
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--art-led) 70%, transparent));
}
.indicator__unit {
  align-self: flex-end;
  color: var(--art-led);
  font: var(--label-03);
  font-family: var(--art-num);
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.indicator__arrow {
  width: 0;
  height: 0;
  border-left: var(--sp-8) solid transparent;
  border-right: var(--sp-8) solid transparent;
  border-bottom: var(--sp-12) solid var(--art-led-off);
}
.indicator__arrow.is-on,
.cab--demo .indicator__arrow {
  border-bottom-color: var(--art-led);
  animation: arrow-run 900ms steps(2) infinite;
}
.cab--demo.is-arrived .indicator__arrow { animation: none; border-bottom-color: var(--art-led-off); }
@keyframes arrow-run {
  0% { transform: translateY(2px); }
  100% { transform: translateY(-3px); }
}
.seg { display: flex; gap: var(--sp-2); height: 100%; }
.seg__d { height: 100%; width: auto; }
.seg polygon,
.seg circle { fill: var(--art-led-off); }
.seg .is-on { fill: var(--art-led); }
.seg.is-blink { animation: seg-blink 480ms var(--art-spring); }
@keyframes seg-blink {
  0% { transform: scale(1.25); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}
.cab--demo.is-arrived .indicator__seg { animation: seg-blink 520ms var(--art-spring) 3; }

/* ============ 버튼판 ============ */
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding: var(--sp-10);
  border-radius: var(--r-12);
  background: color-mix(in srgb, var(--art-steel-3) 35%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 var(--art-steel-hi);
}
.board--play {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.key {
  --ring: transparent;
  --glow: transparent;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: conic-gradient(from 200deg, var(--art-steel-1), var(--art-steel-3) 22%, var(--art-steel-hi) 48%, var(--art-steel-3) 74%, var(--art-steel-1));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 3px 4px -2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.key::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 55%, var(--art-steel-2));
  box-shadow: 0 0 0 2px var(--ring), 0 0 10px 1px var(--glow), inset 0 -2px 3px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.7);
  transition: box-shadow 220ms var(--ease-standard), transform 300ms var(--art-spring);
}
.key__n {
  position: relative;
  font: 800 22px/1 var(--art-num);
  letter-spacing: -0.02em;
  color: var(--art-engrave);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.key--mini .key__n { font-size: 19px; }
.key[data-layer="2"] {
  --ring: color-mix(in srgb, var(--art-lit) 85%, transparent);
  --glow: color-mix(in srgb, var(--art-lit) 45%, transparent);
}
.key[data-layer="2"]::before {
  background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), color-mix(in srgb, var(--art-lit) 30%, var(--art-steel-1)) 60%, var(--art-steel-2));
}
.key[data-layer="2"] .key__n { color: var(--art-lit-ink); }
.key[data-layer="0"]::before {
  background: radial-gradient(circle at 40% 32%, var(--art-steel-2), var(--art-steel-3));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.key[data-layer="wait"]::before { background: radial-gradient(circle at 40% 32%, var(--art-steel-1), var(--art-steel-2)); }

.key.is-hit::before { animation: key-hit 320ms var(--art-press); }
.key.is-hit .key__n { animation: n-pop 340ms var(--art-spring); }
@keyframes key-hit {
  0% {
    transform: scale(0.84) translateY(1px);
    box-shadow: 0 0 0 3px var(--art-lit), 0 0 20px 6px color-mix(in srgb, var(--art-lit) 75%, transparent), inset 0 3px 5px rgba(0, 0, 0, 0.3);
  }
  45% { transform: scale(0.9) translateY(1px); }
  100% { transform: none; }
}
@keyframes n-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.key.is-miss { animation: key-shake 320ms var(--ease-standard); }
.key.is-miss::before { animation: key-miss 420ms var(--ease-out); }
@keyframes key-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px) rotate(-4deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes key-miss {
  0% { box-shadow: 0 0 0 3px var(--art-miss), 0 0 14px 3px color-mix(in srgb, var(--art-miss) 60%, transparent); }
}
.board.is-covered .key__n { visibility: hidden; }

/* ============ 첫 화면 ============ */
.intro {
  min-height: auto;
  padding-top: var(--sp-8);
  gap: var(--sp-16);
}
.hero {
  margin: 0;
  font: 900 44px/1.12 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--art-engrave);
  text-shadow: 0 1px 0 var(--art-steel-hi);
}
.hero__line { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.hero__line--2 { margin-top: var(--sp-4); }
.hero__btn {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: conic-gradient(from 200deg, var(--art-steel-1), var(--art-steel-3) 22%, var(--art-steel-hi) 48%, var(--art-steel-3) 74%, var(--art-steel-1));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 4px -2px rgba(0, 0, 0, 0.4);
  font: 900 22px/1 var(--art-num);
  letter-spacing: -0.04em;
  position: relative;
  animation: chip-in 700ms var(--art-spring) both;
}
.hero__btn::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), var(--art-lit) 70%);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--art-lit) 60%, transparent), inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  z-index: -1;
}
.hero__btn { isolation: isolate; color: var(--art-lit-ink); }
.hero__btn[data-n="50"] { animation-delay: 160ms; }
.hero__btn.is-hit { animation: chip-hit 420ms var(--art-spring); }
@keyframes chip-in {
  0% { transform: translateY(-40px) scale(0.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes chip-hit {
  0% { transform: scale(0.82) translateY(3px); }
  100% { transform: none; }
}
.hero__w { animation: word-in 640ms var(--art-spring) both; animation-delay: 80ms; display: inline-block; }
.hero__w:nth-of-type(2) { animation-delay: 80ms; }
.hero__line .hero__w:last-child { animation-delay: 240ms; }
@keyframes word-in {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-10px); }
  100% { clip-path: inset(0); transform: none; }
}
.kt { display: inline-block; margin-right: -0.02em; transform-origin: 50% 100%; }
.hero.is-in .kt { animation: kt-press 760ms both; animation-delay: calc(320ms + var(--i) * 45ms); }
/* 버튼처럼 위에서 눌려 들어갔다 튀어나온다 */
@keyframes kt-press {
  0% { transform: translateY(-60%) scaleY(1.5); opacity: 0; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  45% { transform: translateY(6%) scaleY(0.72) scaleX(1.12); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  72% { transform: translateY(-3%) scaleY(1.06) scaleX(0.97); }
  100% { transform: none; }
}
.hero__line--2 .kt:last-child { color: var(--brand-pressed); }

.cab--demo { padding-bottom: var(--sp-12); }
.board--demo { pointer-events: none; }
.plate-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--sp-10) var(--sp-4) 0;
  color: var(--art-engrave-2);
  font: var(--label-03);
  text-shadow: 0 1px 0 var(--art-steel-hi);
}
.plate-label b { font: 900 14px/1 var(--art-num); letter-spacing: 0.12em; color: var(--art-engrave); }

.finger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--art-steel-hi) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--art-engrave) 55%, transparent), 0 6px 12px -4px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 150ms cubic-bezier(0.3, 0.75, 0.25, 1), opacity 300ms;
}
.finger.is-on { opacity: 1; }
.finger.is-tap::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--r-full);
  border: 2px solid var(--art-lit);
  animation: tap-ring 380ms var(--ease-out) both;
}
@keyframes tap-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 호출 버튼 (시작) */
.callbox { display: flex; flex-direction: column; gap: var(--sp-10); padding-bottom: var(--sp-8); }
.callbtn {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  min-height: 88px;
  padding: var(--sp-12) var(--sp-16);
  border: 0;
  border-radius: var(--r-16);
  background-color: var(--art-steel-3);
  background-image: var(--art-brush), linear-gradient(180deg, var(--art-steel-2), var(--art-steel-3));
  box-shadow: inset 0 1px 0 var(--art-steel-1), inset 0 -2px 0 var(--art-steel-dark), var(--shadow-s);
  color: var(--art-engrave);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.callbtn__ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: conic-gradient(from 200deg, var(--art-steel-1), var(--art-steel-dark) 22%, var(--art-steel-hi) 48%, var(--art-steel-dark) 74%, var(--art-steel-1));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.callbtn__face {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  box-shadow: 0 0 0 2px var(--art-steel-dark), inset 0 -3px 4px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.8);
  transition: transform 340ms var(--art-spring), box-shadow 200ms, background 200ms;
}
.callbtn__tri {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 17px solid var(--art-engrave);
  margin-top: -3px;
}
.callbtn__txt { display: flex; flex-direction: column; gap: var(--sp-2); }
.callbtn__txt b { font: 900 24px/1.2 var(--font-display); letter-spacing: -0.03em; text-shadow: 0 1px 0 var(--art-steel-1); }
.callbtn__txt small { font: var(--label-02); color: var(--art-engrave); opacity: 0.75; }
.callbtn:active .callbtn__face,
.callbtn.is-lit .callbtn__face {
  transform: scale(0.9) translateY(1px);
  background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), var(--art-lit) 70%);
  box-shadow: 0 0 0 2px var(--art-lit), 0 0 18px 4px color-mix(in srgb, var(--art-lit) 70%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition-duration: 80ms;
}
.callbtn.is-lit .callbtn__tri { border-bottom-color: var(--art-lit-ink); }

/* 도전장 알림 (붙여놓은 안내문) */
.notice-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-4);
  background: var(--art-acrylic);
  border-left: var(--sp-6) solid var(--brand);
  box-shadow: var(--shadow-s);
  transform: rotate(-0.8deg);
  animation: tag-in 620ms var(--art-spring) both;
}
.notice-tag p { margin: 0; font: var(--body-03); }
.notice-tag__k {
  flex: none;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-4);
  background: var(--art-engrave);
  color: var(--art-lit);
  font: var(--label-03);
}
@keyframes tag-in {
  0% { transform: translateY(-12px) rotate(-6deg); opacity: 0; }
  100% { transform: rotate(-0.8deg); opacity: 1; }
}

/* ============ 게임 ============ */
.play { min-height: 100dvh; display: flex; flex-direction: column; padding: var(--sp-12) 0 calc(var(--sp-16) + var(--safe-bottom)); }
.cab--play { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); }
.play__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-8); align-items: stretch; }
.indicator--big { height: 72px; }
.nextbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 64px;
  padding: var(--sp-6);
  border-radius: var(--r-8);
  background: var(--art-lcd);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}
.nextbox__k { color: var(--art-led); font: var(--label-03); opacity: 0.8; }
.nextbox__seg { height: 36px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--art-led) 70%, transparent)); }
.board-wrap { position: relative; }
.play__mid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.mplate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--r-8);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 0 var(--art-steel-hi);
}
.mplate b { font: 900 18px/1 var(--art-num); letter-spacing: 0.2em; color: var(--art-engrave); text-shadow: 0 1px 0 var(--art-steel-hi); }
.braille { display: grid; grid-template-columns: repeat(3, var(--sp-6)); gap: var(--sp-4); }
.braille i { width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-full); background: var(--art-steel-1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--art-steel-hi); }
.braille i:nth-child(2), .braille i:nth-child(6) { visibility: hidden; }
.play__cap { margin: 0; text-align: center; font: var(--label-03); color: var(--art-engrave-2); }
.board-wrap .board { margin-top: 0; }
@media (max-height: 700px) { .mplate { display: none; } }
.play__bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-8); align-items: center; margin-top: auto; }
.play__hint { margin: 0; text-align: center; font: var(--label-02); color: var(--art-engrave); }
.play__hint.is-pop { animation: chip-hit 420ms var(--art-spring); }

/* 열림/닫힘 같은 작은 판 버튼 */
.panelbtn {
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: var(--tap-min);
  padding: 0 var(--sp-12);
  border: 0;
  border-radius: var(--r-8);
  background: radial-gradient(circle at 40% 30%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 0 var(--art-steel-dark), 0 3px 6px -2px rgba(0, 0, 0, 0.35);
  color: var(--art-engrave);
  font: var(--label-02);
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform 300ms var(--art-spring), box-shadow 120ms;
}
.panelbtn:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 var(--art-steel-dark), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition-duration: 60ms;
}
.panelbtn[aria-pressed="false"] { color: var(--art-engrave-2); text-decoration: line-through; }
.panelbtn[aria-pressed="true"] span { position: relative; padding-left: var(--sp-12); }
.panelbtn[aria-pressed="true"] span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--sp-6);
  height: var(--sp-6);
  margin-top: -3px;
  border-radius: var(--r-full);
  background: var(--art-lit);
  box-shadow: 0 0 6px var(--art-lit);
}
.panelbtn--wide { flex: 1; }
.panelbtn.is-loading { color: transparent; }

.pause {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  border: 0;
  border-radius: var(--r-12);
  background-color: var(--art-steel-3);
  background-image: var(--art-brush), repeating-linear-gradient(90deg, transparent 0 49.6%, var(--art-steel-dark) 49.6% 50.4%, transparent 50.4%);
  color: var(--art-engrave);
  cursor: pointer;
  animation: tag-in 400ms var(--art-spring) both;
}
.pause b { font: 900 24px/1.2 var(--font-display); }
.pause span { font: var(--label-02); }

/* ============ 도착 (문) ============ */
.doors {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  visibility: hidden;
}
.doors.is-closing,
.doors.is-opening { visibility: visible; }
.doors.is-closing { pointer-events: auto; }
.doors__l,
.doors__r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background-color: var(--art-steel-2);
  background-image: var(--art-brush), linear-gradient(90deg, var(--art-steel-3), var(--art-steel-1) 40%, var(--art-steel-2));
  transition: transform 800ms cubic-bezier(0.5, 1.25, 0.4, 1);
}
.doors__l { left: 0; transform: translateX(-101%); box-shadow: inset -2px 0 0 var(--art-steel-dark); }
.doors__r { right: 0; transform: translateX(101%); box-shadow: inset 2px 0 0 var(--art-steel-dark); }
.doors.is-closing .doors__l,
.doors.is-closing .doors__r { transform: none; transition: transform 400ms cubic-bezier(0.55, 0, 0.3, 1.05); }
.doors__lamp {
  position: absolute;
  left: 50%;
  top: 22%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  border-radius: var(--r-full);
  background: var(--art-lcd);
  color: var(--art-lit);
  font: 900 36px/1 var(--font-display);
  opacity: 0;
  transform: scale(0.6);
}
.doors.is-closing.is-ding .doors__lamp {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 4px var(--art-steel-1), 0 0 32px 8px color-mix(in srgb, var(--art-lit) 55%, transparent);
  transition: transform 420ms var(--art-spring), opacity 120ms;
}
.doors.is-opening .doors__lamp { opacity: 0; transition: opacity 200ms; }

/* ============ 결과 ============ */
.result { padding: var(--sp-12) 0 var(--sp-16); }
.cab--result { display: flex; flex-direction: column; gap: var(--sp-12); }
.res__floor {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--sp-12);
  font: 900 14px/1 var(--art-num);
  letter-spacing: 0.14em;
  color: var(--art-engrave-2);
}
.indicator--res { height: 108px; }
.res__badge {
  align-self: flex-start;
  margin: 0;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--r-4);
  background: var(--art-engrave);
  color: var(--art-steel-1);
  font: var(--label-02);
}
.res__badge.is-best {
  background: var(--art-lit);
  color: var(--art-lit-ink);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--art-lit) 55%, transparent);
  animation: chip-in 600ms var(--art-spring) 700ms both;
}
.res__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: 0;
}
.res__grid div {
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--r-8);
  background: color-mix(in srgb, var(--art-steel-hi) 45%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.res__grid dt { font: var(--label-03); color: var(--art-engrave-2); }
.res__grid dd { margin: var(--sp-2) 0 0; font: 800 20px/1.2 var(--art-num); font-variant-numeric: tabular-nums; }
.res__grid small { font: var(--label-03); margin-left: var(--sp-2); }
.vsplate {
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-8);
  background: var(--art-acrylic);
  border-left: var(--sp-6) solid var(--art-engrave-2);
}
.vsplate.is-win { border-left-color: var(--art-lit); }
.vsplate p { margin: 0; font: var(--body-03); }
.vsplate__k { font: var(--label-03); color: var(--art-engrave-2); }
.vsplate__v { font: var(--body-02-strong) !important; }
.res__chart {
  padding: var(--sp-10) var(--sp-12) var(--sp-8);
  border-radius: var(--r-8);
  background: var(--art-lcd);
  color: var(--art-led);
}
.res__k { display: flex; justify-content: space-between; gap: var(--sp-8); margin: 0 0 var(--sp-4); font: var(--label-03); opacity: 0.85; }
.res__k span:last-child { opacity: 0.7; }
.spark { width: 100%; height: auto; overflow: visible; }
.spark__line {
  fill: none;
  stroke: var(--art-led);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 900ms var(--ease-standard) 900ms forwards;
  filter: drop-shadow(0 0 3px var(--art-led));
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark__best { stroke: var(--art-lit); stroke-dasharray: 3 4; stroke-width: 1; opacity: 0.8; }
.spark__dot { fill: var(--art-lcd); stroke: var(--art-led); stroke-width: 1.5; }
.spark__dot.is-best { stroke: var(--art-lit); }
.spark__dot.is-last { fill: var(--art-led); }
.spark__t { fill: var(--art-led); font: 700 11px var(--art-num); opacity: 0.8; }
.spark__empty { margin: var(--sp-8) 0; font: var(--body-03); }

.res__actions { display: flex; flex-direction: column; gap: var(--sp-12); margin-top: var(--sp-16); }
.dare {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-12);
  border-radius: var(--r-12);
  background: color-mix(in srgb, var(--art-steel-hi) 40%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.dare__name { display: flex; flex-direction: column; gap: var(--sp-6); font: var(--label-03); color: var(--art-engrave-2); }
.dare__name .input { background: var(--art-acrylic); border-color: var(--art-steel-3); }
.dare__btns { display: flex; gap: var(--sp-8); }
.linkbtn {
  align-self: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-16);
  border: 0;
  background: none;
  color: var(--art-engrave-2);
  font: var(--label-02);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ============ SEO: 엘리베이터 안내판 ============ */
.seo.notice {
  margin-top: var(--sp-48);
  padding: var(--sp-20) var(--sp-16);
  border-radius: var(--r-12);
  background: var(--art-acrylic);
  color: var(--art-engrave);
  box-shadow: 0 0 0 var(--sp-6) var(--art-steel-2), 0 0 0 calc(var(--sp-6) + 1px) var(--art-steel-3), var(--shadow-m);
}
.notice__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: calc(var(--sp-20) * -1) calc(var(--sp-16) * -1) var(--sp-16);
  padding: var(--sp-16);
  border-radius: var(--r-12) var(--r-12) 0 0;
  background: var(--art-engrave);
  color: var(--art-steel-hi);
}
.notice__head h2 { margin: 0; color: var(--art-steel-hi); font: 800 22px/1.3 var(--font-display); }
.notice__tag {
  align-self: flex-start;
  padding: var(--sp-2) var(--sp-8);
  border: 1px solid var(--art-lit);
  border-radius: var(--r-4);
  color: var(--art-lit);
  font: var(--label-03);
}
.notice__rules { margin: 0; padding: 0; list-style: none; }
.notice__rules li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--color-border);
}
.notice__rules p { margin: 0; font: var(--body-03); color: var(--art-engrave); }
.notice__rules strong { font-weight: 800; }
.mini {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  box-shadow: 0 0 0 3px var(--art-steel-2), inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  font: 800 15px/1 var(--art-num);
}
.mini--miss { box-shadow: 0 0 0 3px var(--art-miss); color: var(--art-miss); }
.seo .notice__h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: var(--sp-24) 0 var(--sp-10);
  font: 800 17px/1.4 var(--font-display);
  color: var(--art-engrave);
}
.seo .notice__h::before { content: ""; width: var(--sp-6); height: var(--sp-16); background: var(--brand); }
.ex { display: flex; flex-direction: column; gap: var(--sp-6); }
.ex__row { display: grid; grid-template-columns: 56px repeat(5, minmax(0, 1fr)); gap: var(--sp-6); align-items: center; }
.ex__row span { font: var(--label-03); color: var(--art-engrave-2); }
.ex__row i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 44px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  box-shadow: 0 0 0 2px var(--art-steel-2);
  font: 800 14px/1 var(--art-num);
  font-style: normal;
}
.ex__row i.is-next { box-shadow: 0 0 0 2px var(--art-engrave); }
.ex__row i.is-lit { background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), var(--art-lit)); color: var(--art-lit-ink); box-shadow: 0 0 0 2px var(--art-lit); }
.ex__row i.is-off { background: var(--art-steel-3); }
.seo .notice__note { margin: var(--sp-10) 0 0; font: var(--body-03); color: var(--art-engrave-2); }
.notice__table { width: 100%; border-collapse: collapse; font: var(--body-03); }
.notice__table th,
.notice__table td { padding: var(--sp-10) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.notice__table th { width: 88px; padding-right: var(--sp-8); font: var(--label-02); color: var(--art-engrave); white-space: nowrap; }
.notice__table td { color: var(--art-engrave); }
/* ---------- 문답: 비상 인터폰 (스피커 그릴 + 호출 버튼, 답은 관리실 표시창) ---------- */
.intercom {
  margin-top: var(--sp-24);
  padding: var(--sp-12);
  border-radius: var(--r-12);
  background-color: var(--art-steel-2);
  background-image: var(--art-brush), linear-gradient(180deg, var(--art-steel-1), var(--art-steel-3));
  box-shadow: inset 0 0 0 1px var(--art-steel-hi), 0 0 0 2px var(--art-steel-3);
}
.seo .intercom__head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-10);
  font: 800 15px/1.4 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--art-engrave);
  text-shadow: 0 1px 0 var(--art-steel-hi);
}
.intercom__led {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--art-led);
  box-shadow: 0 0 6px var(--art-led);
  animation: tf-led 1.4s steps(2, jump-none) infinite;
}
.seo.notice .call { margin: 0 0 var(--sp-8); padding: 0; border: 0; }
.seo.notice .call summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--sp-12);
  min-height: 60px;
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--r-8);
  background: var(--art-acrylic);
  box-shadow: inset 0 -3px 0 var(--art-steel-1), 0 1px 0 var(--art-steel-3);
  list-style: none;
  cursor: pointer;
  color: var(--art-engrave);
  transition: transform var(--dur-fast) var(--art-spring);
}
.seo.notice .call summary::-webkit-details-marker { display: none; }
.seo.notice .call summary::marker { content: ""; }
.seo.notice .call summary:active { transform: translateY(2px); }
/* 스피커 그릴: 점 구멍 */
.call__grille {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background:
    radial-gradient(circle, var(--art-engrave) 0 1.6px, transparent 2px) 0 0 / 7px 7px,
    var(--art-steel-1);
  box-shadow: inset 0 0 0 3px var(--art-steel-2);
  -webkit-mask: radial-gradient(circle, black 0 21px, transparent 22px);
  mask: radial-gradient(circle, black 0 21px, transparent 22px);
}
.call__q { display: flex; flex-direction: column; gap: var(--sp-2); font: var(--label-01); word-break: keep-all; }
.call__q small { font: var(--label-03); color: var(--art-engrave-2); letter-spacing: 0.04em; }
/* 호출 버튼: 열면 불이 들어온다 */
.call__bell {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  box-shadow: 0 0 0 3px var(--art-steel-2), inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-fast) var(--art-spring);
}
.call[open] .call__bell {
  background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), var(--art-lit));
  box-shadow: 0 0 0 3px var(--art-lit), 0 0 14px var(--art-lit);
  transform: scale(0.92);
}
.call[open] .call__grille { animation: tf-talk 600ms var(--art-spring) 3; }
.seo.notice .call p {
  margin: var(--sp-6) var(--sp-4) 0 56px;
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-6);
  background: var(--art-lcd);
  color: var(--art-lit);
  font: var(--body-03);
  box-shadow: inset 0 0 0 2px var(--art-steel-dark);
  clip-path: inset(0 0 0 0);
  animation: tf-lcd 380ms steps(6, end) both;
}
.seo.notice .call p b { display: block; margin-bottom: var(--sp-2); color: var(--art-led); font: var(--label-03); letter-spacing: 0.1em; }
@keyframes tf-led { 50% { opacity: 0.25; } }
@keyframes tf-talk { 50% { transform: scale(1.08); } }
@keyframes tf-lcd { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- 하단: 승강기 옆 층별 안내판 ---------- */
.more-sites {
  margin-top: var(--sp-24);
  padding: var(--sp-16);
  border-radius: var(--r-8);
  background-color: var(--art-engrave);
  box-shadow: 0 0 0 4px var(--art-steel-3), 0 0 0 6px var(--art-steel-hi);
  color: var(--art-steel-hi);
}
.more-sites + .site-footer { margin-top: var(--sp-24); }
.more-sites__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--art-steel-dark);
  font: 800 18px/1.3 var(--font-display);
  letter-spacing: 0.2em;
  opacity: 1;
}
.more-sites__title::after { content: "FLOOR GUIDE"; font: 700 10px/1 var(--art-num); letter-spacing: 0.16em; color: var(--art-lit); }
.more-sites__grid { counter-reset: floor; }
.more-sites__item {
  counter-increment: floor;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
  column-gap: var(--sp-12);
  align-items: center;
  min-height: 64px;
  padding: var(--sp-10) 0;
  border-top: 1px dashed var(--art-steel-dark);
  color: var(--art-steel-hi);
}
.more-sites__item:first-child { border-top: 0; }
.more-sites__item::before {
  content: counter(floor) "F";
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--r-4);
  background: var(--art-lcd);
  color: var(--art-led);
  font: 800 20px/1 var(--art-num);
  text-shadow: 0 0 6px color-mix(in srgb, var(--art-led) 60%, transparent);
}
.more-sites__item::after {
  content: "▲";
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 32%, var(--art-steel-hi), var(--art-steel-1) 60%, var(--art-steel-2));
  color: var(--art-engrave);
  font-size: 11px;
  transition: background var(--dur-fast);
}
.more-sites__item:active::after { background: radial-gradient(circle at 40% 32%, var(--art-lit-hot), var(--art-lit)); color: var(--art-lit-ink); }
.more-sites__name { grid-column: 2; font: 800 16px/1.3 var(--font-display); }
.more-sites__desc { grid-column: 2; color: var(--art-steel-2); opacity: 1; }
.site-footer { color: var(--art-engrave-2); }

@media (prefers-reduced-motion: reduce) {
  .spark__line { stroke-dashoffset: 0; animation: none; }
  .intercom__led,
  .call[open] .call__grille,
  .seo.notice .call p { animation: none; }
}

/* ? 버튼(2026-10-07): 1초 보이고 뒤집힌 버튼 */
.key.is-q .key__n { display: inline-block; color: #f2a43a; animation: q150 1.6s ease-in-out infinite; }
.key.is-q { animation: q150flip 0.35s ease-out; }
@keyframes q150 { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.08); } }
@keyframes q150flip { 0% { transform: rotateY(90deg); } 100% { transform: none; } }
.qfloat { position: absolute; right: 8px; top: -14px; z-index: 5; padding: 2px 8px; border-radius: 999px; font: 800 13px/1.4 var(--font-sans, sans-serif); color: #fff; pointer-events: none; animation: qfl 1s ease-out forwards; }
.qfloat.is-good { background: #2f8a3e; } .qfloat.is-bad { background: #c23b2a; }
@keyframes qfl { 0% { transform: translateY(6px); opacity: 0; } 20% { transform: none; opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .key.is-q .key__n, .key.is-q, .qfloat { animation: none; } }
.indicator { position: relative; }