/*
Theme Name: LuxDigest
Theme URI: https://luxdigest.com
Author: JIHOON KIM
Author URI: https://luxdigest.com
Description: LuxDigest 전용 독립 테마
Version: 1.1.17
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: luxdigest
Tags: news, magazine, blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, editor-style, grid-layout
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --nl-paper:        #FAF9F6;
  --nl-paper-dim:    #F1EFEA;
  --nl-ink:          #191919;
  --nl-ink-soft:     #4A4A48;
  --nl-hairline:     #DEDACF;
  --nl-red:          #B7202E;
  --nl-red-dark:     #8C1822;
  --nl-gold:         #A98247;
  --nl-white:        #FFFFFF;

  --nl-font-display: "Playfair Display", Georgia, "Nanum Myeongjo", serif;
  --nl-font-body:    "Source Sans 3", "Noto Sans KR", -apple-system, sans-serif;
  --nl-font-mono:    "IBM Plex Mono", "Noto Sans KR", monospace;

  --nl-max: 1320px;
  --nl-article-max: 860px;
  --nl-gutter: 24px;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  overflow-x:hidden;
  margin:0;
  background:var(--nl-paper);
  color:var(--nl-ink);
  font-family:var(--nl-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* [메뉴 개편 중 발견/수정] html과 body에 둘 다 overflow-x:hidden이 걸려
     있으면(가로 스크롤 방지 목적), 브라우저가 body를 "뷰포트 대신 자기
     content 높이만큼만 스크롤/클리핑되는 박스"로 취급해버리는 경우가
     있다. 본문 내용이 적은(짧은) 페이지에서는 body 자체 높이가 화면보다
     작아지고, 그 결과 position:absolute로 펼쳐지는 모바일 메뉴의 하위
     카테고리(2단, 3단)가 body 높이를 넘어가는 부분에서 잘려 보이지 않는
     문제가 실제로 재현됐다(직접 펼침 메뉴를 렌더링해서 좌표를 찍어보고
     확인함). min-height:100vh로 body가 항상 최소 한 화면 높이는 확보하게
     해서 이 문제를 근본적으로 막는다. */
  min-height:100vh;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--nl-red); outline-offset:2px; }

.nl-container{
  max-width:var(--nl-max);
  margin:0 auto;
  padding:0 var(--nl-gutter);
}
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{
  font-family:var(--nl-font-display);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
.nl-eyebrow{
  font-family:var(--nl-font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nl-red);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nl-eyebrow::after{
  content:"";
  width:20px;height:1px;
  background:var(--nl-gold);
}
.nl-dateline{
  font-family:var(--nl-font-mono);
  font-size:12px;
  color:var(--nl-ink-soft);
  letter-spacing:.02em;
}
.nl-dateline b{ color:var(--nl-ink); }

/* =========================================================
   3. TOP BAR + MASTHEAD
   ========================================================= */
.nl-topbar{
  background:var(--nl-ink);
  color:#D8D4C8;
  font-family:var(--nl-font-mono);
  font-size:11.5px;
}
.nl-topbar .nl-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:36px;
}
.nl-topbar a{ color:#D8D4C8; }
.nl-topbar a:hover{ color:var(--nl-white); }
.nl-topbar-date{ letter-spacing:.05em; }
.nl-topbar-social{ display:flex; gap:16px; }

.nl-masthead{
  padding:16px 0 14px;
  text-align:center;
  border-bottom:3px solid var(--nl-gold);
  background:var(--nl-white);
}
.nl-masthead .custom-logo-link{ display:inline-block; }
.nl-masthead .custom-logo-link img{
  margin:0 auto;
  max-height:56px;
  width:auto;
  height:auto;
}
.nl-site-title{
  font-family:var(--nl-font-display);
  font-size:44px;
  font-weight:900;
  letter-spacing:-.01em;
  margin:0;
}
.nl-site-title a{ color:var(--nl-ink); }
.nl-site-desc{
  font-family:var(--nl-font-mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--nl-ink-soft);
  margin-top:6px;
}

/* Primary nav */
.nl-nav-wrap{
  background:var(--nl-white);
  border-top:1px solid var(--nl-ink);
  border-bottom:1px solid var(--nl-hairline);
}
/* [메뉴 버튼 위치 수정] 예전에는 이 flex 레이아웃이 header.php에 인라인
   style(justify-content:space-between 등)로 박혀 있었다. 인라인 style은
   외부 스타일시트의 어떤 선택자보다도 우선순위가 높아서, 모바일에서
   "메뉴" 버튼 위치만 따로 왼쪽으로 고정하려 해도 !important 없이는
   덮어쓸 방법이 없었다. 클래스로 옮겨서 반응형 미디어쿼리에서 정상적으로
   재정의할 수 있게 했다. */
.nl-nav-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nl-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex-wrap:wrap;
}
.nl-nav ul{ display:flex; flex-wrap:wrap; justify-content:center; }
.nl-nav li{ position:relative; }
.nl-nav a{
  display:block;
  padding:14px 16px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.nl-nav a:hover{ color:var(--nl-red); }
.nl-nav .current-menu-item > a{ color:var(--nl-red); }

/* -------------------------------------------------------
   3-1. 부모/자식 카테고리 펼침(드롭다운·아코디언) 메뉴
   - wp_nav_menu()가 만드는 <ul class="sub-menu"> 와
     카테고리 폴백이 만드는 <ul class="children"> 을 동일하게 다룬다.
   - 기본은 항상 숨김(display:none) → JS가 붙인 .nl-submenu-toggle
     버튼을 클릭했을 때만 .nl-submenu-open 클래스가 붙어 펼쳐진다.
     (호버로 저절로 열리지 않게 해서, "클릭하면 펼쳐진다"는 동작을
     데스크톱/모바일 모두 동일하게 유지한다.)
   ----------------------------------------------------- */
.nl-nav li.menu-item-has-children > a{ padding-right:40px; }
.nl-nav .sub-menu,
.nl-nav .children{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  background:var(--nl-white);
  border:1px solid var(--nl-ink);
  border-top:3px solid var(--nl-red);
  box-shadow:0 14px 28px rgba(0,0,0,.14);
  z-index:80;
  padding:6px 0;
}
.nl-nav .sub-menu .sub-menu,
.nl-nav .children .children{
  top:-7px;
  left:100%;
  border-top:1px solid var(--nl-ink);
}
.nl-nav li.nl-submenu-open > .sub-menu,
.nl-nav li.nl-submenu-open > .children{ display:block; }
.nl-nav .sub-menu li,
.nl-nav .children li{ width:100%; }
.nl-nav .sub-menu a,
.nl-nav .children a{
  display:block;
  padding:12px 18px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  border-bottom:1px solid var(--nl-hairline);
}
.nl-nav .sub-menu li:last-child > a,
.nl-nav .children li:last-child > a{ border-bottom:0; }
.nl-nav .sub-menu a:hover,
.nl-nav .children a:hover{ background:var(--nl-paper-dim); color:var(--nl-red); }
.nl-nav .sub-menu li.menu-item-has-children > a,
.nl-nav .children li.menu-item-has-children > a{ padding-right:36px; }

/* 펼침/접힘 버튼 (부모 링크 오른쪽에 붙는 화살표) */
.nl-submenu-toggle{
  position:absolute;
  top:0; right:0; bottom:0;
  width:40px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  color:inherit;
  padding:0;
}
.nl-submenu-toggle svg{
  width:11px; height:8px;
  transition:transform .2s ease;
}
.nl-submenu-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nl-nav .sub-menu .nl-submenu-toggle svg,
.nl-nav .children .nl-submenu-toggle svg{ transform:rotate(-90deg); }
.nl-nav .sub-menu li.nl-submenu-open > .nl-submenu-toggle svg,
.nl-nav .children li.nl-submenu-open > .nl-submenu-toggle svg{ transform:rotate(90deg); }

/* 데스크톱: 키보드로 탭 이동해 하위 메뉴 안 링크에 포커스가 가면
   시각적으로도 펼쳐지도록(접근성 백업 경로) */
@media (min-width:641px){
  .nl-nav li.menu-item-has-children:focus-within > .sub-menu,
  .nl-nav li.menu-item-has-children:focus-within > .children{ display:block; }
}

.nl-search-toggle{
  background:none;border:0;
  padding:14px 16px;
  color:var(--nl-ink);
}

/* GTranslate 등 언어 전환 위젯이 들어갈 자리 — 검색 아이콘 바로 왼쪽.
   GTranslate 설정의 "Wrapper selector CSS"를 #nl-lang-switch 로 지정하면
   이 자리에 플래그/드롭다운이 삽입됩니다. */
.nl-lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:4px;
}
.nl-lang-switch:empty{ display:none; } /* 아직 위젯이 안 꽂혀 있으면 빈 공간을 차지하지 않음 */
.nl-lang-switch img{ vertical-align:middle; }
.nl-search-panel{
  display:none;
  background:var(--nl-paper-dim);
  border-bottom:1px solid var(--nl-hairline);
}
.nl-search-panel.is-open{ display:block; }
.nl-search-panel .nl-container{ padding:16px 24px; }
.nl-search-panel form{ display:flex; gap:8px; }
.nl-search-panel input[type=search]{
  flex:1; padding:10px 14px;
  border:1px solid var(--nl-ink);
  background:var(--nl-white);
  font-family:var(--nl-font-body);
}
.nl-search-panel button{
  background:var(--nl-red); color:#fff; border:0;
  padding:10px 18px; font-weight:700; text-transform:uppercase; font-size:12px;
}

/* -------------------------------------------------------
   3-2. 모바일 메뉴 토글(햄버거) 버튼
   - 예전에는 "메뉴 ☰" 텍스트 하나뿐이라 존재감이 약하고 탭 영역도
     불분명했다. 아래는 견고한 사각 버튼 + 3줄 아이콘(열림 시 X로
     애니메이션) + "메뉴" 라벨을 함께 노출해 명확성/터치 영역을 키운다.
   ----------------------------------------------------- */
.nl-menu-toggle{
  display:none;
  align-items:center;
  gap:9px;
  background:var(--nl-ink);
  color:var(--nl-white);
  border:1px solid var(--nl-ink);
  border-radius:5px;
  padding:11px 16px 11px 13px;
  min-height:44px;
  font-family:var(--nl-font-mono);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}
.nl-menu-toggle:hover,
.nl-menu-toggle:focus-visible,
.nl-menu-toggle[aria-expanded="true"]{
  background:var(--nl-red);
  border-color:var(--nl-red);
}
.nl-menu-toggle-icon{
  position:relative;
  flex:0 0 auto;
  width:20px; height:14px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.nl-menu-toggle-icon span{
  display:block;
  width:100%; height:2px;
  border-radius:1px;
  background:currentColor;
  transition:transform .25s ease, opacity .2s ease;
}
.nl-menu-toggle[aria-expanded="true"] .nl-menu-toggle-icon span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nl-menu-toggle[aria-expanded="true"] .nl-menu-toggle-icon span:nth-child(2){
  opacity:0;
}
.nl-menu-toggle[aria-expanded="true"] .nl-menu-toggle-icon span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
.nl-menu-toggle-label{ white-space:nowrap; }

/* =========================================================
   4. HERO (front page lead story)
   ========================================================= */
.nl-hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:0;
  border-bottom:1px solid var(--nl-hairline);
  /* [v1.1.15] 아래 섹션(.nl-container)과 같은 폭으로 맞추고 높이를 고정해,
     화면 폭이나 요약 길이에 따라 히어로가 늘어나 밸런스가 깨지던 문제를 막는다. */
  max-width:var(--nl-max);
  margin:0 auto;
  height:540px;
}
.nl-hero-lead{
  position:relative;
  min-height:0;
  color:#fff;
  display:flex;
  align-items:flex-end;
  /* 좌측 하단 플로팅 툴바(글자크기/북마크 등)에 타이틀이 가려지지 않도록
     텍스트 블록을 우측으로 정렬한다. */
  justify-content:flex-end;
  border-right:1px solid var(--nl-hairline);
  overflow:hidden;
}
/* [속도 최적화] 예전에는 이 요소에 background-image 인라인 스타일을 직접 넣었지만,
   지금은 front-page.php에서 실제 <img class="nl-hero-lead-img">를 렌더링하고
   여기서 절대 위치로 꽉 채워 기존과 동일한 시각적 결과를 만든다. */
.nl-hero-lead-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
/* [접근성 수정] PageSpeed 접근성 검사에서 "백그라운드/포그라운드 색상 대비율이
   충분하지 않음"이 확인됐다. 히어로 영역은 텍스트가 방문자가 올리는 임의의
   사진 위에 얹히는 구조라, 사진마다 밝기가 달라 특정 사진에서는 골드/화이트
   글자의 대비가 기준(4.5:1) 밑으로 떨어질 수 있다. 그라데이션 오버레이를 더
   어둡게(그리고 더 일찍 시작하도록) 강화하고, 모든 히어로 텍스트에 그림자를
   추가해서 사진 내용과 무관하게 항상 충분한 대비가 보장되도록 했다. */
.nl-hero-lead::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 15%, rgba(0,0,0,.94) 100%);
  z-index:1;
}
.nl-hero-lead-inner{
  position:relative; padding:36px 40px; z-index:2;
  max-width:600px;
  margin-left:auto;
  text-align:right;
  max-height:100%;
  overflow:hidden;
}
.nl-hero-lead .nl-eyebrow{ color:var(--nl-gold); justify-content:flex-end; text-shadow:0 1px 4px rgba(0,0,0,.85); }
.nl-hero-lead .nl-eyebrow::after{ background:var(--nl-gold); }
.nl-hero-lead h1{ font-size:38px; color:#fff; margin:10px 0 12px; text-shadow:0 1px 4px rgba(0,0,0,.85); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nl-hero-lead p{ color:#E7E4DA; max-width:60ch; margin-left:auto; text-shadow:0 1px 4px rgba(0,0,0,.85); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nl-hero-lead .nl-dateline{ color:#C9C5B8; text-shadow:0 1px 4px rgba(0,0,0,.85); }

.nl-hero-side{ display:flex; flex-direction:column; }
.nl-hero-side-item{
  position:relative;
  min-height:0;
  flex:1 1 0;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background-color:var(--nl-ink);
  border-bottom:1px solid var(--nl-hairline);
  overflow:hidden;
}
.nl-hero-side-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
.nl-hero-side-item::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 18%, rgba(0,0,0,.92) 100%);
  z-index:1;
}
.nl-hero-side-item:last-child{ border-bottom:0; }
.nl-hero-side-inner{ position:relative; z-index:2; padding:20px 24px; }
.nl-hero-side-item .nl-eyebrow{ color:var(--nl-gold); text-shadow:0 1px 4px rgba(0,0,0,.85); }
.nl-hero-side-item .nl-eyebrow::after{ background:var(--nl-gold); }
/* [접근성 수정] 예전에는 h3였는데, 바로 위 히어로 리드가 h1이라 h1 다음에
   h3가 와서 "제목 요소가 내림차순으로 표시되지 않음"으로 지적됐다. h2로
   바꿔서 h1 → h2 → (섹션별) h2 → h3 순서가 되도록 맞췄다. */
.nl-hero-side-item h2{ font-size:19px; font-weight:700; margin:8px 0 8px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.85); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nl-hero-side-item h2 a{ color:#fff; }
.nl-hero-side-item h2 a:hover{ color:var(--nl-red); }
.nl-hero-side-item .nl-dateline{ color:#C9C5B8; }

/* =========================================================
   5. SECTION BLOCKS (auto-generated per category)
   ========================================================= */
.nl-section{
  padding:44px 0;
  border-bottom:1px solid var(--nl-hairline);
}
.nl-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:2px solid var(--nl-ink);
  padding-bottom:10px;
  margin-bottom:26px;
}
.nl-section-head h2{
  font-size:24px;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
  position:relative;
  padding-left:16px;
}
.nl-section-head h2::before{
  content:"";
  position:absolute; left:0; top:2px; bottom:2px;
  width:4px; background:var(--nl-red);
}
.nl-section-head a{
  font-family:var(--nl-font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--nl-ink-soft);
}
.nl-section-head a:hover{ color:var(--nl-red); }

.nl-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.nl-card{ display:flex; flex-direction:column; }
.nl-card-thumb{ overflow:hidden; margin-bottom:14px; background:var(--nl-paper-dim); aspect-ratio:4/3;}
.nl-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.nl-card:hover .nl-card-thumb img{ transform:scale(1.05); }
.nl-card h3{ font-size:18px; margin:0 0 8px; }
.nl-card h3 a:hover{ color:var(--nl-red); }
.nl-card .nl-dateline{ margin-top:auto; padding-top:8px; }
.nl-card p.nl-excerpt{ color:var(--nl-ink-soft); font-size:14.5px; margin:0 0 10px;}

/* =========================================================
   6. ARCHIVE / CATEGORY LAYOUT
   ========================================================= */
.nl-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  padding-top:40px;
  padding-bottom:60px;
  align-items:start;
}
.nl-archive-head{
  border-bottom:3px solid var(--nl-ink);
  padding-bottom:16px;
  margin-bottom:32px;
}
.nl-archive-head .nl-eyebrow{ margin-bottom:8px; }
.nl-archive-head h1{ font-size:34px; }
.nl-archive-head .nl-desc{ color:var(--nl-ink-soft); }

.nl-list-item{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid var(--nl-hairline);
}
.nl-list-item .nl-card-thumb{ aspect-ratio:4/3; margin:0; }
.nl-list-item h2{ font-size:22px; margin:6px 0 8px; }
.nl-list-item h2 a:hover{ color:var(--nl-red); }

.nl-pagination{
  display:flex; gap:8px; justify-content:center; margin-top:36px;
  font-family:var(--nl-font-mono); font-size:13px;
}
.nl-pagination a, .nl-pagination span{
  padding:8px 14px; border:1px solid var(--nl-hairline);
}
.nl-pagination .current{ background:var(--nl-ink); color:#fff; border-color:var(--nl-ink); }
.nl-pagination a:hover{ border-color:var(--nl-red); color:var(--nl-red); }

/* =========================================================
   7. SIDEBAR / WIDGETS
   ========================================================= */
.nl-sidebar .widget{ margin-bottom:40px; }
.nl-sidebar .widget-title{
  font-family:var(--nl-font-mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:2px solid var(--nl-ink);
  padding-bottom:10px;
  margin-bottom:16px;
}
.nl-sidebar .widget ul li{
  padding:12px 0;
  border-bottom:1px solid var(--nl-hairline);
  display:flex; gap:12px; align-items:flex-start;
}
.nl-sidebar .widget_luxdigest_popular .nl-pop-num{
  font-family:var(--nl-font-display);
  font-size:22px; color:var(--nl-hairline);
  font-weight:700; min-width:28px;
}
.nl-newsletter-box{
  background:var(--nl-ink); color:#fff;
  padding:28px 24px;
}
.nl-newsletter-box h3{ color:#fff; font-size:19px; }
.nl-newsletter-box p{ color:#C9C5B8; font-size:14px; }
.nl-newsletter-box input[type=email]{
  width:100%; padding:11px 12px; border:0; margin-bottom:10px;
}
.nl-newsletter-box button{
  width:100%; background:var(--nl-red); color:#fff; border:0;
  padding:12px; font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.05em;
}

/* =========================================================
   8. SINGLE ARTICLE
   ========================================================= */
.nl-article{ max-width:var(--nl-article-max, 860px); margin:0 auto; padding:44px var(--nl-gutter) 60px; }
.nl-article-header{ text-align:center; margin-bottom:28px; }
.nl-article-header h1{ font-size:40px; margin:14px 0 18px; }
.nl-article-sub{ font-size:19px; color:var(--nl-ink-soft); font-family:var(--nl-font-display); font-style:italic; margin-bottom:18px; }
.nl-article-meta{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--nl-font-mono); font-size:12.5px; color:var(--nl-ink-soft);
  border-top:1px solid var(--nl-hairline); border-bottom:1px solid var(--nl-hairline);
  padding:14px 0; margin-top:18px;
}
.nl-article-feat{ margin:32px 0; }
.nl-article-feat figcaption{
  font-family:var(--nl-font-mono); font-size:12px; color:var(--nl-ink-soft);
  padding-top:8px; border-top:1px solid var(--nl-hairline); margin-top:8px;
}
.nl-article-body{ font-size:19px; line-height:1.8; }
.nl-article-body p{ margin:0 0 1.4em; }
.nl-article-body h2{ font-size:27px; margin:1.6em 0 .6em; }
.nl-article-body h3{ font-size:22px; margin:1.4em 0 .5em; }
.nl-article-body blockquote{
  font-family:var(--nl-font-display); font-size:24px; font-style:italic;
  border-left:3px solid var(--nl-red); margin:1.8em 0; padding:4px 0 4px 26px;
  color:var(--nl-ink-soft);
}
.nl-article-body img{ margin:0 auto; }
.nl-article-body a{ color:var(--nl-red-dark); text-decoration:underline; }

/* 개별 글/페이지 좌우 흔들림 방지 — 본문 내 가로 넘침 요소 봉쇄 */
.nl-article-body,
.nl-article-body *{
  max-width:100%;
}
.nl-article-body img,
.nl-article-body video,
.nl-article-body iframe,
.nl-article-body embed,
.nl-article-body object{
  max-width:100%;
  height:auto;
}
/* [v1.1.6] iframe/embed/object는 <img>와 달리 CSS 폭을 안 줘도 자기
   HTML width 속성(대개 500px)을 그대로 고집해서, 본문이 훨씬 넓어도(예:
   812px) 폭이 좁은 채로 떠 있었다 — 잘린 건 아니지만 카드마다 폭이
   들쭉날쭉해 보이는 원인. 본문 폭을 항상 꽉 채우도록 고정. */
.nl-article-body iframe,
.nl-article-body embed,
.nl-article-body object{
  width:100%;
}
.nl-article-body table{
  width:100%;
  max-width:100%;
  display:block;
  overflow-x:auto;  /* 테이블은 내부 스크롤로 처리 */
  -webkit-overflow-scrolling:touch;
}

/* [v1.1.3] 본문에 자동 삽입되는 "같은 사이트 글 링크" 미리보기 카드(자체
   호스팅 임베드)는 실제 높이를 스크립트가 알려줘야 정확히 맞춰진다
   (functions.php의 luxdigest_ensure_embed_resize_sender 참고). 그 스크립트가
   뜨기 전 아주 짧은 순간에도 기본값(150px)으로 너무 심하게 잘려 보이지
   않도록 최소 높이를 넉넉히 잡아둔다 — 실제 높이는 스크립트가 뜨는 즉시
   정확한 값으로 다시 맞춰준다. */
/* [v1.1.6] 처음엔 최신 글(블록 에디터 방식, <figure class="wp-block-embed">로
   감싸짐)에서만 확인해서 그 감싸는 태그가 있는 경우로 선택자를 좁혀뒀었다.
   그런데 같은 자체 호스팅 글 링크라도 글마다 감싸는 태그가 있기도 하고
   없기도 한 게 실제로 확인돼서(예: "오사카성 최적동선 알고가자" 글), 감싸는
   태그 유무와 무관하게 iframe 자체의 클래스만 보고 적용하도록 선택자를
   넓힘. */
/* [v1.1.7 — 1.1.6이 만든 새 문제 수정] 1.1.6에서 "폭이 좁게 떠 있던" 문제를
   고치려고 모든 iframe에 width:100%를 걸었는데, 이게 자체 호스팅 "글 링크"
   카드에도 그대로 적용되면서 오히려 역효과가 났다. 이 카드는 워드프레스가
   대표이미지 비율에 따라 "정사각형(작은 썸네일)" 또는 "직사각형(이미지가
   위에 크게, 글자는 아래)" 두 스타일 중 하나로 자동으로 그려주는데, 이
   "직사각형" 스타일 카드가 본문 전체 폭(812px)까지 늘어나 버리면 대표이미지
   가 원본 크기 그대로 거의 화면을 가득 채우면서 카드 높이가 2000px가 넘게
   치솟아, 마치 "미리보기 카드"가 아니라 사진 한 장을 억지로 늘려놓은 것처럼
   보이게 됐다(실제 신고 스크린샷 — 글자·브랜드 표시는 다 밀려나고 사진만
   계속 이어지는 것처럼 보임). "글 링크" 카드는 어차피 짧은 미리보기용이지
   본문 사진처럼 크게 보여줄 이유가 없으므로, 폭을 적당한 선(600px)에서
   다시 제한해 원래 의도한 "작은 미리보기 카드" 느낌으로 되돌린다(유튜브
   영상처럼 실제로 크게 봐야 하는 임베드는 이 제한에서 제외되므로 계속
   본문 폭 그대로 넓게 보임). */
/* [v1.1.9] functions.php의 luxdigest_embed_layout_override가 /embed/
   페이지 자체를 "왼쪽 고정폭 이미지 + 오른쪽 제목/요약/출처" 2단
   그리드로 강제 고정했으므로, 이제 카드 높이가 대표이미지 크기와 무관하게
   항상 예측 가능한 좁은 범위(대략 180~260px)로 안정된다. 그래서 폭은
   본문 전체(최대 700px 정도)까지 자연스럽게 써도 되고, 리사이즈 스크립트가
   뜨기 전 최소 높이도 이제 그만큼만 넉넉히 잡아두면 충분하다. */
/* [v1.1.10 — 모바일 하단 잘림 버그 원인 및 수정]
   바로 위 620번대 줄의 공통 규칙(".nl-article-body iframe{ height:auto }")이
   이 iframe에도 그대로 적용되고 있었는데, 지금까지는 아래에 min-height만
   지정해뒀었다. min-height는 "계산된 높이가 그보다 작을 때만" 끌어올리는
   바닥값이라, height:auto인 상태에서 리사이즈 스크립트(JS)가 아직 실제
   높이를 알려주기 전이라면 iframe은 자기 콘텐츠와 무관한 브라우저 기본값
   (150px)으로 먼저 렌더링된다 — 데스크톱 min-height(190px)보다도 작은
   값이라 별 문제가 안 됐지만, 모바일 min-height(130px)는 150px보다도 더
   작아서 사실상 전혀 작동하지 않고 있었다. 즉 지금까지 모바일에서는
   "스크립트가 실제 높이를 알려주기 전까지" 카드가 항상 150px로 고정
   렌더링되고 있었던 것 — 이미지 아래로 제목과 요약 1~2줄 정도만 겨우
   들어가고, 출처/로고가 있는 하단 footer는 아예 표시될 공간이 없었다.
   실제 브라우저(모바일 폭 375px, 카드 내부 폭 ~327px)에서 스크롤로 카드를
   화면에 들어오게 한 뒤 측정해보니 완성된 카드의 실제 높이는 400~436px
   수준이었다(이미지가 96px로 좁아지며 텍스트 컬럼도 좁아져 요약글이 더
   많은 줄로 줄바꿈되기 때문). 스크립트 자체는 정상 동작하지만, 모바일
   환경에서 그 스크립트가 완전히 실행되기 전(느린 네트워크, 폰트 로딩 등)
   사용자가 그 지점에 먼저 도달하면 "150px로 잘린" 상태를 그대로 보게 되는
   셈이다.
   근본 해결: min-height 대신 height를 직접 지정한다. 이러면 스크립트가
   뜨기 전에도 처음부터 카드 전체(이미지+제목+요약+하단 로고/공유 아이콘)가
   잘리지 않고 보이고, 스크립트가 실제 높이를 알려주면 인라인 style
   (항상 외부 스타일시트보다 우선)이 이 값을 정확한 값으로 덮어쓰므로
   최종 결과는 지금과 동일하게 정확하다 — PC와 모바일이 항상 동일한
   요소(이미지, 제목, 요약 전체, "계속 읽기", 로고, 공유 아이콘)를
   보여주게 된다. */
/* [v1.1.11 — 사용자 지시: "다른 본문 사진처럼" 보이게 전면 재설계]
   지금까지는 카드 높이가 "요약 텍스트가 몇 줄인지"에 따라 매번 달라졌고,
   그 실제 높이를 알아내기 위해 /embed/ 페이지가 로드된 뒤 postMessage로
   알려주는 JS에 의존해야 했다 — 그 스크립트가 늦게 뜨는 상황마다 매번
   다른 형태로 문제(잘림, 과도한 여백)가 반복됐다.
   사용자가 준 샘플 스타일대로, 카드를 대표이미지 기준 고정 비율(16:9)
   사진 박스로 바꾼다(제목/요약/로고는 사진 위 하단 그라데이션에 얹음 —
   실제 구현은 functions.php의 luxdigest_embed_layout_override 참고).
   높이가 더 이상 텍스트 길이가 아니라 "폭 × 16:9"로만 정해지므로, 폭만
   본문 다른 사진들과 동일하게 100%로 맞추면 높이는 항상 자동으로
   정확하게 계산된다 — JS를 기다릴 필요 자체가 없어져 이전 버전들에서
   반복되던 "스크립트가 늦게 뜨는 동안의 잘못된 임시 높이" 문제가
   구조적으로 사라진다. (폭 제한 600~700px도 함께 제거 — 이제 카드
   높이가 이미지 폭에 정비례해서 안전하게 커지므로, v1.1.7 때처럼 폭을
   넓히면 대표이미지가 통제 불능으로 커지던 문제가 재발하지 않는다.) */
.nl-article-body iframe.wp-embedded-content{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:4px;
  display:block;
}
/* 감싸는 블록(<figure class="wp-block-embed">)이 자체적으로도 위아래
   여백을 갖고 있어서, 본문 문단 여백과 합쳐지면 글 사이 간격이 필요
   이상으로 벌어져 보였다(사용자 신고: "항목 사이 간격이 너무 넓다").
   카드 자체 여백은 이 규칙 하나로만 통일한다. */
.nl-article-body .wp-block-embed,
.nl-article-body figure.wp-block-embed{
  margin:1.6em 0;
}
.nl-article-body .wp-block-embed__wrapper{
  margin:0;
}

/* [v1.1.8] Astra 테마를 참고해서 추가. 유튜브/비메오 등 실제 영상
   임베드(functions.php의 luxdigest_responsive_oembed_wrapper가 감싸줌)는
   널리 쓰이는 "padding-top:56.25%" 기법으로 처리한다 — 스크립트 없이
   순수 CSS만으로 항상 16:9 비율을 유지하므로, 어떤 이유로 리사이즈
   스크립트가 늦게 뜨거나 빠지더라도 절대 찌그러지지 않는다. */
.lux-oembed-container{
  position:relative;
  padding-top:56.25%;
  height:0;
  overflow:hidden;
  max-width:100%;
}
.lux-oembed-container iframe,
.lux-oembed-container embed,
.lux-oembed-container object{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.nl-article-body pre,
.nl-article-body code{
  white-space:pre-wrap;
  word-break:break-all;
  overflow-x:auto;
}
.nl-share-rail{
  display:flex; gap:10px; justify-content:center; margin:30px 0;
  font-family:var(--nl-font-mono); font-size:11.5px; text-transform:uppercase;
}
.nl-share-rail a{
  border:1px solid var(--nl-ink); padding:8px 14px; letter-spacing:.05em;
}
.nl-share-rail a:hover{ background:var(--nl-ink); color:#fff; }
.nl-tags{ margin:24px 0; display:flex; flex-wrap:wrap; gap:8px; }
.nl-tags a{
  font-family:var(--nl-font-mono); font-size:12px;
  border:1px solid var(--nl-hairline); padding:6px 12px;
}
.nl-tags a:hover{ border-color:var(--nl-red); color:var(--nl-red); }

.nl-author-box{
  display:flex; gap:18px; align-items:center;
  background:var(--nl-paper-dim); padding:22px; margin:36px 0;
}
.nl-author-box img{ border-radius:50%; width:64px; height:64px; }
.nl-author-box .name{ font-weight:700; font-family:var(--nl-font-display); font-size:17px; }
.nl-author-box .bio{ font-size:13.5px; color:var(--nl-ink-soft); }

.nl-related{ padding:40px 0; border-top:3px solid var(--nl-ink); }

/* =========================================================
   8-1. PAGE ATTRIBUTES용 추가 템플릿
   (전체 너비 / 랜딩 페이지)
   ========================================================= */
.nl-full-width-inner{ padding:44px 0 60px; }
.nl-full-width-body{ max-width:none; }
.nl-full-width-body img{ max-width:100%; height:auto; }

.nl-landing-page{ margin:0; background:var(--nl-paper); }
.nl-landing-content{ max-width:100%; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.nl-footer{ background:var(--nl-ink); color:#C9C5B8; margin-top:20px; }
.nl-footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px; padding-top:56px; padding-bottom:40px;
  border-bottom:1px solid #33322D;
}
.nl-footer-brand .nl-site-title, .nl-footer-brand a{ color:#fff; }
.nl-footer-brand p{ font-size:13.5px; margin-top:12px; max-width:34ch; }
.nl-footer h4{
  color:#fff; font-family:var(--nl-font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; margin:0 0 16px;
  padding-left:14px; position:relative;
}
.nl-footer h4::before{
  content:""; position:absolute; left:0; top:1px; bottom:1px;
  width:3px; background:var(--nl-gold);
}
.nl-footer ul li{
  padding:0; font-size:14px; line-height:1.3;
  border-bottom:1px solid #232320;
}
.nl-footer ul li:last-child{ border-bottom:0; }
.nl-footer ul li a{
  display:block; padding:11px 0;
  transition:padding-left .15s ease, color .15s ease;
}
.nl-footer ul li a:hover{ padding-left:6px; }
.nl-footer a:hover{ color:var(--nl-gold); }
.nl-footer-contact li{ padding:11px 0; border-bottom:1px solid #232320; }
.nl-footer-contact li:last-child{ border-bottom:0; }
.nl-footer-bottom{
  padding-top:22px;
  padding-bottom:22px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  font-family:var(--nl-font-mono); font-size:12px;
}
.nl-footer-social{ display:flex; gap:16px; }

/* SNS pill buttons in footer contact column */
.nl-footer-sns{ display:flex; flex-wrap:wrap; gap:8px; }
.nl-footer-sns a{
  border:1px solid #33322D;
  padding:6px 14px;
  font-family:var(--nl-font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
}
.nl-footer-sns a:hover{ border-color:var(--nl-gold); color:var(--nl-gold); }

/* 신문법 시행령 필수 고지 바 */
.nl-footer-divider{ height:1px; background:#33322D; }
.nl-footer-legal{
  padding-top:24px;
  padding-bottom:6px;
  text-align:center;
}
.nl-legal-masthead{
  font-family:var(--nl-font-mono);
  font-size:12px;
  color:#9C9887;
  letter-spacing:.02em;
  margin:0 0 12px;
}
.nl-legal-warning{
  font-size:12.5px;
  color:#7A7768;
  max-width:760px;
  margin:0 auto;
  line-height:1.6;
}

/* =========================================================
   10. MISC / COMMENTS / 404
   ========================================================= */
.nl-comments{ max-width:var(--nl-article-max, 860px); margin:0 auto; padding:0 var(--nl-gutter) 60px; }
.nl-comments .comment-list{ margin:0; }
.nl-comments .comment{ padding:20px 0; border-bottom:1px solid var(--nl-hairline); }
.nl-404{ text-align:center; padding:100px 24px; }
.nl-404 h1{ font-size:96px; color:var(--nl-hairline); }

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .nl-hero{ grid-template-columns:1fr; height:auto; }
  .nl-hero-lead{ border-right:0; border-bottom:1px solid var(--nl-hairline); min-height:380px; }
  .nl-hero-side-item{ min-height:240px; }
  .nl-grid{ grid-template-columns:repeat(2,1fr); }
  .nl-layout{ grid-template-columns:1fr; }
  .nl-footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nl-site-title{ font-size:32px; }
  .nl-masthead .custom-logo-link img{ max-height:44px; }
  .nl-nav ul{ display:none; }
  .nl-nav.is-open > ul{
    display:flex; flex-direction:column; width:100%;
    position:absolute; left:0; top:100%; background:#fff;
    border-top:1px solid var(--nl-hairline); z-index:50;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    box-shadow:0 16px 28px rgba(0,0,0,.18);
  }
  .nl-nav.is-open > ul > li{ width:100%; border-bottom:1px solid var(--nl-hairline); }
  .nl-nav.is-open > ul > li > a{ padding:15px 20px; font-size:15px; }

  /* [메뉴 버튼 위치 수정] "메뉴" 버튼이 화면 중앙 쪽으로 몰려 보이던 문제.
     원인은 이 줄(nav-wrap 안의 flex row)이 justify-content:space-between이라,
     모바일에서는 내용이 빈 nav(하위 메뉴는 펼쳤을 때만 보이므로 평소엔 폭이
     0)까지 "보이지 않는 첫 번째 칸"으로 계산되면서 나머지 요소들이 오른쪽으로
     밀려 배치됐기 때문이다. 모바일에서는 flex-start로 바꿔서 "메뉴" 버튼이
     항상 왼쪽에 고정되게 하고, 검색 아이콘만 margin-left:auto로 오른쪽 끝에
     붙인다.
     [간격 수정] flex-start로 바꾸고 나니, "메뉴" 버튼 바로 옆에 오는
     GTranslate 국기 위젯(#nl-lang-switch)이 데스크톱에서는
     justify-content:space-between이 알아서 벌려주던 간격을 못 받고 버튼에
     바로 붙어버렸다(간극 없이 딱 붙어보임). 이 줄 전체에 gap을 주면 보이지
     않는(폭 0인) nav와 "메뉴" 버튼 사이에도 gap이 끼어들어서, 버튼 자체가
     왼쪽 여백보다 더 오른쪽으로 밀려버리는 부작용이 있었다. 그래서 gap
     대신 국기 위젯 쪽에만 margin-left를 줘서, 버튼은 그대로 왼쪽 끝에
     고정하고 버튼↔국기위젯 사이만 벌렸다. */
  .nl-nav-row{ justify-content:flex-start; }
  .nl-menu-toggle{ display:flex; margin-left:0; order:1; }
  #nl-lang-switch{ order:2; margin-left:14px; margin-right:0; }
  .nl-search-toggle{ margin-left:auto; order:3; }

  /* ---------- 모바일: 부모/자식 카테고리 아코디언 ---------- */
  .nl-nav .sub-menu,
  .nl-nav .children{
    position:static;
    display:none;
    width:100%;
    background:var(--nl-paper-dim);
    border:0;
    box-shadow:none;
    padding:2px 0;
  }
  .nl-nav li.nl-submenu-open > .sub-menu,
  .nl-nav li.nl-submenu-open > .children{ display:block; }
  .nl-nav .sub-menu a,
  .nl-nav .children a{ padding:13px 20px 13px 32px; font-size:14px; }
  .nl-nav .sub-menu .sub-menu a,
  .nl-nav .children .children a{ padding-left:48px; }
  .nl-submenu-toggle{ width:52px; }
  .nl-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .nl-list-item{ grid-template-columns:1fr; }
  .nl-article-header h1{ font-size:28px; }
  .nl-article-body{ font-size:17px; }

  /* ---------- 모바일 푸터 ---------- */
  .nl-footer{ margin-top:32px; }
  .nl-footer-top{
    grid-template-columns:1fr;
    gap:0;
    padding-top:36px;
    padding-bottom:8px;
  }
  .nl-footer-top > div{
    padding-top:22px;
    padding-bottom:22px;
    border-bottom:1px solid #262620;
  }
  .nl-footer-top > div:first-child{ padding-top:0; }
  .nl-footer-top > div:last-child{ border-bottom:0; }
  .nl-footer-brand p{ max-width:100%; }
  .nl-newsletter-box{ padding:22px 18px; }
  .nl-newsletter-box .nl-subscribe-form,
  .nl-newsletter-box form{ display:flex; flex-direction:column; gap:10px; }
  .nl-footer h4{ font-size:12px; }
  .nl-footer-sns{ gap:10px; }
  .nl-footer-sns a{ padding:8px 14px; }
  .nl-footer-legal{ padding-top:22px; padding-bottom:4px; text-align:left; }
  .nl-legal-masthead{ line-height:2; word-break:keep-all; }
  .nl-legal-warning{ text-align:left; }
  .nl-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    text-align:left;
    padding-top:22px;
    padding-bottom:32px;
  }
  .nl-footer-bottom ul{ flex-wrap:wrap; gap:10px !important; }
}