*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
}

/* === 디자인 토큰 (전체 페이지 공용) === */
:root {
  --font-sans: "Pretendard", system-ui, -apple-system, sans-serif;
  --bs-font-sans-serif: var(--font-sans);

  /* 타이포 스케일 */
  --fs-xs:   0.75rem;     /* 12 — 보조 메타 / 배지 */
  --fs-sm:   0.8125rem;   /* 13 — 데이터 셀 / 폼 라벨 */
  --fs-base: 0.875rem;    /* 14 — 본문 / 데이터 값 */
  --fs-md:   1rem;        /* 16 — 섹션 제목 (h2) */
  --fs-lg:   1.25rem;     /* 20 — 페이지 제목 (h1, 상세 엔티티 이름) */
  --fs-xl:   1.5rem;      /* 24 — 강조 헤더 */

  /* 폰트 굵기 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* 색상 — 텍스트 */
  --c-text:        #111827;  /* 본문 */
  --c-text-muted:  #6b7280;  /* 보조 / 라벨 */
  --c-text-faint:  #9ca3af;  /* 메타 / placeholder */
  --c-text-link:   #1c6dc9;  /* 게임 정합 — Papaya Play 메인 블루 */

  /* 색상 — 표면 */
  --c-bg:          #ffffff;
  --c-bg-muted:    #f9fafb;
  --c-bg-strong:   #f3f4f6;
  --c-bg-active:   #e5e7eb;

  /* 색상 — 보더 */
  --c-border:      #e5e7eb;
  --c-border-soft: #f3f4f6;

  /* 시멘틱 — Primary (Blue) — 게임 정합 (Papaya Play 마린 톤) */
  --c-link-hover:    #244f80;  /* hover — 게임 마린 네이비 (deeper) */
  --c-primary-bg:    #dbeafe;  /* badge / 알림 배경 */
  --c-primary-soft:  #e7f1ff;  /* 더 옅은 강조 */

  /* 시멘틱 — Success (Green) */
  --c-success-bg:     #d4edda;  /* tint 배경 (Bootstrap success-light) */
  --c-success-border: #28a745;
  --c-success-text:   #155724;
  --c-success-strong: #1e7e34;  /* hover/active border */
  --c-success-bg-hover:  #b8e8c0;  /* 완료 버튼 hover 배경 */
  --c-success-bg-active: #a3e0ad;  /* 완료 버튼 active 배경 */

  /* 시멘틱 — Gold (의도된 2계열) */
  /* ⓐ 앰버 — 별 / 배지 (밝은 금) */
  --c-gold-star:   #fbbf24;  /* 별 표시 (rating/난이도) */
  --c-gold-bg:     #fff7e6;  /* 배지 / tag 배경 */
  --c-gold-border: #ffd699;  /* 배지 테두리 */
  --c-gold-text:   #d77800;  /* 배지 텍스트 */
  /* ⓑ 앤틱 금 — 인게임 서고/제목/버튼 */
  --c-gold-rule:       #c2a24c;  /* 섹션·제목 밑줄 (보물/렐릭/위인 공통) */
  --c-gold-heading:    #9c7209;  /* 상세 제목·헤드 띠 */
  --c-gold-btn-bg:     #b8860b;  /* "달성" 토글 버튼 배경 (darkgoldenrod) */
  --c-gold-btn-border: #836008;  /* 골드 버튼 hover 테두리 (가장 짙음) */

  /* 시멘틱 — Danger */
  --c-danger:      #dc3545;  /* 필수표시·삭제 강조 빨강 (부트스트랩 danger) */
  --c-danger-bg:   #fef2f2;
  --c-danger-text: #b91c1c;

  /* Bootstrap 변수 override — 게임 정합 톤 일관 */
  --bs-primary:        #1c6dc9;
  --bs-primary-rgb:    28, 109, 201;
  --bs-link-color:     #1c6dc9;
  --bs-link-color-rgb: 28, 109, 201;
  --bs-link-hover-color:     #244f80;
  --bs-link-hover-color-rgb: 36, 79, 128;
  --bs-btn-color:        #1c6dc9;

  /* 간격 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* 보더 라디우스 */
  --r-sm: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-text);
}

/* GNB — `a { color: inherit }` 전역 규칙이 부트스트랩 nav-link 색을 먹어서 직접 지정.
   active/hover 는 primary blue 대신 중립 톤으로 (파란 배경/문자 회피). */
/* Bootstrap btn-primary — 게임 정합 톤 override */
.btn-primary {
  --bs-btn-bg: #1c6dc9;
  --bs-btn-border-color: #1c6dc9;
  --bs-btn-hover-bg: #244f80;
  --bs-btn-hover-border-color: #244f80;
  --bs-btn-active-bg: #244f80;
  --bs-btn-active-border-color: #1a3a5c;
  --bs-btn-disabled-bg: #1c6dc9;
  --bs-btn-disabled-border-color: #1c6dc9;
}

.btn-outline-primary {
  --bs-btn-color: #1c6dc9;
  --bs-btn-border-color: #1c6dc9;
  --bs-btn-hover-bg: #1c6dc9;
  --bs-btn-hover-border-color: #1c6dc9;
  --bs-btn-active-bg: #1c6dc9;
  --bs-btn-active-border-color: #1c6dc9;
}

.navbar .nav-link { color: #495057; transition: color .15s; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--c-text); }
.navbar .nav-link.active,
.navbar .nav-link.show { color: var(--c-text); font-weight: var(--fw-semibold); }
.navbar .dropdown-item { color: var(--c-text); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { color: var(--c-text); background-color: #f1f5f9; }
.navbar .dropdown-item.active { color: var(--c-text); background-color: var(--c-bg-active); font-weight: var(--fw-semibold); }

/* dropdown 폰트 크기 — Bootstrap 기본 1rem 을 body 토큰에 맞춰 통일 */
.navbar .dropdown-menu { min-width: 10rem; font-size: var(--fs-base); }
.navbar .dropdown-item { font-size: var(--fs-base); }
.navbar .dropdown-item.disabled { color: #adb5bd; }

/* GNB 데스크탑 — 마우스 hover 로 dropdown 노출 (모바일 collapse 모드는 클릭 유지) */
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .dropdown:hover > .dropdown-menu { display: block; }
  /* hover 영역이 끊기지 않게 약간의 brace 영역 — toggle 과 menu 사이 여백을 visually 연결 */
  .navbar-expand-md .navbar-nav .dropdown-menu { margin-top: 0; }

  /* 중첩 dropdown — submenu 는 우측에서 펼쳐짐, hover 로 노출 */
  .navbar .dropdown-submenu { position: relative; }
  .navbar .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -0.25rem;
    margin-left: 0;
  }
  .navbar .dropdown-submenu:hover > .dropdown-menu { display: block; }
  /* submenu trigger 우측 화살표 (▶) — Bootstrap 의 dropdown-toggle 기본 ▼ 화살표를 ▶ 로 교체 */
  .navbar .dropdown-submenu > .dropdown-toggle::after {
    transform: rotate(-90deg);
    margin-left: auto;
  }
}

/* === 링크 — 컨텐츠 영역 통일 ===
   main 안의 일반 anchor 는 --c-text-link (검색 버튼과 동일 토큰) + hover 시 underline.
   제외: .btn (자체 hover 보유), .dg-sort-link (datagrid 헤더 — 시각적으로 plain text).
   footer / navbar 의 anchor 는 main 밖이라 영향 없음.
   추후 색상 변경 = --c-text-link 토큰 (위 디자인 토큰 섹션) 한 줄만 수정.
   추후 plain anchor 추가 시 본 :not 체인에 추가. */
main a:not(.btn):not(.dg-sort-link) {
  color: var(--c-text-link);
  text-decoration: none;
}
main a:not(.btn):not(.dg-sort-link):hover {
  text-decoration: underline;
}