/* ================================================
   reels.atlascore.me — GeneratePress Custom CSS — VER1 (WIRED)
   Design: WIRED design.md (broadsheet editorial)
   Source: /Users/damon/Dev/블로그-자동화/css/wired.md
   Layout: Left Sidebar / Separate Containers / 1200px (camping 골격 보존)
   Tone: Newsstand-density · Mono UPPERCASE 키커 · 2px hard 검정 border · 0 radius · Link Blue 액센트
   ================================================ */

/* Google Fonts CDN — Gowun Batang (한국어 명조 가독성 ↑) + Noto Serif KR (display)
   KoPub Batang 은 Google Fonts 미제공. 별도 mu-plugin 으로 self-host 권장 (옵션) */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@400;500;600;700;900&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* ========================
   Design Tokens — WIRED System
   ======================== */
:root {
  /* Editorial Ink */
  --color-bg: #ffffff;
  /* Paper White — 페이지 캔버스 */
  --color-surface: #ffffff;
  --color-ink: #000000;
  /* WIRED Black — ribbon·border·rule */
  --color-text: #1a1a1a;
  /* Page Ink — 헤드라인·본문 */

  /* Neutrals */
  --color-mute: #757575;
  /* Caption Gray — byline·timestamp */
  --color-disabled: #999999;
  --color-hairline: #e2e8f0;
  /* Hairline Tint — quiet divider */

  /* Accent — Wired 의 진짜 시그니처는 노란/골드. Link Blue 는 보조 */
  --color-yellow: #fcef47;        /* Wired Yellow — Subscribe 리본·하이라이트 */
  --color-yellow-deep: #e0c04e;   /* gold — 살짝 깊은 톤 */
  --color-link: #057dbc;          /* Link Blue — 인라인 링크 hover 보조 */

  /* Inversion */
  --color-footer-bg: #1a1a1a;
  /* Footer Ink — 유일한 inversion zone */
  --color-on-dark: #ffffff;

  /* Fonts — 한국어 가독성 우선 명조 stack
     본문: KoPub Batang (한국출판인회의 가독성 전용) → Gowun Batang (Google Fonts, 디지털 최적화) → Nanum Myeongjo → Noto Serif KR
     디스플레이: Noto Serif KR (heavy weight 700 안정 지원) → KoPub Batang
     ⚠️ KoPub Batang·Gowun Batang 은 webfont enqueue 필요. mu-plugin 으로 로드하거나 하단 @import 활성화.
  */
  --font-display: 'Noto Serif KR', 'KoPubWorldBatang', 'Gowun Batang', 'Source Serif 4', Georgia, serif;
  --font-body: 'KoPubWorldBatang', 'Gowun Batang', 'Nanum Myeongjo', 'Noto Serif KR', Georgia, 'Times New Roman', serif;
  --font-ui: 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Pretendard Variable', ui-monospace, Menlo, Monaco, monospace;

  /* Shape — 0 radius 어디서나. pill·circle 만 예외 */
  --radius: 0;
  --radius-pill: 1920px;
  /* "BREAKING" 류 텍스트 spans */
  --radius-circle: 50%;
  /* 아이콘 버튼·아바타 */

  --shadow-sm: none;
  --shadow-md: none;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================
   Base
   ======================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;                              /* 16 → 17 — 한글 명조 가독성 보정 */
  line-height: 1.75;                            /* 1.5 → 1.75 — 한글 명조 적정 행간 */
  font-weight: 400;
  word-break: keep-all;                         /* 한글 단어 단위 줄바꿈 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.12s var(--ease);
}

a:hover {
  color: var(--color-link);
  /* WIRED 의 단 하나 액센트 */
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  /* 0 radius — sharp 강제 */
}

::selection {
  background: var(--color-yellow);     /* Wired 노랑 highlighter — 시그니처 */
  color: var(--color-ink);
}

/* ========================
   Container 정렬 기준선 — camping 동일 (1200px 컨테인 — GP 레이아웃 보존)
   ======================== */
.grid-container,
.inside-header,
.inside-navigation,
.inside-site-content,
.inside-footer-widgets,
.inside-site-footer {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.site-content,
.separate-containers .site-content {
  background: var(--color-bg);
}

/* 헤더·nav border 풀폭 확장 — pseudo-element 로 viewport 양 끝까지
   site-header / main-navigation 의 border-bottom 을 hairline 으로 대체 */
.site-header {
  border-bottom: none !important;
  position: relative;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(min(1200px, 95vw) - 48px);
  height: 2px;
  background: var(--color-ink);
  transform: translateX(-50%);
  pointer-events: none;
}

.main-navigation {
  border-bottom: none !important;
  position: relative;
}

.main-navigation::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(min(1200px, 95vw) - 48px);
  height: 2px;                                /* 본문 타이틀 밑 구분선과 동일 */
  background: var(--color-ink);
  transform: translateX(-50%);
  pointer-events: none;
}

/* single post 한정 — #page 가 1440 으로 확장되므로 헤더 줄도 매치 */
body.single-post .site-header::after,
body.single-post .main-navigation::after {
  width: calc(min(1440px, 95vw) - 48px);
}

/* 모바일 — 그리드 padding 16px 매치 */
@media (max-width: 767px) {
  .site-header::after,
  .main-navigation::after,
  body.single-post .site-header::after,
  body.single-post .main-navigation::after {
    width: calc(100% - 32px);
  }
}

html, body {
  overflow-x: hidden;          /* 100vw pseudo-element 로 인한 가로 스크롤 방지 */
}

/* ========================
   Header — Paper White, bug logo 결
   ======================== */
.site-header {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-ink);
  /* 2px hard 검정 — newsprint 결 */
  box-shadow: none;
  padding-top: 16px;
  padding-bottom: 4px;            /* 16 → 4 — 압축 */
}

/* WIRED bug logo 결 — 굵직한 serif 또는 sans display */
.site-title a {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 700;                  /* 실제 wired 는 700 max — 900 X */
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.5px;
  line-height: 1;
  text-transform: uppercase;
  /* WIRED 와드마크 = ALL CAPS */
  position: relative;
  display: inline-block;
}

/* 와드마크 뒤 노란 highlight — Wired bug logo 시그니처 */
.site-title a::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 2px;
  height: 8px;
  background: var(--color-yellow);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.site-title a:hover::after {
  opacity: 1;
}

.site-title a:hover {
  color: var(--color-ink);
  /* 와드마크는 hover 변색 X */
}

.site-description {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-mute);
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ========================
   Navigation — utility bar 결, mono UPPERCASE
   ======================== */
.main-navigation {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-ink);
}

.main-navigation .inside-navigation {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 32px;             /* 44 → 32 — 빈 nav 바 압축 (가장 큰 여백 원인) */
}

.main-navigation a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0 16px;
  line-height: 32px;            /* 44 → 32 */
  transition: color 0.12s var(--ease);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.main-navigation .menu-bar-item .gp-icon-search {
  width: 16px;
  height: 16px;
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li a:visited {
  color: var(--color-ink) !important;
  position: relative;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li.sfHover>a {
  color: var(--color-link) !important;
  /* WIRED hover = Link Blue */
}

/* 현재 페이지: 1px hairline 으로 표시 (WIRED 는 굵은 active state X — 본문이 알아서 함) */
.main-navigation .main-nav ul li.current-menu-item>a,
.main-navigation .main-nav ul li.current-menu-ancestor>a,
.main-navigation .main-nav ul li.current_page_item>a {
  color: var(--color-ink) !important;
  background: none !important;
  box-shadow: inset 0 -2px 0 0 var(--color-ink);
}

.main-navigation .main-nav ul li.current-menu-item>a:hover,
.main-navigation .main-nav ul li.current-menu-item>a:focus,
.main-navigation .main-nav ul li.current-menu-ancestor>a:hover,
.main-navigation .main-nav ul li.current-menu-ancestor>a:focus,
.main-navigation .main-nav ul li.current_page_item>a:hover,
.main-navigation .main-nav ul li.current_page_item>a:focus {
  color: var(--color-link) !important;
  box-shadow: inset 0 -2px 0 0 var(--color-link);
}

/* 드롭다운 — sharp 0 radius, 1px 검은 border */
.main-navigation .sub-menu {
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.main-navigation .sub-menu a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 12px 18px;
  color: var(--color-ink);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.main-navigation .sub-menu a:hover {
  color: var(--color-link);
  background: var(--color-bg);
}

/* ========================
   콘텐츠 + 사이드바 레이아웃 — single 과 동일하게 (#left-sidebar 264px)
   ======================== */
.site-content .inside-site-content {
  display: flex !important;
  align-items: flex-start;
  gap: 0;
  padding-top: 16px;
  padding-bottom: 40px;
}

@media (min-width: 1025px) {
  .site-content .inside-site-content {
    flex-direction: row !important;
  }
}

/* 모바일 column 은 line 1559 의 @media (max-width: 767px) 룰에서 처리 */

@media (min-width: 1025px) {
  #content.site-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  #content.site-content > #left-sidebar.widget-area {
    flex: 0 0 264px !important;
    width: 264px !important;
    max-width: 264px !important;
    order: 1 !important;
    padding-right: 0 !important;
  }
  #content.site-content > #primary.content-area {
    flex: 1 1 0% !important;
    order: 2 !important;
  }
  /* sticky 강제 — mu-plugin 룰보다 specificity 강화 + webkit fallback */
  body.both-sidebars.single-post #content.site-content > #right-sidebar.widget-area {
    flex: 0 0 264px !important;
    width: 264px !important;
    max-width: 264px !important;
    order: 3 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
    z-index: 10 !important;
  }
}

#left-sidebar {
  flex: 0 0 264px;
  min-width: 0;
  order: 1;
  padding-right: 24px;
}

#primary {
  flex: 1 1 0%;
  min-width: 0;
  order: 2;
  padding-top: 0;
  margin-top: 0;
  padding-left: 24px;
  border-left: 1px solid #f0f0f0;            /* 좌측 위젯 ↔ 본문 hairline */
}

/* 본문 ↔ 우측 TOC hairline — single post 에만 (우측 sidebar 있을 때만) */
body.single #primary {
  padding-right: 24px;
  border-right: 1px solid #f0f0f0;
}

/* GP 디폴트 wrapper padding reset — 그리드 정렬 정확히 */
.site-main,
.content-area,
#main,
#main > article:first-child,
.site-main > article:first-child,
.content-area > article:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.entry-header,
article.post {
  margin: 0;
  padding: 0;
}

article.post {
  padding-bottom: 36px;
  margin-bottom: 36px;
}

/* ========================
   사이드바 위젯 — 카드 chrome 0, 1px 검은 top rule (첫 위젯 제외)
   ======================== */
/* 위젯 = 우측 TOC 패턴 — 라벨이 박스 안 가로선 바로 아래, 자식이 라벨 + 6px 거리 */
.widget-area .widget {
  position: relative;
  background: transparent;
  border: none;
  border-top: 2px solid var(--color-ink);
  border-radius: 0;
  padding-top: 30px;              /* 라벨 height 24 + 6px = 자식 시작점 (사용자 결정) */
  padding-bottom: 0;
  margin-top: 48px;               /* 위젯 사이 여백 */
  margin-bottom: 0;
}

.widget-area .widget:first-child {
  border-top: none !important;
  margin-top: 0;
  padding-top: 30px;
}

.widget-area .widget.widget_search {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.widget-area .widget + .widget {
  border-top: 2px solid var(--color-ink);
  padding-top: 30px;
  margin-top: 48px;
}

/* 검색 박스 — 다른 위젯과 동일 그리드 (264px 박스 너비 꽉 채움)
   진단: .inner-padding 클래스가 aside 에 padding 40+40 박아 content area 184 만 — 좌우 padding 0 강제 */
body .widget-area aside.widget.widget_search,
body .widget-area aside.widget.inner-padding.widget_search {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body .widget-area aside.widget.widget_search > form,
body .widget-area aside.widget.widget_search form.wp-block-search,
body .widget-area aside.widget.widget_search form.wp-block-search__button-outside {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body .widget-area aside.widget.widget_search .wp-block-search__inside-wrapper {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  display: flex !important;
  box-sizing: border-box !important;
  border: 2px solid var(--color-ink) !important;
  border-radius: 0 !important;
}
.widget-area .widget_search .wp-block-search__input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  border: none !important;
  background: transparent !important;
}
.widget-area .widget_search .wp-block-search__button {
  flex: 0 0 auto !important;
  padding: 14px 16px !important;
}

/* wp block widget wrapper margin/padding 강제 0 — 박스 안 자식 spacing 정리용 (라벨은 absolute 라 wrapper 무관) */
.widget-area .widget > .wp-block-group,
.widget-area .widget > .wp-block-group > .wp-block-group__inner-container,
.widget-area .widget .wp-block-group__inner-container > .wp-block-group:first-child,
.widget-area .widget .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 위젯 제목 = 검은 박스 라벨 — absolute, 박스 padding-box top 시작 (가로선 바로 아래 붙음, 사용자 결정) */
.widget-area .widget-title,
.widget-area .widget .wp-block-heading,
.widget-area h2 {
  position: absolute !important;
  top: 0 !important;              /* 라벨 top = 박스 padding-box top = 가로선 바로 아래 */
  left: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  background: var(--color-ink) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  border: none !important;
  padding: 6px 12px 5px !important;
  line-height: 1.2 !important;
  z-index: 1;
}

.widget-area a {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.12s var(--ease);
}

.widget-area a:hover {
  color: var(--color-link);
}

.widget-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* list item 줄 X + 이모지 size 통일 + 최신 글 margin (모든 페이지 공통) */
.widget-area li {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 0;
  border-bottom: none;
  line-height: 1.5;
  min-height: 1.5em;
  font-weight: 500;
}

.widget-area li:last-child {
  padding-bottom: 0;
}

.widget-area li img.emoji,
.widget-area li img.wp-smiley {
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  vertical-align: -0.125em !important;
}

.widget-area .wp-block-latest-posts__list {
  margin-top: 14px;
}

.widget-area .cat-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 태그 클라우드 — sharp 0 radius, 1px 검은 border */
.widget_tag_cloud .tagcloud a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  padding: 6px 10px;
  margin: 2px 4px 2px 0;
  transition: all 0.12s var(--ease);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1;
}

.widget_tag_cloud .tagcloud a:hover {
  background: var(--color-ink);
  color: var(--color-on-dark);
  /* invert hover — WIRED button 패턴 */
  border-color: var(--color-ink);
}

/* ========================
   포스트 카드 — chrome 0. 이미지 + mono 키커 + serif 헤드라인 stack
   카드 사이는 1px 검은 hairline 으로 구분
   ======================== */
.post,
article.post {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin: 0;
  padding-bottom: 36px;
  margin-bottom: 36px;
  box-shadow: none;
  transition: none;
  position: relative;
}

/* 카드 사이 1px 검은 hairline rule — broadsheet 결 */
.post+.post,
article.post+article.post {
  border-top: 1px solid var(--color-ink);
  padding-top: 36px;
}

.post:hover,
article.post:hover {
  /* WIRED 는 호버 시 카드 변형 X — 헤드라인 색만 변함 (link 컬러) */
}

/* 대표 이미지 — 0 radius, 16:9 시네마틱.
   line-height: 0 + display: block 으로 inline baseline descender 공간 제거 */
.post-image,
.post .post-image {
  margin: 0 0 16px;
  overflow: hidden;
  background: var(--color-hairline);
  border-radius: 0;
  line-height: 0;                /* inline baseline descender kill */
  font-size: 0;
}

.post-image a,
.post .post-image a {
  display: block;
  line-height: 0;
  font-size: 0;
}

.single img.wp-post-image {
  display: none;
}

.post-image img,
.post .post-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);    /* 약한 바운스 */
}

/* 이미지에만 호버 — 살짝 들썩 (강도 down) */
.post-image:hover img,
.post .post-image:hover img {
  transform: translateY(-3px);
}

/* 카드 내부 패딩 — chrome 0 이라 패딩도 0 */
.inside-article {
  padding: 0;
}

/* 첫 자식 reset — 위쪽 떠보이는 여백 방지 */
.inside-article > :first-child,
.entry-header,
.entry-header > :first-child {
  margin-top: 0;
}

/* 글 작성일·작성자 숨김 — 시각 클러터 제거 */
.entry-header .entry-meta {
  display: none;
}

/* 헤드라인 — WiredDisplay 결, serif, 26px 그리드 사이즈. 아래 16px 통일 */
.entry-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 16px;            /* 10 → 16 통일 */
  color: var(--color-text);
  letter-spacing: -0.3px;
}

.entry-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.12s var(--ease);
}

.entry-title a:hover {
  color: var(--color-link);
  /* WIRED 호버 = Link Blue 색 swap, underline 추가 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 날짜·작성자 메타 — caption gray, mono uppercase */
footer.entry-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-mute);
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.3;
}

footer.entry-meta a {
  color: var(--color-mute);
  text-decoration: none;
}

footer.entry-meta a:hover {
  color: var(--color-link);
}

/* 데크 (발췌문) — BreveText serif, 1.47 line-height. 위 16px 통일 */
.entry-summary {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.47;
  margin: 0;                     /* 모든 margin reset — post-image margin-bottom 16 이 처리 */
  padding: 0;
  font-weight: 400;
}

.entry-summary > *:first-child,
.entry-summary p:first-of-type {
  margin-top: 0 !important;
  padding-top: 0;
}

.entry-summary p {
  margin: 0;
  padding: 0;
}

.entry-summary p {
  margin: 0;
}

/* ========================
   호버 분리 — 제목·본문 각각 독립적으로 underline
   본문(excerpt) 영역 = read-more 링크가 invisible 로 cover (가시 텍스트 X, 클릭만 가능)
   ======================== */

/* read-more 텍스트는 안 보이지만 링크는 살아있음 — excerpt 전체 클릭 영역 */
.entry-summary {
  position: relative;
}

.entry-summary .read-more,
.entry-summary .more-link {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 0;
  color: transparent;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}

/* 제목 hover — 제목만 underline */
.entry-title a:hover {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 본문 hover — opacity 살짝 dim (각 줄 underline 그으면 가로 bar 처럼 보여서 X) */
.entry-summary:hover p {
  opacity: 0.7;
  transition: opacity 0.15s var(--ease);
}

.entry-summary p {
  transition: opacity 0.15s var(--ease);
}

/* share 버튼은 invisible read-more 보다 위로 — 클릭 가능하게 유지 */
.entry-summary .a2a_kit,
.entry-summary .addtoany_share_save_container {
  position: relative;
  z-index: 3;
}

/* ========================
   단일 포스트 — Hero 64px display
   ======================== */
.single .inside-article {
  padding: 0 0 36px;
}

/* single — featured-image 숨김 (본문 안 figure 로 이미지 처리) */
.single .featured-image,
.single .post-image,
.single .featured-image.page-header-image-single {
  display: none !important;
}

.single .entry-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--color-ink);
}

/* Single 헤드라인 — 적정 사이즈 */
.single .entry-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 8px 0 14px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  text-transform: none;
}

/* Single 페이지에선 작성일·작성자 다시 표시 (mono caps) */
.single .entry-header .entry-meta {
  display: block !important;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-mute);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.single .entry-header .entry-meta a {
  color: var(--color-mute);
  text-decoration: none;
}

.single .entry-header .entry-meta a:hover {
  color: var(--color-link);
}

.single footer.entry-meta {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
  margin-top: 18px;
}

/* 본문 — 한글 명조 가독성 우선. 18px / 1.85 line-height / keep-all */
.entry-content {
  font-family: var(--font-body);
  font-size: 18px;                              /* 한글 명조 본문 권장 */
  line-height: 1.85;                            /* 인쇄물 결 행간 */
  color: var(--color-text);
  font-weight: 400;
  word-break: keep-all;
  letter-spacing: -0.01em;                      /* 한글 명조 자모 살짝 좁힘 */
}

.entry-content p {
  margin-bottom: 1.4em;
}

/* H2 — WiredDisplay 32~36px */
.entry-content h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  letter-spacing: -0.3px;
  line-height: 1.05;
  text-transform: none;
}

/* H3 — Apercu sans 700 */
.entry-content h3 {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  letter-spacing: -0.144px;
  line-height: 1.2;
  text-transform: none;
}

/* H4 */
.entry-content h4 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 1.4em;
  margin-bottom: 0.3em;
  letter-spacing: -0.144px;
}

/* 본문 인라인 링크 — text underline always, hover = Link Blue */
.entry-content a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.entry-content a:hover {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
}

/* 본문 이미지 — 0 radius, full-bleed */
.entry-content img {
  border-radius: 0;
  margin: 20px 0 28px;
  width: 100%;
}

/* Photo caption — BreveText 12.73px / 700 / 2.20 line-height (relaxed) */
.entry-content figcaption,
.wp-caption-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-mute);
  line-height: 2.0;
  letter-spacing: 0.108px;
  margin-top: 8px;
  font-style: italic;
}

/* Blockquote — 2px 검은 left rule, sharp */
.entry-content blockquote {
  border-left: 4px solid var(--color-ink);
  margin: 28px 0;
  padding: 10px 24px;
  background: transparent;
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}

.entry-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-ink);
  color: var(--color-on-dark);
  border: none;
  border-radius: 0;
  padding: 2px 6px;
  font-weight: 600;
}

.entry-content pre {
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: 0;
  padding: 20px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.entry-content pre code {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

/* ========================
   포스트 이전/다음 — 2px 검은 top rule
   ======================== */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 2px solid var(--color-ink);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
}

.post-navigation .nav-next {
  text-align: right;
}

.post-navigation a {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.12s var(--ease);
  letter-spacing: -0.144px;
  line-height: 1.2;
}

.post-navigation a:hover {
  color: var(--color-link);
}

.post-navigation .nav-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-ink);
  display: block;
  margin-bottom: 6px;
}

/* ========================
   브레드크럼 — mono uppercase
   ======================== */
.breadcrumb-trail {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-mute);
  margin-bottom: 18px;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.breadcrumb-trail a {
  color: var(--color-mute);
  text-decoration: none;
}

.breadcrumb-trail a:hover {
  color: var(--color-link);
}

.breadcrumb-trail .sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ========================
   페이지네이션 — 0 radius 검은 box, hover invert
   ======================== */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 48px 0;
}

.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  border-right: none;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.12s var(--ease);
  letter-spacing: 0.3px;
}

.page-numbers:last-child,
.nav-links a:last-child,
.nav-links span:last-child {
  border-right: 1px solid var(--color-ink);
}

.page-numbers:hover,
.nav-links a:hover {
  color: var(--color-on-dark);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.page-numbers.current {
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-color: var(--color-ink);
}

.page-numbers.prev,
.page-numbers.next {
  font-size: 0;
}

.page-numbers.prev::before {
  content: "←";
  font-size: 16px;
  line-height: 1;
}

.page-numbers.next::before {
  content: "→";
  font-size: 16px;
  line-height: 1;
}

.page-numbers.next span,
.page-numbers.prev span,
.page-numbers.next svg,
.page-numbers.prev svg {
  display: none;
}

/* ========================
   아카이브 헤더 — 검은 ribbon. WIRED 시그니처
   ======================== */
.page-header,
.archive-header,
.separate-containers .page-header {
  padding: 0;
  margin-bottom: 32px;
  background: transparent !important;
  border: none;
  border-radius: 0;
}

/* 빈 archive-header (home 등) margin 차지 방어 */
.page-header:empty,
.archive-header:empty {
  display: none;
}

/* home / blog index 에선 archive-header / page-header 강제 숨김
   (screen-reader text 만 있어도 :empty 로 못 잡혀서 명시) */
body.home .archive-header,
body.home .page-header,
body.blog .archive-header,
body.blog .page-header {
  display: none !important;
}

/* 검은 ribbon bar — 풀블리드 검정 + WiredMono uppercase 흰 라벨 */
.archive-title,
.page-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-dark);
  background: var(--color-ink);
  margin: 0 0 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 24px;
  line-height: 1.2;
  display: block;
}

.archive-description {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  margin: 0;
  font-weight: 400;
  line-height: 1.47;
  max-width: 720px;
  padding-left: 24px;
}

/* ========================
   404 / no-results — 거대 serif numerals
   ======================== */
.error-404,
.no-results {
  text-align: center;
  padding: 80px 24px;
  background: transparent;
  border: 2px solid var(--color-ink);
  border-radius: 0;
}

.error-404 .page-title,
.no-results .page-title {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--color-ink);
  background: transparent;
  padding: 0;
  line-height: 0.95;
  margin-bottom: 16px;
}

.error-404 .page-content p,
.no-results .page-content p {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

/* ========================
   전역 Headings 디폴트
   ======================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

/* ========================
   Buttons (전역)
   ======================== */
.button,
input[type="submit"],
button:not(.menu-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 2px solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.button:hover,
input[type="submit"]:hover,
button:not(.menu-toggle):hover {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

/* ========================
   Forms — 2px 검은 border, 0 radius
   ======================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  border: 2px solid var(--color-ink);
  border-radius: 0;
  padding: 10px 14px;
  height: 44px;
  width: 100%;
  outline: none;
  transition: border-color 0.12s var(--ease);
}

textarea {
  height: auto;
  min-height: 120px;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-ink);
  outline: 2px solid var(--color-link);
  outline-offset: 0;
}

/* WP search 위젯 — 인풋과 버튼 사이즈 정렬, 매그니파이어 아이콘 작게 */
.wp-block-search__inside-wrapper,
.search-form,
form[role="search"] {
  display: flex !important;
  align-items: stretch;
  gap: 0;
}

.wp-block-search__input,
.search-form input[type="search"],
form[role="search"] input[type="search"] {
  flex: 1;
  height: 44px;
  width: auto;
}

.wp-block-search__button,
.search-form button[type="submit"],
.search-form input[type="submit"],
.widget_search button[type="submit"],
form[role="search"] button[type="submit"] {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: var(--color-ink);            /* 디폴트부터 검정 fill */
  color: var(--color-on-dark);             /* 아이콘 흰색 */
  border: 2px solid var(--color-ink);
  border-left-width: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0;
  transition: opacity 0.12s var(--ease);
}

.wp-block-search__button:hover,
.search-form button[type="submit"]:hover,
.widget_search button[type="submit"]:hover,
form[role="search"] button[type="submit"]:hover {
  background: var(--color-ink);
  color: var(--color-on-dark);
  opacity: 0.85;
}

.wp-block-search__button svg,
.search-form button svg,
form[role="search"] button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

::placeholder {
  color: var(--color-mute);
}

/* ========================
   Footer — Footer Ink, 흰 type, 유일한 inversion zone
   ======================== */
.site-footer {
  background: var(--color-footer-bg);
  border-top: 2px solid var(--color-ink);
  color: var(--color-on-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  margin-top: 48px;            /* camping 급 — 64 → 48 */
  padding: 0;
}

.site-footer a {
  color: var(--color-on-dark);
  text-decoration: none;
  transition: color 0.12s var(--ease);
}

.site-footer a:hover {
  color: var(--color-link);
}

.footer-widgets {
  display: none;
}

.site-info {
  background: var(--color-footer-bg);
  color: var(--color-on-dark);
  padding: 10px 0;             /* camping 급 — 18 → 10 */
}

.site-info .inside-site-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.site-info .copyright-bar {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-on-dark);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.site-info .copyright-bar::after {
  content: "·";
  color: var(--color-mute);
  margin: 0 12px;
}

.site-info .footer-bar {
  display: inline-flex;
  align-items: center;
}

.site-info .footer-bar .widget {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.site-info .footer-bar .widget_nav_menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-info .footer-bar .widget_nav_menu li {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 11px;
}

.site-info .footer-bar .widget_nav_menu li:not(:last-child)::after {
  content: "·";
  color: var(--color-mute);
  margin: 0 12px;
}

.site-info .footer-bar .widget_nav_menu a {
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  padding: 0;
  line-height: 1.5;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.site-info .footer-bar .widget_nav_menu a:hover {
  color: var(--color-link);
}

@media (max-width: 767px) {
  .site-info .inside-site-info {
    flex-direction: column;
    gap: 6px;
  }

  .site-info .footer-bar {
    order: 1;
  }

  .site-info .copyright-bar {
    order: 2;
  }

  .site-info .copyright-bar::after,
  .site-info .footer-bar .widget_nav_menu li:not(:last-child)::after {
    content: none;
  }

  .site-info .footer-bar .widget_nav_menu ul {
    gap: 14px;
  }
}

/* ========================
   기타 정리
   ======================== */
.entry-meta .comments-link,
.post-meta .comments-link {
  display: none;
}

.separate-containers .content-area,
.separate-containers #content {
  background: transparent;
}

.paging-navigation,
#nav-below,
.separate-containers .paging-navigation {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ========================
   Mobile (max 767px)
   ======================== */
@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .grid-container,
  .inside-header,
  .inside-navigation,
  .inside-site-content,
  .inside-footer-widgets,
  .inside-site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-content .inside-site-content {
    flex-direction: column !important;
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #left-sidebar {
    flex: none;
    width: 100%;
    order: 2;
  }

  #left-sidebar {
    padding-right: 0;             /* 모바일은 좌우 padding 제거 */
  }

  #primary {
    order: 1;
    border-left: none;            /* 모바일에선 vertical 실선 숨김 */
    padding-left: 0;
  }

  .site-title a {
    font-size: 24px;
  }

  .site-description {
    font-size: 11px;
  }

  .single .inside-article {
    padding: 0 0 28px;
  }

  /* Mobile hero 36~42px (스펙) */
  .single .entry-title {
    font-size: 38px;
    letter-spacing: -0.4px;
    line-height: 1.0;
  }

  .archive-title,
  .page-title {
    font-size: 12px;
    padding: 10px 16px;
  }

  .entry-content {
    font-size: 16px;
  }

  .entry-content h2 {
    font-size: 26px;
    letter-spacing: -0.3px;
  }

  .entry-content h3 {
    font-size: 18px;
  }

  .entry-title {
    font-size: 22px;
  }

  .post-navigation {
    flex-direction: column;
    gap: 12px;
  }

  .post-navigation .nav-next {
    text-align: left;
  }

  .error-404 .page-title,
  .no-results .page-title {
    font-size: 64px;
    letter-spacing: -1px;
  }

  /* Sticky nav */
  .main-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-ink);
  }

  .main-navigation .inside-navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }

  .main-navigation .menu-toggle {
    order: 1;
    margin: 0;
  }

  .main-navigation .menu-bar-items {
    order: 2;
    margin-left: auto;
    padding-right: 4px;
  }

  .main-navigation .main-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .main-navigation .menu-toggle[aria-expanded="true"]+.main-nav,
  .main-navigation.toggled .main-nav {
    background: var(--color-bg);
    border-top: 1px solid var(--color-ink);
  }

  .site-header {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* ========================
   Tablet (768px ~ 1023px)
   ======================== */
@media (min-width: 768px) and (max-width: 1023px) {
  #left-sidebar {
    flex: 0 0 200px;
  }

  .site-content .inside-site-content {
    gap: 32px;
  }

  .single .entry-title {
    font-size: 44px;
    letter-spacing: -0.4px;
  }

  .entry-content h2 {
    font-size: 30px;
  }

  .entry-title {
    font-size: 24px;
  }
}

/* ========================
   Large Desktop (>=1280px) — Hero scale 64px (스펙)
   ======================== */
@media (min-width: 1280px) {
  .single .entry-title {
    font-size: 40px;                /* desktop large 도 적정 — 80px 거대했음 */
    line-height: 1.15;
    letter-spacing: -0.5px;
  }
}

/* ========================
   AddToAny 소셜 공유
   ======================== */
.a2a_kit {
  margin-top: 16px;            /* 16px 통일 — 제목·이미지·텍스트 사이 여백과 동일 */
  margin-bottom: 16px;
  padding-top: 0;
  border-top: none;
}

.a2a_kit .a2a_svg {
  border-radius: 50% !important;
  overflow: hidden;
  box-sizing: border-box;
  filter: grayscale(1) opacity(.7);
  transition: filter .2s ease, transform .2s ease;
}

.a2a_kit .a2a_svg:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.05);
}

/* LuckyWP TOC + Floating TOC = 'floating-toc.php' mu-plugin 자체 스타일 사용
   (이 테마에서 별도 override 안 함 — 플러그인이 palette·layout 모두 처리)
   필요 시 mu-plugin 의 atlas_toc_palette() 함수에 reels 분기 추가 */

/* ================================================
   ⚠️ FORCE OVERRIDE — GP separate-containers 디폴트 padding 무력화
   GP 의 `.separate-containers .inside-article` 셀렉터 specificity 가 더 높아서
   기존 `.inside-article { padding: 0 }` 가 안 먹힘. !important 로 강제.
   ================================================ */

/* 본문 article 영역 — GP 디폴트 padding 40px 무력화 */
.separate-containers .inside-article,
.inside-article {
  padding: 0 !important;
  margin: 0 !important;
}

article.post,
.post {
  padding: 0 !important;
  margin: 0 0 36px 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 글과 글 사이 가로 hairline — 사이드바 vertical bar 와 같은 #f0f0f0 색 */
article.post + article.post,
.post + .post {
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 36px !important;
}

/* entry-header / summary / image margin·padding 명시적 reset */
.entry-header {
  padding: 0 !important;
  margin: 0 !important;
}

.entry-title {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.post-image,
.post .post-image {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.post-image a {
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.entry-summary {
  margin: 0 !important;
  padding: 0 !important;
}

.entry-summary > *:first-child,
.entry-summary p:first-of-type,
.entry-summary p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 사이드바 wrapper — GP 디폴트 padding 무력화 */
.inside-left-sidebar,
.separate-containers .inside-left-sidebar,
.inside-right-sidebar,
.separate-containers .inside-right-sidebar {
  padding: 0 !important;
  margin: 0 !important;
}

/* 컨텐츠 영역 wrapper 들 — top padding 0
   단, #content / .site-content 만 32px 유지 → 양 컬럼·vertical bar 모두 위에서 32px 띄움 */
#main,
.site-main,
#primary,
.content-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#content,
.site-content {
  padding-top: 32px !important;       /* 위젯·본문·vertical bar 모두 상단에서 32px breathing */
  margin-top: 0 !important;
}

/* 좌·우 sidebar 분리선 — vertical hairline.
   ★ single 포스트는 floating-toc mu-plugin (both-sidebars 레이아웃) 양보 — padding/border 안 걸음 */
body:not(.single) #primary,
body:not(.both-sidebars) #primary {
  padding-left: 24px;
  border-left: 1px solid #f0f0f0;
}

body:not(.single) #left-sidebar,
body:not(.both-sidebars) #left-sidebar {
  padding-right: 24px;
}

/* home/blog 에서 archive header 흔적 강제 제거 */
body.home .archive-header,
body.home .page-header,
body.blog .archive-header,
body.blog .page-header,
body:not(.archive):not(.search):not(.error404) .archive-header,
body:not(.archive):not(.search):not(.error404) .page-header {
  display: none !important;
}

/* 모바일 — vertical 실선 + 패딩 제거 */
@media (max-width: 767px) {
  #primary,
  body.single #primary {
    border-left: none !important;
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #left-sidebar {
    padding-right: 0 !important;
  }
}

/* ===== 우측 sticky TOC (#atlas-toc-sidebar) — wired 톤 1중 박스 + CONTENTS 라벨 =====
   sticky 는 mu-plugin 의 #right-sidebar 룰에 위임. 자체 scroll·max-height 풀어줌. */
body #atlas-toc-sidebar {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--color-ink) !important;
  border-radius: 0 !important;
  padding: 0 0 16px !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  /* mu-plugin 의 자체 scroll 제거 — sticky polyfill (JS) 의 position:fixed 가 작동하도록 position 강제 X */
  max-height: none !important;
  overflow: visible !important;
}

/* CONTENTS 라벨 (mu-plugin 의 .lwptoc_header 가 hide 되므로 ::before 로 박음) */
body #atlas-toc-sidebar::before {
  content: 'CONTENTS';
  display: inline-block;
  background: var(--color-ink);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 12px 5px;
  margin-top: -14px;
  margin-bottom: 14px;
  line-height: 1.2;
}

/* 항목 a — wired editorial 톤: hairline·border-left X, hover underline + Link Blue */
body #atlas-toc-sidebar a {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  padding: 5px 0 !important;
  border: none !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.12s var(--ease), padding-left 0.12s var(--ease) !important;
}
body #atlas-toc-sidebar a:hover {
  color: var(--color-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
body #atlas-toc-sidebar a.active {
  color: var(--color-link) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* H2 (1단) — display serif bold + hairline */
body #atlas-toc-sidebar > .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap > .lwptoc_item > a {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.1px !important;
  padding: 8px 0 6px !important;
  border-top: 1px solid var(--color-hairline) !important;
}
/* 첫 H2 항목 — 상단 hairline X */
body #atlas-toc-sidebar > .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap:first-child > .lwptoc_item:first-child > a {
  border-top: none !important;
  padding-top: 0 !important;
}

/* H3 (2단) — 들여쓰기 + caption gray */
body #atlas-toc-sidebar .lwptoc_itemWrap .lwptoc_itemWrap a {
  padding-left: 14px !important;
  font-size: 12.5px !important;
  color: var(--color-mute) !important;
  font-weight: 400 !important;
}
/* H4 (3단) — 더 깊은 들여쓰기 */
body #atlas-toc-sidebar .lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_itemWrap a {
  padding-left: 28px !important;
  font-size: 12px !important;
}

/* ===== 본문 인라인 LuckyWP TOC — wired 톤 (1중 box, 라벨 줄 위로 솟음) ===== */
body .entry-content .lwptoc,
body .post-content .lwptoc,
body article .lwptoc:not(#atlas-toc-sidebar .lwptoc),
body .lwptoc.lwptoc-light {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--color-ink) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 20px !important;
  margin: 36px 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
/* 라벨 wrapper + 라벨 위치 (사용자 결정 2026-05-08: header -19px, title left -19px) */
body .entry-content .lwptoc .lwptoc_header,
body .post-content .lwptoc .lwptoc_header,
body article .lwptoc .lwptoc_header {
  margin-top: -19px !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}
body .entry-content .lwptoc .lwptoc_title,
body .post-content .lwptoc .lwptoc_title,
body article .lwptoc .lwptoc_title {
  display: inline-block !important;
  background: var(--color-ink) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 6px 12px 5px !important;
  margin: 0 0 0 -19px !important;
  line-height: 1.2 !important;
  border: none !important;
}
/* TOC 항목 — wired editorial 톤: hairline 없고 hover 시 underline + Link Blue */
body .entry-content .lwptoc a,
body .post-content .lwptoc a,
body article .lwptoc a {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  padding: 5px 0 !important;
  border: none !important;
  text-decoration: none !important;
  transition: color 0.12s var(--ease), padding-left 0.12s var(--ease) !important;
}
body .entry-content .lwptoc a:hover,
body .post-content .lwptoc a:hover,
body article .lwptoc a:hover {
  color: var(--color-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
/* 본문 TOC active = sticky TOC 와 동일 (Link Blue + bold + underline) */
body .entry-content .lwptoc a.active,
body .post-content .lwptoc a.active,
body article .lwptoc a.active {
  color: var(--color-link) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}
/* H3 (2단) — 들여쓰기 + 가는 회색 */
body .entry-content .lwptoc .lwptoc_itemWrap .lwptoc_itemWrap a,
body .post-content .lwptoc .lwptoc_itemWrap .lwptoc_itemWrap a {
  padding-left: 20px !important;
  font-size: 14px !important;
  color: var(--color-mute) !important;
  font-weight: 400 !important;
}
/* H4 (3단) — 더 깊은 들여쓰기, 더 작게 */
body .entry-content .lwptoc .lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_itemWrap a,
body .post-content .lwptoc .lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_itemWrap a {
  padding-left: 40px !important;
  font-size: 13px !important;
  color: var(--color-mute) !important;
}
/* H2 항목 (1단) — display 폰트로 강조 */
body .entry-content .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap > .lwptoc_item > a,
body .post-content .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap > .lwptoc_item > a {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.2px !important;
  padding: 10px 0 8px !important;
  border-top: 1px solid var(--color-hairline) !important;
}
/* 첫 H2 항목 — 상단 hairline X (라벨 영역과 겹침 방지) */
body .entry-content .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap:first-child > .lwptoc_item:first-child > a,
body .post-content .lwptoc > .lwptoc_i > .lwptoc_items > .lwptoc_itemWrap:first-child > .lwptoc_item:first-child > a {
  border-top: none !important;
  padding-top: 0 !important;
}
/* ▲ 숨기기 토글 = 라벨 동일 스타일 (검은 박스 + 흰 글자, mono UPPERCASE) */
body .entry-content .lwptoc .lwptoc_toggle a,
body .post-content .lwptoc .lwptoc_toggle a,
body article .lwptoc .lwptoc_toggle a {
  display: inline-block !important;
  background: var(--color-ink) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 6px 12px 5px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  text-decoration: none !important;
}
body .entry-content .lwptoc .lwptoc_toggle a:hover,
body .post-content .lwptoc .lwptoc_toggle a:hover,
body article .lwptoc .lwptoc_toggle a:hover {
  background: var(--color-link) !important;
  color: #ffffff !important;
}

