/* ============================================================
   site.css — 디자인 핸드오프(tokens.css / styles.css)에 없던 것만 여기.
   tokens.css · styles.css · theme.js 는 원본 그대로 두세요.
   Claude Design 에서 다시 내보내면 그 세 개만 덮어쓰면 됩니다.

   여기 들어있는 것:
     1. 한글 줄바꿈 보정 (styles.css 에서 빠진 선택자)
     2. 마크다운이 실제로 뱉는 태그들 (h3, ul, ol, table, blockquote, img …)
     3. Shiki 코드 하이라이트를 data-theme 에 연결
     4. 목록/검색/빈 상태 등 목업에 없던 화면 조각
   값은 전부 tokens.css 의 var(--…) 로만 씁니다.
   ============================================================ */

/* ── 1. 한글 줄바꿈 ─────────────────────────────────────────
   styles.css 에는 .post__title / .article__title / .prose h2 에만
   word-break: keep-all 이 있습니다. 나머지 본문성 텍스트에도 필요합니다. */
.post__summary,
.cat-hero__desc,
.section__desc,
.pager__title,
.prose p,
.prose li,
.prose h3,
.prose h4,
.prose blockquote,
.prose td,
.prose th {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 2. 마크다운 본문 보강 ─────────────────────────────────── */

/* 제목 단계 — 목업에는 h2 만 있어서 h3·h4 가 본문 굵은 글씨와 값이 같았습니다.
   크기 · 서체 · 색을 단계마다 다르게 줘서 층이 눈에 보이게 합니다.
     h2  20px 명조 + 아래 실선   ← 절
     h3  17px 명조              ← 소절
     h4  15px 산세리프 + 강조색  ← 문단 묶음
     **굵게**  본문과 같은 크기 · 색, 굵기만              */
:root {
  --text-h2: 26px;
  --text-h3: 20px;
  --text-h4: 16px;
  --space-h2-top: 64px;   /* 절 사이는 확실히 띄웁니다 */
  --space-h3-top: 44px;
}

.prose h2 {
  margin: var(--space-h2-top) 0 var(--space-6);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--accent-divider);
}
/* 글 첫 절은 위 여백을 줄여서 인가 배너·시리즈와 붙지 않게 */
.prose > h2:first-child { margin-top: var(--space-7); }

.prose h3 {
  margin: var(--space-h3-top) 0 var(--space-4);
  font-family: var(--font-title);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.prose h4 {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
}
/* 굵은 글씨는 "굵기만" — 색까지 바꾸면 제목처럼 보입니다 */
.prose strong { font-weight: 600; color: inherit; }
/* 제목 바로 뒤 문단은 붙여서 소속을 분명히 */
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 0; }

/* 인라인 코드 — 목업의 --code-bg 가 페이지 배경과 거의 같은 색이라
   그냥 글자로 보였습니다. 테두리를 줘서 "칩"으로 읽히게 합니다.
   (테마 두 벌 모두에서 자동으로 맞도록 본문 글자색을 섞어 씁니다) */
.prose :not(pre) > code {
  background: var(--surface);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  color: var(--text-strong);
}
/* 제목 안의 인라인 코드는 제목 색을 따라가게 */
.prose h2 code, .prose h3 code, .prose h4 code { color: inherit; font-size: .92em; }
.prose ul,
.prose ol {
  margin: var(--space-6) 0;
  padding-left: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--text);
}
.prose li + li { margin-top: var(--space-2); }
.prose li > ul,
.prose li > ol { margin: var(--space-2) 0; }
.prose strong { font-weight: 600; color: var(--text-strong); }
.prose hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 2px solid var(--accent-underline);
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}
.prose blockquote p { color: inherit; }
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.prose figure { margin: var(--space-6) 0; }
.prose figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
/* ── 코드블록 복사 버튼 ─────────────────────────────────────
   site.js 가 각 <pre> 를 .code-wrap 으로 감싸고 버튼을 붙입니다.
   pre 안이 아니라 밖(형제)에 두는 이유 — pre 는 가로 스크롤되므로
   안에 넣으면 버튼이 코드를 따라 같이 밀립니다. */
.prose .code-wrap { position: relative; margin: var(--space-6) 0; }
.prose .code-wrap > pre { margin: 0; }

.copy-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.code-wrap:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--text-strong); border-color: var(--accent); }
.copy-btn.is-done { opacity: 1; color: var(--accent); border-color: var(--accent); }
.copy-btn.is-fail { opacity: 1; color: var(--lock-text); border-color: var(--lock-border); }

/* 마우스가 없는 기기에서는 항상 보이게 */
@media (hover: none) {
  .copy-btn { opacity: 1; }
}

/* 표는 넘치면 가로 스크롤 (코드블록과 같은 원칙) */
.prose .table-wrap { overflow-x: auto; margin: var(--space-6) 0; }
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--leading-normal);
}
.prose th {
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 600;
}
/* 각주 */
.prose .footnotes {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* h2 옆 앵커(제목 클릭 시 해당 절 링크) */
.prose h2 { scroll-margin-top: var(--space-8); }
.prose h3 { scroll-margin-top: var(--space-8); }

/* ── 3. Shiki ↔ data-theme 연결 ─────────────────────────────
   astro.config.mjs 에서 themes:{light,dark} + defaultColor:false 로 구웠기 때문에
   각 토큰이 --shiki-light / --shiki-dark 두 값을 들고 있습니다.
   배경은 디자인 토큰(--code-bg)을 그대로 쓰고 글자색만 골라 씁니다. */
.prose pre.astro-code {
  background: var(--code-bg) !important;
}
html[data-theme='dark'] .astro-code,
html[data-theme='dark'] .astro-code span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
  font-weight: var(--shiki-dark-font-weight);
  text-decoration: var(--shiki-dark-text-decoration);
}
html[data-theme='light'] .astro-code,
html[data-theme='light'] .astro-code span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
  font-weight: var(--shiki-light-font-weight);
  text-decoration: var(--shiki-light-text-decoration);
}

/* ── 4. 목업에 없던 화면 조각 ──────────────────────────────── */

/* 목차가 없는 글(h2 가 하나도 없을 때) → 1단 */
.article-layout--no-toc { grid-template-columns: minmax(0, var(--measure)); }

/* 아래쪽 여백이 세 번 겹쳐서(섹션 + main + 푸터) 페이지 끝이 텅 비어 보이던 것 정리 */
.article-layout { padding-bottom: 0; }
.section:last-of-type { margin-bottom: 0; }
.site-footer { margin-top: 0; }

/* 잠긴 글 본문 자리 */
.embargo {
  margin: var(--space-8) 0;
  padding: var(--space-8);
  border: 1px dashed var(--lock-border);
  background: var(--lock-bg);
  border-radius: var(--radius-md);
  text-align: center;
}
.embargo__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--lock-text);
}
.embargo__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--text-muted);
  word-break: keep-all;
}

/* 원본이 따로 있는 글 (velog 등) */
.origin {
  margin-top: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.origin a { color: var(--text-muted); border-bottom: 1px solid var(--border-strong); }
.origin a:hover { color: var(--accent); }

/* 시리즈 안내 */
.series {
  margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.series__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.series__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.series__item + .series__item { margin-top: var(--space-2); }
.series__item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  word-break: keep-all;
}
.series__item.is-current { color: var(--text-strong); font-weight: 600; }
.series__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--count); margin-right: var(--space-3); }
.series__total { color: var(--count); }
.series__gap { color: var(--text-faint); }
.series__gap a { border-bottom: 1px solid var(--border-strong); }
.series__gap a:hover { color: var(--accent); }

/* 태그가 링크가 되면서 필요한 hover */
a.tag--tech:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
a.tag--env:hover { color: var(--text-strong); }

/* ── 바깥 사이트 링크 ───────────────────────────────────────
   헤더 네비 끝의 ↗ 링크와, 분류 페이지 상단 안내 카드.
   내용은 src/config/site.ts 의 EXTERNAL_LINKS 에서 옵니다. */
.nav__ext {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-muted);
}
.nav__ext:hover { color: var(--accent); }
.nav__ext-lock { font-size: var(--text-xs); }
.nav__ext-arrow { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-faint); }
.nav__ext:hover .nav__ext-arrow { color: var(--accent); }

.ext-card {
  display: block;
  max-width: var(--measure);
  margin: var(--space-7) 0 0;
  padding: var(--space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.ext-card:hover { border-color: var(--accent); color: inherit; }
.ext-card__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ext-card__lock {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--lock-text);
  border: 1px solid var(--lock-border);
  background: var(--lock-bg);
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.ext-card__title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  word-break: keep-all;
}
.ext-card__note {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--text-muted);
  word-break: keep-all;
}
.ext-card__url {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}

/* 활성 칩 */
.chip.is-active {
  color: var(--text-strong);
  border-color: var(--accent);
}

/* 빈 상태 */
.empty {
  padding: var(--space-9) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-faint);
}

/* 검색 화면 */
.search-result__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-bottom: var(--space-5);
}
.search-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-faint);
  line-height: var(--leading-loose);
  word-break: keep-all;
}
mark.hit { background: none; color: var(--accent); }

/* 태그 목록 화면 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); }
.tag-cloud__item { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.tag-cloud__count { font-size: var(--text-2xs); color: var(--text-faint); }

/* 푸터 */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-10);
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}
.site-footer a:hover { color: var(--accent); }

/* 접근성 — 키보드 포커스가 보이게 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.search:focus { border-color: var(--accent); }

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 768px) {
  .article-layout--no-toc { grid-template-columns: 1fr; }
  .site-footer .container { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ── 첨부파일 다운로드 카드 (보고서 원본 등) ───────────────── */
.attach {
  max-width: var(--measure);
  margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.attach__head {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.attach__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.attach__item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.attach__item:hover,
.attach__item:focus-visible { border-color: var(--accent); color: inherit; }
.attach__ext {
  flex: none;
  min-width: 4.2em;
  text-align: center;
  padding: 3px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  border: 1px solid var(--accent-divider);
  border-radius: var(--radius-xs);
}
.attach__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attach__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  word-break: keep-all;
}
.attach__note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.attach__arrow {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.attach__item:hover .attach__arrow { color: var(--accent); }