/* ==========================================================================
   8-bit Dark Theme - Global Effects & Common Classes
   ========================================================================== */

/* 픽셀 렌더링 */
html[data-fc-theme="dark8bit"],
body[data-fc-theme="dark8bit"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--fc-bg);
  color: var(--fc-ink);
  font-family: var(--fc-font-body);
}

/* 스캔라인 오버레이 */
html[data-fc-theme="dark8bit"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    transparent 0,
    transparent 2px,
    rgba(255, 107, 157, 0.05) 2px,
    rgba(255, 107, 157, 0.05) 3px
  );
  mix-blend-mode: screen;
}

/* 픽셀 누름 효과 — 모든 버튼에 적용 */
[data-fc-theme="dark8bit"] button:not(:disabled):active,
[data-fc-theme="dark8bit"] .fc8-button:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--fc-line);
}

/* 공통 컴포넌트 클래스 (선택 사용) */
.fc8-card {
  background: var(--fc-surface);
  border: var(--fc-border-width) solid var(--fc-line);
  border-radius: 0;
  box-shadow: var(--fc-shadow-card);
  padding: 16px;
}

.fc8-button {
  font-family: var(--fc-font-body);
  background: var(--fc-accent);
  color: #fff;
  border: var(--fc-border-width) solid var(--fc-line);
  border-radius: 0;
  box-shadow: var(--fc-shadow-card);
  padding: 10px 16px;
  cursor: pointer;
  transition: none;
}

.fc8-panel {
  background: var(--fc-elev);
  border: var(--fc-border-width) solid var(--fc-line-2);
  border-radius: 0;
  padding: 12px;
}

/* 픽셀 폰트 가독성 보호 — 큰 숫자/좌표용 */
.fc8-numeric {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
}

/* 애니메이션 — 부드러운 보간 대신 계단형 */
@keyframes fc-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

@keyframes fc-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 모바일에서 FcSegmented가 캐릭터 단위로 줄바꿈 되지 않도록 보호 */
.fc8-segmented-scroll {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: thin;
}
.fc8-segmented-scroll > [data-fc-slot],
.fc8-segmented-scroll > div {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.fc8-segmented-scroll button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all;
}