/* ============================================================
   D1-A · Editor's Curation Design System
   - 모던 커머스 (메인/카테고리/popular/guide) + 뉴스레터 에디토리얼 (상세)
   - 기존 main.css(Massively) 위에 로드되어 새 컴포넌트를 추가/오버라이드
   - 디자인 토큰은 :root 변수로 정의 → 모든 컴포넌트가 공유
   - 폰트: Pretendard는 jsdelivr CDN(한글 청크 다이나믹 서브셋, 100여개 분리 로드)
           Fraunces / JetBrains Mono는 자체 호스팅 (영문 latin 서브셋 woff2)
   ============================================================ */

/* —— 자체 호스팅 영문 폰트 (Latin 서브셋) —— */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* —— Tokens —— */
:root {
  --c-ink-900: #0F1419;
  --c-ink-800: #1B2129;
  --c-ink-700: #2C3340;
  --c-ink-600: #4A5260;
  --c-ink-500: #6B7380;
  --c-ink-400: #9099A6;
  --c-ink-300: #C5CBD2;
  --c-ink-200: #E4E7EB;
  --c-ink-100: #F1F2F4;
  --c-paper:   #FAFAF7;
  --c-paper-pure: #FFFFFF;

  --c-brand: #1A2332;
  --c-brand-hover: #0F1419;
  --c-accent: #C9472D;

  /* 카테고리 9개 (실제 config.php 매핑: 1전자기기, 2게임, 3캠핑, 4운동, 5패션잡화, 6신선식품, 7육아, 8생활, 9펫) */
  --cat-1: #2E5C8A;  /* 전자기기 — 잉크 블루 */
  --cat-2: #6B4E8E;  /* 게임 — 머스크 퍼플 */
  --cat-3: #4A6B3D;  /* 캠핑 — 모스 그린 */
  --cat-4: #2E7D6B;  /* 운동 — 틸 */
  --cat-5: #B85C7A;  /* 패션잡화 — 더스티 로즈 */
  --cat-6: #C9472D;  /* 신선식품 — 테라코타 */
  --cat-7: #C99A4E;  /* 육아 — 샌드 */
  --cat-8: #8A6F2E;  /* 생활 — 머스타드 브론즈 */
  --cat-9: #5A6B7D;  /* 펫 — 슬레이트 */

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 9999px;

  --sh-sm: 0 1px 2px rgba(15,20,25,0.04), 0 2px 6px rgba(15,20,25,0.04);
  --sh-md: 0 4px 12px rgba(15,20,25,0.06), 0 12px 28px rgba(15,20,25,0.08);
  --sh-lg: 0 8px 24px rgba(15,20,25,0.08), 0 24px 56px rgba(15,20,25,0.10);

  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --ff-serif: 'Fraunces', 'Pretendard Variable', Georgia, 'Times New Roman', serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   GLOBAL BOX-SIZING (main.css 주석 처리 여부와 무관하게 항상 border-box)
   - padding/border가 width를 늘리지 않도록 강제
   - !important로 main.css의 inherit 패턴과 충돌 방지
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* ============================================================
   유틸리티 클래스 (main.css 주석 시에도 살아남도록 design.css에 복사)
   - margin-top / margin-bottom 단축 클래스
   - text-align 단축 클래스
   - 기존 main.css와 동일한 !important 정책 유지
   ============================================================ */
.tm10 { margin-top: 10px !important; }
.tm20 { margin-top: 20px !important; }
.tm30 { margin-top: 30px !important; }
.bm30 { margin-bottom: 30px !important; }
.ac { text-align: center; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ============================================================
   BASE OVERRIDES — Massively 다크 톤을 페이퍼 톤으로
   ============================================================ */
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--c-paper) !important;
  font-family: var(--ff-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--c-ink-700);
}
body.is-preload { background: var(--c-paper) !important; }
body, body * { -webkit-text-size-adjust: 100%; }

#wrapper { background: var(--c-paper); }
#wrapper.fade-in { opacity: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   ▶ 헤더 / 네비
   - 기존 #header / #nav 위에 새 디자인을 입힘
   - Massively의 다크 텍스처/배경 제거, 미디어 매거진 헤더로 교체
   ============================================================ */
#header {
  background: var(--c-paper-pure) !important;
  border-bottom: 1px solid var(--c-ink-200);
  padding: var(--s-5) var(--s-6) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
  position: relative;
  height: auto !important;
  cursor: default !important;
  text-align: center;
  z-index: 5;
}
#header::before, #header::after { display: none !important; }

.site-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c-ink-500);
  text-transform: uppercase;
  text-align: left;
}
.site-meta b { color: var(--c-ink-900); font-weight: 500; }
.site-meta span + span { margin-left: var(--s-4); }

#header .logo {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-serif) !important;
  font-weight: 600;
  font-size: 26px !important;
  letter-spacing: -0.04em;
  color: var(--c-ink-900) !important;
  border: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
#header .logo::before {
  content: "J";
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-ink-900);
  color: var(--c-paper);
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.site-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.site-cta a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 14px !important;
  border: 1px solid var(--c-ink-300);
  border-radius: var(--r-pill) !important;
  color: var(--c-ink-900) !important;
  background: var(--c-paper-pure) !important;
  transition: all .2s var(--ease);
  text-decoration: none !important;
  height: auto !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.site-cta a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.site-cta a span { display: inline-block; }
.site-cta a:hover {
  border-color: var(--c-ink-900);
  background: var(--c-ink-900) !important;
  color: var(--c-paper) !important;
}
.site-cta a.cta-popular {
  border-color: var(--c-accent);
  color: var(--c-accent) !important;
}
.site-cta a.cta-popular:hover {
  background: var(--c-accent) !important;
  color: var(--c-paper) !important;
  border-color: var(--c-accent);
}

/* —— Nav (카테고리 + 인기) —— */
#nav {
  background: var(--c-paper) !important;
  border-top: 1px solid var(--c-ink-100);
  border-bottom: 1px solid var(--c-ink-200);
  padding: 0 !important;
  height: auto !important;
  position: relative !important;
  z-index: 4;
}
#nav::before, #nav::after { display: none !important; }
#nav .links {
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 0 var(--s-6) !important;
  display: flex !important;
  align-items: center;
  gap: 2px !important;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none !important;
  white-space: nowrap;
}
#nav .links::-webkit-scrollbar { display: none; }
#nav .links li {
  display: inline-flex !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#nav .links li a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 14px 16px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink-600) !important;
  letter-spacing: -0.01em;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all .15s var(--ease);
  text-decoration: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}
#nav .links li a:hover { color: var(--c-ink-900) !important; }
#nav .links li.active a,
#nav .links li a.active {
  color: var(--c-ink-900) !important;
  border-bottom-color: var(--c-ink-900);
  font-weight: 600;
}
#nav .links li a small,
#nav .links li a .nav-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--c-ink-400);
  font-weight: 400;
}
#nav .links li.nav-popular a {
  color: var(--c-accent) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
#nav .links li.nav-popular a::before {
  content: "";
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
#nav .links li.nav-popular.active a { border-bottom-color: var(--c-accent); }

@media (max-width: 768px) {
  #header { grid-template-columns: 1fr auto; padding: var(--s-4) var(--s-4) !important; }
  .site-meta { display: none; }
  .site-cta { gap: var(--s-2); }
  .site-cta a { padding: 6px 10px; font-size: 11px; }
  #nav .links { padding: 0 var(--s-4) !important; }
}

/* ============================================================
   MAIN AREA — 다크 배경 제거, 페이퍼로
   ============================================================ */
#main {
  background: var(--c-paper) !important;
  padding: var(--s-12) var(--s-8) !important;
  max-width: 1440px;
  margin: 0 auto !important;
  width: 100% !important;
}
#main::before, #main::after { display: none !important; }
@media (max-width: 768px) { #main { padding: var(--s-8) var(--s-4) !important; } }

/* ============================================================
   COMMON COMPONENTS
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--c-accent);
}

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  background: var(--cat-bg, var(--c-ink-100));
  color: var(--cat-fg, var(--c-ink-800));
  line-height: 1.4;
}
.cat-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cat-fg, var(--c-ink-800));
}
[data-cat="1"] { --cat-fg: var(--cat-1); --cat-bg: rgba(46,92,138,0.08); }
[data-cat="2"] { --cat-fg: var(--cat-2); --cat-bg: rgba(107,78,142,0.08); }
[data-cat="3"] { --cat-fg: var(--cat-3); --cat-bg: rgba(74,107,61,0.08); }
[data-cat="4"] { --cat-fg: var(--cat-4); --cat-bg: rgba(46,125,107,0.08); }
[data-cat="5"] { --cat-fg: var(--cat-5); --cat-bg: rgba(184,92,122,0.08); }
[data-cat="6"] { --cat-fg: var(--cat-6); --cat-bg: rgba(201,71,45,0.08); }
[data-cat="7"] { --cat-fg: var(--cat-7); --cat-bg: rgba(201,154,78,0.10); }
[data-cat="8"] { --cat-fg: var(--cat-8); --cat-bg: rgba(138,111,46,0.08); }
[data-cat="9"] { --cat-fg: var(--cat-9); --cat-bg: rgba(90,107,125,0.10); }

.btn-design {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.btn-design.primary { background: var(--c-brand); color: var(--c-paper-pure); }
.btn-design.primary:hover { background: var(--c-brand-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-design.ghost { background: transparent; color: var(--c-ink-900); border-color: var(--c-ink-900); }
.btn-design.ghost:hover { background: var(--c-ink-900); color: var(--c-paper-pure); }
.btn-design.text { padding: 6px 0; background: transparent; color: var(--c-ink-900); border-radius: 0; border-bottom: 1px solid var(--c-ink-900); }
.btn-design.text:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ============================================================
   ▶ 메인 카드 그리드 (.posts 오버라이드)
   - 기존 <section class="posts"><article> 구조 유지
   - 모바일 2 / 태블릿 3 / PC 4열 그리드
   ============================================================ */
.posts {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--s-8) var(--s-6) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.posts::before, .posts::after { display: none !important; }
@media (max-width: 1280px) { .posts { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 900px)  { .posts { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px)  { .posts { grid-template-columns: 1fr !important; gap: var(--s-5) !important; } }

.posts > .card-article {
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-lg);
  /* overflow: hidden 대신 카드 본체는 visible (호버 그림자가 안 잘림) */
  /* 이미지 영역만 별도로 overflow:hidden 처리 → 둥근 모서리 + 줌 효과 유지 */
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  min-width: 0; /* grid item 안에서 발생할 수 있는 overflow 방지 */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.posts > .card-article::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cat-fg, var(--c-ink-900));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
  z-index: 2;
  /* 카드 좌측 둥근 모서리에 맞춰 컬러바도 둥글게 (overflow:hidden 제거에 따른 보정) */
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.posts > .card-article:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-ink-300);
}
.posts > .card-article:hover::before { transform: scaleY(1); }

/* 카드 헤더 (date + title 영역) */
.posts > .card-article > header {
  order: 2;
  padding: var(--s-5) var(--s-6) 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.posts > .card-article > header .date {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-ink-500);
  letter-spacing: 0.06em;
  margin-bottom: var(--s-3) !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-transform: none;
}
.posts > .card-article > header h2 {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.35 !important;
  color: var(--c-ink-900) !important;
  margin: 0 0 var(--s-2) !important;
  font-family: var(--ff-sans) !important;
  text-transform: none !important;
}
.posts > .card-article > header h2 a {
  color: var(--c-ink-900) !important;
  border: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 이미지 영역 (overflow:hidden + 위쪽 모서리만 둥글게) */
.posts > .card-article > a.image {
  order: 1;
  position: relative;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-ink-100);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  width: 100%;
}
.posts > .card-article > a.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.posts > .card-article:hover > a.image img { transform: scale(1.04); }

/* 카드 발행번호 */
.card-no {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-ink-900);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-weight: 500;
  z-index: 2;
}
.card-cat-corner {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
}

/* 본문 paragraph */
.posts > .card-article > p {
  order: 3;
  padding: 0 var(--s-6) !important;
  margin: 0 0 var(--s-5) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--c-ink-500) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left !important;
}

/* CTA actions */
.posts > .card-article > .actions {
  order: 4;
  margin: auto 0 0 !important;
  padding: var(--s-4) var(--s-6) var(--s-6) !important;
  border-top: 1px dashed var(--c-ink-200);
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  list-style: none !important;
  gap: var(--s-3) !important;
}
.posts > .card-article > .actions::before, .posts > .card-article > .actions::after { display: none !important; }
.posts > .card-article > .actions li {
  padding: 0 !important;
  border: 0 !important;
}
.posts > .card-article > .actions li a.button {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--c-ink-900) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  transition: gap .2s var(--ease), color .2s var(--ease);
  box-shadow: none !important;
}
.posts > .card-article > .actions li a.button::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.posts > .card-article:hover > .actions li a.button {
  color: var(--c-accent) !important;
  gap: 8px;
}
.posts > .card-article > .actions .clicks {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-ink-500);
  letter-spacing: 0.05em;
}
.posts > .card-article > .actions .clicks b { color: var(--c-ink-900); font-weight: 600; }

/* ============================================================
   메인 페이지 헤로 (선택 — main.php 위에 추가)
   ============================================================ */
.main-hero {
  margin: 0 0 var(--s-16);
  padding: var(--s-12) 0 var(--s-10);
  border-bottom: 1px solid var(--c-ink-200);
}
.main-hero h1.lead {
  font-family: var(--ff-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--c-ink-900);
  margin: var(--s-5) 0 var(--s-5);
}
.main-hero h1.lead em {
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.045em;
}
.main-hero p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink-600);
  margin: 0;
}

/* ============================================================
   페이지네이션
   ============================================================ */
#main > footer,
section.posts + footer {
  background: transparent !important;
  padding: var(--s-10) 0 0 !important;
  text-align: center;
}
#main > footer .pagination,
section.posts + footer .pagination {
  display: inline-flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#main > footer .pagination a,
section.posts + footer .pagination a,
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--ff-mono);
  color: var(--c-ink-600);
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-sm);
  transition: all .15s var(--ease);
}
.pagination a:hover { border-color: var(--c-ink-900); color: var(--c-ink-900); }
.pagination a.active,
.pagination strong {
  background: var(--c-ink-900);
  color: var(--c-paper-pure);
  border-color: var(--c-ink-900);
  font-weight: 600;
}

/* ============================================================
   ▶ 인기글 (popular.php) — 1~3위 강조
   ============================================================ */
.popular-hero {
  background: var(--c-ink-900);
  color: var(--c-paper);
  /* #main 의 padding과 일치하는 음수 마진 (border-box 가정) */
  margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-8)) var(--s-12);
  padding: var(--s-16) var(--s-8);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
@media (max-width: 768px) {
  .popular-hero {
    margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-4)) var(--s-10);
    padding: var(--s-12) var(--s-4);
  }
}
.popular-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 0%, rgba(201,71,45,0.12), transparent 40%);
  pointer-events: none;
}
.popular-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.popular-hero .eyebrow { color: var(--c-ink-300); }
.popular-hero h1 {
  margin: var(--s-3) 0 0;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--c-paper);
}
.popular-hero h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
}
.popular-hero p {
  margin: var(--s-5) 0 0;
  font-size: 15px;
  color: var(--c-ink-300);
}

/* 1~3위 포디움 카드 (.posts > .card-article 위에 .rank-top3 클래스 추가) */
.posts > .card-article.rank-top3 {
  grid-column: span 1;
  background: var(--c-paper-pure);
  border-color: var(--c-ink-200);
}
.posts > .card-article .rank-medal {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-ink-900);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-ink-200);
}
.posts > .card-article[data-rank="1"] .rank-medal { color: #B8893E; border-color: #B8893E; }
.posts > .card-article[data-rank="2"] .rank-medal { color: #6E7480; border-color: #6E7480; }
.posts > .card-article[data-rank="3"] .rank-medal { color: #A26A3D; border-color: #A26A3D; }

.posts > .card-article .rank-clicks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ============================================================
   ▶ 가이드 페이지 (guide.php)
   - 기존 .guide-* 클래스 재정의
   ============================================================ */
section.post.guide-page { padding: 0 !important; }

.guide-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-12);
  align-items: center;
  padding: var(--s-10) 0 var(--s-12);
  border-bottom: 1px solid var(--c-ink-200);
  margin-bottom: var(--s-10);
}
@media (max-width: 900px) { .guide-hero { grid-template-columns: 1fr; gap: var(--s-6); } }

.guide-hero__head h1 {
  font-family: var(--ff-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--c-ink-900);
  margin: var(--s-3) 0 var(--s-5);
}
.guide-hero__head h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--guide-accent, var(--c-ink-900));
}
.guide-hero__head .guide-intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink-600);
}
.guide-hero__head .guide-intro p { margin: 0 0 var(--s-3); }

.guide-hero__visual {
  background: linear-gradient(135deg, var(--guide-accent, var(--c-ink-700)) 0%, var(--c-ink-900) 100%);
  border-radius: var(--r-lg);
  aspect-ratio: 5/4;
  position: relative;
  overflow: hidden;
}
.guide-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(0,0,0,0.2), transparent 40%);
}
.guide-hero__quote {
  position: absolute;
  bottom: var(--s-6); left: var(--s-6); right: var(--s-6);
  color: rgba(255,255,255,0.95);
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.guide-hero__quote::before {
  content: "“";
  display: block;
  font-size: 64px;
  line-height: 0.6;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--s-3);
  font-family: var(--ff-serif);
}
.guide-hero__quote cite {
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-size: 11px;
  font-family: var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.guide-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-ink-200);
  margin-bottom: var(--s-10);
}
@media (max-width: 720px) { .guide-stats { grid-template-columns: repeat(2, 1fr); } }
.guide-stat__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.guide-stat__value {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  margin-top: 4px;
}

/* 가이드 섹션 타이틀 */
.guide-section-title {
  display: flex !important;
  align-items: baseline !important;
  gap: var(--s-3) !important;
  margin: var(--s-12) 0 var(--s-5) !important;
  font-family: var(--ff-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink-900) !important;
  border: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}
.guide-section-title::before {
  content: attr(data-num);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--guide-accent, var(--c-accent));
  letter-spacing: 0.12em;
  border: 1px solid var(--guide-accent, var(--c-accent));
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

/* TOP 10 리스트 (asymmetric: 1~3 카드 + 4~10 row) */
.guide-top3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}
@media (max-width: 900px) { .guide-top3 { grid-template-columns: 1fr; } }
.guide-top3 > .guide-card { /* .posts 외부 카드도 동일 스타일 */
  position: relative;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.guide-top3 > .guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-ink-300);
}
.guide-top3 > .guide-card > a.image {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  background: var(--c-ink-100);
}
.guide-top3 > .guide-card > a.image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.guide-top3 > .guide-card:hover > a.image img { transform: scale(1.04); }
.guide-top3 > .guide-card > .body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
}
.guide-top3 > .guide-card h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 4px 0;
  color: var(--c-ink-900);
}
.guide-top3 > .guide-card h3 a { color: inherit; }
.guide-top3 > .guide-card .clicks {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-ink-200);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-ink-500);
}
.guide-top3 > .guide-card .clicks b { color: var(--c-ink-900); font-weight: 600; }

/* 4~10위 리스트 */
.guide-popular-list,
.guide-latest-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 2px solid var(--c-ink-900);
}
.guide-popular-list li,
.guide-latest-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-ink-200);
  transition: background .15s var(--ease);
}
.guide-popular-list li:hover,
.guide-latest-list li:hover { background: var(--c-ink-100); }
.guide-popular-list li::before {
  content: counter(grow, decimal-leading-zero);
  counter-increment: grow;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  color: var(--guide-accent, var(--c-accent));
  letter-spacing: -0.03em;
  text-align: center;
}
.guide-latest-list li::before {
  content: "·";
  font-size: 24px;
  color: var(--c-ink-300);
  text-align: center;
}
.guide-popular-list { counter-reset: grow 3; } /* 4부터 시작 */
.guide-popular-list li a,
.guide-latest-list li a {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-900);
  letter-spacing: -0.018em;
  border: 0 !important;
}
.guide-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-ink-500);
  letter-spacing: 0.04em;
}
.guide-popular-list li::after,
.guide-latest-list li::after {
  content: "→";
  color: var(--c-ink-300);
  font-size: 16px;
  transition: color .2s var(--ease);
}
.guide-popular-list li:hover::after,
.guide-latest-list li:hover::after { color: var(--guide-accent, var(--c-accent)); }

/* 키워드 클라우드 */
.guide-cloud {
  margin-top: var(--s-12);
  padding: var(--s-8) var(--s-8);
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
}
.guide-cloud a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--c-ink-700);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color .15s var(--ease), border-color .15s var(--ease);
  border-bottom: 1px dashed transparent;
  padding-bottom: 2px;
}
.guide-cloud a:hover {
  color: var(--guide-accent, var(--c-accent));
  border-bottom-color: var(--guide-accent, var(--c-accent));
}

.guide-cta {
  margin-top: var(--s-12) !important;
  display: flex;
  justify-content: center;
}
.guide-cta a.button {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--r-md) !important;
  background: var(--guide-accent, var(--c-brand)) !important;
  color: var(--c-paper-pure) !important;
  border: 0 !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: all .2s var(--ease);
}
.guide-cta a.button:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}

/* 카테고리별 가이드 액센트 */
.guide-page[data-cat="1"] { --guide-accent: var(--cat-1); }
.guide-page[data-cat="2"] { --guide-accent: var(--cat-2); }
.guide-page[data-cat="3"] { --guide-accent: var(--cat-3); }
.guide-page[data-cat="4"] { --guide-accent: var(--cat-4); }
.guide-page[data-cat="5"] { --guide-accent: var(--cat-5); }
.guide-page[data-cat="6"] { --guide-accent: var(--cat-6); }
.guide-page[data-cat="7"] { --guide-accent: var(--cat-7); }
.guide-page[data-cat="8"] { --guide-accent: var(--cat-8); }
.guide-page[data-cat="9"] { --guide-accent: var(--cat-9); }

/* ============================================================
   ▶ G8: 용어 사전 (glossary.php) — 카드 그리드 + 검색
   ============================================================ */
.glossary-page {
  --glossary-accent: var(--c-accent);
  padding: var(--s-12) 0;
}

/* Hero */
.glossary-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8);
  align-items: end;
  padding: var(--s-12) var(--s-6) var(--s-10);
  border-bottom: 1px solid var(--c-ink-200);
  margin-bottom: var(--s-10);
}
@media (max-width: 900px) { .glossary-hero { grid-template-columns: 1fr; gap: var(--s-6); } }

.glossary-hero__head h1 {
  font-family: var(--ff-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-ink-900);
  margin: var(--s-3) 0 var(--s-4);
}
.glossary-hero__head h1 em {
  color: var(--glossary-accent);
  font-style: italic;
  font-weight: 500;
}
.glossary-intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink-600);
  max-width: 540px;
  margin: 0;
}

.glossary-hero__quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ink-700);
  border-left: 3px solid var(--glossary-accent);
  padding: var(--s-4) var(--s-5);
  background: var(--c-ink-100);
  margin: 0;
  border-radius: 0 6px 6px 0;
}
.glossary-hero__quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}

/* Stats */
.glossary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: 12px;
  margin: 0 0 var(--s-10);
}
.glossary-stat__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
}
.glossary-stat__value {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  line-height: 1;
}

/* Search */
.glossary-search {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-ink-200);
  margin-bottom: var(--s-6);
}
#glossarySearch {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--ff-sans);
  font-size: 15px;
  border: 1px solid var(--c-ink-300);
  border-radius: 9999px;
  background: var(--c-paper-pure);
  color: var(--c-ink-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#glossarySearch:focus {
  border-color: var(--glossary-accent);
  box-shadow: 0 0 0 3px rgba(201, 71, 45, 0.12);
}
.glossary-search__count {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-ink-500);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Card grid */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-12);
}
@media (max-width: 1100px) { .glossary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .glossary-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.glossary-card {
  display: flex;
  flex-direction: column;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: 12px;
  padding: var(--s-5) var(--s-5) var(--s-4);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.glossary-card:hover {
  border-color: var(--glossary-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 20, 25, 0.06);
}

.glossary-card__head { margin-bottom: var(--s-3); }
.glossary-card__num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
}
.glossary-card__term {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-2);
  line-height: 1.2;
}

.glossary-card__synonyms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
}
.glossary-card__syn-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-right: 2px;
}
.glossary-card__syn-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 9999px;
  background: var(--c-ink-100);
  color: var(--c-ink-700);
}

.glossary-card__definition {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-700);
  margin: 0 0 var(--s-4);
  flex: 1;
}

.glossary-card__related {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-ink-200);
}
.glossary-card__related-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
}
.glossary-card__related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.glossary-card__related li a {
  display: block;
  font-size: 13px;
  color: var(--c-ink-900);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.glossary-card__related li a:hover {
  color: var(--glossary-accent);
  border-bottom-color: var(--glossary-accent);
}
.glossary-card__related li a::before {
  content: '→ ';
  color: var(--c-ink-500);
  margin-right: 4px;
}

/* Empty state */
.glossary-empty,
.glossary-search__empty {
  text-align: center;
  padding: var(--s-12) 0;
  color: var(--c-ink-500);
}
.glossary-empty__hint {
  font-family: var(--ff-mono);
  font-size: 12px;
  margin-top: var(--s-2);
}

/* Other categories navigation */
.glossary-other-cats {
  margin-top: var(--s-12);
  padding: var(--s-6);
  background: var(--c-ink-100);
  border-radius: 12px;
}
.glossary-other-cats__label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: var(--s-3);
}
.glossary-other-cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.glossary-other-cats li a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-900);
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s;
}
.glossary-other-cats li a:hover {
  border-color: var(--c-ink-900);
  background: var(--c-ink-900);
  color: var(--c-paper);
}

/* 카테고리별 액센트 컬러 (D1-A 토큰 활용) */
.glossary-page[data-cat="1"] { --glossary-accent: var(--cat-1); }
.glossary-page[data-cat="2"] { --glossary-accent: var(--cat-2); }
.glossary-page[data-cat="3"] { --glossary-accent: var(--cat-3); }
.glossary-page[data-cat="4"] { --glossary-accent: var(--cat-4); }
.glossary-page[data-cat="5"] { --glossary-accent: var(--cat-5); }
.glossary-page[data-cat="6"] { --glossary-accent: var(--cat-6); }
.glossary-page[data-cat="7"] { --glossary-accent: var(--cat-7); }
.glossary-page[data-cat="8"] { --glossary-accent: var(--cat-8); }
.glossary-page[data-cat="9"] { --glossary-accent: var(--cat-9); }

/* ============================================================
   ▶ 상세페이지 (에디토리얼)
   - section.post 가 product 모드에서만 적용되도록
   - 기존 .post 클래스 위에 새 톤을 입힘
   ============================================================ */
body[data-page="product"] section.post {
  background: var(--c-paper-pure);
  margin: 0 auto;
  padding: var(--s-12) var(--s-6) var(--s-16);
}

body[data-page="product"] section.post > header.major {
  border: 0;
  padding: 0 0 var(--s-8);
  border-bottom: 1px solid var(--c-ink-200);
  margin-bottom: var(--s-10);
  text-align: left;
}
body[data-page="product"] section.post > header.major .date {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-accent) !important;
  text-transform: uppercase !important;
  font-weight: 500;
  margin-bottom: var(--s-5) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body[data-page="product"] section.post > header.major h1 {
  font-family: var(--ff-serif) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: var(--c-ink-900) !important;
  margin: 0 0 var(--s-5) !important;
  text-transform: none !important;
}
body[data-page="product"] section.post > header.major p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--c-ink-600) !important;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Editor's brief (에디터스 픽 3줄 요약) */
body[data-page="product"] .editor-brief {
  margin: var(--s-10) 0 !important;
  padding: var(--s-6) var(--s-8) !important;
  background: linear-gradient(to right, rgba(201,71,45,0.04), transparent 80%) !important;
  border: 0 !important;
  border-left: 4px solid var(--c-accent) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}
body[data-page="product"] .editor-brief h3 {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
  margin: 0 0 var(--s-4) !important;
  padding-left: 28px;
  position: relative;
}
body[data-page="product"] .editor-brief h3::before {
  content: ""; width: 16px; height: 1px; background: var(--c-accent);
  position: absolute; left: 0; top: 50%;
}
body[data-page="product"] .editor-brief ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  counter-reset: epi;
}
body[data-page="product"] .editor-brief ul li {
  font-family: var(--ff-serif) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--c-ink-800) !important;
  letter-spacing: -0.015em !important;
  padding-left: var(--s-5) !important;
  position: relative;
}
body[data-page="product"] .editor-brief ul li::before {
  content: counter(epi, decimal-leading-zero);
  counter-increment: epi;
  position: absolute;
  left: 0; top: 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--c-accent);
  letter-spacing: 0.04em;
}

/* footer_p 안내 본문 */
body[data-page="product"] section.post > .footer_p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: var(--c-ink-700) !important;
  text-align: left !important;
  letter-spacing: -0.012em;
  margin: var(--s-8) 0;
}
body[data-page="product"] section.post > .footer_p b,
body[data-page="product"] section.post > .footer_p strong { color: var(--c-ink-900); }
body[data-page="product"] section.post > .footer_p font[color] { color: var(--c-accent) !important; }

/* 상세페이지 H3 (item_list, item_group, item_game, info_footer) — 에디토리얼 H2 톤 */
body[data-page="product"] h3.comparison-section-title,
body[data-page="product"] h3.post-entry-1,
body[data-page="product"] h3#info_footer,
body[data-page="product"] h3#item_game {
  font-family: var(--ff-serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--c-ink-900) !important;
  margin: var(--s-12) 0 var(--s-5) !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  border: 0 !important;
}

/* 상세페이지 비교 테이블 — 깔끔한 모던 톤 */
body[data-page="product"] .comparison-table-wrapper { margin: var(--s-5) 0; overflow-x: auto; }
body[data-page="product"] .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
body[data-page="product"] .comparison-table th {
  padding: var(--s-4) var(--s-4);
  background: var(--c-ink-100);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-ink-700);
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--c-ink-200);
}
body[data-page="product"] .comparison-table th.text-left { text-align: left; }
body[data-page="product"] .comparison-table td {
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--c-ink-200);
  vertical-align: middle;
}
body[data-page="product"] .comparison-table tr:last-child td { border-bottom: 0; }
body[data-page="product"] .comparison-table .product-name-cell {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-900);
  letter-spacing: -0.015em;
  line-height: 1.5;
}
body[data-page="product"] .comparison-table .price-cell { text-align: center; white-space: nowrap; }
body[data-page="product"] .comparison-table .price-value {
  font-family: var(--ff-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink-900);
}
body[data-page="product"] .comparison-table .price-unit {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-ink-500);
  margin-left: 2px;
}
body[data-page="product"] .comparison-table .delivery-cell { text-align: center; }
body[data-page="product"] .comparison-table .badge-rocket {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #1A4FA0;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
body[data-page="product"] .comparison-table .badge-normal {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink-500);
  background: var(--c-ink-100);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
body[data-page="product"] .comparison-table .action-cell { text-align: center; }
body[data-page="product"] .comparison-table .btn-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--c-ink-900);
  color: var(--c-paper-pure);
  border-radius: var(--r-pill);
  transition: all .2s var(--ease);
  border: 0;
}
body[data-page="product"] .comparison-table .btn-check:hover {
  background: var(--c-accent);
  transform: translateY(-1px);
}

/* 상세페이지 목차 box */
body[data-page="product"] .box {
  background: var(--c-paper) !important;
  border: 1px solid var(--c-ink-200) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-6) var(--s-6) !important;
  margin: var(--s-8) 0 !important;
}
body[data-page="product"] .box h3 {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--c-ink-500) !important;
  margin: 0 0 var(--s-4) !important;
  padding: 0 0 var(--s-3) !important;
  border-bottom: 1px solid var(--c-ink-200) !important;
  text-align: left !important;
}
body[data-page="product"] .box ol {
  padding-left: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  counter-reset: toc;
}
body[data-page="product"] .box ol > li {
  position: relative;
  padding: 6px 0 6px 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink-800);
}
body[data-page="product"] .box ol > li::before {
  content: counter(toc, decimal-leading-zero);
  counter-increment: toc;
  position: absolute;
  left: 0; top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-accent);
  letter-spacing: 0.06em;
}
body[data-page="product"] .box ol > li > ul {
  margin: var(--s-2) 0 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}
body[data-page="product"] .box ol > li > ul li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 13px;
  color: var(--c-ink-600);
  font-weight: 400;
}
body[data-page="product"] .box ol > li > ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-ink-300);
}
body[data-page="product"] .box a { color: inherit !important; border: 0 !important; }
body[data-page="product"] .box a:hover { color: var(--c-accent) !important; }

/* top_content / body_content / footer_content 본문 톤 */
body[data-page="product"] div.top_content,
body[data-page="product"] div.body_content,
body[data-page="product"] div.footer_content {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: var(--c-ink-700) !important;
  text-align: left !important;
  letter-spacing: -0.012em;
}
body[data-page="product"] div.top_content *,
body[data-page="product"] div.body_content *,
body[data-page="product"] div.footer_content * {
  text-align: left !important;
  font-size: 16px !important;
}
body[data-page="product"] div.body_content h3,
body[data-page="product"] div.footer_content h3 {
  font-family: var(--ff-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  letter-spacing: -0.025em !important;
  margin: var(--s-8) 0 var(--s-3) !important;
  color: var(--c-ink-900) !important;
}
body[data-page="product"] div.box.alt {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* FAQ details (footer_content 안의 details) */
body[data-page="product"] div.footer_content details {
  background: var(--c-paper-pure) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-ink-200) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body[data-page="product"] div.footer_content details summary {
  cursor: pointer;
  padding: var(--s-5) 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-ink-900) !important;
  letter-spacing: -0.015em !important;
  list-style: none;
  position: relative;
  padding-right: 36px !important;
  text-align: left !important;
}
body[data-page="product"] div.footer_content details summary::-webkit-details-marker { display: none; }
body[data-page="product"] div.footer_content details summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--c-ink-500);
  transition: transform .2s var(--ease);
}
body[data-page="product"] div.footer_content details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--c-accent);
}
body[data-page="product"] div.footer_content details p {
  padding: 0 0 var(--s-5) !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--c-ink-600) !important;
  border: 0 !important;
}

/* 상품 카드 (1~10위) — content1.php 마크업 구조 기준
   .product-card
     └ .card-img-link  (rank-tag absolute + image)   ← 첫 칸 (140x140)
     └ .card-info       (title + price-row + btn-buy) ← 둘째 칸 (1fr)
*/
body[data-page="product"] .product-grid {
  margin: var(--s-6) 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--s-4) !important;
}
body[data-page="product"] .product-card {
  position: relative;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-md);
  background: var(--c-paper);
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center;
  gap: var(--s-5) !important;
  padding: var(--s-5) !important;
  overflow: visible !important;
  width: 100%;
  transition: all .25s var(--ease);
}
body[data-page="product"] .product-card:hover {
  border-color: var(--c-ink-900);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

/* 첫 번째 셀: rank + 이미지 묶음 */
body[data-page="product"] .product-card .card-img-link {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-ink-100);
  display: block;
  flex-shrink: 0;
}
body[data-page="product"] .product-card .rank-tag {
  position: absolute !important;
  top: 8px;
  left: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  background: var(--c-ink-900);
  color: var(--c-paper);
  border-radius: var(--r-sm);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  padding: 6px 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(15,20,25,0.18);
  text-align: center;
  white-space: nowrap;
}
body[data-page="product"] .product-card .product-image-link {
  display: block;
  width: 100%;
  height: 100%;
  border: 0 !important;
}
body[data-page="product"] .product-card .product-image-link amp-img,
body[data-page="product"] .product-card .product-image-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* 두 번째 셀: 제목 + 가격 + CTA (세로 배치) */
body[data-page="product"] .product-card .card-info {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  min-width: 0;
  width: 100%;
  align-items: flex-start;
}
body[data-page="product"] .product-card .card-info > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
body[data-page="product"] .product-card .card-title {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--c-ink-900);
  letter-spacing: -0.018em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left !important;
}
body[data-page="product"] .product-card .price-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
body[data-page="product"] .product-card .card-price {
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink-900);
  letter-spacing: -0.01em;
}
body[data-page="product"] .product-card .rocket-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #1A4FA0;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
body[data-page="product"] .product-card .btn-buy {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--c-ink-100) !important;
  color: var(--c-ink-900) !important;
  border-radius: var(--r-pill) !important;
  border: 0 !important;
  transition: all .2s var(--ease);
  white-space: nowrap;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
body[data-page="product"] .product-card .btn-buy:hover {
  background: var(--c-ink-900) !important;
  color: var(--c-paper) !important;
}

/* G3-3: 사용자 의견 인용 박스 (Gemini 생성, 짜집기 인상 약화 + Review schema) */
body[data-page="product"] .product-card .user-voice {
  margin: var(--s-3) 0 0 !important;
  padding: var(--s-3) var(--s-4) !important;
  background: var(--c-ink-100) !important;
  border-left: 3px solid var(--c-accent) !important;
  border-radius: 6px !important;
  font-family: var(--ff-serif), 'Pretendard Variable', Georgia, serif;
  position: relative;
}
body[data-page="product"] .product-card .user-voice .user-voice-text {
  margin: 0 0 var(--s-2) 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--c-ink-700) !important;
  font-style: italic;
  letter-spacing: -0.01em;
}
body[data-page="product"] .product-card .user-voice .user-voice-cite {
  display: block;
  font-family: var(--ff-mono), 'JetBrains Mono', monospace;
  font-size: 10px !important;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-ink-500) !important;
}

@media (max-width: 720px) {
  body[data-page="product"] .product-card {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: var(--s-4) !important;
    padding: var(--s-4) !important;
  }
  body[data-page="product"] .product-card .card-img-link {
    width: 100px;
    height: 100px;
  }
  body[data-page="product"] .product-card .rank-tag {
    width: 40px;
    min-height: 40px;
    font-size: 15px;
    padding: 4px;
  }
  body[data-page="product"] .product-card .card-title { font-size: 14px !important; -webkit-line-clamp: 3; }
  body[data-page="product"] .product-card .card-price { font-size: 15px; }
  body[data-page="product"] .product-card .btn-buy { padding: 8px 14px !important; font-size: 12px !important; }
  body[data-page="product"] .product-card .user-voice {
    padding: var(--s-2) var(--s-3) !important;
  }
  body[data-page="product"] .product-card .user-voice .user-voice-text {
    font-size: 12px !important;
  }
}

/* G6: 인라인 자동 링크 — 본문 안에서 다른 글로 이동하는 자연스러운 링크 */
body[data-page="product"] .body_content a.internal-link,
body[data-page="product"] .top_content a.internal-link,
body[data-page="product"] .footer_content a.internal-link {
  color: var(--c-accent) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-accent);
  font-weight: 500;
  transition: all 0.15s ease;
}
body[data-page="product"] .body_content a.internal-link:hover,
body[data-page="product"] .top_content a.internal-link:hover,
body[data-page="product"] .footer_content a.internal-link:hover {
  background: rgba(201, 71, 45, 0.08);
  border-bottom-style: solid;
}

/* G8: 사전 링크는 살짝 다른 톤 (실선 + 작은 사전 아이콘 prefix) */
body[data-page="product"] .body_content a.internal-link[data-source="glossary"],
body[data-page="product"] .top_content a.internal-link[data-source="glossary"],
body[data-page="product"] .footer_content a.internal-link[data-source="glossary"] {
  color: var(--c-ink-900) !important;
  border-bottom: 1px solid var(--c-ink-300);
}
body[data-page="product"] .body_content a.internal-link[data-source="glossary"]:hover,
body[data-page="product"] .top_content a.internal-link[data-source="glossary"]:hover,
body[data-page="product"] .footer_content a.internal-link[data-source="glossary"]:hover {
  color: var(--c-accent) !important;
  background: rgba(201, 71, 45, 0.06);
  border-bottom-color: var(--c-accent);
}

/* 관련 글 — 카드 그리드 */
body[data-page="product"] .related-posts {
  margin: var(--s-16) 0 0 !important;
  padding: var(--s-10) 0 0 !important;
  border-top: 1px solid var(--c-ink-200) !important;
  background: transparent !important;
}
body[data-page="product"] .related-posts h3 {
  font-family: var(--ff-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink-900) !important;
  margin: 0 0 var(--s-6) !important;
  text-align: left !important;
}
body[data-page="product"] .related-posts-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 720px) { body[data-page="product"] .related-posts-list { grid-template-columns: 1fr; } }
body[data-page="product"] .related-posts-list li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body[data-page="product"] .related-posts-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--s-5) !important;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-md);
  transition: all .2s var(--ease);
  text-decoration: none !important;
}
body[data-page="product"] .related-posts-list a:hover {
  border-color: var(--c-ink-900);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
body[data-page="product"] .related-posts-list .rp-keyword {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  font-weight: 500;
}
body[data-page="product"] .related-posts-list .rp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-900);
  letter-spacing: -0.018em;
  line-height: 1.4;
}

/* 키워드 태그 (상세 하단 keyword_arr) */
body[data-page="product"] p.keyword_text {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-6) 0 0 !important;
  margin: var(--s-8) 0 0 !important;
  border-top: 1px dashed var(--c-ink-200);
  font-size: 0;
}
body[data-page="product"] p.keyword_text br { display: none; }
body[data-page="product"] p.keyword_text a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--c-ink-600) !important;
  background: var(--c-ink-100);
  border-radius: var(--r-pill);
  border: 0 !important;
  transition: all .15s var(--ease);
  text-decoration: none !important;
}
body[data-page="product"] p.keyword_text a:hover {
  background: var(--c-ink-900);
  color: var(--c-paper) !important;
}

/* gameGroup 영역 */
body[data-page="product"] .gameGroup {
  background: var(--c-paper);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-md);
  padding: var(--s-6) !important;
  margin: var(--s-6) 0 !important;
}
body[data-page="product"] .gameGroup p { font-size: 14px !important; line-height: 1.75 !important; color: var(--c-ink-600) !important; text-align: left !important; }
body[data-page="product"] .gameGroup p a {
  background: var(--c-ink-900) !important;
  color: var(--c-paper) !important;
  padding: 10px 22px !important;
  border-radius: var(--r-pill) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 0 !important;
}

/* 상세 본문 안의 안내 문구 (info_footer 아래 footer_p) */
body[data-page="product"] .info_footer {
  margin: var(--s-10) 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body[data-page="product"] .info_footer .footer_content {
  margin-bottom: var(--s-8);
}

/* ============================================================
   ▶ 푸터 (footer-guide / copyright)
   ============================================================ */
#footer-guide,
#footer-glossary {
  background: var(--c-ink-900) !important;
  color: var(--c-ink-300);
  padding: var(--s-12) var(--s-6) !important;
  margin: var(--s-16) 0 0 !important;
  border: 0 !important;
  text-align: left !important;
}
#footer-glossary { margin-top: 0 !important; padding-top: 0 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
#footer-guide > *,
#footer-glossary > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
#footer-guide > p,
#footer-glossary > p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ff-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--c-paper) !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto var(--s-5) !important;
  padding-bottom: var(--s-3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
#footer-guide > p::after,
#footer-glossary > p::after {
  content: "9 Categories";
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  font-style: normal;
  font-weight: 400;
}
#footer-guide ul,
#footer-glossary ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s-2) var(--s-4) !important;
}
@media (max-width: 600px) {
  #footer-guide ul,
  #footer-glossary ul { grid-template-columns: repeat(2, 1fr) !important; }
}
#footer-guide ul li,
#footer-glossary ul li { padding: 0 !important; border: 0 !important; }
#footer-guide ul li a,
#footer-glossary ul li a {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 !important;
  color: var(--c-ink-300) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border: 0 !important;
  text-decoration: none !important;
  transition: color .15s var(--ease);
  text-transform: none !important;
}
#footer-guide ul li a::before,
#footer-glossary ul li a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-ink-500);
  flex-shrink: 0;
}
#footer-guide ul li:nth-child(1) a::before,
#footer-glossary ul li:nth-child(1) a::before { background: var(--cat-1); }
#footer-guide ul li:nth-child(2) a::before,
#footer-glossary ul li:nth-child(2) a::before { background: var(--cat-2); }
#footer-guide ul li:nth-child(3) a::before,
#footer-glossary ul li:nth-child(3) a::before { background: var(--cat-3); }
#footer-guide ul li:nth-child(4) a::before,
#footer-glossary ul li:nth-child(4) a::before { background: var(--cat-4); }
#footer-guide ul li:nth-child(5) a::before,
#footer-glossary ul li:nth-child(5) a::before { background: var(--cat-5); }
#footer-guide ul li:nth-child(6) a::before,
#footer-glossary ul li:nth-child(6) a::before { background: var(--cat-6); }
#footer-guide ul li:nth-child(7) a::before,
#footer-glossary ul li:nth-child(7) a::before { background: var(--cat-7); }
#footer-guide ul li:nth-child(8) a::before,
#footer-glossary ul li:nth-child(8) a::before { background: var(--cat-8); }
#footer-guide ul li:nth-child(9) a::before,
#footer-glossary ul li:nth-child(9) a::before { background: var(--cat-9); }
#footer-guide ul li a:hover,
#footer-glossary ul li a:hover { color: var(--c-paper) !important; }

/* G8: footer-glossary 라벨 차별화 ("9 Categories" → "9 Glossaries") */
#footer-glossary > p::after { content: "9 Glossaries"; }

/* Copyright */
#copyright {
  background: var(--c-ink-900) !important;
  color: var(--c-ink-500) !important;
  padding: var(--s-5) var(--s-6) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0 !important;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#copyright ul, #copyright li {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
#copyright strong, #copyright span { color: var(--c-paper); font-weight: 500; }

/* ============================================================
   기존 Massively 텍스처/배경 효과 제거
   ============================================================ */
#wrapper > .bg, #wrapper::before { display: none !important; }

/* ============================================================
   FADE-UP 진입 애니메이션
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .6s var(--ease) both; }

/* ============================================================
   D2-A: AdSense 광고 컨테이너 CLS 예약
   - 자동광고 ins 박스가 빈 상태에서 min-height을 잡아두면
     광고 로드 후 페이지가 흔들리지 않음 (CLS 핵심 개선)
   - filled: 실제 광고 채워짐 → min-height 해제 (광고 자체 사이즈 보존)
   - unfilled: 광고 안 채워짐 → 빈 박스 자체를 숨김
   ============================================================ */
ins.adsbygoogle {
  display: block;
  min-height: 100px;
  background: transparent;
  overflow: hidden;
}
ins.adsbygoogle[data-ad-status="filled"] { min-height: 0; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none; }

/* ============================================================
   리듬 스카이폴 — PC 전용 sticky 게임 배너
   - JS 로드 후 .is-visible 클래스가 붙으면 우측 하단에서 슬라이드 인
   - 모바일/게임페이지/닫힘 상태에선 절대 표시 X (JS 측에서 제어)
   - 깊은 네이비 + 시안 글로우, 게임 페이지의 하늘 톤과 일관
   ============================================================ */
.game-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 18px;
  width: 320px;
  background: linear-gradient(135deg, #0B2E60 0%, #1a4490 60%, #2a6fd1 100%);
  color: var(--c-paper);
  border: 1px solid rgba(64, 184, 255, 0.35);
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 24px rgba(11, 46, 96, 0.35),
    0 24px 56px rgba(11, 46, 96, 0.25),
    0 0 0 1px rgba(64, 184, 255, 0.15) inset;
  font-family: var(--ff-sans);
  text-decoration: none;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease), box-shadow .25s var(--ease);
  overflow: hidden;
  cursor: pointer;
}
.game-banner.is-visible {
  display: inline-flex;
  transform: translateY(0);
  opacity: 1;
}
.game-banner:hover {
  box-shadow:
    0 12px 32px rgba(11, 46, 96, 0.45),
    0 32px 72px rgba(11, 46, 96, 0.35),
    0 0 0 1px rgba(64, 184, 255, 0.45) inset;
  transform: translateY(-2px);
}
.game-banner__pulse {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 80% 20%, rgba(64, 184, 255, 0.35), transparent 50%);
  animation: gamePulse 3s ease-in-out infinite;
}
@keyframes gamePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.game-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all .15s var(--ease);
  z-index: 2;
}
.game-banner__close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--c-paper);
}
.game-banner__close svg { width: 10px; height: 10px; }

.game-banner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(64, 184, 255, 0.18);
  color: #A0DEFF;
  position: relative;
  z-index: 1;
}
.game-banner__icon svg { width: 28px; height: 28px; }

.game-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.game-banner__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #A0DEFF;
  text-transform: uppercase;
}
.game-banner__title {
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-paper);
  line-height: 1.2;
  margin-top: 2px;
}
.game-banner__desc {
  font-size: 12px;
  color: rgba(200, 238, 255, 0.85);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-top: 2px;
}
.game-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(64, 184, 255, 0.6);
  align-self: flex-start;
  transition: all .2s var(--ease);
}
.game-banner__cta svg {
  width: 13px;
  height: 13px;
  transition: transform .2s var(--ease);
}
.game-banner:hover .game-banner__cta {
  border-bottom-color: #A0DEFF;
  color: #A0DEFF;
}
.game-banner:hover .game-banner__cta svg { transform: translateX(3px); }

/* 모바일에선 무조건 숨김 (JS도 막지만 CSS도 이중 보호) */
@media (max-width: 900px), (pointer: coarse) {
  .game-banner { display: none !important; }
}