/*
Theme Name: Luxeboard
Description: goseecloud.com 전용 테마. 개별글 가독성과 광고 지면을 1순위로, 순위·가격대 색인을 2·3순위로 둔다.
Author: goseecloud
Version: 1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: luxeboard
*/

/* ══════════════════════════════════════════════════════════════
   중요 1 — 클래스명 계약

   워드프레스 "추가 CSS" 에 32,789자의 본문 가독성 규칙이 들어 있고
   그 규칙들이 아래 클래스를 강하게 의존한다. 마크업에서 이 이름을
   바꾸면 본문 스타일이 통째로 무효가 된다.

       .entry-content            88회 참조
       .wp-block-post-content    53회
       .post-content             53회
       .entry-title

   그래서 본문 래퍼에 세 클래스를 함께 붙인다. 이 파일에서는
   본문 타이포그래피(p·li·표·인용)를 건드리지 않는다 — 추가 CSS 담당이다.
   여기는 지면(레이아웃·헤더·푸터·목록·색인)만 정의한다.

   중요 2 — padding 단축 금지

   .lx-wrap 과 같은 요소에 함께 붙는 클래스에서는 padding 단축을 쓰지 말 것.
   같은 특이도라 뒤에 오는 선언이 좌우 여백 16px 을 0 으로 덮는다.
   실측에서 본문 좌우 여백이 0px 으로 나온 원인이었다.
   세로 여백만 필요하면 padding-top / padding-bottom 을 쓴다.

   중요 3 — 웹폰트를 쓰지 않는다

   한글 웹폰트는 서브셋을 해도 무겁고, 이 사이트는 모바일 LCP 를
   최우선으로 잡고 있다. 고급스러움은 폰트가 아니라 여백·헤어라인·
   지면색과 절제된 색으로 만든다.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 따뜻한 종이색 지면. 순백은 화면에서 눈이 부시고 값싸 보인다 */
  --lx-bg:        #faf8f5;
  --lx-surface:   #ffffff;
  --lx-ink:       #17140f;
  --lx-ink-soft:  #55504a;
  --lx-ink-dim:   #8d867c;
  --lx-line:      #e4ded4;
  --lx-line-soft: #efebe3;
  --lx-gold:      #8a6d3b;
  --lx-gold-soft: #f3ecdf;
  --lx-radius: 4px;      /* 큰 라운드는 앱처럼 보인다. 편집물은 각을 살린다 */
  --lx-wrap: 1080px;
  --lx-wrap-narrow: 720px;
  --lx-pad: 16px;        /* 모바일 좌우 여백 기준값 (rules/13) */
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--lx-bg);
  color: var(--lx-ink);
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto }
a { color: inherit }

.lx-wrap { width: 100%; max-width: var(--lx-wrap); margin: 0 auto; padding: 0 var(--lx-pad) }
.lx-narrow { max-width: var(--lx-wrap-narrow) }
.lx-skip { position: absolute; left: -9999px }
.lx-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 999 }

/* ── 헤더 ─────────────────────────────────────────────
   한 줄 유지. 항목이 많아 모바일에서는 가로 스크롤을 허용하고,
   현재 위치는 알약 배경이 아니라 금색 밑줄로 표시한다.
   알약은 앱처럼 보이고 밑줄은 지면처럼 보인다. */
.lx-head {
  background: var(--lx-surface);
  border-bottom: 1px solid var(--lx-line);
  position: sticky; top: 0; z-index: 50;
}
.lx-head-in { display: flex; align-items: center; gap: 16px; height: 58px }
.lx-brand {
  flex: 0 0 auto; text-decoration: none;
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
}
.lx-brand small {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em; color: var(--lx-ink-dim);
}
.lx-nav {
  margin-left: auto; display: flex; align-items: stretch; align-self: stretch;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lx-nav::-webkit-scrollbar { display: none }
.lx-nav a {
  display: flex; align-items: center; padding: 0 11px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--lx-ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lx-nav a:hover { color: var(--lx-ink) }
.lx-nav a.on { color: var(--lx-gold); font-weight: 700; border-bottom-color: var(--lx-gold) }

/* ── 페이지 머리 ──────────────────────────────────────
   제목 위에 짧은 금색 규선 하나. 선 하나가 여백을 정돈해 준다. */
.lx-phead { padding-top: 34px; padding-bottom: 24px }
.lx-phead::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--lx-gold); margin-bottom: 16px;
}
.lx-phead h1 {
  margin: 0; font-size: clamp(23px, 5.2vw, 34px); line-height: 1.3;
  letter-spacing: -0.03em; font-weight: 700; word-break: keep-all;
}
.lx-lede {
  margin: 10px 0 0; color: var(--lx-ink-soft); font-size: 14.5px; line-height: 1.7;
  word-break: keep-all; max-width: 62ch;
}

/* 홈은 조금 더 크게 — 도착했다는 느낌이 필요하다 */
.home .lx-phead { padding-top: 46px; padding-bottom: 30px }
.home .lx-phead h1 { font-size: clamp(27px, 7vw, 42px) }

/* ── 품목 진입 ────────────────────────────────────────
   테두리 박스 그리드는 값싸 보인다. 헤어라인으로 칸을 나눈다. */
.lx-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--lx-line);
  margin: 0 0 44px;
}
.lx-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-top: 15px; padding-bottom: 15px; text-decoration: none;
  border-bottom: 1px solid var(--lx-line-soft);
}
.lx-tile strong {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all;
}
.lx-tile span {
  flex: 0 0 auto; font-size: 11.5px; color: var(--lx-gold);
  font-variant-numeric: tabular-nums;
}
.lx-tile:hover strong { color: var(--lx-gold) }

.lx-tile:nth-child(odd)  { padding-right: 14px; border-right: 1px solid var(--lx-line-soft) }
.lx-tile:nth-child(even) { padding-left: 14px }

@media (min-width: 760px) {
  .lx-tiles { grid-template-columns: repeat(4, 1fr) }
  .lx-tile:nth-child(odd), .lx-tile:nth-child(even) {
    padding-left: 0; padding-right: 0; border-right: 0;
  }
  .lx-tile:not(:nth-child(4n))   { padding-right: 16px; border-right: 1px solid var(--lx-line-soft) }
  .lx-tile:not(:nth-child(4n+1)) { padding-left: 16px }
}

/* ── 글 목록 ──────────────────────────────────────────
   박스 카드 대신 헤어라인 행. 편집물의 기본형이고 스캔이 빠르다. */
.lx-list { border-top: 1px solid var(--lx-line) }
.lx-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding-top: 16px; padding-bottom: 16px; text-decoration: none;
  border-bottom: 1px solid var(--lx-line-soft);
}
.lx-card:hover .lx-card-b h3 { color: var(--lx-gold) }
.lx-card-th {
  flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3;
  border-radius: var(--lx-radius); overflow: hidden; background: var(--lx-line-soft);
}
.lx-card-th img { width: 100%; height: 100%; object-fit: cover; display: block }
.lx-card-b { min-width: 0; display: flex; flex-direction: column; gap: 6px }
.lx-card-b h3 {
  margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 600;
  letter-spacing: -0.02em; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-card-b p {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--lx-ink-soft);
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-card-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--lx-ink-dim); font-variant-numeric: tabular-nums;
}
.lx-tag {
  color: var(--lx-gold); background: var(--lx-gold-soft);
  padding: 2px 7px; border-radius: 2px; font-size: 11px; font-weight: 600;
  letter-spacing: -0.01em; text-decoration: none;
}
a.lx-tag:hover { background: var(--lx-gold); color: #fff }

@media (min-width: 760px) {
  .lx-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px }
  .lx-card-th { flex-basis: 112px; width: 112px }
}

/* ── 본문 ─────────────────────────────────────────────
   아래 세 클래스는 추가 CSS 와의 계약. 이름을 바꾸지 말 것. */
.entry-content, .post-content, .wp-block-post-content { }
.lx-single { padding-top: 30px; padding-bottom: 44px }
.lx-single .entry-title {
  margin: 0 0 14px; font-size: clamp(24px, 5.6vw, 34px); line-height: 1.3;
  letter-spacing: -0.032em; font-weight: 700; word-break: keep-all;
}
.lx-smeta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--lx-ink-dim);
  margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--lx-line);
  font-variant-numeric: tabular-nums;
}
.lx-thumb {
  margin: 0 0 26px; border-radius: var(--lx-radius);
  overflow: hidden; background: var(--lx-line-soft);
}
.lx-thumb img { width: 100%; display: block }

/* ── 광고 지면 ────────────────────────────────────────
   빈 지면이 여백을 만들지 않도록 :empty 규칙을 반드시 남겨 둔다. */
.lx-ad { margin: 28px 0 }
.lx-ad-top { margin-top: 8px }
.lx-ad:empty { display: none; margin: 0 }

/* ── 관련글 ───────────────────────────────────────────*/
.lx-rel { margin-top: 44px; padding-top: 28px; border-top: 2px solid var(--lx-ink) }
.lx-rel h2 {
  margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
}

/* ── 색인(순위·가격) 그룹 ─────────────────────────────*/
/* 섹션 제목이 18px 인데 그 아래 대표글 제목이 25px 이라 위계가 뒤집혀 있었다.
   구획의 시작이 눈에 걸리도록 제목을 키우고 위에 얇은 선을 둔다. */
.lx-group { margin: 0 0 44px; padding-top: 26px; border-top: 1px solid var(--lx-line) }
.lx-group:first-of-type { padding-top: 0; border-top: 0 }
.lx-group h2 {
  margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 9px; word-break: keep-all;
}
@media (min-width: 760px) { .lx-group h2 { font-size: 24px } }
.lx-group h2 span {
  font-size: 12px; font-weight: 500; color: var(--lx-gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.lx-group .lx-lede { margin: 0 0 12px; font-size: 13.5px }
.lx-more {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--lx-gold); text-decoration: none;
  border-bottom: 1px solid var(--lx-gold-soft); padding-bottom: 2px;
}
.lx-more:hover { border-bottom-color: var(--lx-gold) }

/* ── 페이지네이션 ─────────────────────────────────────*/
.lx-pag { margin-top: 36px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center }
.lx-pag .page-numbers {
  min-width: 38px; text-align: center; padding: 8px 11px;
  border: 1px solid var(--lx-line); border-radius: var(--lx-radius);
  background: var(--lx-surface); text-decoration: none;
  font-size: 13.5px; color: var(--lx-ink-soft); font-variant-numeric: tabular-nums;
}
.lx-pag .page-numbers:hover { border-color: var(--lx-gold); color: var(--lx-gold) }
.lx-pag .page-numbers.current {
  background: var(--lx-ink); border-color: var(--lx-ink); color: #fff; font-weight: 700;
}

/* ── 알림 박스 ────────────────────────────────────────*/
.lx-note {
  padding: 18px; background: var(--lx-surface);
  border: 1px solid var(--lx-line); border-left: 3px solid var(--lx-gold);
  color: var(--lx-ink-soft); font-size: 14.5px; line-height: 1.7; word-break: keep-all;
}

/* ── 푸터 ─────────────────────────────────────────────*/
.lx-foot { margin-top: 64px; border-top: 1px solid var(--lx-line); background: var(--lx-surface) }
.lx-foot-in {
  padding-top: 28px;
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  font-size: 12.5px; color: var(--lx-ink-dim);
}
.lx-foot-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px }
.lx-foot-nav a { color: var(--lx-ink-soft); text-decoration: none; font-weight: 600 }
.lx-foot-nav a:hover { color: var(--lx-gold) }

@media (max-width: 480px) {
  .lx-head-in { height: 54px; gap: 10px }
  .lx-brand { font-size: 16.5px }
  .lx-card-th { flex-basis: 88px; width: 88px }
}

/* ══════════════════════════════════════════════════════════════
   홈 — 브랜드 메인 형태
   ══════════════════════════════════════════════════════════════ */

/* ── 히어로 ───────────────────────────────────────────
   전체폭 이미지 위에 아래에서 올라오는 그라디언트를 얹고 글자를 앉힌다.
   이미지는 <img> 로 넣어 프리로드가 걸리게 한다(LCP). */
.lx-hero {
  position: relative; display: block; text-decoration: none;
  height: 64vh; min-height: 380px; max-height: 560px;
  background: var(--lx-ink); overflow: hidden;
}
.lx-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lx-hero-in {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding-bottom: 30px; color: #fff;
  background: linear-gradient(to top,
    rgba(12,10,8,.86) 0%, rgba(12,10,8,.55) 38%, rgba(12,10,8,.08) 72%, transparent 100%);
}
.lx-hero-kicker {
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #d8c49a;
}
.lx-hero-t {
  margin: 0; font-size: clamp(24px, 6.4vw, 40px); line-height: 1.32;
  letter-spacing: -0.03em; font-weight: 700; color: #fff;
  word-break: keep-all; text-shadow: 0 1px 24px rgba(0,0,0,.35);
  max-width: 18ch;
}
.lx-hero-more {
  display: inline-block; margin-top: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(216,196,154,.6); padding-bottom: 3px;
}
.lx-hero:hover .lx-hero-more { color: #fff; border-bottom-color: #d8c49a }

@media (min-width: 760px) {
  .lx-hero { height: 72vh; max-height: 620px }
  .lx-hero-in { padding-bottom: 44px }
  .lx-hero-t { max-width: 22ch }
}

/* ── 품목 셸프 ────────────────────────────────────────
   원형 얼굴 + 이름. 모바일은 가로 스크롤, 데스크톱은 한 줄에 모두. */
.lx-shelf {
  display: flex; gap: 8px; margin: 26px 0 34px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lx-shelf::-webkit-scrollbar { display: none }
.lx-shelf-i {
  flex: 0 0 auto; width: 74px; text-decoration: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.lx-shelf-th {
  display: block; width: 62px; height: 62px; border-radius: 50%;
  overflow: hidden; background: var(--lx-line-soft);
  outline: 1px solid var(--lx-line); outline-offset: 3px;
}
.lx-shelf-th.is-blank { background: var(--lx-ink) }
.lx-shelf-th img { width: 100%; height: 100%; object-fit: cover; display: block }
.lx-shelf-i strong {
  font-size: 13px; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all;
}
.lx-shelf-i em {
  font-style: normal; font-size: 10.5px; color: var(--lx-ink-dim);
  font-variant-numeric: tabular-nums; margin-top: -3px;
}
.lx-shelf-i:hover .lx-shelf-th { outline-color: var(--lx-gold) }
.lx-shelf-i:hover strong { color: var(--lx-gold) }

@media (min-width: 760px) {
  .lx-shelf { gap: 0; justify-content: space-between; margin: 34px 0 48px }
  .lx-shelf-i { width: auto; flex: 1 1 0 }
  .lx-shelf-th { width: 84px; height: 84px }
  .lx-shelf-i strong { font-size: 14px }
}

/* ── 순위·가격 배너 ───────────────────────────────────
   잉크색 면 두 개. 이 사이트의 두 색인이 곧 두 진입점이다. */
.lx-banners { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0 0 44px }
@media (min-width: 620px) { .lx-banners { grid-template-columns: 1fr 1fr; gap: 14px } }
.lx-banner {
  display: block; padding: 22px 20px 20px; text-decoration: none;
  background: var(--lx-ink); color: #fff; border-radius: var(--lx-radius);
  position: relative; overflow: hidden;
}
.lx-banner::after {
  content: ""; position: absolute; left: 20px; bottom: 0;
  width: 34px; height: 2px; background: var(--lx-gold);
}
.lx-banner-k {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #c9b287; margin-bottom: 9px;
}
.lx-banner strong {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.35; word-break: keep-all;
}
.lx-banner em {
  display: block; margin-top: 7px; font-style: normal;
  font-size: 12px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums;
}
.lx-banner:hover { background: #241f18 }
.lx-banner:hover strong { color: #f0e2c6 }

/* ── 섹션 대표글 ──────────────────────────────────────
   섹션마다 시선이 걸리는 지점을 하나 만든다. */
.lx-lead { display: block; text-decoration: none; margin: 4px 0 6px }
.lx-lead-th {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--lx-radius);
  overflow: hidden; background: var(--lx-line-soft); margin-bottom: 13px;
}
.lx-lead-th img { width: 100%; height: 100%; object-fit: cover; display: block }
.lx-lead-b { display: block }
.lx-lead-b strong {
  display: block; font-size: 18.5px; line-height: 1.4; font-weight: 700;
  letter-spacing: -0.028em; word-break: keep-all;
}
.lx-lead-x {
  display: block; margin-top: 8px;
  font-size: 14px; line-height: 1.7; color: var(--lx-ink-soft); word-break: keep-all;
  /* 단어 수로 자르면 글마다 길이가 달라진다. 줄수로 잘라 칸을 고르게 만든다 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-lead-m {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 11.5px; color: var(--lx-ink-dim); font-variant-numeric: tabular-nums;
}
.lx-lead-go { margin-left: auto; font-weight: 600; color: var(--lx-gold) }
.lx-lead:hover .lx-lead-go { text-decoration: underline }
.lx-lead:hover .lx-lead-b strong { color: var(--lx-gold) }

@media (min-width: 760px) {
  /* 이미지가 지나치게 커서 오른쪽 칸에 200px 가까운 죽은 여백이 생겼다.
     이미지 몫을 줄이고, 텍스트를 위아래로 벌려 칸을 채운다.
     align-items:center 는 글을 공중에 띄워 보이게 하므로 stretch 로 바꾼다. */
  .lx-lead {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch;
  }
  .lx-lead-th { margin-bottom: 0; aspect-ratio: 16 / 10; max-height: 320px }
  .lx-lead-b { justify-content: center; gap: 0 }
  .lx-lead-b strong { font-size: 25px; line-height: 1.34 }
  .lx-lead-x { font-size: 15px; -webkit-line-clamp: 5 }
  .lx-lead-m { margin-top: 18px }
}

/* 히어로 부제 — 제목의 '|' 뒷부분 */
.lx-hero-sub {
  display: block; margin-top: 9px;
  font-size: 13.5px; line-height: 1.6; font-weight: 400;
  color: rgba(255,255,255,.8); word-break: keep-all; max-width: 30ch;
}
@media (min-width: 760px) { .lx-hero-sub { font-size: 15px; max-width: 40ch } }

/* ══════════════════════════════════════════════════════════════
   QC 후속 — 검색·브레드크럼·이전다음글·자리표시
   ══════════════════════════════════════════════════════════════ */

.lx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 검색 ─────────────────────────────────────────────
   아이콘만 두고 누르면 아래로 열린다. 항상 펼친 입력창은
   좁은 헤더에서 메뉴를 밀어낸다. */
.lx-search-t {
  flex: 0 0 auto; margin-left: 4px;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--lx-ink-soft); cursor: pointer;
}
.lx-search-t:hover { background: var(--lx-bg); color: var(--lx-ink) }
.lx-search-t[aria-expanded="true"] { background: var(--lx-gold-soft); color: var(--lx-gold) }

.lx-search { display: none; border-top: 1px solid var(--lx-line-soft); background: var(--lx-surface) }
.lx-search.is-open { display: block }
/* 검색 결과 화면에서는 처음부터 열어 둔다 — 검색어를 고치기 쉽게 */
.search .lx-search { display: block }
.lx-search-in { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 14px }
.lx-search input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 13px; font-size: 15px; font-family: inherit;
  color: var(--lx-ink); background: var(--lx-bg);
  border: 1px solid var(--lx-line); border-radius: var(--lx-radius);
  -webkit-appearance: none; appearance: none;
}
.lx-search input[type="search"]:focus {
  outline: none; border-color: var(--lx-gold); background: var(--lx-surface);
}
.lx-search button[type="submit"] {
  flex: 0 0 auto; padding: 11px 18px; font-size: 14.5px; font-weight: 600;
  font-family: inherit; color: #fff; background: var(--lx-ink);
  border: 0; border-radius: var(--lx-radius); cursor: pointer;
}
.lx-search button[type="submit"]:hover { background: var(--lx-gold) }

/* ── 브레드크럼 ───────────────────────────────────────*/
.lx-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 12px; font-size: 12.5px; color: var(--lx-ink-dim);
}
.lx-crumbs a { color: var(--lx-ink-dim); text-decoration: none }
.lx-crumbs a:hover { color: var(--lx-gold) }
.lx-crumbs i { font-style: normal; color: var(--lx-line) }

/* ── 카드 자리표시 ────────────────────────────────────
   대표이미지 없는 글이 73편. 칸을 비우면 목록이 들쭉날쭉해진다. */
.lx-card-th.is-blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--lx-gold-soft); outline: none;
}
.lx-card-th.is-blank span {
  font-size: 22px; font-weight: 700; color: var(--lx-gold); opacity: .55;
}

/* ── 이전·다음 글 ─────────────────────────────────────*/
.lx-pn {
  display: grid; gap: 10px; grid-template-columns: 1fr;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--lx-line);
}
@media (min-width: 620px) { .lx-pn { grid-template-columns: 1fr 1fr; gap: 14px } }
.lx-pn-i {
  display: block; padding: 14px 16px; text-decoration: none;
  background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
}
.lx-pn-i:hover { border-color: var(--lx-gold) }
.lx-pn-i span {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lx-gold);
}
.lx-pn-i strong {
  display: block; font-size: 14px; line-height: 1.45; font-weight: 600;
  letter-spacing: -0.02em; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-pn-i.is-next { text-align: right }

/* ── 푸터 곁 카테고리 ─────────────────────────────────*/
.lx-foot-nav a span {
  font-size: 11px; color: var(--lx-ink-dim); font-variant-numeric: tabular-nums;
  margin-left: 3px; font-weight: 400;
}