/* ══════════════════════════════════════════════════════════
   달게이 서버 웹사이트 — style.css

   ┌ 목차 ──────────────────────────────────────────────┐
   │  1. 기본 초기화 & CSS 변수                          │
   │  2. 공통 레이아웃 / 페이지 전환                     │
   │  3. 네비게이션 바                                   │
   │  4. 히어로 섹션                                     │
   │  5. 홈 — 모드 목록                                  │
   │  6. 광고 영역 (현재 숨김)                           │
   │  7. 접속 방법 — 단계 카드                           │
   │  8. 패치노트 — 요약 카드                            │
   │  9. 명예의 전당 — 인스타 갤러리                     │
   │ 10. 모드 위키 — 검색 + 레시피 카드                  │
   │ 11. 공지사항                                        │
   │ 12. 모달 공통 (패치노트 모달 + HoF 라이트박스)      │
   │ 13. 푸터                                            │
   │ 14. 반응형 (모바일)                                 │
   └────────────────────────────────────────────────────┘
══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   1. 기본 초기화 & CSS 변수
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* ✏️ 색상을 바꾸고 싶으면 여기서 수정하세요 */
  --nav:    #3E5F44;   /* 네비게이션 / 헤더 배경 */
  --btn:    #5E936C;   /* 버튼 기본 색 */
  --btn-dk: #4a7757;   /* 버튼 hover 색 */
  --accent: #93DA97;   /* 강조색 (로고, 뱃지 등) */
  --bg:     #E8FFD7;   /* 전체 페이지 배경 */
  --card:   #ffffff;   /* 카드 배경 흰색 */
  --card2:  #f4ffe8;   /* 카드 배경 연한 녹색 */
  --dark:   #2d4a30;   /* 짙은 초록 */
  --text:   #1a2e1c;   /* 기본 본문 텍스트 */
  --text2:  #3a5440;   /* 보조 텍스트 */
  --muted:  #6b8f72;   /* 흐린 텍스트 (날짜, 레이블 등) */
  --border: #c5e8c8;   /* 테두리 */
  --nav-h:  60px;      /* 네비 높이 */
  --r:      10px;      /* 카드 모서리 둥글기 */
  --sh:     0 1px 4px rgba(30,60,35,.07), 0 4px 14px rgba(30,60,35,.06);
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  padding-top: var(--nav-h); /* 고정 네비만큼 내용을 아래로 밀기 */
}
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }


/* ═══════════════════════════════════════════════════
   2. 공통 레이아웃 / 페이지 전환
═══════════════════════════════════════════════════ */
/* JS의 showPage()가 .active 클래스를 붙였다 뗌 */
.page        { display: none; min-height: calc(100vh - var(--nav-h) - 140px); }
.page.active { display: block; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.inner     { padding: 52px 0 80px; }
.pg-title  { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.pg-sub    { font-size: 14px; color: var(--muted); margin-bottom: 40px; }


/* ═══════════════════════════════════════════════════
   3. 네비게이션 바
═══════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--nav);
  z-index: 900;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 4px;
}
.nav-logo {
  font-size: 19px; font-weight: 800; color: var(--accent);
  cursor: pointer; white-space: nowrap; margin-right: 10px; letter-spacing: -.02em;
}
.nav-links { display: flex; gap: 2px; flex: 1; list-style: none; }
.nav-links button {
  padding: 7px 13px; border-radius: 6px;
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.82);
  background: none; border: none; cursor: pointer;
  transition: background .13s, color .13s; white-space: nowrap;
}
.nav-links button:hover,
.nav-links button.active { background: rgba(255,255,255,.15); color: #fff; }
/* Mod Wiki 버튼 — 과하지 않게 구분 */
.nav-links button.wiki-nav {
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
}
.nav-links button.wiki-nav:hover,
.nav-links button.wiki-nav.active { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }

/* ✏️ 우상단 CTA 버튼 텍스트는 index.html 네비 섹션에서 수정 */
.nav-cta {
  margin-left: auto; padding: 8px 18px;
  background: var(--btn); color: #fff;
  border: none; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .13s; display: inline-block;
}
.nav-cta:hover { background: var(--btn-dk); }

/* 모바일 햄버거 아이콘 */
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; border-radius: 6px; margin-left: auto;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.nav-burger:hover { background: rgba(255,255,255,.1); }

/* 모바일 드롭다운 메뉴 */
.nav-mobile {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--dark); z-index: 850;
  padding: 10px 0 14px; box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.nav-mobile.open { display: block; }
.nav-mobile button {
  display: block; width: 100%; text-align: left;
  padding: 11px 24px; font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.82); background: none; border: none; cursor: pointer;
}
.nav-mobile button.active,
.nav-mobile button:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-mobile button.wiki-nav { border-left: 2px solid rgba(255,255,255,.35); color: #fff; }
.mob-cta {
  display: block; margin: 10px 24px 0; padding: 10px;
  background: var(--btn); color: #fff;
  border-radius: 7px; text-align: center; font-size: 14px; font-weight: 600;
}


/* ═══════════════════════════════════════════════════
   4. 히어로 섹션
═══════════════════════════════════════════════════ */
.hero {
  background: #1b2e1d;
  min-height: 480px; display: flex; align-items: center;
  position: relative; overflow: hidden;
}
/* BG 이미지 (블러 처리) */
.hero::before {
  content: ''; position: absolute; inset: -20px;
  background: url('BG.png') center/cover no-repeat;
  filter: blur(4px) brightness(0.45) saturate(0.8);
}
/* 어두운 오버레이 */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(20,35,22,.5) 0%, rgba(15,25,17,.5) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 72px 24px; text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; background: rgba(147,218,151,.15);
  border: 1px solid rgba(147,218,151,.35); border-radius: 20px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 22px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(147,218,151,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(147,218,151,.0); }
}
.hero-title {
  font-size: clamp(44px, 8vw, 72px); font-weight: 900; color: #fff;
  line-height: 1.1; margin-bottom: 12px; letter-spacing: -.03em;
}
.hero-title span { color: var(--accent); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.68); font-weight: 400; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 채움 버튼 */
.btn-primary {
  padding: 13px 28px; background: var(--btn); color: #fff;
  border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(94,147,108,.35);
  transition: background .13s, transform .1s, box-shadow .13s; display: inline-block;
}
.btn-primary:hover { background: var(--btn-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(94,147,108,.4); }

/* 테두리 버튼 */
.btn-outline {
  padding: 13px 28px; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .13s;
}
.btn-outline:hover { background: rgba(255,255,255,.18); }


/* ═══════════════════════════════════════════════════
   5. 홈 — 모드 목록
   ✏️ 모드 카드 추가는 index.html의 <!-- 모드 추가 --> 주석 위치
═══════════════════════════════════════════════════ */
.mod-section { padding: 48px 0 56px; }
.mod-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.mod-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 22px; }
.mod-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mod-card  {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh);
  transition: border-color .13s, box-shadow .13s;
}
.mod-card:hover { border-color: #a7d9ab; box-shadow: 0 4px 18px rgba(30,60,35,.1); }
.mod-card-icon { font-size: 24px; margin-bottom: 8px; }
.mod-card-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.mod-card-desc { font-size: 12.5px; color: var(--muted); }


/* ═══════════════════════════════════════════════════
   6. 광고 영역 (현재 숨김)
   ✏️ 광고를 활성화하려면 아래 줄을 삭제하세요:
      .ad-banner { display: none !important; }
═══════════════════════════════════════════════════ */
.ad-banner { display: none !important; }


/* ═══════════════════════════════════════════════════
   7. 접속 방법 — 단계 카드
   ✏️ 단계 내용 수정은 index.html의 <!-- 단계 수정 --> 주석 위치
═══════════════════════════════════════════════════ */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px 22px;
  display: flex; gap: 18px; align-items: flex-start;
  box-shadow: var(--sh); transition: border-color .13s;
}
.step-card:hover { border-color: #a7d9ab; }
.step-n {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--btn); color: #fff;
  font-size: 16px; font-weight: 800; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.step-body  { flex: 1; }
.step-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.step-en    { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.step-desc  { font-size: 13.5px; color: var(--text2); line-height: 1.75; }
.step-desc code {
  background: #e6f5e0; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  font-family: 'Courier New', monospace; font-size: 12.5px; color: var(--nav);
}
.step-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; padding: 5px 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--btn-dk);
  transition: background .12s;
}
.step-link:hover { background: #d4f0d8; border-color: var(--accent); }
.step-warn {
  margin-top: 8px; padding: 8px 12px;
  background: #fffbeb; border-left: 3px solid #f59e0b;
  border-radius: 4px; font-size: 13px; color: #78350f;
}


/* ═══════════════════════════════════════════════════
   8. 패치노트 — 요약 카드 (클릭하면 모달 오픈)
   ✏️ 패치 내용 수정은 index.html의 <template id="patch-..."> 태그
═══════════════════════════════════════════════════ */
.patch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.patch-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  cursor: pointer; transition: transform .14s, box-shadow .14s;
}
.patch-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(30,60,35,.12); }
.patch-head {
  background: var(--nav); padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.patch-season { font-size: 18px; font-weight: 800; color: #fff; }
.patch-badge  { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid; }
.patch-badge.on  { background: rgba(147,218,151,.2); color: var(--accent); border-color: rgba(147,218,151,.5); }
.patch-badge.off { background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.2); }
.patch-body    { padding: 18px 20px; }
.patch-date    { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.patch-summary { font-size: 13.5px; color: var(--text2); line-height: 1.6; }
.patch-read-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--btn-dk);
}
.patch-read-more::after { content: ' →'; }

/* 패치노트 모달 안 스타일 */
.patch-modal-body { padding: 28px 32px 32px; }
.patch-modal-body h3 { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.patch-modal-body .pm-date { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.patch-modal-body h4 {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.patch-modal-body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.patch-modal-body ul li {
  font-size: 14px; color: var(--text2);
  padding-left: 20px; position: relative; line-height: 1.8;
}
.patch-modal-body ul li::before { content: '▸'; position: absolute; left: 0; color: var(--btn); }
.patch-modal-body code {
  background: #e6f5e0; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  font-family: 'Courier New', monospace; font-size: 12.5px; color: var(--nav);
}
.patch-modal-body p { font-size: 14px; color: var(--text2); line-height: 1.8; }


/* ═══════════════════════════════════════════════════
   9. 명예의 전당 — 인스타 갤러리 + 라이트박스
   ✏️ 후보 카드 추가는 index.html의 <!-- 후보 추가 --> 주석 위치
═══════════════════════════════════════════════════ */
/* 시즌 탭 */
.hof-season-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.hof-season-tab {
  padding: 10px 26px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--card); font-size: 15px; font-weight: 700;
  color: var(--text2); cursor: pointer; transition: all .13s;
}
.hof-season-tab:hover  { border-color: var(--btn); color: var(--btn-dk); }
.hof-season-tab.active { background: var(--nav); border-color: var(--nav); color: #fff; }

.hof-season        { display: none; }
.hof-season.active { display: block; }

/* 카테고리 탭 */
.hof-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.hof-tab {
  padding: 8px 20px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .13s;
}
.hof-tab:hover  { border-color: var(--btn); color: var(--btn-dk); }
.hof-tab.active { background: var(--btn); border-color: var(--btn); color: #fff; }

.hof-cat        { display: none; }
.hof-cat.active { display: block; }

/* 1위 카드 */
.hof-winner {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px;
  display: flex; gap: 24px; align-items: center;
  box-shadow: var(--sh); margin-bottom: 36px;
}
.hof-winner-img {
  width: 140px; height: 140px; border-radius: 12px; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 64px; background: linear-gradient(135deg,#c8eecc,#7dc88a);
}
.hof-winner-img img { width: 100%; height: 100%; object-fit: cover; }
.hof-crown { font-size: 26px; line-height: 1; margin-bottom: 5px; }
.hof-winner-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.hof-winner-nick  { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.hof-winner-desc  { font-size: 14px; color: var(--text2); }

/* 후보 갤러리 레이블 */
.hof-gallery-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 16px;
}

/* 인스타 스타일 그리드 */
.hof-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.hof-gallery-item {
  position: relative; aspect-ratio: 1 / 1;
  overflow: hidden; cursor: pointer; border-radius: 8px;
  background: #111;
}
/* 실제 사진이 있는 경우 */
.hof-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
/* 사진 없을 때 이모지 플레이스홀더 */
.hof-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 48px;
  background: linear-gradient(135deg, var(--card2), var(--border));
}
/* 호버 시 어두운 오버레이 + 닉네임 표시 */
.hof-overlay {
  position: absolute; inset: 0;
  background: rgba(30,60,35,.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s;
  color: #fff; text-align: center; padding: 12px;
}
.hof-gallery-item:hover img     { transform: scale(1.07); }
.hof-gallery-item:hover .hof-overlay { opacity: 1; }
.hof-overlay-nick { font-size: 16px; font-weight: 800; }
.hof-overlay-desc { font-size: 12px; margin-top: 4px; opacity: .85; }

/* 라이트박스 모달 내부 레이아웃 */
.hof-modal-inner {
  display: flex; gap: 32px; align-items: flex-start;
  padding: 32px 36px 36px;
}
.hof-modal-img-wrap {
  width: 62%; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
  background: #111; display: flex; align-items: center; justify-content: center;
  font-size: 120px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
/* 이미지는 자연 비율 그대로 — letterbox 없음 */
.hof-modal-img-wrap img { width: 100%; height: auto; object-fit: unset; display: block; }

/* ── 캐러셀 화살표 ── */
.hof-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: none; color: #fff;
  font-size: 22px; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s; user-select: none;
}
.hof-carousel-arrow:hover { background: rgba(0,0,0,.82); }
.hof-carousel-prev { left: 10px; }
.hof-carousel-next { right: 10px; }

/* ── 슬라이드 카운터 (우상단) ── */
.hof-carousel-counter {
  position: absolute; top: 10px; right: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 10px; pointer-events: none; z-index: 3;
}

/* ── 하단 도트 ── */
.hof-carousel-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 3;
}
.hof-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .13s, transform .13s;
}
.hof-dot.active { background: #fff; transform: scale(1.25); }

/* ── 갤러리 썸네일 — 사진 여러장 배지 ── */
.hof-gallery-item.hof-multi::after {
  content: '⊞';
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.58); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 4px;
  pointer-events: none; z-index: 1;
}
.hof-modal-info { flex: 1; padding: 8px 0; }
.hof-modal-cat {
  display: inline-block; padding: 5px 16px;
  background: var(--btn); color: #fff;
  border-radius: 14px; font-size: 13px; font-weight: 700; margin-bottom: 18px;
}
.hof-modal-nick { font-size: 32px; font-weight: 900; color: var(--text); margin-bottom: 14px; line-height: 1.2; }
.hof-modal-desc { font-size: 15px; color: var(--text2); line-height: 1.8; }

/* ── 위키 아이템 라이트박스 모달 ── */
.wiki-modal-body {
  padding: 24px 24px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.wiki-modal-imgs {
  display: flex; gap: 20px; justify-content: center; align-items: center;
  width: 100%;
}
/* 이미지 1개: 최대 500px */
.wiki-modal-imgs img {
  max-width: 500px; width: 100%;
  object-fit: contain; border-radius: 0;
}
/* 이미지 2개: 각각 절반 */
.wiki-modal-imgs.two-imgs img {
  max-width: calc(50% - 10px);
}
.wiki-modal-name {
  font-size: 18px; font-weight: 700; color: var(--text2); text-align: center; line-height: 1.4;
}


/* ═══════════════════════════════════════════════════
   10. 모드 위키 — 사이드바 + 콘텐츠 패널 레이아웃
   ✏️ 레시피/가이드 수정은 wiki-data.js 에서만 하세요
═══════════════════════════════════════════════════ */

/* ── 전체 레이아웃 ── */
.wiki-layout {
  display: flex;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

/* ── 왼쪽 사이드바 ── */
.wiki-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wiki-sidebar-inner {
  flex: 1; overflow-y: auto; padding: 14px 0 24px;
}

/* 검색창 */
.wiki-sidebar-search-wrap { padding: 0 12px 12px; }
.wiki-sidebar-search {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  font-family: 'Pretendard', sans-serif; font-size: 13.5px; color: var(--text);
  outline: none; transition: border-color .13s;
}
.wiki-sidebar-search:focus { border-color: var(--btn); }

/* 사이드바 레이블 */
.wiki-sidebar-label {
  padding: 0 16px 6px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}

/* 모드 항목 */
.wiki-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.wiki-sidebar-item:hover { background: var(--bg); }
.wiki-sidebar-item.active {
  background: rgba(94,147,108,.10);
  border-left-color: var(--btn);
}
.wiki-sidebar-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.wiki-sidebar-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }

/* ── 오른쪽 콘텐츠 영역 ── */
.wiki-main {
  flex: 1; overflow-y: auto;
  padding: 32px 36px 80px;
  background: var(--bg);
}

/* 모드 패널 — 기본은 숨김, .active 일 때만 표시 */
.wiki-mod-panel { display: none; }
.wiki-mod-panel.active { display: block; }

/* 검색 모드: 사이드바 숨기고 모든 패널 펼침 */
.wiki-layout.wiki-search-mode .wiki-sidebar { display: none; }
.wiki-layout.wiki-search-mode .wiki-mod-panel { display: block; }

/* 패널 상단 제목 */
.wiki-panel-title {
  font-size: 22px; font-weight: 800; color: var(--text);
  padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

/* 카테고리 섹션 */
.wiki-cat-section { margin-bottom: 36px; }
.wiki-cat-title {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.wiki-cat-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── 레시피 카드 ── */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.recipe-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  transition: transform .14s, box-shadow .14s;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,60,35,.1); }
.recipe-img {
  width: 100%; aspect-ratio: 1 / 1; max-height: 160px;
  background: var(--card2); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.recipe-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.recipe-img.multi-img { gap: 0; }
.recipe-img.multi-img img { width: 50%; flex-shrink: 0; padding: 10px; }
.recipe-img.no-img::after { content: '📦'; font-size: 48px; }
.recipe-img.no-img img { display: none; }
.recipe-card-body { padding: 12px 14px; }
.recipe-card-body h4 { font-size: 13.5px; font-weight: 700; color: var(--text); }

/* ── 가이드 카드 ── */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.guide-entry-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh);
}
.guide-entry-icon { font-size: 26px; margin-bottom: 8px; }
.guide-entry-title { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.guide-entry-body { font-size: 13px; color: var(--text2); line-height: 1.7; white-space: pre-line; }

/* 검색 결과 없음 */
.wiki-empty { display: none; text-align: center; padding: 56px 24px; color: var(--muted); font-size: 15px; }
.wiki-empty.show { display: block; }


/* ═══════════════════════════════════════════════════
   11. 공지사항
   ✏️ 공지 추가는 index.html의 <!-- 공지 추가 --> 주석 위치
   ✏️ 태그 종류: tag-공지 / tag-이벤트 / tag-긴급 / tag-업데이트
═══════════════════════════════════════════════════ */
.notice-list { display: flex; flex-direction: column; gap: 16px; }
.notice-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px 24px;
  box-shadow: var(--sh); transition: border-color .13s;
}
.notice-item:hover { border-color: #a7d9ab; }

/* 날짜 + 카테고리 배지 */
.notice-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.notice-date { font-size: 12px; color: var(--muted); }
.notice-tag  { padding: 2px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700; }
.notice-tag.tag-공지    { background: #e8f4ff; color: #2563eb; }
.notice-tag.tag-이벤트  { background: #fff7e6; color: #d97706; }
.notice-tag.tag-긴급    { background: #fff0f0; color: #dc2626; }
.notice-tag.tag-업데이트 { background: #f0fff4; color: #16a34a; }

.notice-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.notice-body  { font-size: 14px; color: var(--text2); line-height: 1.8; white-space: pre-line; }


/* ═══════════════════════════════════════════════════
   12. 모달 공통 (패치노트 + HoF 라이트박스 공유)
═══════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.72);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--card); border-radius: 14px;
  width: 100%; max-width: 1100px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: modal-in .18s ease;
}
@keyframes modal-in {
  from { transform: scale(.95); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* 모달 헤더 (짙은 초록 바) */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: var(--nav); flex-shrink: 0;
}
.modal-header-title { font-size: 17px; font-weight: 800; color: #fff; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s;
}
.modal-close:hover { background: rgba(255,255,255,.28); }

/* 모달 내용 스크롤 영역 */
.modal-scroll { overflow-y: auto; flex: 1; }


/* ═══════════════════════════════════════════════════
   13. 광고 배너
═══════════════════════════════════════════════════ */
.ad-banner-wrap {
  width: 100%; background: var(--bg);
  padding: 10px 0; text-align: center;
  min-height: 90px; /* 배너 공간 확보 */
}


/* ═══════════════════════════════════════════════════
   14. 푸터
═══════════════════════════════════════════════════ */
footer { background: var(--nav); color: rgba(255,255,255,.6); padding: 36px 0 28px; text-align: center; }
.footer-logo    { font-size: 20px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.footer-tagline { font-size: 13px; margin-bottom: 18px; }
.footer-links   { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.footer-links a { font-size: 12.5px; color: rgba(255,255,255,.5); transition: color .12s; }
.footer-links a:hover { color: var(--accent); }
.footer-legal   { font-size: 11.5px; color: rgba(255,255,255,.3); line-height: 1.9; }


/* ═══════════════════════════════════════════════════
   14. 반응형 (모바일)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 네비: 링크 숨기고 햄버거 표시 */
  .nav-links, .nav-cta { display: none; }
  .nav-burger           { display: flex; }
  /* HoF 1위 카드: 세로 정렬 */
  .hof-winner { flex-direction: column; text-align: center; }
  /* 위키 사이드바: 모바일에서 위에 표시 */
  .wiki-layout { flex-direction: column; height: auto; overflow: visible; }
  .wiki-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; overflow-y: auto; }
  .wiki-main { padding: 20px 16px 60px; }
  /* 라이트박스: 세로 정렬 */
  .hof-modal-inner { flex-direction: column; padding: 20px; }
  .hof-modal-img-wrap { width: 100%; }
  /* 위키 모달: 이미지 세로 정렬 */
  .wiki-modal-imgs { flex-direction: column; }
  .wiki-modal-imgs img { max-width: 100%; }
}
@media (max-width: 480px) {
  .pg-title    { font-size: 22px; }
  .hero-title  { font-size: 38px; }
  .step-card   { flex-direction: column; }
  .hof-gallery { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .patch-modal-body { padding: 18px; }
}