/* ============================================================
   insight.css — Research(INSIGHT)
   (2026-07-07 라이트 테마 재스킨 — home.html 라이트 디자인이 사이트
   공식 기준으로 확정됨에 따라, 2026-07-06 다크 리디자인을 라이트로 전환.
   구조·클래스·브레이크포인트는 전부 그대로, 색상 토큰만 교체.

   ⚠️ (2026-07-08) 이 파일이 실제로 /static/insight.css 자리에 올라가
   있는지 다시 한번 확인해주세요 — 캡처 확인 결과 서버에는 여전히
   "2026-07-06 다크 테마" 버전(--ink:#0b0e14)이 남아있었습니다.

   매핑 원칙 (다크 → 라이트):
     --ink #0b0e14        → --bg #f8fafc  (페이지 배경)
     --surface #181c26    → #ffffff       (카드/패널)
     --surface-2 #1e2230  → #f1f5f9       (중첩 표면)
     --line #2a2f3f       → #e2e8f0       (테두리)
     text 계열            → #0f172a / #1e293b / #64748b
     --accent #3b82f6     → #1d4ed8 (navy-mid, 라이트 배경에서 대비 확보)
     --seal / --brass     → (2026-07-10 갱신) 러스트/골드 원색이 아니라
                             --accent/--accent-hi를 가리키도록 재정의됨 —
                             Research만 다른 색 정체성을 갖던 문제를 해소.
                             자세한 사유는 :root 블록의 주석 참고.
   ============================================================ */

:root {
  /* (2026-07-10 중앙화) Research가 그동안 독립된 색 체계처럼 보였던
     근본 원인 — 이 :root가 자기만의 색상값을 따로 갖고 있었다(값은
     우연히 같았지만 출처가 달랐음). 이제 전부 /static/colors.css의
     토큰을 가리킨다 — 거기서 하나 바꾸면 Research도 같이 바뀐다. */
  --ink: var(--c-bg, #f8fafc);           /* 페이지 배경 (변수명은 호환을 위해 유지) */
  --surface: var(--c-white, #ffffff);       /* 카드/패널 배경 */
  --surface-2: var(--c-surface-tint-gray, #f1f5f9);     /* 중첩 표면 */
  --line: var(--c-line, #e2e8f0);          /* 테두리 */
  --text-primary: var(--c-text-hi, #0f172a);  /* 제목 등 고강조 텍스트 */
  --text-body: var(--c-text-dark, #1e293b);     /* 본문 텍스트 */
  --text-muted: var(--c-slate, #64748b);    /* 보조/메타 텍스트 */
  --accent: var(--c-navy-mid, #1d4ed8);        /* 기능성 액션 컬러 (사이트 표준 navy-mid) */
  --accent-hi: var(--c-navy-soft, #3b82f6);     /* 액센트 hover (사이트 표준 navy-soft) */
  --on-accent: var(--c-white, #ffffff);     /* accent 배경 위 텍스트 */
  /* (2026-07-10 색상 통일) --seal/--brass는 원래 러스트(#a8331f)·골드
     (#8a6a2f) 원색이었다 — Research 페이지만 Home/Compare/Learn/About과
     다른 색 정체성을 갖게 된 원인이었다("리서치만 다른 제품 같다"는
     피드백의 실체). 새 원색을 넣는 대신 이미 있는 --accent/--accent-hi를
     그대로 가리키게 해서, 층 라벨·배지·인용구 보더 등 10곳이 전부 한
     번에 사이트 표준 네이비로 맞춰지게 했다. 변수 이름(seal/brass)은
     그대로 둬서 그걸 참조하는 규칙들을 하나하나 고칠 필요가 없게 했다.
     (2026-07-10 추가) --accent 자체가 폴백 없이 실패하면 --seal도 같이
     무효화되는 다단 체인이었다 — --accent에 폴백을 넣은 지금은 이 두
     줄이 var(--accent)/var(--accent-hi) 그대로여도 안전하다(위에서 이미
     보호됨). */
  --seal: var(--accent);
  --brass: var(--accent-hi);
  /* (2026-07-10 폰트 전면 교체) 영문 Geist + 한글 Pretendard Variable로
     사이트 전체(Home/Compare/Learn/Insight/정적 가이드 페이지) 통일.
     Geist를 앞에 두면 브라우저가 라틴/숫자 글리프는 Geist로, Geist에 없는
     한글 글리프는 자동으로 Pretendard Variable로 넘긴다 — 별도 분기 코드
     없이 "영문은 Geist, 한글은 Pretendard"가 그대로 이뤄진다. */
  /* (2026-07-10 폰트 중앙화) 실제 폰트명은 이제 /static/fonts.css
     한 곳에만 있다 — 여기서는 var()로 참조만 한다. base.html이
     shared/fonts_head.html을 include해 그 파일을 미리 로드해준다.
     모노 토큰 이름이 --font-mono-src인 이유는 fonts.css 주석 참고
     (이 파일 자신의 --font-mono와 이름이 겹치면 자기참조 무효화됨). */
  --font-display: var(--font-sans, 'Geist', 'Pretendard Variable', sans-serif);
  --font-body: var(--font-sans, 'Geist', 'Pretendard Variable', sans-serif);
  --font-mono: var(--font-mono-src, 'Geist Mono', 'Pretendard Variable', monospace);

  /* (2026-07-10) --core/--context 토큰 제거 — 카드 왼쪽 색 바로 쓰던
     것을 없애면서 더 이상 참조되지 않는다. 탭이 이미 분류를 하므로
     카드 자체에서 색으로 다시 표시할 필요가 없어졌다. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   데스크톱 레이아웃
   ============================================================ */
.insight-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.elevator-panel {
  background: var(--surface);
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  padding: 28px 0;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}

.elevator-panel .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 0 24px 16px;
  text-transform: uppercase;
}

.elevator-btn {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 24px;
  border-left: 3px solid transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  color: var(--text-body);
}

.elevator-btn .floor-no {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brass);
}

.elevator-btn.active {
  border-left-color: var(--accent);
  background: rgba(29, 78, 216, 0.07);
  color: var(--text-primary);
}
.elevator-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.elevator-panel .home-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 14px 24px 22px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.elevator-panel .back-to-main {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 24px 16px;
  color: var(--text-muted);
  display: block;
  transition: color 0.15s;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.elevator-panel .back-to-main:hover { color: var(--accent); }

.insight-gnb {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 14px;
  padding: 0 24px 12px; border-bottom: 1px solid var(--line);
}
.insight-gnb a {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .03em;
  color: var(--text-muted); text-decoration: none;
}
.insight-gnb a.active, .insight-gnb a:hover { color: var(--accent); }

/* (2026-07-10) site-mark-row/.site-mark 규칙 전부 제거 — 마크업 자체를
   base.html에서 삭제했다 (GNB+FLOOR탭+페이지 헤더와 정보가 중복돼서). */

.back-to-main-mobile { display: none; }

/* ============================================================
   모바일 (760px 이하)
   ============================================================ */
@media (max-width: 760px) {

  .insight-shell { display: block; }

  .elevator-panel {
    position: sticky;
    top: 0;
    z-index: 100;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .elevator-panel::-webkit-scrollbar { display: none; }

  /* (2026-07-09) 모바일에서 완전히 숨김 — 바로 위 GNB가 이미 브랜드와
     "Research" 활성 상태를 보여주므로, 여기서 "신독 INSIGHT"를 또
     보여주는 건 순수 중복이었다. GNB의 Research 링크가 /insight/ 홈으로
     가는 길을 이미 대신한다. */
  .elevator-panel .home-btn { display: none; }

  .elevator-panel .panel-title { display: none; }
  .elevator-panel .back-to-main { display: none; }
  .insight-gnb { display: none; }

  .back-to-main-mobile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
    flex-shrink: 0;
  }
  .back-to-main-mobile:hover { color: var(--accent); }

  /* (2026-07-10) site-mark-row 규칙 삭제 — 마크업 자체가 이제 없다
     (base.html에서 완전 제거, 모바일 숨김이 아니라 전체 삭제로 정리). */

  .elevator-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 18px;
    border-left: none;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 52px;
    min-width: 72px;
  }

  .elevator-btn .floor-no { font-size: 10px; line-height: 1; }

  .elevator-btn span:last-child {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
  }

  .elevator-btn.active {
    border-bottom-color: var(--accent);
    border-left: none;
    background: rgba(29, 78, 216, 0.07);
  }

  .insight-main { padding: 24px 18px 40px; max-width: 100%; }

  .research-grid { gap: 10px; }
  .rc-card { padding: 14px 16px; gap: 12px; }
  .rc-floor-badge { width: 32px; height: 32px; font-size: 11px; }
  .rc-card h2 { font-size: 15px; }
  /* (2026-07-25) .research-hero 모바일 밴드 규칙 삭제 — 히어로가
     shared/hero.html 공용 라이트 컴포넌트(.mx-hero)로 교체됨. */
  .featured-research .fr-card { padding: 22px 20px; }
  .detail-hero { padding: 28px 22px; border-radius: 12px; }
  .rr-grid { grid-template-columns: 1fr; }

  .column-header h1 { font-size: 22px; line-height: 1.35; }
  .column-header .subtitle { font-size: 14px; }
  .column-body { font-size: 16px; line-height: 1.9; }
  .column-body h2 { font-size: 18px; margin-top: 32px; }
  .column-body h3 { font-size: 16px; margin-top: 24px; }
  .column-body blockquote { padding: 4px 14px; }
  /* (2026-07-13) 모바일 표 가독성 — 폰트/패딩을 좁혀 좁은 화면에서도
     한 화면에 더 많은 열이 들어오게 한다. 표 자체 구조는 공통 규칙
     (아래 "본문 표" 섹션)이 담당하고, 여기서는 밀도만 조정한다. */
  .column-body table { font-size: 13px; }
  .column-body thead th, .column-body tbody td { padding: 8px 10px; }

  .prev-next { flex-direction: column; gap: 16px; }
  .prev-next .title { font-size: 14px; }

  .series-header h1 { font-size: 24px; }
}

/* ============================================================
   공통
   ============================================================ */
.insight-main {
  padding: 48px clamp(20px, 5vw, 72px);
  max-width: 960px;
}

/* ── Research 카드 리스트 (2026-07-10 — 밀도에 맞게 재조정) ──
   07-09: 왼쪽 4px 색 바로 core/context 구분 → 07-10: 탭이 그 일을
   대신하니 Home과 통일해 색 바 제거 → 이번(같은 날 재조정): Home
   Featured(3장, 한 줄)에서 괜찮던 흰 카드가 Research(12장, 스크롤)에서는
   "다 똑같아 안 읽힘"이 됐다. 밀도가 다르면 같은 카드 처방이 안 통한다는
   교훈 — 2열 그리드 대신 1열 풀와이드로 카드당 여백을 늘리고, 왼쪽에
   작은 원형 층수 배지를 둬서 스크롤 중 훑어볼 랜드마크를 준다(카드
   전체를 물들이던 이전 방식보다 훨씬 조용하다). */
.research-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.rc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rc-card:hover {
  border-color: var(--accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

.rc-floor-badge {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}
.rc-floor-badge.core {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.rc-body { flex: 1; min-width: 0; }

.rc-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  margin-bottom: 6px;
}
.rc-entry-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .02em; color: var(--seal); border: 1px solid currentColor;
  padding: 1px 7px; border-radius: 999px; margin-left: 4px;
}

.rc-card h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  line-height: 1.45; color: var(--text-primary); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-summary {
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
  margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.column-header { margin-bottom: 40px; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
.column-header .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--seal);
  margin-bottom: 14px;
}
.column-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.column-header .subtitle { font-size: 17px; color: var(--text-muted); }

/* ── 본문 (2026-07-08: 폭 축소 + 타이포 조정) ──
   880px→720px: 17px대 폰트에서 한 줄 글자수가 너무 많아 가독성이
   떨어졌다. 18px/1.9로 살짝 키우고 줄 길이를 줄인 것 — Stripe/Medium
   패턴이지만 19px는 한글에서 늘어져 보여 18px로 조정했다. */
.column-body {
  font-size: 18px; line-height: 1.9; color: var(--text-body);
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.column-body h2 {
  font-family: var(--font-display); font-size: 22px;
  margin-top: 64px; margin-bottom: 18px; color: var(--text-primary);
}
.column-body h3 {
  font-family: var(--font-display); font-size: 19px;
  margin-top: 40px; margin-bottom: 14px; color: var(--text-primary);
}
/* 인용구: 파란 선 대신 seal(에디토리얼 정체성) 유지 + 배경/여백만 강화 */
.column-body blockquote {
  margin: 28px 0; padding: 20px 32px;
  border-left: 4px solid var(--seal);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  color: var(--text-body); font-style: normal;
}
.column-body code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; color: var(--text-body); }
.column-body pre { background: #0f172a; color: #e2e8f0; padding: 16px; overflow-x: auto; border-radius: 4px; border: 1px solid var(--line); }
.column-body pre code { background: none; color: inherit; }

/* ── 본문 표 (마크다운 `| ... |` → tables 확장 출력) ──
   (2026-07-13) 지금까지 .column-body table에 별도 스타일이 없어 브라우저
   기본 표 렌더링이 그대로 나갔다. 데스크톱에서도 밋밋하지만, 모바일
   좁은 화면에서는 여러 열짜리 표가 UA 기본 padding·border로 그대로
   찍히면서 셀 텍스트가 눌리거나(초소형 폰트 아님에도 답답) 표 폭이
   .column-body(720px 고정폭, 모바일에선 뷰포트 폭)를 넘겨 페이지 전체가
   가로로 밀리는 문제가 있었다.
   개별 글(body_md)이 아니라 여기 한 곳에서만 고치면 이미 발행된 글과
   앞으로 나올 글의 표에 전부 자동 적용된다(중앙화) — 글쓴이가 표를 쓸 때
   마크다운 문법만 신경 쓰면 되고, 표 스타일은 신경 쓸 필요가 없다.
   구조:
     1) 표 자체: 헤더 행을 다른 섹션 라벨(.rc-meta 등)과 통일된
        font-mono·소문자·트래킹 스타일로 분리해 스캔하기 쉽게 만든다.
     2) 모바일 안전망: 표를 `display:block`으로 바꿔 표 자신이 가로
        스크롤 컨테이너가 되게 한다(셀은 여전히 UA 기본값으로 표처럼
        배치됨). 셀 텍스트는 기본적으로 줄바꿈되므로 대부분의 표는
        스크롤 없이 그대로 좁아지고, 숫자·코드처럼 줄바꿈이 안 되는
        긴 값이 있는 표만 필요한 만큼 가로 스크롤된다 — 페이지 전체가
        밀리는 대신 표 내부만 스크롤되어 레이아웃이 깨지지 않는다. */
/* (2026-07-14 가시성 개편 — floor26 ep1/ep2/ep4 등 표 위주 글 피드백 반영)
   ① 표 전체를 카드처럼 감싼다(테두리+라운드+미세 그림자) — 본문 텍스트와
      경계가 없어 "어디부터 어디까지가 표인지" 스캔이 안 되던 문제.
   ② 헤더: 한글 헤더에 의미 없는 uppercase/자간을 빼고, 진한 글자+진한 배경으로
      대비를 올린다 (기존 11.5px muted 모노는 본문보다 흐려 위계가 뒤집혀 있었다).
   ③ 지브라 스트라이프 + 행 hover — 여러 열짜리 표에서 행 추적을 돕는다.
   ④ 첫 열(행 라벨) 강조 — 비교표는 첫 열이 '항목명'이므로 굵게.
   개별 글(body_md)이 아니라 여기 한 곳만 고치면 모든 발행 글에 적용(중앙화). */
.column-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 32px 0;
  font-size: 14.5px;
  line-height: 1.55;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
}
.column-body thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--line) 30%);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.column-body tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-body);
  vertical-align: top;
}
.column-body tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.column-body tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.column-body tbody tr:last-child td { border-bottom: none; }
.column-body tbody td:first-child {
  font-weight: 600;
  color: var(--text-primary);
}
.column-body thead th, .column-body tbody td { word-break: keep-all; }
@media (max-width: 760px) {
  /* table을 block으로 바꾸면 브라우저가 내부에 필요한 익명 테이블 박스를
     다시 만들어주므로(thead/tr/td는 UA 기본 display를 그대로 유지) 셀
     구조·정렬은 그대로 두고, 바깥 박스만 가로 스크롤 가능한 블록이 된다.
     대부분의 표는 셀 줄바꿈만으로 화면 폭에 맞아 스크롤이 아예 발생하지
     않고, 숫자 등 줄바꿈 안 되는 값이 있는 표만 필요한 만큼만 가로
     스크롤된다 — 페이지 전체가 밀리지 않는다. */
  .column-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
}

.prev-next {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px;
}
.prev-next .label { color: var(--text-muted); display: block; margin-bottom: 4px; }
.prev-next .title { font-family: var(--font-body); font-size: 15px; color: var(--text-body); }

.series-header { margin-bottom: 32px; }
.series-header .floor-label { font-family: var(--font-mono); font-size: 12px; color: var(--seal); }
.series-header h1 { font-family: var(--font-display); font-size: 32px; margin: 8px 0; color: var(--text-primary); }
.series-header p { color: var(--text-muted); max-width: 60ch; }

.series-list-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.series-list-item .order { font-family: var(--font-mono); color: var(--seal); font-size: 14px; min-width: 32px; }