/* ============================================================
   /insights/prose.css — 칼럼(인사이트) 공용 스타일
   해시 없는 고정 경로. 빌드 산출물이 아니라 public/ 에 그대로 놓는다.

   왜 필요한가
   - src/styles.css 는 랜딩 섹션 전용이라 본문 타이포그래피가 없다.
     `*{margin:0;padding:0}` 때문에 <p> 간격이 0이고 <ul>/<ol> 불릿이 잘리며,
     `a{text-decoration:none}` 때문에 본문 링크가 링크로 보이지 않는다.
   - 칼럼 페이지에는 JS 번들을 싣지 않는다. 따라서
     .rv(=opacity:0 → App.tsx IntersectionObserver가 .in 을 붙여야 보임)를
     여기서도, 원고에서도 절대 쓰지 않는다. 쓰면 사람만 영구히 빈 화면을 본다.
   - 헤더의 solid 전환도 JS(Header.tsx의 scroll 핸들러)라서 동작하지 않는다.
     그래서 칼럼 페이지(body.c-page)에서는 헤더를 항상 불투명한 sticky 바로 고정한다.

   색·폰트·간격은 전부 src/styles.css 1~11행의 :root 토큰에서 파생한다.
   개별 원고 전용 CSS(content/insights/<slug>.css)가 이 파일 뒤에 실린다 —
   같은 특이도면 원고 쪽이 이긴다.
   ============================================================ */

/* ---------- 칼럼 페이지 껍데기 ---------- */
/* 푸터를 화면 하단에 붙인다.
   칼럼이 1편일 때처럼 내용이 짧으면 문서 높이가 뷰포트보다 작아져
   푸터가 화면 중간에 떠 버린다. body 를 세로 flex 로 만들고 main 이
   남는 높이를 먹게 해서, 짧은 페이지에서도 푸터가 바닥에 붙는다.
   랜딩(body 에 클래스 없음)에는 적용되지 않는다. */
.c-page{
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh; /* 모바일 주소창이 접힐 때 생기는 빈틈 방지 */
  display: flex;
  flex-direction: column;
}
.c-page > footer{ flex: 0 0 auto; }

/* JS 없이도 읽히는 헤더: 항상 불투명 + 문서 흐름 안의 sticky.
   랜딩은 스크롤 위치에 따라 투명↔반투명으로 바뀌지만(Header.tsx), 칼럼 페이지는
   그 JS가 없으므로 흰 본문 위에서 글자가 겹쳐 보이지 않게 처음부터 navy 면으로 고정한다. */
.c-page header{ position: sticky; }
.c-page header::before{
  opacity: 1;
  background: var(--navy-2);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-navy);
}
.c-page header .nav .wm .we{ color: #fff; }
.c-page .nav-link{ color: #fff; }
.c-page .nav-link:hover{ color: var(--teal-hi); }

/* 남는 세로 공간을 main 이 먹는다. 위 .c-page 의 flex 와 한 쌍이다.
   flex-basis 를 auto 로 둬야 내용이 길 때 정상적으로 늘어난다. */
.c-main{ display: block; flex: 1 0 auto; }

/* ---------- 빵부스러기 ---------- */
.c-crumb{
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(22px,4vw,36px) max(16px, var(--pad)) 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-50);
}
.c-crumb ol{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-crumb li{ display: flex; align-items: center; gap: 6px; }
.c-crumb li + li::before{ content: "›"; color: var(--ink-25); font-weight: 700; }
.c-crumb a{ color: var(--ink-70); text-decoration: none; }
.c-crumb a:hover{ color: var(--teal); text-decoration: underline; text-underline-offset: .18em; }
.c-crumb [aria-current]{ color: var(--ink-50); font-weight: 600; }
/* 빵부스러기가 앞에 오면 본문 상단 여백을 줄인다 */
.c-crumb + .c-a{ padding-top: clamp(14px,2.4vw,22px); }

/* ============================================================
   본문 기본형 — 원고 전용 CSS가 없는 글도 읽히게 하는 최소 타이포그래피.
   클래스가 붙은 요소는 원고 CSS가 책임지므로 :not([class]) 로 비켜간다.
   ============================================================ */
.c-a{
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(26px,6vw,54px) max(16px, var(--pad)) clamp(56px,9vw,104px);
  font-family: var(--sans);
  font-size: clamp(16px, 0.62vw + 14px, 17.5px);
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.c-a h1{
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.26;
  font-size: clamp(25px, 3.6vw, 40px);
  color: var(--navy);
  text-wrap: balance;
  margin: 0 0 .2em;
}
.c-a h2{
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.34;
  font-size: clamp(20px, 2.2vw, 27px);
  color: var(--navy);
  text-wrap: balance;
  margin: clamp(46px,6vw,74px) 0 0;
}
.c-a h3{
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.45;
  font-size: clamp(17px, 1.5vw, 19.5px);
  color: var(--ink);
  margin: clamp(28px,3.6vw,40px) 0 0;
}
.c-a h4,.c-a h5,.c-a h6{
  font-weight: 800;
  line-height: 1.5;
  font-size: 1em;
  color: var(--ink);
  margin: clamp(22px,3vw,30px) 0 0;
}
.c-a p{ margin: 1.05em 0 0; }
.c-a h2 + p, .c-a h3 + p, .c-a h4 + p{ margin-top: .85em; }
.c-a b, .c-a strong{ font-weight: 700; color: var(--navy); }
.c-a em{ font-style: italic; }
.c-a a{
  color: #2c84a0;                      /* --teal 을 본문 대비용으로 낮춘 값 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.c-a a:hover{ color: var(--teal); }
.c-a a:focus-visible{
  outline: 3px solid rgba(95,196,220,.55);
  outline-offset: 2px;
  border-radius: 3px;
}
/* 불릿·번호: *{padding:0} 로 잘린 들여쓰기를 되살린다 */
.c-a ul:not([class]),
.c-a ol:not([class]){ margin: 1.2em 0 0; padding-left: 1.35em; }
.c-a ul:not([class]){ list-style: disc; }
.c-a ol:not([class]){ list-style: decimal; }
.c-a ul:not([class]) li,
.c-a ol:not([class]) li{ margin-top: .5em; }
.c-a li > ul, .c-a li > ol{ margin-top: .4em; }
.c-a blockquote:not([class]){
  margin: 1.6em 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--teal);
  color: var(--ink-70);
}
.c-a blockquote:not([class]) cite{
  display: block; margin-top: 10px;
  font-style: normal; font-size: .8em; font-weight: 600; color: var(--ink-50);
}
.c-a figure:not([class]){ margin: 1.6em 0 0; }
.c-a figcaption{ margin-top: 10px; font-size: .82em; line-height: 1.65; color: var(--ink-50); }
.c-a img{ display: block; max-width: 100%; height: auto; border-radius: 14px; }
.c-a svg{ max-width: 100%; }
.c-a table:not([class]){
  width: 100%;
  margin: 1.5em 0 0;
  border-collapse: collapse;
  font-size: .9em;
}
.c-a table:not([class]) th,
.c-a table:not([class]) td{
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.c-a table:not([class]) th{ background: var(--sky); font-weight: 700; color: var(--navy); }
.c-a hr{ margin: clamp(34px,5vw,52px) 0 0; border: 0; border-top: 1px solid var(--line); }
.c-a code, .c-a kbd, .c-a samp{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}
.c-a pre{
  margin: 1.4em 0 0;
  padding: 16px 18px;
  background: var(--navy-3);
  color: var(--on-navy);
  border-radius: 14px;
  overflow-x: auto;
  line-height: 1.65;
}
.c-a pre code{ background: none; border: 0; padding: 0; color: inherit; }
.c-a small{ font-size: .85em; color: var(--ink-50); }
.c-a time{ font-variant-numeric: tabular-nums; }

/* 글 하단 메타 */
.c-foot{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 max(16px, var(--pad)) clamp(48px,7vw,80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-50);
  border-top: 0;
}
.c-foot .c-back{
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
}
.c-foot .c-back:hover{ text-decoration: underline; text-underline-offset: .2em; }

/* ============================================================
   허브(목록)
   ============================================================ */
.c-hub{
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px,6vw,64px) max(16px, var(--pad)) clamp(56px,9vw,104px);
}
.c-hub-eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  color: var(--teal);
}
.c-hub-eyebrow::before{ content: ""; width: 20px; height: 2px; background: var(--teal); border-radius: 2px; }
.c-hub h1{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.2;
  font-size: clamp(28px,4.2vw,44px);
  color: var(--navy);
}
.c-hub-lede{
  margin-top: 14px;
  max-width: 34em;
  font-size: clamp(15px,1.5vw,17px);
  line-height: 1.8;
  color: var(--ink-70);
  word-break: keep-all;
}
.c-cards{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px,2vw,24px);
  margin-top: clamp(28px,4vw,46px);
}
.c-card{ display: flex; }
.c-card-link{
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 20px rgba(28,43,82,.06);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.c-card-link:hover{
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 18px 40px rgba(28,43,82,.12);
}
.c-card-link:focus-visible{
  outline: 3px solid rgba(95,196,220,.55);
  outline-offset: 3px;
}
.c-card-thumb{ display: block; background: var(--sky); }
.c-card-thumb img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.c-card-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: clamp(18px,2.2vw,24px);
}
.c-card-tag{
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--teal);
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}
.c-card-title{
  font-size: clamp(17px,1.7vw,19.5px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.45;
  color: var(--navy);
  word-break: keep-all;
}
.c-card-desc{
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card-date{
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.c-hub-empty{
  margin-top: 28px;
  padding: 28px;
  border: 1px dashed var(--ink-25);
  border-radius: 16px;
  color: var(--ink-50);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce){
  .c-card-link{ transition: none; }
  .c-card-link:hover{ transform: none; }
}