/* ===========================================================
   EngBox — 생활필수영어
   모든 색을 명시적으로 지정해 base.html 다크모드 상속 충돌 회피.
   모든 클래스 .eb- 프리픽스로 격리.
   =========================================================== */

.eb-wrap {
  --eb-bg:      #faf6ee;   /* 종이 배경 */
  --eb-card:    #ffffff;
  --eb-ink:     #23201b;   /* 본문 */
  --eb-sub:     #6f675b;   /* 보조 텍스트 */
  --eb-line:    #e7dfd1;   /* 테두리 */
  --eb-accent:  #1f7a5a;   /* 딥 그린 */
  --eb-accent2: #b9472f;   /* 포인트 테라코타 */
  --eb-soft:    #f3ede1;   /* 옅은 면 */
  --eb-shadow:  0 1px 2px rgba(35,32,27,.04), 0 8px 24px rgba(35,32,27,.06);

  max-width: 860px;
  margin: 0 auto;
  padding: 8px 16px 64px;
  color: var(--eb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.eb-wrap *,
.eb-wrap *::before,
.eb-wrap *::after { box-sizing: border-box; }

.eb-wrap a { color: var(--eb-accent); text-decoration: none; }
.eb-wrap a:hover { text-decoration: underline; }

/* ---------- 헤더 ---------- */
.eb-hero {
  text-align: center;
  padding: 30px 12px 18px;
}
.eb-hero .eb-kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--eb-accent);
  background: var(--eb-soft);
  border: 1px solid var(--eb-line);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.eb-hero h1 {
  font-family: Georgia, "Nanum Myeongjo", "Times New Roman", serif;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--eb-ink);
  font-weight: 700;
}
.eb-hero p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--eb-sub);
  font-size: 15px;
}

/* ---------- 점프 네비 (그룹 칩) ---------- */
.eb-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--eb-bg);
  border-bottom: 1px solid var(--eb-line);
  padding: 10px 0;
  margin: 16px -16px 24px;
}
.eb-nav-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: thin;
}
.eb-nav-inner::-webkit-scrollbar { height: 4px; }
.eb-nav-inner::-webkit-scrollbar-thumb { background: var(--eb-line); border-radius: 4px; }
.eb-chip {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--eb-line);
  background: var(--eb-card);
  color: var(--eb-sub) !important;
  white-space: nowrap;
}
.eb-chip:hover { background: var(--eb-soft); text-decoration: none !important; }
.eb-chip.is-active {
  background: var(--eb-accent);
  color: #fff !important;
  border-color: var(--eb-accent);
}

/* ---------- 인덱스: 그룹 + 카드 ---------- */
.eb-group { margin-bottom: 34px; }
.eb-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--eb-accent2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
}
.eb-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--eb-line);
}
.eb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.eb-card {
  display: block;
  background: var(--eb-card);
  border: 1px solid var(--eb-line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--eb-shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  color: var(--eb-ink) !important;
}
.eb-card:hover {
  transform: translateY(-2px);
  border-color: var(--eb-accent);
  text-decoration: none !important;
  box-shadow: 0 4px 8px rgba(35,32,27,.06), 0 14px 32px rgba(35,32,27,.10);
}
.eb-card .eb-icon { font-size: 26px; line-height: 1; }
.eb-card h3 {
  margin: 10px 0 2px;
  font-size: 17px;
  font-weight: 700;
}
.eb-card .eb-en {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--eb-accent);
}
.eb-card .eb-desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--eb-sub);
  line-height: 1.5;
}

/* ---------- 카테고리 페이지 ---------- */
.eb-cat-head {
  text-align: center;
  padding: 8px 0 22px;
}
.eb-cat-head .eb-icon { font-size: 40px; }
.eb-cat-head h1 {
  font-family: Georgia, "Nanum Myeongjo", serif;
  font-size: clamp(26px, 5.5vw, 36px);
  margin: 8px 0 2px;
}
.eb-cat-head .eb-en {
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--eb-accent);
  font-size: 16px;
}
.eb-intro {
  background: var(--eb-soft);
  border-left: 4px solid var(--eb-accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--eb-ink);
  margin: 0 0 22px;
}

/* 표 */
.eb-table-box {
  background: var(--eb-card);
  border: 1px solid var(--eb-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--eb-shadow);
}
.eb-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.eb-table th {
  background: var(--eb-accent);
  color: #fff;
  text-align: left;
  padding: 11px 14px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
}
.eb-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--eb-line);
  color: var(--eb-ink);
  vertical-align: top;
}
.eb-table tbody tr:nth-child(even) { background: #fcfaf5; }
.eb-table tbody tr:hover { background: var(--eb-soft); }
/* 첫 칼럼 약간 강조 */
.eb-table td:first-child { font-weight: 600; }

/* 꿀팁 */
.eb-tips {
  margin: 22px 0 0;
  background: #fff;
  border: 1px dashed var(--eb-accent2);
  border-radius: 14px;
  padding: 16px 18px;
}
.eb-tips h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--eb-accent2);
  font-weight: 700;
}
.eb-tips ul { margin: 0; padding-left: 18px; }
.eb-tips li { font-size: 14px; color: var(--eb-ink); margin: 5px 0; }

/* 이전/다음 + 전체보기 */
.eb-pager {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.eb-pager a {
  flex: 1 1 0;
  min-width: 130px;
  border: 1px solid var(--eb-line);
  background: var(--eb-card);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--eb-ink) !important;
}
.eb-pager a:hover { border-color: var(--eb-accent); text-decoration: none !important; }
.eb-pager .eb-dir { display: block; font-size: 11px; color: var(--eb-sub); font-weight: 500; margin-bottom: 2px; }
.eb-pager .eb-next { text-align: right; }

.eb-allbtn {
  display: block;
  text-align: center;
  margin: 28px auto 0;
  max-width: 260px;
  padding: 12px;
  border-radius: 999px;
  background: var(--eb-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
}
.eb-allbtn:hover { text-decoration: none !important; opacity: .92; }

@media (max-width: 480px) {
  .eb-wrap { padding-left: 12px; padding-right: 12px; }
  .eb-nav { margin-left: -12px; margin-right: -12px; }
  .eb-nav-inner { padding: 0 12px; }
  .eb-table { font-size: 13.5px; }
  .eb-table th, .eb-table td { padding: 9px 10px; }
}