/* /insights — 라이트 브랜디드 블로그.
   전체 라이트 + 레터헤드 헤더/푸터 + 네이버식 좌측 카테고리 사이드바.
   색·폰트 토큰은 styles.css :root 와 폰트 CDN 을 승계하고, 라이트 값은 여기서 파생(사양서 §12.1). */

/* ── 라이트 토큰 (블로그 콘텐츠 공통) ── */
.insights-article,
.insights-list {
  --paper:    #faf8f3;
  --paper-2:  #f3eee4;
  --ink:      #1c1a15;
  --ink-2:    #2a2620;
  --ink-dim:  #6b6558;
  --rule:     #e5ded0;
  --gold-ink: #8a6a33;
  --gold-tint2: #f3ead8;
  --wm:       rgba(28, 26, 21, 0.038);
}

/* body 를 라이트로 오버라이드(styles.css 다크 위) — 상단 골드 글로우 + 웜 화이트 */
body.insights-article,
body.insights-list {
  background:
    radial-gradient(70% 42% at 50% -4%, rgba(201, 168, 120, 0.13), transparent 60%),
    #fbfaf7;
  color: var(--ink-2);
  overflow-x: clip; /* hidden 은 sticky(목차·카테고리)를 깨뜨림 → clip 으로 오버라이드 */
}
.insights-article main,
.insights-list main { color: var(--ink-2); }

/* ── 뷰파인더 코너 브래킷 ── */
.ins-bracket { position: absolute; width: 18px; height: 18px; z-index: 2; pointer-events: none; }
.ins-bracket--tl { top: 14px; left: 14px; border-top: 1.5px solid var(--gold-deep); border-left: 1.5px solid var(--gold-deep); }
.ins-bracket--tr { top: 14px; right: 14px; border-top: 1.5px solid var(--gold-deep); border-right: 1.5px solid var(--gold-deep); }
.ins-bracket--bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid var(--gold-deep); border-left: 1.5px solid var(--gold-deep); }
.ins-bracket--br { bottom: 14px; right: 14px; border-bottom: 1.5px solid var(--gold-deep); border-right: 1.5px solid var(--gold-deep); }

/* ── 라이트 레터헤드 헤더 ── */
.ins-head { position: relative; text-align: center; max-width: 1480px; margin-inline: auto; padding: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem) var(--gutter) clamp(1.6rem, 1rem + 2vw, 2.4rem); border-bottom: 0.8px solid var(--rule); overflow: hidden; }
.ins-head__wm, .ins-foot__wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-weight: 400; font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: 0.14em; color: var(--wm); white-space: nowrap; pointer-events: none; z-index: 0; text-transform: uppercase;
}
.ins-head__inner, .ins-foot__inner { position: relative; z-index: 1; }
.ins-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.ins-brand__mark { height: 2.4rem; width: auto; }
.ins-brand__word { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.ins-brand__word .q { color: var(--gold-ink); }
.ins-head__tagline { margin-top: 0.7rem; font-family: var(--mono); font-size: var(--text-sm); letter-spacing: 0.05em; color: var(--ink-dim); }
.ins-head__rule { display: block; width: 64px; height: 2px; margin: 1.3rem auto; background: linear-gradient(90deg, var(--gold-deep), var(--gold-ink)); }
.ins-head__sub { font-size: var(--text-sm); color: var(--ink-dim); }

/* ── 라이트 푸터 ── */
.ins-foot { position: relative; text-align: center; max-width: 1480px; margin-inline: auto; padding: clamp(2.4rem, 1.6rem + 2.5vw, 3.8rem) var(--gutter); border-top: 0.8px solid var(--rule); background: #f6f3ee; overflow: hidden; }
.ins-foot__sub { margin-top: 0.6rem; font-size: var(--text-sm); color: var(--ink-dim); }
.ins-foot__disc { margin-top: 1.5rem; font-size: var(--text-xs); color: #928c7f; }
.ins-foot__copy { margin-top: 0.5rem; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink-dim); }
.ins-foot__social { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.4rem; }
.ins-foot__social a { color: var(--ink-dim); display: inline-flex; transition: color 0.2s, transform 0.2s; }
.ins-foot__social a:hover { color: var(--gold-ink); transform: translateY(-2px); }
.ins-foot__social svg { width: 20px; height: 20px; display: block; }

/* ── 블로그 레이아웃: 좌 카테고리 + 콘텐츠(+ TOC) ── */
.blog-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  max-width: 1480px;
  margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) var(--gutter) var(--section-y);
  align-items: start;
}
.blog-layout--article {
  grid-template-columns: 150px minmax(0, 1fr) 160px;
  max-width: 1480px;
}
.blog-content { min-width: 0; }
.blog-title { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.8rem; }

/* ── 네이버식 카테고리 사이드바 ── */
.cat { position: sticky; top: 92px; align-self: start; }
.cat__title { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 0.8px solid var(--rule); }
.cat__list { list-style: none; padding: 0; margin: 0; }
.cat__item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5em 0.3em 0.5em 0.7em; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.cat__item:hover { color: var(--ink); background: rgba(201, 168, 120, 0.06); }
.cat__item.is-active { color: var(--gold-ink); border-left-color: var(--gold-ink); font-weight: 700; }
.cat__count { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-dim); }
.cat__item.is-active .cat__count { color: var(--gold-ink); }

/* ── 글 카드 ── */
.post-card { display: block; border: 0.8px solid var(--rule); padding: 1.4rem 1.6rem; margin-bottom: 1rem; transition: border-color 0.3s, transform 0.3s var(--ease); }
.post-card:hover { border-color: var(--gold-ink); transform: translateY(-2px); }
.post-card__pillar { font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.post-card__title { display: block; font-size: var(--text-h3); font-weight: 700; margin-top: 0.5rem; color: var(--ink); }
.post-card__desc { display: block; margin-top: 0.5rem; color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.6; }

/* ── 허브 인트로 ── */
.hub__eyebrow { display: block; font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.7rem; }
.hub__intro { max-width: 60ch; margin: -0.8rem 0 2rem; color: var(--ink-dim); font-size: var(--text-lead); line-height: 1.7; }
.hub__empty { color: var(--ink-dim); }

/* ── 개별 글 본문 ── */
.insights-main { min-width: 0; }
.article-head { margin-bottom: 2.4rem; padding-bottom: 1.6rem; border-bottom: 0.8px solid var(--rule); }
.article-head__pillar { display: inline-block; font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); border-left: 2px solid var(--gold-ink); padding: 0.1em 0 0.1em 0.6em; margin-bottom: 1rem; }
.article-head__title { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.article-head__desc { margin-top: 0.9rem; color: var(--ink-dim); font-size: var(--text-lead); line-height: 1.6; }
.article-head__meta { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-dim); }
.article-head__meta .reviewed { color: var(--gold-ink); }

.prose { font-size: 1.05rem; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.4em; }
.prose h2 { font-size: var(--text-h3); font-weight: 800; letter-spacing: -0.01em; margin-top: 2.2em; color: var(--ink); }
.prose h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.8em; color: var(--ink); }
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 2px solid var(--gold-deep); padding: 0.1em 0 0.1em 1.2em; color: var(--ink-dim); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose code { font-family: var(--mono); font-size: 0.9em; color: var(--ink); background: var(--paper-2); border: 0.8px solid var(--rule); padding: 0.12em 0.4em; }
.prose pre { font-family: var(--mono); font-size: 0.86rem; line-height: 1.6; color: var(--ink-2); overflow-x: auto; background: var(--paper-2); border: 0.8px solid var(--rule); padding: 1rem 1.2rem; }
.prose pre code { color: inherit; background: none; border: none; padding: 0; }
.prose img { max-width: 540px; width: 100%; height: auto; display: block; margin: 1.8em auto; border: 0.8px solid var(--rule); background: #fff; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-block: 1.6em; }
.prose th, .prose td { border: 0.8px solid var(--rule); padding: 0.55em 0.8em; text-align: left; color: var(--ink-2); }
.prose th { background: var(--paper-2); color: var(--gold-ink); font-weight: 700; }

/* ── 조항 배지 (ClauseCite) ── */
.clause { display: inline-flex; align-items: baseline; gap: 0.4em; font-family: var(--mono); font-size: 0.82em; line-height: 1.4; border: 0.8px solid; padding: 0.05em 0.5em; white-space: nowrap; vertical-align: baseline; }
.clause__lvl { font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.clause--shall  { border-color: #c0743d; background: #f8ece2; }
.clause--shall  .clause__std { color: var(--ink); }
.clause--shall  .clause__lvl { color: #a8501c; }
.clause--should { border-color: #bd9642; background: #f8f1e0; }
.clause--should .clause__std { color: var(--ink); }
.clause--should .clause__lvl { color: #8a6a33; }
.clause--may    { border-color: var(--rule); background: var(--paper-2); }
.clause--may    .clause__std { color: var(--ink); }
.clause--may    .clause__lvl { color: var(--ink-dim); }

/* ── 근거표 ── */
.source-table { margin-top: 3rem; padding-top: 1.6rem; border-top: 0.8px solid var(--rule); }
.source-table__h { font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.8rem; }
.source-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.source-table th, .source-table td { border: 0.8px solid var(--rule); padding: 0.55em 0.8em; text-align: left; color: var(--ink-2); }
.source-table th { background: var(--paper-2); color: var(--gold-ink); font-weight: 700; }
.lvl-badge { font-family: var(--mono); font-size: 0.82em; font-weight: 700; letter-spacing: 0.04em; padding: 0.1em 0.55em; border: 0.8px solid; text-transform: uppercase; }
.lvl-badge--shall  { color: #a8501c; border-color: #c0743d; background: #f8ece2; }
.lvl-badge--should { color: #8a6a33; border-color: #bd9642; background: #f8f1e0; }
.lvl-badge--may    { color: var(--ink-dim); border-color: var(--rule); background: var(--paper-2); }

/* ── Callout ── */
.callout { border-left: 3px solid; padding: 0.9em 1.1em; margin: 1.7em 0; background: var(--paper-2); }
.callout__label { display: block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.4em; }
.callout p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.callout--note { border-color: #8a6a33; }
.callout--note .callout__label { color: #8a6a33; }
.callout--warning { border-color: #c0743d; background: #f8ece2; }
.callout--warning .callout__label { color: #a8501c; }
.callout--regchange { border-color: #6f8a3a; }
.callout--regchange .callout__label { color: #5c7230; }

/* ── TOC (스크롤 스파이) ── */
.toc { position: sticky; top: 92px; align-self: start; font-size: var(--text-sm); }
.toc__title { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.8rem; }
.toc__list { list-style: none; padding: 0; margin: 0; border-left: 0.8px solid var(--rule); }
.toc__item a { display: block; padding: 0.32em 0 0.32em 0.9em; margin-left: -0.8px; border-left: 2px solid transparent; color: var(--ink-dim); text-decoration: none; line-height: 1.45; transition: color 0.2s, border-color 0.2s; }
.toc__item--h3 a { padding-left: 1.7em; font-size: 0.92em; }
.toc__item a:hover { color: var(--ink); }
.toc__item a.is-active { color: var(--gold-ink); border-color: var(--gold-ink); }

/* ── 관련 글 ── */
.related { margin-top: 3rem; padding-top: 1.6rem; border-top: 0.8px solid var(--rule); }
.related__h { font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 1rem; }

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .blog-layout--article { grid-template-columns: 150px minmax(0, 1fr); }
  .blog-layout--article .toc { display: none; }
}
@media (max-width: 760px) {
  .blog-layout, .blog-layout--article { grid-template-columns: 1fr; }
  .cat { position: static; margin-bottom: 1.6rem; }
  .cat__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .cat__item { border: 0.8px solid var(--rule); padding: 0.4em 0.7em; }
  .cat__item.is-active { border-color: var(--gold-ink); }
}