/*
Theme Name: NEWSLUX - 뉴스보다
Theme URI: https://luxdigest.com
Author: NEWSLUX Editorial
Author URI: https://luxdigest.com
Description: 타임지와 로이터 스타일에서 영감을 받은, 고급스럽고 확장 가능한 온라인 신문/디지털 매거진용 워드프레스 테마. 여행, 군사정보, 정치시사평론, 건강, 생활정보, 골프, 영화드라마 비평, 인물평가 등 다양한 섹션을 지원하며 새로운 카테고리를 추가하면 홈페이지에 자동으로 반영되는 확장형 구조를 갖추고 있습니다.
Version: 1.1.9
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: newslux
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; }
body{
  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;
}
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);
}
.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); }

.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;
}

/* Mobile nav toggle */
.nl-menu-toggle{
  display:none;
  background:none;border:0;
  padding:14px 16px;
  font-family:var(--nl-font-mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}

/* =========================================================
   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;
}
.nl-hero-lead::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.88) 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; }
.nl-hero-lead .nl-eyebrow::after{ background:var(--nl-gold); }
.nl-hero-lead h1{ font-size:38px; color:#fff; margin:10px 0 12px; }
.nl-hero-lead p{ color:#E7E4DA; max-width:60ch; margin-left:auto; }
.nl-hero-lead .nl-dateline{ color:#C9C5B8; }

.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,0) 35%, rgba(0,0,0,.82) 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); }
.nl-hero-side-item .nl-eyebrow::after{ background:var(--nl-gold); }
.nl-hero-side-item h3{ font-size:19px; margin:8px 0 8px; color:#fff; }
.nl-hero-side-item h3 a{ color:#fff; }
.nl-hero-side-item h3 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_newslux_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-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;
  }
  .nl-menu-toggle{ display:block; margin-left:auto; }
  .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; }
}