/*
 * insights.html 전용 규칙입니다. 원본 <style> 에서 그대로 옮겼습니다.
 * 공통 규칙은 site.css 에 있으며, 이 파일이 나중에 로드되어 우선합니다.
 */

:root {
  --c-bg: #FFFFFF; --c-text: #2B2B2B; --c-text-sub: #4A4A4A; --c-text-mute: #6B6B6B;
  --c-dark-bg: #0F0F0E; --c-dark-text: #F1F1F1; --c-dark-sub: #C6C6C6;
  --c-line: #E0E0E0; --c-line-strong: #D6D6D6; --c-line-dark: #2F2F2D;
  --c-fill: #ECECE9; --c-fill-soft: #F6F6F4;
  --c-brand: #0016D5; --c-brand-hover: #0011A8;
  --font-head: 'Paperlogy', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --fs-h1: 56px; --fs-article-title: 44px; --fs-feature-title: 32px; --fs-card-title: 24px;
  --fs-body: 18px; --fs-caption: 14px;
  --pad-x: 120px; --pad-top: 200px; --pad-bottom: 200px;
  --gap-s: 16px; --gap-m: 24px; --gap-l: 40px; --gap-xl: 64px;
  --r-card: 6px; --r-pill: 999px; --header-h: 88px;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
}

h1, h2, p { margin: 0; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; }

.container--narrow { max-width: 760px; }

/* header */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; padding: 0 var(--pad-x);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; }

.brand-logo { display: flex; align-items: center; gap: 14px; }

.site-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; white-space: nowrap; }

.site-nav a[aria-current="page"] { font-weight: 500; }

.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.nav-overlay {
  position: fixed; inset: 0; height: 100vh; z-index: 49; background: var(--c-dark-bg); color: var(--c-dark-text);
  display: none; flex-direction: column; justify-content: center; gap: 32px; padding: 0 var(--gap-m);
}

.nav-overlay__meta { margin-top: var(--gap-m); font-size: var(--fs-caption); color: #8A8A84; }

/* page head */

.page-head { padding: var(--pad-top) var(--pad-x) 0; }

.page-head__inner { display: flex; flex-direction: column; gap: var(--gap-l); }

.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-text-sub); }

.page-label { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-sub); }

.page-title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h1); line-height: 1.35; letter-spacing: -0.02em; }

.page-title .accent { color: var(--c-brand); }

.page-sub { font-size: var(--fs-body); line-height: 1.7; color: var(--c-text-sub); }

/* list */

.insight-list { padding: 72px var(--pad-x) var(--pad-bottom); }

.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-m); border-bottom: 0.5px solid var(--c-line); padding-bottom: 20px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-chip {
  border: 0.5px solid var(--c-line); border-radius: var(--r-pill); background: transparent; color: var(--c-text);
  padding: 10px 20px; font-size: 15px; cursor: pointer;
  transition: background 180ms linear, color 180ms linear, border-color 180ms linear;
}

.filter-chip.is-active { background: var(--c-text); color: #FFFFFF; border-color: var(--c-text); }

.filter-count { font-size: var(--fs-caption); color: var(--c-text-mute); white-space: nowrap; }

.post-feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap-l);
  align-items: center; margin-top: var(--gap-xl);
  padding-bottom: var(--gap-xl); border-bottom: 0.5px solid var(--c-line); cursor: pointer;
}

.post-feature__thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--c-fill); transition: transform 320ms var(--ease-std); }

.post-feature:hover .post-feature__thumb { transform: translateY(-6px); }

.post-feature__body { display: flex; flex-direction: column; gap: var(--gap-s); min-width: 0; }

.post-feature__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-feature-title); line-height: 1.35; letter-spacing: -0.02em; text-wrap: pretty; }

.post-feature__summary { font-size: 17px; line-height: 1.75; color: var(--c-text-sub); text-wrap: pretty; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-xl) 48px; margin-top: var(--gap-xl); }

.post-card { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }

.post-card__thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--c-fill); transition: transform 320ms var(--ease-std); }

.post-card:hover .post-card__thumb { transform: translateY(-6px); }

.post-card__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-card-title); line-height: 1.35; letter-spacing: -0.02em; text-wrap: pretty; }

.post-card__summary { font-size: 16px; line-height: 1.7; color: var(--c-text-sub); text-wrap: pretty; }

.post-tag { font-size: var(--fs-caption); color: var(--c-text-mute); }

.post-date { margin-top: auto; font-size: var(--fs-caption); color: var(--c-text-mute); }

/* article */

.article { padding: var(--pad-top) var(--pad-x) var(--pad-bottom); }

.article__inner { display: flex; flex-direction: column; gap: 32px; }

.article__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-caption); color: var(--c-text-mute); }

.article__meta .tag-pill { border: 0.5px solid var(--c-line); border-radius: var(--r-pill); padding: 6px 14px; color: var(--c-text-sub); }

.article__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-article-title); line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty; }

.article__lead { font-size: 19px; line-height: 1.8; color: var(--c-text-sub); text-wrap: pretty; }

.article__cover { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--c-fill); }

.article__body { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }

.article__body h2 { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-card-title); line-height: 1.45; letter-spacing: -0.02em; margin-top: var(--gap-m); }

.article__body p { font-size: 17px; line-height: 1.85; text-wrap: pretty; }

.article__body blockquote { margin: 0; border-left: 2px solid var(--c-brand); padding: 4px 0 4px 20px; font-size: var(--fs-body); line-height: 1.75; }

.article__body .note { background: var(--c-fill-soft); border-radius: var(--r-card); padding: var(--gap-m) 28px; font-size: 17px; line-height: 1.9; white-space: pre-line; }

.article__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-s); border-top: 0.5px solid var(--c-line); padding-top: 32px; margin-top: var(--gap-m); }

.article__nav { display: flex; gap: 8px; }

.btn-primary { border: 0; border-radius: var(--r-pill); background: var(--c-brand); color: #FFFFFF; padding: 14px 28px; font-size: 15px; cursor: pointer; transition: background 200ms linear; white-space: nowrap; }

.btn-round { width: 40px; height: 40px; border: 0.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; color: var(--c-text); cursor: pointer; transition: background 180ms linear, color 180ms linear; }

.btn-round:hover { background: var(--c-text); color: #FFFFFF; }

[hidden] { display: none !important; }

/* footer */

.site-footer nav { display: flex; flex-wrap: wrap; gap: 32px; font-size: var(--fs-caption); }

.site-footer__meta { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-caption); line-height: 1.8; color: var(--c-dark-sub); }

@media (max-width: 1024px) {
  :root { --pad-x: 48px; --pad-top: 160px; --pad-bottom: 120px; --fs-h1: 40px; --fs-article-title: 36px; --fs-feature-title: 28px; }
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .post-feature { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  :root { --pad-x: 20px; --pad-top: 120px; --pad-bottom: 80px; --fs-h1: 28px; --fs-article-title: 28px; --fs-feature-title: 24px; --fs-card-title: 20px; --fs-body: 16px; }
  .brand-logo__wordmark { display: none; }
  .post-grid { grid-template-columns: 1fr; }
}