/*
Theme Name: MindVR Blog
Author: mindvridge
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mindprep-newsroom
Description: (주)마인드브이알 블로그 테마. 국내 기술블로그 표준형 레이아웃.
*/

/* ------------------------------------------------------------------
   폰트 — 회사 메인이 자체 호스팅하는 Paperlogy 를 이미지에 굽는다.
   @import 로 부르지 않는다: style.css 를 다 받은 뒤에야 요청이 나가
   렌더가 직렬화된다. 로컬 @font-face 는 추가 CSS 요청이 없어 괜찮다.
   굵기는 400/600/700 세 가지만 — 없는 굵기를 쓰면 브라우저가 합성해 뭉갠다.
------------------------------------------------------------------ */
@font-face{font-family:Paperlogy;src:url('assets/fonts/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Paperlogy;src:url('assets/fonts/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Paperlogy;src:url('assets/fonts/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------
   토큰 — mindvr.co.kr 실측 추출값. 새 색 리터럴을 발명하지 않는다.
------------------------------------------------------------------ */
:root{
  /* 브랜드 네이비 */
  --nr-brand:#213F73;
  --nr-brand-deep:#1F3151;
  --nr-brand-tint:#EBEEF5;
  --nr-brand-line:#E5E7EB;

  /* 뉴트럴 — --nr-muted 만 실측 팔레트 밖 파생색이다.
     회사 메인의 #8C8C8C 는 흰 바탕 3.36:1 로 본문 기준 미달이라
     밝기만 낮춘 같은 계열(#6B6B6B, 5.33:1)로 대체했다. */
  --nr-ink:#2E2E2E;
  --nr-ink-2:#474747;
  --nr-muted:#6B6B6B;
  --nr-line:#F0F0F0;
  --nr-line-strong:#CCCCCC;

  /* 서피스 */
  --nr-paper:#F9F8F6;
  --nr-surface:#FFFFFF;
  --nr-surface-2:#EBEEF5;

  /* 형태 */
  --nr-r-lg:16px;
  --nr-r:12px;
  --nr-r-sm:8px;
  --nr-r-pill:999px;
  /* 회사 실측 그림자 — 회색이 아니라 브랜드 네이비가 섞여 있다. */
  --nr-shadow-sm:0 8px 24px -8px rgba(33,63,115,.10);
  --nr-shadow-lg:0 20px 40px -12px rgba(33,63,115,.12);

  /* 읽기 단 폭은 감이 아니라 측정값이다. 실제 블로그 6곳에서 줄당
     글자 수가 44~50자로 수렴했고, 한글 17px 기준 그 구간은 600~680px.
     720px 은 54.8자로 넘는다. */
  --nr-read:680px;
  --nr-side:300px;
  --nr-container:1180px;
  --nr-gutter:28px;

  --nr-font:'Paperlogy','Pretendard Variable','Pretendard',
            'Apple SD Gothic Neo','Malgun Gothic',
            -apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* 어두운 면 위의 색 계단 — 회사 사이트는 전부 밝은 면이라
     이 계단은 확정안에서 새로 만든 값이다. 임의의 회색을 쓰지 마라. */
  --nr-on-brand:#B9C4DA;        /* 헤더 메뉴. 네이비 위 7.41:1 */
  --nr-on-brand-hover:#FFFFFF;  /* 헤더 메뉴 hover. 10.38:1 */
  --nr-on-brand-soft:#D6DEEC;   /* CTA 설명. 9.20:1 */
  --nr-on-ink:#CFCFCF;          /* 푸터 본문. 잉크 위 8.46:1 */
  --nr-on-ink-strong:#FFFFFF;   /* 푸터 제목. 13.58:1 */
  --nr-on-ink-muted:#9A9A9A;    /* 푸터 하단. 4.70:1 */
  --nr-on-ink-line:#444444;     /* 푸터 구분선(글자 아님) */
}
@media (max-width:1024px){:root{--nr-gutter:20px;--nr-r-lg:14px}}
@media (max-width:640px){:root{--nr-gutter:16px;--nr-r-lg:12px;--nr-r:10px}}

/* ------------------------------------------------------------------
   리셋
------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--nr-font);
  font-size:17px;
  line-height:1.85;
  color:var(--nr-ink);
  background:var(--nr-paper);
  word-break:keep-all;        /* 없으면 단어 중간에서 줄바꿈된다 */
  overflow-wrap:break-word;   /* 긴 URL 대비 */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--nr-brand);text-decoration:none}
a:hover{color:var(--nr-brand-deep)}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.4;color:var(--nr-ink)}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.4em}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--nr-brand);outline-offset:2px}
.nr-header :focus-visible{outline-color:var(--nr-on-brand-hover)}

/* 스크린리더 전용 */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* 본문 바로가기 — 평소 화면 밖, 포커스 시 노출 */
.nr-skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--nr-surface);color:var(--nr-brand);
  padding:10px 18px;border-radius:0 0 var(--nr-r-sm) 0;
  font-size:14px;font-weight:600;
}
.nr-skip-link:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------
   공통
------------------------------------------------------------------ */
.nr-container{
  max-width:calc(var(--nr-container) + var(--nr-gutter)*2);
  margin:0 auto;
  padding-left:var(--nr-gutter);
  padding-right:var(--nr-gutter);
}
.nr-main{padding-top:32px} /* 네이비 헤더라 본문 첫 요소가 헤더에 붙어 보이지 않게 */

.nr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border:0;border-radius:var(--nr-r-pill);
  padding:10px 22px;font-size:14px;font-weight:600;
  color:var(--nr-brand);background:var(--nr-surface);
  transition:background-color .15s ease,color .15s ease;
}
.nr-btn--primary{background:var(--nr-brand);color:#FFFFFF}
.nr-btn--primary:hover{background:var(--nr-brand-deep);color:#FFFFFF}
/* 네이비 바 위의 버튼 — hover 는 새 색 대신 틴트를 쓴다 */
.nr-btn--invert{background:#FFFFFF;color:var(--nr-brand)}
.nr-btn--invert:hover{background:var(--nr-brand-tint);color:var(--nr-brand-deep)}

.nr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------------
   헤더 — 네이비 면. 안쪽 글자는 밝은 계단 색만 쓴다.
------------------------------------------------------------------ */
.nr-header{
  position:sticky;top:0;z-index:100;
  background:var(--nr-brand);
  height:88px;
  box-shadow:var(--nr-shadow-sm);
}
/* 높이 사슬을 잇는다. 백분율 높이는 부모가 명시적 높이를 가져야 해석된다.
   .nr-container 가 height:auto 라 __inner 의 height:100% 가 무효였고,
   그 결과 로고와 버튼이 88px 바의 위쪽 52px 안에서만 중앙 정렬돼
   바 전체로 보면 36px 위로 치우쳐 있었다(모바일 28px). */
.nr-header > .nr-container{height:100%}
.nr-header__inner{
  display:flex;align-items:center;gap:28px;
  height:100%;
}
.nr-brand{display:inline-flex;align-items:center;flex-shrink:0}
/* 로고는 헤어라인 선화라 44px 미만에서 MINDVRIDGE 가 뭉간다.
   52px 이상에서 확실히 읽히므로 이보다 작게 만들지 않는다. */
.nr-brand{flex:none}
.nr-brand img{height:52px;width:116px;object-fit:contain}

.nr-nav{margin-left:auto}
.nr-nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nr-nav a{
  display:block;padding:8px 14px;border-radius:var(--nr-r-sm);
  font-size:14.5px;font-weight:600;color:var(--nr-on-brand);
  transition:color .15s ease;
}
.nr-nav a:hover,.nr-nav .current-menu-item > a{color:var(--nr-on-brand-hover)}

.nr-header__right{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* flex:none 이 없으면 좁은 화면에서 44px 이 22px 로 찌그러져
   터치 표적 최소 크기를 깬다. */
.nr-burger{
  display:none;flex:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;
  background:transparent;border:0;border-radius:var(--nr-r-sm);
}
/* 막대에만 걸리는 선택자를 쓴다. `.nr-burger span` 은 안쪽 .screen-reader-text
   까지 잡아 폭을 먹이고, 그것이 좁은 화면에서 가로 넘침으로 나타난다. */
.nr-burger__bar{display:block;width:22px;height:2px;margin:0 auto;background:var(--nr-on-brand-hover);border-radius:2px}
@media (max-width:860px){
  .nr-nav{display:none}
  .nr-burger{display:flex}
}
/* 320px 에서는 로고+CTA+햄버거의 합이 화면을 넘는다. CTA 는 사이드바와
   글 하단에도 있으므로 여기서 감춰도 전환 경로가 사라지지 않는다. */
@media (max-width:560px){
  .nr-header .nr-btn--invert{display:none}
  .nr-header__inner{gap:12px}
}

/* ------------------------------------------------------------------
   히어로 — front-page 최신 글 1건
------------------------------------------------------------------ */
.nr-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:44px;align-items:center;
  background:var(--nr-surface);
  border:1px solid var(--nr-line);border-radius:var(--nr-r-lg);
  padding:34px;margin-bottom:32px;
  box-shadow:var(--nr-shadow-sm);
}
.nr-hero__body{min-width:0}
.nr-hero__title{font-size:33px;font-weight:700;line-height:1.44;letter-spacing:-.025em;margin-bottom:14px}
.nr-hero__title a{color:var(--nr-ink)}
.nr-hero__title a:hover{color:var(--nr-brand)}
.nr-hero__excerpt{font-size:15.5px;line-height:1.8;color:var(--nr-ink-2);margin-bottom:20px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.nr-hero__media{min-width:0}
.nr-hero__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--nr-r)}
.nr-hero__media--empty{
  aspect-ratio:16/10;border-radius:var(--nr-r);
  background:linear-gradient(135deg,var(--nr-brand-tint),var(--nr-surface-2));
}
@media (max-width:900px){
  .nr-hero{grid-template-columns:1fr;gap:24px;padding:24px}
}
@media (max-width:640px){
  .nr-hero__title{font-size:26px}
}

/* ------------------------------------------------------------------
   필터 — 알약 줄
------------------------------------------------------------------ */
.nr-filter{
  display:flex;gap:8px;align-items:center;
  padding-bottom:18px;margin-bottom:28px;
  border-bottom:1px solid var(--nr-line);
}
.nr-filter__item{
  display:inline-block;padding:8px 16px;border-radius:var(--nr-r-pill);
  background:var(--nr-surface);border:1px solid var(--nr-line);
  font-size:13.5px;font-weight:600;color:var(--nr-ink-2);
  transition:background-color .15s ease,color .15s ease;
}
.nr-filter__item:hover{color:var(--nr-brand);border-color:var(--nr-brand-line)}
.nr-filter__item--on{background:var(--nr-brand);border-color:var(--nr-brand);color:#FFFFFF}
.nr-filter__item--on:hover{color:#FFFFFF}
@media (max-width:640px){.nr-filter{flex-wrap:wrap}}

/* ------------------------------------------------------------------
   2단 셸 — 목록 + 사이드바
------------------------------------------------------------------ */
.nr-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--nr-side);
  gap:52px;align-items:start;
  /* align-items:start 필수 — 그리드 기본값 stretch 면 사이드바가
     줄 높이만큼 늘어나 sticky 가 움직일 여지를 잃는다. */
}
.nr-shell__main{min-width:0}
/* min-width:0 필수 — 그리드 아이템의 기본 min-width:auto 때문에
   긴 제목·코드블록이 칸을 밀어내 사이드바가 화면 밖으로 나간다. */
/* sticky 요소가 뷰포트보다 길면 아래쪽이 영구히 안 보인다 — 고정돼 있어
   스크롤로도 닿지 않는다. 실측: 1366x768 노트북에서 767px 사이드바의 111px 이 잘렸다.
   1440x900 에서는 가용 788px 이라 문제가 안 보여 큰 화면만 보면 놓친다.
   들어갈 때는 그대로 두고, 넘칠 때만 안에서 스크롤한다. */
.nr-side{
  position:sticky;top:112px; /* 헤더 88px + 24px */
  max-height:calc(100vh - 136px);
  overflow-y:auto;overscroll-behavior:contain;
}
@media (max-width:1024px){
  .nr-shell{grid-template-columns:1fr;gap:36px}
  .nr-side{position:static}
}

/* ------------------------------------------------------------------
   목록 항목
------------------------------------------------------------------ */
.nr-list{display:block}
.nr-post:last-child{border-bottom:0}
.nr-post{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--nr-line);
}
.nr-post__body{min-width:0}
.nr-post__meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nr-muted);margin-bottom:10px}
.nr-cat{
  display:inline-block;padding:3px 10px;border-radius:var(--nr-r-sm);
  background:var(--nr-brand-tint);color:var(--nr-brand);
  font-size:12px;font-weight:600;line-height:1.6;
}
.nr-author{font-size:12.5px;color:var(--nr-muted)}
.nr-post__title{font-size:19px;font-weight:600;line-height:1.5;margin-bottom:8px}
/* 제목은 <a> 이므로 색을 명시한다 — 안 주면 기본 링크색이 먹어
   목록의 모든 제목이 파랗게 된다. */
.nr-post__title a{color:var(--nr-ink)}
.nr-post__title a:hover{color:var(--nr-brand)}
.nr-post__excerpt{
  font-size:14.5px;line-height:1.8;color:var(--nr-ink-2);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.nr-post__media{display:block;width:200px;aspect-ratio:16/10;border-radius:var(--nr-r-sm);overflow:hidden}
/* display:block 필수 — 인라인이면 aspect-ratio 가 무시되어 이미지 높이가 제각각이다. */
.nr-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.nr-post__media:hover img{transform:scale(1.03)}
.nr-post__media--empty{background:linear-gradient(135deg,var(--nr-brand-tint),var(--nr-brand-line)),var(--nr-surface-2))}
@media (max-width:640px){
  .nr-post{grid-template-columns:1fr;gap:14px}
  /* 썸네일 없는 글이 섞여도 무너지지 않게 이미지를 위로 올린다 */
  .nr-post__media{order:-1;width:100%}
}

/* ------------------------------------------------------------------
   사이드바
------------------------------------------------------------------ */
.nr-side__card{
  background:var(--nr-surface);
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  padding:20px;margin-bottom:16px;
}
.nr-side__title{font-size:14px;font-weight:700;color:var(--nr-ink);margin-bottom:14px}
.nr-side__text{font-size:13.5px;line-height:1.75;color:var(--nr-ink-2);margin:0}
.nr-side__link{display:block;padding:7px 0;font-size:13.5px;font-weight:600;color:var(--nr-brand)}
.nr-side__link:hover{color:var(--nr-brand-deep)}

.nr-rank__list{list-style:none;margin:0;padding:0}
.nr-rank{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:7px 0}
.nr-rank__no{font-size:13px;font-weight:700;color:var(--nr-brand);line-height:1.6}
.nr-rank__title{
  font-size:13.5px;font-weight:600;line-height:1.55;color:var(--nr-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.nr-rank__title:hover{color:var(--nr-brand)}

.nr-side__cta{
  background:var(--nr-brand);color:#FFFFFF;
  border-radius:var(--nr-r);padding:22px 20px;margin-bottom:16px;
}
.nr-side__cta__title{font-size:15.5px;font-weight:700;color:#FFFFFF;margin-bottom:8px}
.nr-side__cta__text{font-size:13.5px;line-height:1.7;color:var(--nr-on-brand-soft);margin:0 0 16px}
.nr-side__cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:10px 16px;border-radius:var(--nr-r-pill);
  background:#FFFFFF;color:var(--nr-brand);
  font-size:13.5px;font-weight:600;
  transition:background-color .15s ease;
}
.nr-side__cta__btn:hover{background:var(--nr-brand-tint);color:var(--nr-brand-deep)}

/* ------------------------------------------------------------------
   페이지 머리 — 아카이브·검색 제목
------------------------------------------------------------------ */
.nr-pagehead{margin-bottom:28px}
.nr-pagehead__label{font-size:13px;font-weight:600;color:var(--nr-muted);margin-bottom:6px}
.nr-pagehead__title{font-size:28px;font-weight:700;letter-spacing:-.02em}
.nr-pagehead__desc{font-size:14.5px;color:var(--nr-ink-2);margin-top:8px;max-width:60ch}
.nr-pagehead__form{margin-top:16px;max-width:420px}

/* ------------------------------------------------------------------
   검색 폼
------------------------------------------------------------------ */
.nr-search{display:flex;gap:8px}
.nr-search__input{
  flex:1;min-width:0;padding:10px 14px;
  border:1.5px solid var(--nr-line-strong);border-radius:var(--nr-r-pill);
  background:var(--nr-surface);color:var(--nr-ink);
}
.nr-search__input:focus{outline:none;border-color:var(--nr-brand)}
.nr-search__submit{flex-shrink:0}

/* ------------------------------------------------------------------
   페이지네이션
------------------------------------------------------------------ */
.nr-pagination{display:flex;gap:8px;justify-content:center;padding:36px 0 8px}
.nr-pagination .nr-pages{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.nr-pages__num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 10px;
  border-radius:var(--nr-r-sm);
  background:var(--nr-surface);border:1px solid var(--nr-line);
  font-size:14px;font-weight:600;color:var(--nr-ink-2);
}
.nr-pages__num:hover{border-color:var(--nr-brand);color:var(--nr-brand)}
.nr-pages__num--brand,.nr-pagination .current{background:var(--nr-brand);border-color:var(--nr-brand);color:#FFFFFF}
.nr-pages__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------------------
   글 본문 — 사이드바 없는 1단
------------------------------------------------------------------ */
.nr-article{max-width:var(--nr-read);margin:0 auto;padding-top:40px}
.nr-article__head{margin-bottom:8px}
.nr-article__title{font-size:34px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin-bottom:16px}
@media (max-width:640px){.nr-article__title{font-size:26px}}
.nr-article__meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--nr-muted)}
.nr-article__figure{margin:28px 0;border-radius:var(--nr-r);overflow:hidden}
.nr-article__figure img{width:100%;object-fit:cover}

.nr-content{font-size:17px;line-height:1.85;color:var(--nr-ink)}
.nr-content h2{font-size:24px;font-weight:700;margin:2em 0 .8em;line-height:1.45}
.nr-content h3{font-size:19px;font-weight:600;margin:1.8em 0 .7em;line-height:1.5}
.nr-content h4{font-size:17px;font-weight:600;margin:1.6em 0 .6em}
.nr-content p{margin:0 0 1.4em}
.nr-content a{text-decoration:underline;text-underline-offset:3px}
.nr-content ul,.nr-content ol{padding-left:1.4em;margin:0 0 1.4em}
.nr-content li{margin-bottom:.4em}
.nr-content img{border-radius:var(--nr-r)}
.nr-content blockquote{
  margin:1.6em 0;padding:16px 20px;
  background:var(--nr-brand-tint);border-left:3px solid var(--nr-brand);
  border-radius:0 var(--nr-r-sm) var(--nr-r-sm) 0;
  color:var(--nr-ink-2);
}
.nr-content blockquote p:last-child{margin-bottom:0}
.nr-content pre{
  background:var(--nr-ink);color:#FFFFFF;
  padding:18px 20px;border-radius:var(--nr-r-sm);
  font-size:14px;line-height:1.7;overflow-x:auto;
}
.nr-content code{font-size:.92em;background:var(--nr-brand-tint);padding:2px 6px;border-radius:4px}
.nr-content pre code{background:transparent;padding:0}
.nr-content table{margin:1.6em 0;font-size:15px}
.nr-content th,.nr-content td{padding:10px 14px;border:1px solid var(--nr-line);text-align:left}
.nr-content th{background:var(--nr-paper);font-weight:600}
.nr-content hr{border:0;border-top:1px solid var(--nr-line);margin:2.4em 0}

/* ------------------------------------------------------------------
   글 하단 CTA — 이 블로그의 존재 이유다
------------------------------------------------------------------ */
.nr-cta{
  background:var(--nr-brand-tint);
  border:1px solid var(--nr-brand-line);border-radius:var(--nr-r);
  padding:28px;text-align:center;margin:44px 0 32px;
}
.nr-cta__title{font-size:19px;font-weight:700;color:var(--nr-brand-deep);margin-bottom:8px}
.nr-cta__text{font-size:14.5px;line-height:1.75;color:var(--nr-ink-2);margin:0 0 18px}

/* ------------------------------------------------------------------
   이전/다음 글
------------------------------------------------------------------ */
.nr-adjacent{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}
.nr-adjacent__link{
  display:block;padding:16px;
  background:var(--nr-surface);border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);
  transition:border-color .15s ease;
}
.nr-adjacent__link:hover{border-color:var(--nr-brand)}
.nr-adjacent__label{font-size:12px;font-weight:600;color:var(--nr-muted);margin-bottom:6px}
.nr-adjacent__title{
  font-size:15px;font-weight:600;line-height:1.55;color:var(--nr-ink);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
@media (max-width:640px){.nr-adjacent{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   댓글
------------------------------------------------------------------ */
.nr-comments{margin-top:44px}
.nr-comments__title{font-size:20px;font-weight:700;margin-bottom:20px}
.nr-comment-list{list-style:none;margin:0;padding:0}
.nr-comment{
  display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding:18px 0;border-bottom:1px solid var(--nr-line);
}
/* 중첩 목록은 부모 <li> 의 그리드 아이템이 된다 — grid-column 을 주지
   않으면 44px 아바타 칸에 배치되어 답글 본문이 한 글자씩 세로로 쌓인다. */
.nr-comment .children{grid-column:1 / -1;list-style:none;margin:0;padding-left:44px}
.nr-comment__avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--nr-brand-tint);color:var(--nr-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
}
.nr-comment__main{min-width:0}
.nr-comment__author{font-size:15px;font-weight:700;color:var(--nr-ink)}
.nr-comment__body{font-size:15px;line-height:1.75;color:var(--nr-ink-2);margin:6px 0}
.nr-comment__body p:last-child{margin-bottom:0}
.nr-comment__reply{font-size:13px;font-weight:600;color:var(--nr-brand)}
.nr-comment__pending-note{font-size:13px;color:var(--nr-muted);margin:6px 0 0}
.nr-comment--pending{background:var(--nr-brand-tint);border-radius:var(--nr-r-sm);padding:18px}

.nr-comment-form{margin-top:24px}
.nr-comment-form p{margin-bottom:14px}
.nr-comment-form label{display:block;font-size:13.5px;font-weight:600;color:var(--nr-ink);margin-bottom:6px}
.nr-comment-form input[type="text"],
.nr-comment-form input[type="email"],
.nr-comment-form input[type="url"]{
  width:100%;padding:10px 14px;
  border:1.5px solid var(--nr-line-strong);border-radius:var(--nr-r-sm);
  background:var(--nr-surface);color:var(--nr-ink);
}
.nr-comment-form__comment{
  width:100%;min-height:120px;padding:12px 14px;resize:vertical;
  border:1.5px solid var(--nr-line-strong);border-radius:var(--nr-r-sm);
  background:var(--nr-surface);color:var(--nr-ink);
}
.nr-comment-form input:focus,.nr-comment-form__comment:focus{outline:none;border-color:var(--nr-brand)}
.nr-comments__closed{text-align:center;font-size:14px;color:var(--nr-muted);padding:24px 0}

/* ------------------------------------------------------------------
   빈 상태 — 404·결과 없음
------------------------------------------------------------------ */
.nr-empty{text-align:center;padding:72px 0 80px}
.nr-empty__code{font-size:52px;font-weight:700;color:var(--nr-brand);line-height:1.2;margin-bottom:8px}
.nr-empty__title{font-size:24px;font-weight:700;margin-bottom:12px}
.nr-empty__desc{font-size:15px;color:var(--nr-muted);max-width:46ch;margin:0 auto 24px}
.nr-empty__form{max-width:420px;margin:0 auto}
.nr-empty__search{display:flex;gap:8px}

/* ------------------------------------------------------------------
   푸터 — 잉크 면. 로고가 7.00:1 로 가장 잘 보이는 바탕이다.
------------------------------------------------------------------ */
.nr-footer{
  background:var(--nr-ink);color:var(--nr-on-ink);
  margin-top:52px;padding:40px 0 28px;
}
.nr-footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.nr-footer__brand{margin-bottom:14px}
/* 푸터 배경이 --nr-ink 인데 로고 기본 링크색이 --nr-brand(짙은 네이비)면
   대비 1.4:1 로 사라진다 — 로고 자체는 원본 이미지를 그대로 쓴다. */
.nr-footer__logo{height:60px;width:134px;object-fit:contain}
.nr-footer__desc{font-size:13.5px;line-height:1.75;color:var(--nr-on-ink);margin:0}
.nr-footer__addr{font-size:13px;line-height:1.75;color:var(--nr-on-ink);margin:10px 0 0;font-style:normal}
.nr-footer__col{min-width:0}
.nr-footer__heading{font-size:14px;font-weight:700;color:var(--nr-on-ink-strong);margin-bottom:14px}
.nr-footer__menu{list-style:none;margin:0;padding:0}
.nr-footer__menu li{margin-bottom:9px}
.nr-footer__menu a{font-size:13.5px;color:var(--nr-on-ink)}
.nr-footer__menu a:hover{color:var(--nr-on-ink-strong)}
.nr-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:32px;padding-top:20px;
  border-top:1px solid var(--nr-on-ink-line);
  font-size:12px;color:var(--nr-on-ink-muted);
}
.nr-footer__copy{margin:0}
@media (max-width:900px){.nr-footer__inner{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){.nr-footer__bottom{flex-direction:column;align-items:flex-start}}

/* ------------------------------------------------------------------
   좁은 화면 보정 (실측 근거)
------------------------------------------------------------------ */
@media (max-width:640px){
  /* 헤더 88px 은 390px 뷰포트의 22.6% 다. sticky 라 스크롤 내내 그만큼을 먹는다.
     로고는 44px 아래로 내리지 않는다 — 그 밑에서는 MINDVRIDGE 글자가 뭉갠다. */
  /* 높이를 쥔 것은 .nr-header 다. __inner 는 height:100% 로 부모를 따르므로
     안쪽만 줄이면 바는 88px 그대로 남고 아래에 죽은 여백이 생긴다. */
  .nr-header{height:72px}
  .nr-brand img{height:44px;width:98px}

  /* 히어로가 34px 패딩 카드 안에 있어 이미지가 308px 로 눌렸다.
     같은 화면의 목록 썸네일이 358px 라 위계가 뒤집힌다. 카드 패딩을 줄인다. */
  .nr-hero{padding:20px}

  /* 대표이미지가 없는 글은 모바일에서 358x224 짜리 빈 박스를 만들어
     화면의 3분의 1을 아무 정보 없이 차지했다. 좁은 화면에서는 감춘다. */
  .nr-post__media--empty{display:none}

  /* 손가락 표적. 푸터 링크가 16px, 인기 글 제목이 21px 였다. */
  .nr-footer__menu a{display:inline-block;padding:9px 0}
  .nr-rank__title{display:inline-block;padding:9px 0}
  .nr-side__link{padding:10px 0}
}
/* 데스크톱에서도 푸터·인기글 링크는 표적이 작다 — 세로 여백만 준다.
   가로 폭은 이미 충분하므로 레이아웃은 거의 그대로다. */
.nr-footer__menu a{display:inline-block;padding:8px 0}
.nr-rank__title{display:inline-block;padding:8px 0}