@charset "UTF-8";
/* ============================================================
   에스디파마 인사이트 — 공개 블로그

   방향: Modern Editorial × Soft Depth
   기준색: #9A0002

   ── 이전 안에서 바꾼 것과 그 이유 ──────────────────────
   1) 명조(Noto Serif KR) 제목을 전부 걷어냈다.
      한글 명조 제목은 곧바로 관보·공문서 인상을 준다. 신뢰감을 노렸지만
      실제로는 "오래된 사이트"로 읽혔다. 지금은 Pretendard 800 을 바짝 조여
      (letter-spacing -.04em) 무게를 만든다. 권위는 서체가 아니라 굵기와 여백으로 낸다.
   2) 네이비 통짜 헤더 바를 없앴다. 스크롤을 따라오는 반투명 헤더로 바꿨다.
   3) 각진 모서리와 괘선 도배를 없앴다. 면(surface)과 여백으로 구획한다.

   ── 바꾸지 않은 것 ────────────────────────────────────
   본문 조판 수치(행간 1.85~1.9, 한 줄 40자 내외)는 그대로다.
   한글은 라틴보다 조밀해서 이 아래로 내리면 긴 글이 읽히지 않는다.
   그리고 한글 라벨에 mono 를 쓰지 않는다 — IBM Plex Mono 에는 한글 글리프가 없다.
   ============================================================ */

:root {
  /* 면 */
  --bg:         #F7F6F5;
  --surface:    #FFFFFF;
  --surface-2:  #F1EFEE;
  --surface-3:  #EAE7E5;

  /* 글자 — 네이비가 아니라 뉴트럴 니어블랙. 이 한 끗이 인상을 크게 바꾼다. */
  --ink:        #111013;
  --ink-body:   #3A3840;
  --ink-mid:    #605D68;
  --ink-dim:    #6E6B76;

  --line:       #E5E2E0;
  --line-soft:  #EFEDEB;

  --brand:      #9A0002;
  --brand-deep: #6B0001;
  --brand-on:   #FFFFFF;
  --brand-tint: #FBF2F2;
  --brand-line: #F0DADA;

  /* 스크롤을 따라오는 헤더. 뒤 내용이 비쳐야 얇아 보인다. */
  --header-bg:   rgba(247, 246, 245, .72);
  --header-line: rgba(17, 16, 19, .08);

  --shadow-sm: 0 1px 2px rgba(17, 16, 19, .04);
  --shadow-md: 0 1px 3px rgba(17, 16, 19, .05), 0 8px 24px -14px rgba(17, 16, 19, .22);
  --shadow-lg: 0 2px 6px rgba(17, 16, 19, .06), 0 22px 48px -24px rgba(17, 16, 19, .30);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  --wrap: 1160px;
  --read: 40rem;     /* 본문 한 줄. 한글 기준 대략 40자 */
  --rail: 200px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0E0E11;
    --surface:    #16161A;
    --surface-2:  #1C1C21;
    --surface-3:  #24242A;
    --ink:        #F3F2F4;
    --ink-body:   #C9C7CE;
    --ink-mid:    #A3A0AB;
    --ink-dim:    #8B8894;
    --line:       #2A2A31;
    --line-soft:  #212127;
    --brand:      #FF6B6D;
    --brand-deep: #FF9092;
    --brand-on:   #1A0000;
    --brand-tint: rgba(255, 107, 109, .10);
    --brand-line: rgba(255, 107, 109, .24);
    --header-bg:   rgba(14, 14, 17, .72);
    --header-line: rgba(255, 255, 255, .09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .40), 0 8px 24px -14px rgba(0, 0, 0, .60);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .44), 0 22px 48px -24px rgba(0, 0, 0, .70);
  }
}
:root[data-theme="dark"] {
  --bg:         #0E0E11;
  --surface:    #16161A;
  --surface-2:  #1C1C21;
  --surface-3:  #24242A;
  --ink:        #F3F2F4;
  --ink-body:   #C9C7CE;
  --ink-mid:    #A3A0AB;
  --ink-dim:    #8B8894;
  --line:       #2A2A31;
  --line-soft:  #212127;
  --brand:      #FF6B6D;
  --brand-deep: #FF9092;
  --brand-on:   #1A0000;
  --brand-tint: rgba(255, 107, 109, .10);
  --brand-line: rgba(255, 107, 109, .24);
  --header-bg:   rgba(14, 14, 17, .72);
  --header-line: rgba(255, 255, 255, .09);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, .40), 0 8px 24px -14px rgba(0, 0, 0, .60);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .44), 0 22px 48px -24px rgba(0, 0, 0, .70);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;          /* 한글은 어절 단위로 끊어야 읽기 쉽다 */
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* 헤더·바닥은 넓게 가고 내용은 좁게 모은다.
   카드가 화면 끝까지 늘어나면 글은 40rem 에서 끊기므로 오른쪽이 텅 비어 보인다.
   읽는 폭과 카드 폭을 맞춰야 구성이 잡힌다. */
.page-head, .post-list, .pager, .empty {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.article-grid { max-width: 940px; margin-left: auto; margin-right: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: var(--brand-on);
  padding: 12px 18px; border-radius: var(--r-sm); z-index: 100; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

/* ══ 헤더 — 스크롤을 따라오는 반투명 ═══════════════════════ */
.site-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  /* 뒤 내용이 비쳐 보여야 헤더가 얇게 느껴진다. */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
/* blur 미지원 브라우저에서는 반투명 배경이 그냥 흐릿한 띠로 보인다. 불투명하게 떨어뜨린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-top { background: var(--bg); }
}
.site-top .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; flex-wrap: wrap;
}

.brand {
  font-size: 17px; font-weight: 800; letter-spacing: -.035em;
  color: var(--ink); white-space: nowrap; margin-right: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
/* 로고 옆의 작은 점 하나. 글자에 붉은색을 칠하는 것보다 절제돼 보인다. */
.brand::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.brand em { font-style: normal; color: var(--ink-mid); font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  position: relative;
  font-size: 14.5px; font-weight: 500; color: var(--ink-mid);
  padding: 8px 12px; border-radius: var(--r-sm); white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a[aria-current] { color: var(--ink); font-weight: 700; }
/* 현재 위치는 밑줄 한 획으로. 배경을 칠하면 헤더가 무거워진다. */
.site-nav a[aria-current]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brand);
}

.site-nav form { display: flex; margin-left: 6px; }
.site-nav input {
  font: inherit; font-family: var(--sans); font-size: 14px;
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink-body); padding: 8px 14px; border-radius: 999px; width: 132px;
  transition: width .24s var(--ease), border-color .18s ease, background-color .18s ease;
}
.site-nav input::placeholder { color: var(--ink-dim); }
.site-nav input:focus { width: 190px; background: var(--surface); border-color: var(--line); }

/* ══ 페이지 머리 ═══════════════════════════════════════════ */
.page-head { padding: 68px 0 40px; }
.page-head h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 800;
  line-height: 1.24; letter-spacing: -.042em;
  color: var(--ink); margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.page-head p {
  margin: 0; color: var(--ink-mid); max-width: 56ch;
  font-size: 16.5px; line-height: 1.8;
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 14px;
}

/* ══ 목록 — 카드 ═══════════════════════════════════════════ */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.post-item {
  display: block; padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}
.post-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-soft);
}
.post-item:hover h2 { color: var(--brand); }

.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 500; color: var(--ink-dim); margin-bottom: 12px;
}
.post-meta time { font-variant-numeric: tabular-nums; }

.cat-tag {
  display: inline-block;
  background: var(--brand-tint); color: var(--brand);
  border: 1px solid var(--brand-line);
  padding: 4px 11px; font-size: 12px; font-weight: 700; letter-spacing: -.005em;
  border-radius: 999px; line-height: 1.5;
}

.post-item h2 {
  font-size: 22px; font-weight: 700; line-height: 1.42; letter-spacing: -.035em;
  color: var(--ink); margin: 0 0 10px; max-width: 30ch;
  transition: color .2s ease; text-wrap: balance;
}
.post-item p {
  margin: 0; color: var(--ink-mid); font-size: 15.5px; line-height: 1.8;
}

.empty {
  padding: 72px 24px; text-align: center; color: var(--ink-dim);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); font-size: 15px;
}

/* ══ 페이지 넘김 ═══════════════════════════════════════════ */
.pager { display: flex; gap: 6px; justify-content: center; padding: 44px 0 0; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 42px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  transition: background-color .18s ease, color .18s ease;
}
.pager a:hover { background: var(--surface-2); color: var(--ink); }
.pager .on { background: var(--ink); color: var(--bg); font-weight: 700; }

/* ══ 글 상세 ═══════════════════════════════════════════════ */
.article-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 56px;
  padding: 0 0 80px;
  align-items: start;
}

/* 목차 레일.
   장식이 아니다. 목차가 존재하려면 본문에 H2 가 반드시 있어야 하고,
   그 H2 가 곧 AI 검색이 글을 잘라 가져가는 경계선이 된다. */
.toc { position: sticky; top: 88px; padding: 52px 0 0; }
.toc .cap {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-dim); text-transform: uppercase; margin-bottom: 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: block; padding: 8px 12px;
  font-size: 13.5px; line-height: 1.55; font-weight: 500;
  color: var(--ink-mid); border-radius: var(--r-sm);
  transition: color .18s ease, background-color .18s ease;
}
.toc a:hover { color: var(--ink); background: var(--surface-2); }

.article { padding: 52px 0 0; min-width: 0; }
.article-head { margin-bottom: 34px; }
.article h1 {
  font-size: clamp(28px, 4.2vw, 42px); font-weight: 800;
  line-height: 1.26; letter-spacing: -.042em;
  color: var(--ink); margin: 16px 0 18px; max-width: 22ch; text-wrap: balance;
}
.byline {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; font-weight: 500; color: var(--ink-dim);
}
.byline time { font-variant-numeric: tabular-nums; }
.byline > * + *::before { content: "·"; margin-right: 8px; opacity: .55; }

/* 핵심 답변 — AI 발췌 1순위 지점이자 사람에게도 첫 화면의 결론이다.
   괘선 상자에서 은은한 브랜드 틴트 면으로 바꿨다. */
.answer {
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin: 0 0 40px;
  max-width: var(--read);
}
.answer .cap {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); margin-bottom: 12px;
}
.answer .cap::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.answer p {
  margin: 0; font-size: 17px; line-height: 1.88;
  color: var(--ink); font-weight: 500; letter-spacing: -.015em;
}

/* 본문 */
.body { max-width: var(--read); }
.body > * { max-width: 100%; }
.body p { margin: 0 0 20px; line-height: 1.9; }

.body h2 {
  font-size: 24px; font-weight: 700; line-height: 1.38; letter-spacing: -.038em;
  color: var(--ink); margin: 56px 0 18px;
  scroll-margin-top: 92px;      /* 목차로 점프했을 때 고정 헤더에 가리지 않게 */
  text-wrap: balance;
}
/* 소제목 위에 짧은 획 하나. 왼쪽 세로 막대보다 가볍고 구획은 더 분명하다. */
.body h2::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--brand); margin-bottom: 16px;
}
.body h3 {
  font-size: 18.5px; font-weight: 700; color: var(--ink);
  margin: 34px 0 12px; letter-spacing: -.03em;
}
.body ul, .body ol { margin: 0 0 20px; padding-left: 4px; list-style: none; }
.body ol { counter-reset: li; }
.body li { position: relative; margin-bottom: 10px; line-height: 1.85; padding-left: 22px; }
.body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .55;
}
.body ol > li { counter-increment: li; }
.body ol > li::before {
  content: counter(li) "."; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700; font-size: .92em;
  font-variant-numeric: tabular-nums;
}
.body strong { font-weight: 700; color: var(--ink); }
.body a {
  color: var(--brand); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.body a:hover { color: var(--brand-deep); }

.body blockquote {
  margin: 26px 0; padding: 20px 24px;
  background: var(--surface-2); border-radius: var(--r-md);
  color: var(--ink-mid); font-size: 16px;
}
.body blockquote p:last-child { margin-bottom: 0; }
.body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
}

/* 표는 자기 컨테이너 안에서만 가로 스크롤한다. 페이지 본문이 옆으로 밀리면 안 된다. */
.table-scroll {
  overflow-x: auto; margin: 0 0 26px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.body th, .body td {
  text-align: left; padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft); line-height: 1.7; vertical-align: top;
}
.body thead th {
  background: var(--surface-2); color: var(--ink);
  font-weight: 700; font-size: 13px; white-space: nowrap;
}
.body tbody tr:last-child td { border-bottom: 0; }

/* ══ FAQ ═══════════════════════════════════════════════════
   질문–답변 쌍은 사용자가 AI 에 던지는 형태와 그대로 일치한다.
   같은 내용이 FAQPage 구조화 데이터로도 함께 나간다. */
.faq { max-width: var(--read); margin: 64px 0 0; }
.faq .cap {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px;
}
.faq dl { margin: 0; display: grid; gap: 10px; }
.faq .qa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq .qa:hover { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.faq dt {
  font-weight: 700; font-size: 16px; color: var(--ink);
  letter-spacing: -.03em; line-height: 1.55; margin-bottom: 9px;
}
.faq dd { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--ink-mid); }

/* ══ 태그 · 관련 글 ════════════════════════════════════════ */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 44px 0 0; max-width: var(--read); }
.tag-row a {
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  background: var(--surface-2); padding: 7px 14px; border-radius: 999px;
  transition: color .18s ease, background-color .18s ease;
}
.tag-row a:hover { color: var(--brand); background: var(--brand-tint); }

.related { max-width: var(--read); margin: 60px 0 0; }
.related h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 16px;
}
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related a {
  display: block; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.55;
  transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease;
}
.related a:hover {
  transform: translateY(-1px); border-color: var(--brand-line); box-shadow: var(--shadow-sm);
}
.related span { display: block; font-size: 13px; color: var(--ink-dim); margin-top: 4px; font-weight: 400; }

/* ══ 댓글 ══════════════════════════════════════════════════ */
.comments { max-width: var(--read); margin: 72px 0 0; }
.comments > h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 22px;
}
.comments > h2 b { color: var(--brand); font-variant-numeric: tabular-nums; }

.cmt-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 8px; }
.cmt {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 22px;
}
.cmt.reply { margin-left: 28px; background: var(--surface-2); }
.cmt-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.cmt-name { font-weight: 700; font-size: 14.5px; color: var(--ink); letter-spacing: -.02em; }
.cmt-time { font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.cmt-del {
  margin-left: auto; font-size: 12.5px; color: var(--ink-dim);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 4px 8px; border-radius: 6px;
  transition: color .18s ease, background-color .18s ease;
}
.cmt-del:hover { color: var(--brand); background: var(--brand-tint); }
.cmt-body { font-size: 15.5px; line-height: 1.8; color: var(--ink-body); white-space: pre-wrap; }

.cmt-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.cmt-form h3 {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 18px; letter-spacing: -.03em;
}
.field-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.field-row > div { flex: 1 1 170px; }
.cmt-form label {
  display: block; font-size: 13px; color: var(--ink-mid);
  margin-bottom: 7px; font-weight: 600;
}
.cmt-form input, .cmt-form textarea {
  width: 100%; font: inherit; font-size: 15px; font-family: var(--sans);
  padding: 12px 15px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-body); border-radius: var(--r-sm);
  transition: border-color .18s ease, background-color .18s ease;
}
.cmt-form textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
.cmt-form input:focus, .cmt-form textarea:focus { border-color: var(--brand); background: var(--surface); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hint { font-size: 13px; color: var(--ink-dim); margin: 10px 0 0; line-height: 1.7; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  background: var(--brand); color: var(--brand-on);
  border: 1px solid var(--brand); border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700; font-family: var(--sans);
  letter-spacing: -.02em; cursor: pointer;
  transition: background-color .18s ease, transform .18s var(--ease), box-shadow .18s ease;
}
.btn:hover {
  background: var(--brand-deep); border-color: var(--brand-deep);
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.notice {
  padding: 14px 18px; margin: 0 0 18px; font-size: 15px;
  border-radius: var(--r-md); line-height: 1.75;
}
.notice.ok  { background: var(--surface-2); color: var(--ink-body); }
.notice.err { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); }

/* ══ 바닥 ══════════════════════════════════════════════════ */
.site-foot {
  margin-top: 90px;
  border-top: 1px solid var(--line);
  padding: 44px 0 52px;
  font-size: 14px;
  color: var(--ink-mid);
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.site-foot p { margin: 0 0 6px; line-height: 1.75; }
.site-foot p strong { color: var(--ink); font-weight: 700; letter-spacing: -.025em; }
.site-foot a { color: var(--ink-mid); transition: color .18s ease; }
.site-foot a:hover { color: var(--brand); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 500; }

/* ══ 슬라이딩 세그먼트 컨트롤 (iOS 스타일) ═══════════════════
   진짜 radio 입력 위에 얹은 것이라 키보드 이동과 스크린리더가 그대로 동작한다.
   thumb 이 움직이지 않아도(스크립트 미실행) 선택 상태는 글자 굵기로 드러난다 —
   애니메이션이 상태를 전달하는 유일한 수단이 되면 안 되기 때문이다. */
.seg {
  --seg-i: 0;
  --seg-n: 3;
  --seg-pad: 3px;
  position: relative;
  /* 칸 너비를 모두 같게(가장 긴 글자 기준) 맞춘다. thumb 는 "전체 폭 ÷ 칸 수" 로 움직이므로
     칸마다 너비가 다르면 어긋난다 — "전체 | 검토 대기 3" 에서 thumb 가 24px 오른쪽으로 밀려 있었다. */
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--seg-pad);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  isolation: isolate;
}
.seg-thumb {
  position: absolute; z-index: 0;
  top: var(--seg-pad); left: var(--seg-pad);
  width: calc((100% - var(--seg-pad) * 2) / var(--seg-n));
  height: calc(100% - var(--seg-pad) * 2);
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-sm), 0 0 0 .5px rgba(17, 16, 19, .05);
  transform: translateX(calc(var(--seg-i) * 100%));
  /* iOS 세그먼트 특유의 감속 곡선. 마이크로 인터랙션 권장 범위(150~300ms) 안. */
  transition: transform .24s var(--ease);
}
.seg-opt {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px;
  cursor: pointer; user-select: none; white-space: nowrap;
}
@media (pointer: coarse) { .seg-opt { min-height: 44px; padding: 0 18px; } }
.seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-opt span {
  font-size: 13px; font-weight: 500; letter-spacing: -.02em;
  color: var(--ink-mid); transition: color .18s ease; pointer-events: none;
}
.seg-opt input:checked + span { color: var(--ink); font-weight: 700; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 5px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

.theme-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.theme-switch .lbl { font-size: 13.5px; color: var(--ink-dim); }

/* ══ 반응형 ════════════════════════════════════════════════ */
@media (max-width: 940px) {
  /* 목차 레일은 접어서 본문 위로 올린다. 좁은 화면에서 옆에 두면 본문이 못 읽힌다. */
  .article-grid { grid-template-columns: 1fr; gap: 0; }
  .toc {
    position: static; padding: 20px 22px; margin: 32px 0 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .toc ol { columns: 2; column-gap: 24px; display: block; }
  .toc li { break-inside: avoid; }
  .article { padding-top: 28px; }
  .page-head { padding-top: 48px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .toc ol { columns: 1; }
  .site-top .wrap { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  /* 카테고리가 넷이 되면서 한 줄 가로 스크롤로는 글자가 눌려 세 줄로 꺾였다.
     메뉴는 두 줄까지 자연스럽게 넘기고, 검색창은 그 아래 한 줄을 통째로 쓴다. */
  .site-nav { width: 100%; flex-wrap: wrap; gap: 2px 0; margin-left: -10px; }
  .site-nav a { padding: 7px 10px; }
  .site-nav a[aria-current]::after { left: 10px; right: 10px; }
  .site-nav form { flex-basis: 100%; margin: 6px 0 0 10px; }
  .site-nav input, .site-nav input:focus { width: 100%; }
  .post-item { padding: 22px 20px; }
  .answer { padding: 20px 22px; }
  .cmt-form { padding: 22px 20px; }
  .cmt.reply { margin-left: 14px; }
  .body h2 { margin-top: 44px; }
}

/* 인쇄 시 목차·댓글·네비는 뺀다. */
@media print {
  .site-top, .site-foot, .toc, .comments, .related, .pager { display: none; }
  .article-grid { grid-template-columns: 1fr; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .post-item, .faq .qa, .answer { border: 1px solid #ccc; box-shadow: none; }
}

/* ══ 첫 화면 ═══════════════════════════════════════════════
   우아한형제들 기술블로그와 요즘IT 를 참고했다. 두 사이트의 공통점:
   풀블리드 히어로 밴드가 페이지의 앵커 노릇을 하고, 주제 네비게이션이
   첫 화면에 노출되며, 주요 글은 나머지와 다른 크기로 다룬다.

   히어로는 라이트·다크 양쪽에서 모두 어둡게 간다. 밝은 모드에서는 페이지와
   대비를 만들고, 어두운 모드에서는 배경보다 한 단계 들려 밴드로 읽힌다. */
.hero {
  /* ── 히어로 배경 ──────────────────────────────────────
     아래 본문 영역과 눈에 띄게 구분되어야 한다.
     페이지 배경(--bg)과 값이 비슷하면 경계가 사라져 "여기까지가 머리"라는
     신호가 없어진다. 실제로 그렇게 만들었다가 되돌렸다.
     색을 바꾸려면 --hero-field 한 줄만 고치면 된다. */
  --hero-field: #EFE6E4;
  --hero-glow:  rgba(154, 0, 2, .10);
  --hero-ink:   var(--ink);
  --hero-mid:  var(--ink-mid);
  --hero-line: rgba(17, 16, 19, .12);
  position: relative;
  background:
    radial-gradient(86% 150% at 14% -20%, var(--hero-glow), transparent 60%),
    var(--hero-field);
  border-bottom: 1px solid rgba(17, 16, 19, .10);
  overflow: hidden;
}
:root[data-theme="dark"] .hero {
  --hero-field: #211E24;
  --hero-glow:  rgba(255, 107, 109, .14);
  --hero-line:  rgba(255, 255, 255, .16);
  --hero-ink:   var(--ink);
  border-bottom-color: rgba(255, 255, 255, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    --hero-field: #211E24;
    --hero-glow:  rgba(255, 107, 109, .14);
    --hero-line:  rgba(255, 255, 255, .16);
    --hero-ink:   var(--ink);
    border-bottom-color: rgba(255, 255, 255, .10);
  }
}

/* 히어로 글도 아래 카드와 같은 세로선에서 시작해야 한다.
   .wrap 기본값(1160)을 쓰면 히어로만 더 왼쪽에서 시작해 줄이 어긋난다.
   860px 콘텐츠 폭 + 좌우 여백 24px 씩. */
.hero .wrap {
  position: relative;
  max-width: calc(860px + 48px);
  padding-top: 80px;
  padding-bottom: 68px;
}

.hero-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 20px;
}
.hero h1 {
  font-size: clamp(30px, 5.4vw, 52px); font-weight: 800;
  line-height: 1.22; letter-spacing: -.045em;
  color: var(--hero-ink); margin: 0 0 22px; text-wrap: balance;
}
.hero-lead {
  margin: 0 0 34px; max-width: 54ch;
  font-size: 16.5px; line-height: 1.85; color: var(--hero-mid);
}

.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-chips a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--hero-line);
  /* 밴드 위에 얹히는 칩이라 배경을 흰 면으로 둔다. 밴드와 칩이 같은 톤이면
     칩이 배경에 묻혀 눌러지는 것으로 보이지 않는다. */
  background: var(--surface);
  color: var(--hero-ink); font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, color .18s ease, transform .18s var(--ease), box-shadow .18s ease;
}
.hero-chips a:hover {
  border-color: var(--brand-line);
  color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.hero-chips b {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px;
  color: var(--ink-dim);
}
.hero-chips a:hover b { color: var(--brand); }

/* 구획 라벨 — 얇은 선 하나로 절을 나눈다. */
.sec-label {
  display: flex; align-items: center; gap: 14px;
  margin: 56px 0 20px;
}
.sec-label span {
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink);
  white-space: nowrap;
}
.sec-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.feature-wrap, .recent-wrap, .trust { max-width: 860px; margin-left: auto; margin-right: auto; }
.feature-wrap .sec-label { margin-top: 40px; }

/* 대표 글 — 나머지 카드와 다른 크기·구성으로 다룬다. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature:hover h2 { color: var(--brand); }

.feature-main { padding: 30px 32px 28px; }
.feature-main h2 {
  font-size: 26px; font-weight: 800; line-height: 1.34; letter-spacing: -.04em;
  color: var(--ink); margin: 0 0 12px; transition: color .2s ease; text-wrap: balance;
}
.feature-sum {
  margin: 0 0 20px; color: var(--ink-mid); font-size: 15.5px; line-height: 1.8;
}
.feature-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: -.02em;
}
.feature-go::after {
  content: "→"; transition: transform .2s var(--ease); display: inline-block;
}
.feature:hover .feature-go::after { transform: translateX(3px); }

/* 이 글이 답하는 질문 — 이 블로그만의 자산이다.
   모든 글이 질문-답변 구조라 첫 화면에서 그대로 쓸 수 있다. */
.feature-qs {
  padding: 30px 30px 28px;
  background: var(--brand-tint);
  border-left: 1px solid var(--brand-line);
}
.feature-qs .cap {
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--brand); margin-bottom: 14px;
}
.feature-qs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.feature-qs li {
  position: relative; padding-left: 17px;
  font-size: 14px; line-height: 1.6; color: var(--ink-body); font-weight: 500;
}
/* 글머리는 점으로 둔다. 물음표를 쓰면 문장 끝의 물음표와 겹쳐
   스크린리더가 "물음표"를 두 번 읽는다. */
.feature-qs li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: .6;
}

/* 신뢰 근거 */
.trust { margin-bottom: 20px; }
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px;
}
.trust-grid > div {
  background: var(--surface-2); border-radius: var(--r-md); padding: 22px 24px;
}
.trust-grid h3 {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 9px;
}
.trust-grid p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-mid); }

@media (max-width: 780px) {
  .hero .wrap { padding-top: 56px; padding-bottom: 52px; }
  .feature { grid-template-columns: 1fr; }
  .feature-qs { border-left: 0; border-top: 1px solid var(--brand-line); }
  .sec-label { margin-top: 44px; }
}

/* ══ 이미지 ════════════════════════════════════════════════ */

/* 글 상단 대표 이미지 */
.article .cover {
  margin: 0 0 34px;
  max-width: var(--read);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.article .cover img { width: 100%; height: auto; display: block; }

/* 본문 안의 이미지 */
.body figure { margin: 30px 0; }
.body img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); background: var(--surface-2);
}
.body figcaption {
  margin-top: 11px; font-size: 13.5px; line-height: 1.7;
  color: var(--ink-dim); text-align: center;
}

/* 목록 카드 썸네일.
   글이 있으면 왼쪽, 그림이 오른쪽. 제목이 먼저 읽혀야 하므로 순서를 뒤집는다. */
.post-item.has-thumb { display: flex; gap: 22px; align-items: flex-start; }
.post-item .post-body { flex: 1; min-width: 0; }
.post-thumb {
  flex: none; order: 2;
  width: 168px; aspect-ratio: 16 / 10;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-2);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 대표 글 카드의 이미지는 카드 폭 전체를 쓴다. */
.feature-cover {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9; overflow: hidden; background: var(--surface-2);
}
.feature-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ 댓글 답글 ═════════════════════════════════════════════
   <details> 로 만들어서 자바스크립트가 없어도 여닫힌다. */
.cmt-reply { margin-top: 14px; }
.cmt-reply > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-mid);
  font-size: 13px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; list-style: none;
  transition: background-color .18s ease, color .18s ease;
}
.cmt-reply > summary::-webkit-details-marker { display: none; }
.cmt-reply > summary::marker { content: ""; }
.cmt-reply > summary:hover { color: var(--brand); background: var(--brand-tint); }
.cmt-reply[open] > summary { color: var(--brand); background: var(--brand-tint); }

.cmt-form.compact {
  margin-top: 14px; padding: 20px 22px;
  background: var(--surface-2); border-color: var(--line);
}
.cmt-form.compact input, .cmt-form.compact textarea { background: var(--surface); }
.cmt-form.compact textarea { min-height: 84px; }
.reply-to { margin: 0 0 14px; font-size: 13px; color: var(--ink-dim); }
.reply-to b { color: var(--ink); font-weight: 700; }

.btn.btn-sm { min-height: 40px; padding: 0 20px; font-size: 14px; }

@media (max-width: 640px) {
  /* 좁은 화면에서 썸네일은 위로 올린다. 옆에 두면 제목이 두세 글자씩 끊긴다. */
  .post-item.has-thumb { flex-direction: column; gap: 16px; }
  .post-thumb { order: 0; width: 100%; aspect-ratio: 16 / 9; }
  .feature-cover { aspect-ratio: 16 / 9; }
}

/* ══ 사이트별 색 (2026-09-17) ══════════════════════════════════
   코드 한 벌로 두 사이트를 낸다. <html data-site="…"> 로 구분하고 색 토큰만 바꾼다.
   에스디피씨 인싸이트는 공식 사이트(sdpc.sdpco.co.kr)가 가장 많이 쓰는 파란색 #0066B3.
   ★ 다크 모드 규칙은 선택자를 한 단계 더 구체적으로 둔다.
     안 그러면 바로 아래의 밝은 색 규칙이 다크 규칙을 덮어 다크에서도 밝은 파랑이 나온다. */
:root[data-site="sdpc"] {
  --brand:      #0066B3;
  --brand-deep: #004B85;
  --brand-on:   #FFFFFF;
  --brand-tint: #EEF5FB;
  --brand-line: #D3E3F2;
}
:root[data-site="sdpc"][data-theme="dark"] {
  --brand:      #5DADEB;
  --brand-deep: #8DC5F2;
  --brand-on:   #00182B;
  --brand-tint: rgba(93, 173, 235, .10);
  --brand-line: rgba(93, 173, 235, .26);
}
@media (prefers-color-scheme: dark) {
  :root[data-site="sdpc"]:not([data-theme="light"]) {
    --brand:      #5DADEB;
    --brand-deep: #8DC5F2;
    --brand-on:   #00182B;
    --brand-tint: rgba(93, 173, 235, .10);
    --brand-line: rgba(93, 173, 235, .26);
  }
}

/* 히어로 바탕 — 에스디파마의 옅은 분홍 대신 옅은 하늘색 */
:root[data-site="sdpc"] .hero {
  --hero-field: #E4ECF5;
  --hero-glow:  rgba(0, 102, 179, .10);
}
:root[data-site="sdpc"][data-theme="dark"] .hero {
  --hero-field: #1B2029;
  --hero-glow:  rgba(93, 173, 235, .14);
}
@media (prefers-color-scheme: dark) {
  :root[data-site="sdpc"]:not([data-theme="light"]) .hero {
    --hero-field: #1B2029;
    --hero-glow:  rgba(93, 173, 235, .14);
  }
}

/* 홈 소개 문구 — 넓은 화면에서는 원문 줄바꿈을 살리고, 좁은 화면에서는 이어 붙인다.
   좁은 화면에서 강제 줄바꿈을 두면 한 줄이 두 번 꺾여 들쑥날쑥해진다. */
@media (max-width: 640px) {
  .hero-lead br { display: none; }
}

/* ══ 홈 하단 카테고리 소개 (예전 "이 블로그에 대하여" 자리) ═══════ */
.topics { max-width: 860px; margin: 0 auto 20px; }
.topics-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.topic {
  display: block; padding: 22px 24px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s var(--ease), box-shadow .18s ease;
}
.topic:hover {
  border-color: var(--brand-line); transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.topic h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 10px;
}
.topic h3 b {
  font-size: 12.5px; font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.topic:hover h3 { color: var(--brand); }
.topic p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-mid); }
@media (max-width: 720px) {
  .topics-grid { grid-template-columns: 1fr; }
}