/*
Theme Name: LuxTimes
Theme URI: https://luxtimes.net
Author: JIHOON KIM
Author URI: https://luxtimes.net
Description: LuxTimes 전용 독립 테마
Version: 1.1.0
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: luxtimes
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);
}
.nl-hero-lead{
  position:relative;
  min-height:520px;
  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;
}
.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); }
.nl-hero-lead p{ color:#E7E4DA; max-width:60ch; margin-left:auto; text-shadow:0 1px 4px rgba(0,0,0,.85); }
.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:250px;
  flex:1;
  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); }
.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_luxtimes_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;
}
.nl-article-body table{
  width:100%;
  max-width:100%;
  display:block;
  overflow-x:auto;  /* 테이블은 내부 스크롤로 처리 */
  -webkit-overflow-scrolling:touch;
}
.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; }
  .nl-hero-lead{ border-right:0; border-bottom:1px solid var(--nl-hairline); min-height:380px; }
  .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; }
}