/* 인사이트(블로그) 전용 스타일.
   색·간격 변수는 site.css 의 :root 를 그대로 쓴다 — 여기서 새 색을 만들지 않는다. */

/* 홈 헤더는 다크 히어로와 70px 겹치도록 음수 마진이 걸려 있다.
   인사이트에는 겹칠 히어로가 없으므로 되돌린다. */
.site-head { margin-bottom: 0; }

.ins-head {
  padding: clamp(72px, 9vw, 120px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.ins-head h1 {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.25;
  color: var(--ink);
  max-width: 22ch;
}
.ins-head .lead {
  margin-top: 14px;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.85;
  max-width: 58ch;
}

/* ── 목록 ────────────────────────────────────────────── */
.ins-list {
  padding: clamp(36px, 5vw, 56px) 0 clamp(72px, 9vw, 110px);
}
.ins-item {
  display: block;
  padding: clamp(24px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.ins-item:hover { opacity: 0.72; }
.ins-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.ins-cat { color: var(--brand-600); }
.ins-item h2 {
  margin-top: 10px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--ink);
  max-width: 30ch;
}
.ins-item p {
  margin-top: 8px;
  color: var(--body);
  font-size: 0.94rem;
  line-height: 1.8;
  max-width: 62ch;
}
.ins-empty {
  padding: 64px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── 글 본문 ─────────────────────────────────────────── */
.post {
  padding: clamp(56px, 7vw, 92px) 0 clamp(72px, 9vw, 110px);
}
.post-head { border-bottom: 1px solid var(--line); padding-bottom: clamp(24px, 3vw, 34px); }
.post-head h1 {
  margin-top: 12px;
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--ink);
  max-width: 24ch;
}
.post-head .desc {
  margin-top: 14px;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 58ch;
}

/* 본문은 한 컬럼으로 좁게 — 한 줄 80자를 넘기지 않아야 읽힌다. */
.post-body {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 66ch;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.95;
}
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  margin-top: 2.2em;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.45;
  color: var(--ink);
}
.post-body h3 {
  margin-top: 1.9em;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body a { color: var(--brand-600); text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.15em; }
.post-body li + li { margin-top: 0.5em; }
.post-body blockquote {
  padding: 18px 22px;
  background: var(--n-50);
  border-radius: 12px;
  color: var(--ink);
}
.post-body blockquote > * + * { margin-top: 0.8em; }
.post-body code {
  font-size: 0.9em;
  background: var(--n-100);
  padding: 2px 6px;
  border-radius: 5px;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.post-body th, .post-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.post-body th { color: var(--ink); font-weight: 700; background: var(--n-50); }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

.post-foot {
  max-width: 66ch;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.post-foot .back { font-size: 0.92rem; font-weight: 600; color: var(--brand-600); }
.post-cta {
  margin-top: 22px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--n-50);
  border-radius: 16px;
}
.post-cta p { color: var(--body); font-size: 0.96rem; line-height: 1.85; }
.post-cta a { display: inline-block; margin-top: 14px; }

@media (max-width: 720px) {
  .post-body { font-size: 1rem; }
}
