/* ============================================================
   newmix behind — 브랜드 블로그
   Base: newmix design system (dark · minimal · mono editorial)
   ============================================================ */

:root {
  /* ===== Surfaces ===== */
  --nm-bg:        #0a0a0a;
  --nm-surface:   #151515;
  --nm-card:      #1a1a1a;
  --nm-elevated:  #202020;

  /* ===== Ink ===== */
  --nm-ink:       #f5f5f5;
  --nm-ink-soft:  #d9d9d9;
  --nm-ink-mute:  #a4a4a4;
  --nm-ink-faint: rgba(245,245,245,0.4);

  /* ===== Lines ===== */
  --nm-line:        rgba(245,245,245,0.10);
  --nm-line-strong: rgba(245,245,245,0.20);

  /* ===== Brand accents — 화면당 하나만 ===== */
  --nm-orange: #f79403;
  --nm-green:  #00e242;
  --nm-red:    #fb2c36;

  /* ===== Scrim ===== */
  --nm-scrim:      rgba(0,0,0,0.40);
  --nm-scrim-deep: rgba(0,0,0,0.65);

  /* ===== Typography ===== */
  --nm-font: 'Pretendard Variable', Pretendard, 'SF Pro', -apple-system,
             BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --nm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --nm-tracking-tight:   -0.02em;
  --nm-tracking-tighter: -0.04em;

  --nm-w-light: 300;
  --nm-w-normal: 400;
  --nm-w-medium: 500;
  --nm-w-semibold: 600;
  --nm-w-bold: 700;

  /* ===== Shape ===== */
  --nm-radius-sm:   4px;
  --nm-radius:      8px;
  --nm-radius-lg:   12px;
  --nm-radius-pill: 999px;

  /* ===== Motion ===== */
  --nm-ease:     cubic-bezier(0.33, 1, 0.68, 1);
  --nm-ease-out: cubic-bezier(0.16, 1, 0.30, 1);

  /* ===== Layout ===== */
  --nm-pad-x:     24px;
  --nm-pad-x-lg:  80px;
  --nm-container: 1200px;
  --nm-read:      720px;
}

/* ===== Base reset ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nm-bg);
  color: var(--nm-ink);
  font-family: var(--nm-font);
  font-weight: var(--nm-w-normal);
  line-height: 1.6;
  letter-spacing: var(--nm-tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;      /* 한글이 단어 중간에서 잘리지 않게 */
  overflow-wrap: break-word; /* 단, 긴 URL 등은 예외적으로 끊음 */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--nm-orange); color: #000; }

/* ============================================================
   Typography scale
   ============================================================ */
.nm-display {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: var(--nm-w-bold);
  line-height: 1.05;
  letter-spacing: var(--nm-tracking-tighter);
  margin: 0;
}
.nm-h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: var(--nm-w-semibold);
  line-height: 1.15;
  letter-spacing: var(--nm-tracking-tighter);
  margin: 0;
}
.nm-lead {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--nm-ink-soft);
  line-height: 1.7;
  margin: 0;
}
.nm-label {
  font-size: 0.8rem;
  font-weight: var(--nm-w-medium);
  color: var(--nm-ink-mute);
  letter-spacing: var(--nm-tracking-tight);
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.nm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px;
  border-radius: var(--nm-radius-pill);
  font-family: inherit; font-size: 0.95rem; font-weight: var(--nm-w-medium);
  letter-spacing: var(--nm-tracking-tight);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--nm-ease), background .25s var(--nm-ease),
              opacity .25s var(--nm-ease), border-color .25s var(--nm-ease);
}
.nm-btn-primary { background: var(--nm-ink); color: var(--nm-bg); }
.nm-btn-primary:hover { transform: translateY(-2px); opacity: .9; }

.nm-btn-ghost { background: transparent; color: var(--nm-ink); border-color: var(--nm-line-strong); }
.nm-btn-ghost:hover { background: var(--nm-elevated); border-color: var(--nm-ink); }

.nm-btn-accent { background: var(--nm-orange); color: #000; font-weight: var(--nm-w-semibold); }
.nm-btn-accent:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ============================================================
   Tags
   ============================================================ */
.nm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--nm-radius-pill);
  font-size: .75rem; font-weight: var(--nm-w-medium);
  background: var(--nm-elevated); color: var(--nm-ink-soft);
  border: 1px solid var(--nm-line);
}
.nm-badge-new { background: var(--nm-green); color: #000; border: none; font-weight: var(--nm-w-semibold); }

/* ============================================================
   Navigation
   ============================================================ */
.nm-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px var(--nm-pad-x);
  background: rgba(10,10,10,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nm-line);
}
.nm-nav-logo {
  font-size: 1.05rem;
  font-weight: var(--nm-w-bold);
  letter-spacing: var(--nm-tracking-tighter);
  color: var(--nm-ink);
  display: inline-flex; align-items: baseline; gap: 7px;
}
.nm-nav-logo .sub {
  font-size: .8rem;
  font-weight: var(--nm-w-normal);
  color: var(--nm-ink-mute);
  letter-spacing: var(--nm-tracking-tight);
}
.nm-nav-links { display: flex; align-items: center; gap: 22px; }
.nm-nav-links a {
  color: var(--nm-ink-mute);
  font-size: .9rem;
  letter-spacing: var(--nm-tracking-tight);
  transition: color .2s var(--nm-ease);
}
.nm-nav-links a:hover, .nm-nav-links a.active { color: var(--nm-ink); }

@media (max-width: 640px) {
  .nm-nav-links a.hide-sm { display: none; }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  max-width: var(--nm-container);
  margin: 0 auto;
  padding-left: var(--nm-pad-x);
  padding-right: var(--nm-pad-x);
}
.wrap-read {
  max-width: var(--nm-read);
  margin: 0 auto;
  padding-left: var(--nm-pad-x);
  padding-right: var(--nm-pad-x);
}
@media (min-width: 1024px) {
  .wrap { padding-left: var(--nm-pad-x-lg); padding-right: var(--nm-pad-x-lg); }
}

/* 썸네일 — images/ 에 사진을 넣고 인라인으로 --thumb 를 지정하면 사진이 깔린다.
   지정하지 않으면 모노 그라데이션 플레이스홀더가 대신 보인다. */
.thumb {
  position: relative;
  overflow: hidden;
  background-color: var(--nm-surface);
  background-image: var(--thumb, linear-gradient(145deg, #2a2a2a 0%, #141414 60%, #1e1e1e 100%));
  background-size: cover;
  background-position: center;
}

/* ============================================================
   Page header (블로그 인덱스 상단)
   ============================================================ */
.page-head {
  padding: clamp(64px, 12vw, 140px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--nm-line);
}
.page-head .nm-label { margin-bottom: 18px; }
.page-head .nm-display { max-width: 14ch; }
.page-head .nm-lead { margin-top: 24px; max-width: 46ch; }

/* ============================================================
   Featured post
   ============================================================ */
.featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: clamp(48px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--nm-line);
}
.featured-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--nm-radius-lg);
  border: 1px solid var(--nm-line);
}
.featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.featured-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: var(--nm-w-semibold);
  line-height: 1.15;
  letter-spacing: var(--nm-tracking-tighter);
  margin: 0;
}
.featured a.featured-title:hover { opacity: .8; }
.featured-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (min-width: 900px) {
  .featured { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
  .featured-media { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Filter bar
   ============================================================ */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: clamp(32px, 5vw, 56px) 0 28px;
}
.filter-btn {
  padding: 8px 16px;
  border-radius: var(--nm-radius-pill);
  background: transparent;
  border: 1px solid var(--nm-line);
  color: var(--nm-ink-mute);
  font-family: inherit; font-size: .85rem; font-weight: var(--nm-w-medium);
  letter-spacing: var(--nm-tracking-tight);
  cursor: pointer;
  transition: background .2s var(--nm-ease), color .2s var(--nm-ease), border-color .2s var(--nm-ease);
}
.filter-btn:hover { color: var(--nm-ink); border-color: var(--nm-line-strong); }
.filter-btn.active { background: var(--nm-ink); color: var(--nm-bg); border-color: var(--nm-ink); }

/* ============================================================
   Post grid
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 28px;
  padding-bottom: clamp(64px, 9vw, 120px);
}
@media (min-width: 620px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .3s var(--nm-ease), opacity .3s var(--nm-ease);
}
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-4px); }
.post-card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--nm-radius-lg);
  border: 1px solid var(--nm-line);
  transition: border-color .3s var(--nm-ease);
}
.post-card:hover .post-card-media { border-color: var(--nm-line-strong); }
.post-card-title {
  font-size: 1.2rem;
  font-weight: var(--nm-w-semibold);
  line-height: 1.35;
  letter-spacing: var(--nm-tracking-tight);
  margin: 0;
}
.post-card-excerpt {
  font-size: .92rem;
  color: var(--nm-ink-mute);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--nm-ink-faint);
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }

.empty-state {
  grid-column: 1 / -1;
  padding: 64px 0;
  text-align: center;
  color: var(--nm-ink-mute);
  font-size: .95rem;
}

/* ============================================================
   Newsletter CTA — 이 페이지의 유일한 accent
   ============================================================ */
.cta {
  background: var(--nm-surface);
  border-top: 1px solid var(--nm-line);
  border-bottom: 1px solid var(--nm-line);
  padding: clamp(56px, 8vw, 96px) 0;
}
.cta-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  max-width: 54ch;
}
.cta h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--nm-w-semibold);
  line-height: 1.2;
  letter-spacing: var(--nm-tracking-tighter);
  margin: 0;
}
.cta p { margin: 0; color: var(--nm-ink-mute); font-size: .98rem; line-height: 1.7; }

/* ============================================================
   Footer
   ============================================================ */
.nm-footer {
  padding: clamp(48px, 6vw, 72px) 0;
  color: var(--nm-ink-mute);
  font-size: .85rem;
}
.nm-footer-inner {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.nm-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.nm-footer-links a { transition: color .2s var(--nm-ease); }
.nm-footer-links a:hover { color: var(--nm-ink); }

/* ============================================================
   Article (상세 페이지)
   ============================================================ */
.article-head {
  padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 40px);
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nm-ink-mute); font-size: .85rem;
  margin-bottom: clamp(32px, 5vw, 56px);
  transition: color .2s var(--nm-ease), gap .2s var(--nm-ease);
}
.back-link:hover { color: var(--nm-ink); gap: 12px; }

.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--nm-ink-faint); font-size: .82rem;
  margin-bottom: 22px;
}
.article-title {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: var(--nm-w-bold);
  line-height: 1.1;
  letter-spacing: var(--nm-tracking-tighter);
  margin: 0;
}
.article-lead {
  margin-top: 24px;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--nm-ink-soft);
  line-height: 1.65;
}

.article-cover {
  aspect-ratio: 16 / 9;
  border-radius: var(--nm-radius-lg);
  border: 1px solid var(--nm-line);
  margin: clamp(32px, 5vw, 56px) 0;
}
@media (min-width: 1024px) {
  /* 커버는 읽기 폭보다 넓게 — 에디토리얼 리듬 */
  .article-cover-wide { max-width: 960px; }
}
/* 세로 사진용 커버 — 인스타용 3:4 원본을 자르지 않고 그대로 보여준다.
   목록 썸네일은 그대로 가로 크롭이므로 여기만 붙이면 된다.
   <div class="article-cover article-cover-portrait thumb" style="--thumb:url('...')"> */
.article-cover-portrait {
  aspect-ratio: 3 / 4;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* 본문 타이포 */
.article-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--nm-ink-soft);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.article-body > * + * { margin-top: 1.5em; }
.article-body h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--nm-w-semibold);
  line-height: 1.25;
  letter-spacing: var(--nm-tracking-tighter);
  color: var(--nm-ink);
  margin-top: 2.4em;
}
.article-body h3 {
  font-size: 1.1rem;
  font-weight: var(--nm-w-semibold);
  color: var(--nm-ink);
  margin-top: 2em;
}
.article-body p { margin: 0; }
/* 위 p 규칙이 `> * + *` 보다 우선순위가 높아 단락 사이 여백을 지워버린다.
   더 구체적인 선택자로 되살린다. */
.article-body > p + p { margin-top: 1.5em; }
.article-body > h2 + p,
.article-body > h3 + p { margin-top: 1em; }
.article-body strong { color: var(--nm-ink); font-weight: var(--nm-w-semibold); }
.article-body a {
  color: var(--nm-ink);
  border-bottom: 1px solid var(--nm-line-strong);
  transition: border-color .2s var(--nm-ease);
}
.article-body a:hover { border-color: var(--nm-ink); }
.article-body ul, .article-body ol { margin: 1.5em 0 0; padding-left: 1.2em; }
.article-body li + li { margin-top: .5em; }
.article-body li::marker { color: var(--nm-ink-faint); }

.article-body blockquote {
  margin: 2.4em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--nm-orange);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: var(--nm-w-medium);
  line-height: 1.45;
  letter-spacing: var(--nm-tracking-tighter);
  color: var(--nm-ink);
}
.article-body blockquote p { margin: 0; }

.article-body figure { margin: 2.4em 0; }
.article-body figure .thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--nm-radius);
  border: 1px solid var(--nm-line);
}
.article-body figcaption {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--nm-ink-faint);
  line-height: 1.5;
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--nm-line);
  margin: 3em 0;
}

/* 태그 · 다음 글 */
.article-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: clamp(32px, 4vw, 40px) 0;
  border-top: 1px solid var(--nm-line);
}

.next-posts {
  border-top: 1px solid var(--nm-line);
  padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 9vw, 100px);
}
.next-posts h2 {
  font-size: 1rem;
  font-weight: var(--nm-w-medium);
  color: var(--nm-ink-mute);
  letter-spacing: var(--nm-tracking-tight);
  margin: 0 0 28px;
}
.next-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px 28px;
}
@media (min-width: 700px) { .next-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 진입 애니메이션 ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: reveal .7s var(--nm-ease-out) forwards;
  }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}