/* ===========================================================
   똘켓몬 브랜드 디자인 토큰
   -----------------------------------------------------------
   4개 서비스(도감/채팅/퀴즈/매치)가 단일 origin을 쓰므로
   이 파일 하나를 /shared/tokens.css 로 함께 링크한다.
   Tailwind든 MUI든 순수 CSS든 CSS 변수는 모두 읽으므로,
   각 서비스의 프레임워크를 건드리지 않고 톤을 맞출 수 있다.

   톤: 하이브리드 레트로
     - 제목/버튼/숫자 = 픽셀 폰트(Galmuri)로 게임보이 감성
     - 본문/설명      = 일반 산세리프로 가독성 확보
   =========================================================== */

@font-face {
  font-family: 'Galmuri11';
  src: url('/shared/fonts/Galmuri11.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Galmuri11';
  src: url('/shared/fonts/Galmuri11-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── 브랜드 컬러 ───────────────────────────────── */
  --ddol-navy: #0f0043; /* 기본 배경·텍스트. 도감에서 이어받음 */
  --ddol-navy-soft: #23106b;
  --ddol-yellow: #ffcb05; /* 포켓몬 옐로우. 주 강조색 */
  --ddol-yellow-deep: #cca204;
  --ddol-red: #f73526; /* 몬스터볼 레드. 위험·삭제 아님, 강조용 */
  --ddol-blue: #3663ad;
  --ddol-blue-light: #70cdff;
  --ddol-green: #198754;

  /* ── 표면 ─────────────────────────────────────── */
  --ddol-bg: #f4f6fb;
  --ddol-surface: #ffffff;
  --ddol-surface-alt: #eef1f8;
  --ddol-border: #0f0043;
  --ddol-text: #1a1e21;
  --ddol-text-muted: #5b6068;
  --ddol-text-on-dark: #fefefe;

  /* ── 서비스 아이덴티티 컬러 ─────────────────────── */
  --ddol-svc-dex: #3663ad;
  --ddol-svc-chat: #7c4dbe;
  --ddol-svc-quiz: #e8892b;
  --ddol-svc-match: #1f9d55;

  /* ── 타이포 ───────────────────────────────────── */
  --ddol-font-display: 'Galmuri11', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ddol-font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Malgun Gothic', 'Segoe UI', sans-serif;

  /* ── 레트로 형태 ──────────────────────────────── */
  /* 픽셀 감성의 핵심: 블러 없는 하드 섀도 + 두꺼운 테두리 */
  --ddol-border-w: 3px;
  --ddol-radius: 10px;
  --ddol-shadow: 4px 4px 0 var(--ddol-navy);
  --ddol-shadow-sm: 2px 2px 0 var(--ddol-navy);
  --ddol-shadow-press: 1px 1px 0 var(--ddol-navy);

  /* ── 간격 ─────────────────────────────────────── */
  --ddol-gap-xs: 0.25rem;
  --ddol-gap-sm: 0.5rem;
  --ddol-gap: 1rem;
  --ddol-gap-lg: 1.5rem;
  --ddol-gap-xl: 2.5rem;
}

/* ── 공통 유틸 ─────────────────────────────────────
   각 서비스가 필요할 때만 골라 쓴다. 전역 태그 스타일은
   건드리지 않는다(기존 화면이 깨지므로).
   ================================================== */

.ddol-display {
  font-family: var(--ddol-font-display);
  letter-spacing: -0.02em;
}

.ddol-body {
  font-family: var(--ddol-font-body);
  line-height: 1.6;
}

/* 픽셀 카드: 두꺼운 테두리 + 하드 섀도 */
.ddol-card {
  background: var(--ddol-surface);
  border: var(--ddol-border-w) solid var(--ddol-border);
  border-radius: var(--ddol-radius);
  box-shadow: var(--ddol-shadow);
}

/* 눌리는 느낌의 버튼 — 레트로 감성의 절반은 이 인터랙션에서 나온다 */
.ddol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ddol-gap-sm);
  padding: 0.75rem 1.25rem;
  font-family: var(--ddol-font-display);
  font-weight: 700;
  color: var(--ddol-text-on-dark);
  background: var(--ddol-navy);
  border: var(--ddol-border-w) solid var(--ddol-border);
  border-radius: var(--ddol-radius);
  box-shadow: var(--ddol-shadow);
  cursor: pointer;
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.ddol-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--ddol-shadow-sm);
}
.ddol-btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--ddol-shadow-press);
}
.ddol-btn--accent {
  color: var(--ddol-navy);
  background: var(--ddol-yellow);
}

/* 도감 진행도 게이지 — 칸이 뚝뚝 끊겨 보이도록 계단 애니메이션 */
.ddol-gauge {
  position: relative;
  height: 1.25rem;
  overflow: hidden;
  background: var(--ddol-surface-alt);
  border: var(--ddol-border-w) solid var(--ddol-border);
  border-radius: 999px;
}
.ddol-gauge__fill {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--ddol-yellow) 0 8px,
    var(--ddol-yellow-deep) 8px 10px
  );
  transition: width 0.6s steps(12);
}

@media (prefers-reduced-motion: reduce) {
  .ddol-btn,
  .ddol-gauge__fill {
    transition: none;
  }
}