@charset "utf-8";
/* 코드 블록 (keep4n 방식: 언어 헤더 + 복사 + 더보기 + 줄번호) */
:root {
  --code-bg: #f3f4f6; --code-line: #e5e7eb; --code-fg: #1f2937; --code-fg-2: #4b5563;
  --code-fg-strong: #111827; --code-muted: #9ca3af; --code-btn-hover: #dbe0e6;
}
[data-theme="dark"] {
  --code-bg: #1b2433; --code-line: #2a3447; --code-fg: #e5e7eb; --code-fg-2: #cbd5e1;
  --code-fg-strong: #f3f4f6; --code-muted: #6b7280; --code-btn-hover: #334155;
}
.entry-content pre { border-radius: 0; }
/* =========================================================
   Code Block UI
========================================================= */
.codeblock-wrap {
  margin: 1.25rem 0;
  border: 1px solid var(--code-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--code-bg);
}

.codeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: .5rem 1rem 0;
}

.codeblock-header-left,
.codeblock-header-right {
  display: flex;
  align-items: center;
}

.codeblock-header-left {
  gap: 0.55rem;
}

.codeblock-lang {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  color: var(--code-fg-strong);
  letter-spacing: -0.01em;
}

.codeblock-icon {
  display: block;
  flex: 0 0 auto;
}

.codeblock-icon-code {
  color: var(--code-fg-2);
}

.codeblock-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--code-fg-2);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.codeblock-copy-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--code-fg-strong);
}

.codeblock-copy-btn:active {
  transform: scale(0.96);
}

.codeblock-copy-btn.is-copied {
  color: var(--code-fg-2);
}

.codeblock-copy-btn.is-error {
  color: #b91c1c;
}

.codeblock-copy-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   pre / code base
========================================================= */
.codeblock-wrap pre,
pre[data-ke-type="codeblock"],
pre:has(> code.hljs),
pre:has(> code):not(.nocode) {   /* ← :not(.nocode) 추가 */
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.codeblock-wrap pre {
  max-height: 420px;
  overflow: auto;
  transition: max-height 0.28s ease;
}

.codeblock-wrap.is-expanded pre {
  max-height: none;
}

.codeblock-wrap pre code.hljs,
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: .5rem 1.25rem .75rem 1.25rem;
  background: var(--code-bg);
  color: var(--code-fg);
  line-height: 1.7;
  font-size: 14px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco, monospace;
  tab-size: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nocode-wrap {
  margin: 1.25rem 0;
  border: 1px solid var(--code-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--code-bg);
}

.nocode-wrap pre.nocode {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
}

.nocode-wrap pre.nocode > code {
  display: block;
  padding: 1.25rem;
  background: var(--code-bg);
  color: var(--code-fg);
  line-height: 1.7;
  font-size: 14px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco, monospace;
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;
}

/* hljs span 색상 전부 초기화 */
.nocode-wrap pre.nocode > code span {
  color: inherit !important;
  background: transparent !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* 줄번호 table 구조 */
.codeblock-wrap pre code.hljs:has(> table),
pre code.hljs:has(> table) {
  padding: 1rem 0.75rem 1rem 0.5rem;
}

pre code.hljs table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

pre code.hljs table td {
  padding: 0;
  vertical-align: top;
  background: transparent;
}

pre code.hljs table td.hljs-ln-numbers {
  width: 3rem;
  min-width: 3rem;
  padding-right: 0.75rem;
  color: var(--code-muted);
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--code-line);
}

pre code.hljs table td.hljs-ln-code {
  padding-left: 0.9rem;
}

/* =========================================================
   Code Block Expand / Collapse
========================================================= */
.codeblock-footer {
  display: none;
  justify-content: center;
  padding: 0.75rem 1rem 0.5rem;
  background: var(--code-bg);
}

.codeblock-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--code-line);
  color: var(--code-fg-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.codeblock-toggle-btn:hover {
  background: var(--code-btn-hover);
  color: var(--code-fg-strong);
}

.codeblock-toggle-btn:active {
  transform: scale(0.97);
}

.codeblock-wrap:not(.is-expanded) .codeblock-toggle-btn::before {
  content: "더보기";
}

.codeblock-wrap.is-expanded .codeblock-toggle-btn::before {
  content: "접기";
}
/* =========================================================
   highlight.js theme
========================================================= */
.hljs {
  background: var(--code-bg);
  color: var(--code-fg);
}

/* 일반 문자 */
.hljs-subst,
.hljs-punctuation {
  color: var(--code-fg-2);
}

/* 주석 */
.hljs-comment,
.hljs-quote {
  color: #8b949e;
  font-style: italic;
}

/* 키워드 / 제어문 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #b45309;
  font-weight: 600;
}

/* 이름 / 내장 객체 */
.hljs-name,
.hljs-built_in {
  color: #9a3412;
  font-weight: 600;
}

/* 문자열 */
.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-addition,
.hljs-attribute {
  color: #0f766e;
}

/* 숫자 / 변수 */
.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-template-variable {
  color: #2563eb;
}

/* 함수 / 클래스명 / 섹션 */
.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-function .hljs-title,
.hljs-section {
  color: #7c3aed;
  font-weight: 600;
}

/* 타입 / 파라미터 */
.hljs-type,
.hljs-params {
  color: #92400e;
}

/* 태그 / 선택자 */
.hljs-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #166534;
}

/* 링크 / 메타 */
.hljs-link,
.hljs-meta {
  color: #2563eb;
}

/* 강조 */
.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

/* 삭제 */
.hljs-deletion {
  color: #b91c1c;
  background: #fef2f2;
}

/* 선택 영역 */
.hljs::selection,
.hljs span::selection {
  background: #dbeafe;
  color: inherit;
}

/* 다크 hljs 색 */
[data-theme="dark"] .hljs-comment, [data-theme="dark"] .hljs-quote { color: #7d8590; }
[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-literal { color: #fbbf24; }
[data-theme="dark"] .hljs-name, [data-theme="dark"] .hljs-built_in { color: #fb923c; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-doctag, [data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition, [data-theme="dark"] .hljs-attribute { color: #5eead4; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-symbol, [data-theme="dark"] .hljs-bullet,
[data-theme="dark"] .hljs-variable, [data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-link, [data-theme="dark"] .hljs-meta { color: #7dd3fc; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.function_, [data-theme="dark"] .hljs-title.class_,
[data-theme="dark"] .hljs-function .hljs-title, [data-theme="dark"] .hljs-section { color: #c4b5fd; }
[data-theme="dark"] .hljs-type, [data-theme="dark"] .hljs-params { color: #fdba74; }
[data-theme="dark"] .hljs-tag, [data-theme="dark"] .hljs-selector-id, [data-theme="dark"] .hljs-selector-class,
[data-theme="dark"] .hljs-selector-attr, [data-theme="dark"] .hljs-selector-pseudo { color: #86efac; }
[data-theme="dark"] .hljs-deletion { color: #fca5a5; background: #3b1d1d; }
[data-theme="dark"] .hljs::selection, [data-theme="dark"] .hljs span::selection { background: #1e3a5f; }

/* 줄번호 표 간격 정리: 본문 table 규칙(#article-view table td)에 지지 않도록 ID 포함 */
#article-view table.hljs-ln { width: auto; margin: 0; border: 0; background: transparent; border-collapse: collapse; }
#article-view table.hljs-ln td { padding: 0; border: 0; font-size: inherit; line-height: 1.55; vertical-align: top; background: transparent; }
#article-view table.hljs-ln td.hljs-ln-numbers { width: 1.75rem; min-width: 1.75rem; padding-right: .6rem; text-align: right; }
#article-view table.hljs-ln td.hljs-ln-code { padding-left: .75rem; }
#article-view .codeblock-wrap pre code.hljs { line-height: 1.55; }
#article-view .codeblock-wrap pre code.hljs:has(> table) { padding: .75rem 1rem .75rem .5rem; }

/* 긴 코드는 줄바꿈 대신 가로 스크롤 (모바일 포함) */
#article-view .codeblock-wrap { max-width: 100%; min-width: 0; }
#article-view .codeblock-wrap pre { overflow: auto; white-space: pre; word-break: normal; overflow-wrap: normal; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#article-view .codeblock-wrap pre code.hljs { white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: visible; width: max-content; min-width: 100%; box-sizing: border-box; }
#article-view table.hljs-ln { width: max-content; min-width: 100%; }
#article-view table.hljs-ln td.hljs-ln-code { white-space: pre; }