/*
   색·글꼴·크기는 CSS 변수로만 쓴다. 값은 Admin "디자인" 메뉴에서 정하고, _Layout이 페이지 머리에 <style>로 넣는다
   (Horanglab.Core/Theming/ThemeCss.cs — 밝게/어둡게, 강조 블록 tone-* 색 포함). 아래는 그 <style>이 없을 때의 기본값.
*/
:root {
    --bg: #ffffff; --surface: #f5f5f7; --fg: #1d1d1f; --muted: #6e6e73; --border: #d2d2d7;
    --accent: #8b6b47; --accent-soft: #f3eee7; --code-bg: #f5f5f7; --on-accent: #ffffff;
    --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
    --font-heading: var(--font-body);
    --font-code: ui-monospace, "SF Mono", Consolas, "D2Coding", monospace;
    --font-scale: 106.25%; --content-width: 760px; --radius: 12px;
    --tone-default: #8c959f; --tone-default-soft: #f6f8fa; --tone-info: #0969da; --tone-info-soft: #ddf4ff;
    --tone-tip: #1a7f37; --tone-tip-soft: #dafbe1; --tone-warning: #bc4c00; --tone-warning-soft: #fff1e5;
    --tone-danger: #cf222e; --tone-danger-soft: #ffebe9;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: var(--font-scale); }

body {
    margin: 0;
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.01em; }

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.skip-link:focus { top: 12px; text-decoration: none; }

/* header / footer */
.site-header {
    position: sticky; top: 0; z-index: 10; padding: 12px 0;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.brand { color: var(--fg); font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 8px; }
.brand img { border-radius: var(--radius); }
.brand span { color: var(--muted); font-weight: 400; }
.brand:hover { text-decoration: none; }
.site-header .wrap-wide { display: flex; align-items: center; gap: 12px; }
.site-header .site-nav { margin-left: auto; }
.site-nav { display: flex; gap: clamp(12px, 3vw, 24px); font-size: 0.875rem; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--fg); text-decoration: none; }
/* 좁은 화면: 작은 링크도 손가락으로 누를 수 있게 */
@media (max-width: 600px) {
    .site-nav a { display: inline-block; padding: 10px 4px; }
    .brand { padding: 6px 0; }
    .tag, .category-link, .facet-category { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
    .post-title { display: block; padding: 4px 0; }
    .home-recent a, .home-more a { display: block; padding: 6px 0; }
    .pager a { display: inline-block; padding: 10px 6px; }
}
/* 아주 좁은 화면: 로고와 메뉴가 한 줄에 들어가도록 'archive' 글자를 뺀다(가로 스크롤 방지) */
@media (max-width: 400px) { .brand span { display: none; } }

.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 16px 0; color: var(--muted); font-size: 0.78rem; line-height: 1.6; }
.site-footer .wrap-wide { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.site-stats b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-views b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* list */
.page-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 28px; }
/* 홈 */
.home-intro { margin-bottom: 36px; }
.home-intro .page-title { margin-bottom: 8px; }
.home-intro p { margin: 0; color: var(--muted); }
.home-section { margin-bottom: 40px; }
.home-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }
.home-topics, .home-projects, .home-recent { list-style: none; margin: 0; padding: 0; }
/* 남는 칸을 나눠 가져 마지막 줄에 카드 하나만 작게 남지 않는다 */
.home-topics { display: flex; flex-wrap: wrap; gap: 10px; }
.home-topics li { flex: 1 1 190px; }
@media (max-width: 600px) { .home-topics li { flex-basis: 140px; } }
.home-topics a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.home-topics a:hover { text-decoration: none; border-color: var(--accent); }
.home-topics span { color: var(--muted); font-size: 0.82rem; }
.home-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.home-projects a { display: flex; flex-direction: column; gap: 8px; color: var(--fg); }
.home-projects a:hover { text-decoration: none; color: var(--accent); }
.home-projects img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.home-projects b { font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.home-recent li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.home-recent a { color: var(--fg); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.home-recent-meta { display: inline-flex; gap: 10px; flex: none; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 600px) { .home-recent li { flex-direction: column; gap: 2px; } }
.home-more { margin: 14px 0 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 20px 0; border-bottom: 1px solid var(--border); }
.post-list li.has-thumb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 28px); align-items: center; }
.post-item-text { min-width: 0; }
.post-thumb {
    display: block; flex: none; width: var(--thumb-w, 160px); aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: min(var(--radius), 14px); background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.post-list li:hover .post-thumb img { transform: scale(1.03); }
@media (max-width: 600px) { .post-list { --thumb-w: 96px; } .post-list li.has-thumb { align-items: start; } }
@media (prefers-reduced-motion: reduce) { .post-thumb img { transition: none; } }
.post-list li:first-child { padding-top: 0; }
.post-title { color: var(--fg); font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.post-summary { margin: 6px 0 0; color: var(--muted); }
.post-meta { color: var(--muted); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tag { background: var(--accent-soft); color: var(--fg); padding: 0 10px; border-radius: 999px; font-size: 0.78rem; }
.empty { color: var(--muted); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; color: var(--muted); }

/* post */
.post-header h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.75rem); line-height: 1.22; letter-spacing: -0.025em; margin: 0 0 12px; }
.post-header { margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.post-body h2 { font-size: 1.4rem; margin-top: 2.2em; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.post-body h3 { font-size: 1.15rem; margin-top: 1.8em; }
.post-body img { max-width: 100%; height: auto; }
.post-body blockquote { margin: 1em 0; padding: 0 1em; color: var(--muted); border-left: 4px solid var(--border); }
.post-body :not(pre) > code {
    background: var(--code-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.post-body pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.55;
}
.post-body pre code.hljs, .post-body pre code { display: block; padding: 14px 16px; background: transparent; }
/* highlight.js github 테마는 코드 배경에서 대비가 낮은 색이 있어 밝은 화면만 진하게 */
@media (prefers-color-scheme: light) {
    .post-body .hljs-keyword, .post-body .hljs-type, .post-body .hljs-doctag, .post-body .hljs-template-tag, .post-body .hljs-template-variable, .post-body .hljs-variable.language_ { color: #c21c2c; }
    .post-body .hljs-built_in, .post-body .hljs-symbol, .post-body .hljs-attr.language_ { color: #b04a00; }
    .post-body .hljs-comment, .post-body .hljs-code, .post-body .hljs-formula { color: #5a6472; }
}
.post-body code, .post-body pre { font-family: var(--font-code); }
.post-body table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.post-body th, .post-body td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.post-body th { background: var(--code-bg); }

/* blocks: image */
.block-image { margin: 1.6em 0; }
/* 전체 폭: 작은 원본을 키우지 않는다. 세로로 긴 그림은 읽히도록 높이를 묶지 않는다 */
.block-image img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius); }
.block-image:not(.size-full) img { width: 100%; }
.block-image.align-left img { margin-left: 0; }
.block-image.align-right img { margin-right: 0; }
.block-image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.block-image.size-four-fifths { width: 80%; }
.block-image.size-three-fifths { width: 60%; }
.block-image.size-two-fifths { width: 40%; }
.block-image.size-one-fifth { width: 20%; }
.block-image.align-center { margin-left: auto; margin-right: auto; }
.block-image.align-left { margin-right: auto; }
.block-image.align-right { margin-left: auto; }
@media (max-width: 600px) {
    .block-image.size-four-fifths, .block-image.size-three-fifths { width: 100%; }
    .block-image.size-two-fifths { width: 60%; }
    .block-image.size-one-fifth { width: 30%; }
}

/* blocks: code — 줄 번호(gutter)와 강조 띠(code-mark)는 <code> 밖에 있다 */
.block-code { margin: 1.4em 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); }
.code-header {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 14px; border-bottom: 1px solid var(--border);
    font-family: var(--font-code); font-size: 0.8rem; color: var(--muted);
}
.code-file { font-weight: 600; color: var(--fg); }
.code-lang { margin-left: auto; }
.code-body { display: flex; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; }
.post-body .block-code pre { margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; font-size: inherit; line-height: inherit; }
.post-body .block-code .code-gutter {
    flex: none; padding: 14px 10px 14px 14px; text-align: right;
    color: var(--muted); border-right: 1px solid var(--border); user-select: none;
}
.post-body .block-code .code-pre { flex: 1 0 auto; position: relative; }
.post-body .block-code .code-pre code { position: relative; }
.code-mark {
    position: absolute; left: 0; right: 0; height: 1.55em;
    top: calc(14px + var(--line) * 1.55em);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* blocks: gallery — 썸네일 정사각 격자, 누르면 원본(lightbox) */
.block-gallery { margin: 1.6em 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.block-gallery.cols-2 { --cols: 2; }
.block-gallery.cols-3 { --cols: 3; }
.block-gallery.cols-4 { --cols: 4; }
.gallery-item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--code-bg); }
.block-gallery.portrait .gallery-item { aspect-ratio: 9 / 16; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.03); }
.block-gallery figcaption, .block-video figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--muted); text-align: center; }
@media (max-width: 600px) {
    .block-gallery.cols-3, .block-gallery.cols-4 { --cols: 2; }
}

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lightbox-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); object-fit: contain; border-radius: 4px; }
.lightbox button {
    position: fixed; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem; line-height: 1;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .28); }
.lightbox .lb-close { top: 16px; right: 16px; }
.lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 0.85rem; }

/* blocks: video — 유튜브는 16:9 틀, 파일은 원래 비율 */
.block-video { margin: 1.6em 0; }
.block-video video { display: block; width: 100%; max-height: 80vh; border-radius: var(--radius); background: #000; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* blocks: file */
.block-files { list-style: none; margin: 1.4em 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.block-files li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.block-files li + li { border-top: 1px solid var(--border); }
.block-files a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.block-files .file-name { overflow-wrap: anywhere; }
.block-files .file-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.block-files .file-size { margin-left: auto; flex: none; color: var(--muted); font-size: 0.85rem; }

/* blocks: quote / callout / summary — 색은 tone-* 클래스가 --tone, --tone-soft로 정한다 */
.tone-default { --tone: var(--tone-default); --tone-soft: var(--tone-default-soft); }
.tone-info { --tone: var(--tone-info); --tone-soft: var(--tone-info-soft); }
.tone-tip { --tone: var(--tone-tip); --tone-soft: var(--tone-tip-soft); }
.tone-warning { --tone: var(--tone-warning); --tone-soft: var(--tone-warning-soft); }
.tone-danger { --tone: var(--tone-danger); --tone-soft: var(--tone-danger-soft); }

.block-quote { margin: 1.6em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--tone); }
.post-body .block-quote blockquote { margin: 0; padding: 0; border: 0; color: var(--fg); font-size: 1.05rem; }
.block-quote blockquote > :first-child { margin-top: 0; }
.block-quote blockquote > :last-child { margin-bottom: 0; }
.block-quote figcaption { margin-top: 8px; color: var(--muted); font-size: 0.9rem; }
.block-quote cite { font-style: normal; }

.block-callout { margin: 1.4em 0; padding: 12px 16px; border-left: 4px solid var(--tone); border-radius: var(--radius); background: var(--tone-soft); }
.callout-title { margin: 0; font-weight: 700; color: var(--tone); }
.callout-body > :first-child { margin-top: 4px; }
.callout-body > :last-child { margin-bottom: 0; }

.block-summary { margin: 1.4em 0 2em; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.summary-title { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.summary-body > :first-child { margin-top: 0; }
.summary-body > :last-child { margin-bottom: 0; }

/* blocks: collapse — <details> */
.block-collapse { margin: 1.4em 0; border: 1px solid var(--border); border-radius: var(--radius); }
.block-collapse > summary {
    padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none;
    display: flex; align-items: center; gap: 8px;
}
.block-collapse > summary::-webkit-details-marker { display: none; }
.block-collapse > summary::before {
    content: ""; flex: none; width: 0; height: 0; border-style: solid;
    border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--muted); transition: transform .15s;
}
.block-collapse[open] > summary::before { transform: rotate(90deg); }
.block-collapse > summary:hover { background: var(--code-bg); }
.block-collapse[open] > summary { border-bottom: 1px solid var(--border); }
.collapse-body { padding: 4px 16px; }
.collapse-body > :first-child { margin-top: 12px; }

/* blocks: link card */
.block-link {
    display: flex; margin: 1.4em 0; min-height: 96px; overflow: hidden; color: inherit;
    border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s;
}
.post-body a.block-link, .post-body a.block-link:hover { text-decoration: none; }
.block-link:hover, .block-link:focus-visible { border-color: var(--accent); }
.link-media { flex: none; width: 140px; display: flex; align-items: center; justify-content: center; background: var(--code-bg); }
.link-media img { width: 100%; height: 100%; object-fit: cover; max-height: 120px; }
.link-initial { font-size: 2rem; font-weight: 700; color: var(--accent); }
.link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; }
.link-site { font-size: 0.8rem; color: var(--muted); }
.link-title { font-weight: 700; color: var(--fg); line-height: 1.45; }
.link-desc {
    font-size: 0.875rem; color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 600px) {
    .link-media { width: 88px; }
    .link-initial { font-size: 1.5rem; }
}

/* blocks: columns — 좁은 화면(600px 이하)에서는 위아래로 쌓는다 */
.block-columns { display: grid; gap: 24px; margin: 1.4em 0; align-items: start; }
.block-columns.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-columns.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-columns.layout-wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.block-columns.layout-wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.block-columns .column { min-width: 0; }
.block-columns .column > :first-child, .block-columns .column > :first-child > :first-child { margin-top: 0; }
.block-columns .column > :last-child, .block-columns .column > :last-child > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    .block-columns.cols-2, .block-columns.cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* blocks: spacer — 정해진 세 높이, 구분선은 가운데 */
.block-spacer { margin: 0; border: 0; }
.block-spacer.size-small { height: 16px; }
.block-spacer.size-medium { height: 40px; }
.block-spacer.size-large { height: 80px; }
hr.block-spacer.with-divider { background: linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat; }

/* categories */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 0.875rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.category-link { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.category-tree { list-style: none; margin: 0; padding: 0; }
.category-tree li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.category-tree li.depth-0 { font-weight: 700; font-size: 1.05rem; }
.category-tree li.depth-1 { padding-left: 24px; }
.category-tree li.depth-2 { padding-left: 48px; font-size: 0.95rem; }
.category-tree li.depth-1::before, .category-tree li.depth-2::before { content: "└"; color: var(--muted); }
.category-tree .count { margin-left: auto; color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.subcategories { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; padding: 0; }
.subcategories a { display: inline-block; padding: 2px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.875rem; color: var(--fg); }
.subcategories a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* search */
.search-form { display: flex; gap: 8px; margin-bottom: 20px; }
.search-form input {
    flex: 1; min-width: 0; padding: 10px 16px; font: inherit; color: var(--fg); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.search-form button {
    padding: 0 20px; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--accent);
    border: 0; border-radius: 999px; cursor: pointer;
}
.search-form-wrap { margin-bottom: 20px; }
.search-form-wrap .search-form { margin-bottom: 8px; }
.search-filters { font-size: 0.9rem; }
.search-filters summary { cursor: pointer; color: var(--muted); }
.search-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.search-filter-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.8rem; }
.search-filter-grid select, .search-filter-grid input {
    padding: 7px 8px; font: inherit; font-size: 0.9rem; color: var(--fg); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius); min-width: 0;
}
.search-filter-reset { display: inline-block; margin-top: 8px; font-size: 0.85rem; }
.search-facets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.facet-category {
    display: inline-block; padding: 0 10px; border: 1px solid var(--accent); border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--accent);
}
.search-count { color: var(--muted); font-size: 0.875rem; margin: 0 0 8px; }
.search-snippet { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* tags */
.tag-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tag-cloud .tag { display: inline-block; font-size: 0.95rem; padding: 2px 10px; }
.tag-cloud .count { color: var(--muted); font-size: 0.8rem; margin-left: 2px; }

/* table of contents */
.toc { margin: 0 0 28px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 0.925rem; }
.toc summary { cursor: pointer; font-weight: 700; }
.toc ol { list-style: none; margin: 8px 0 2px; padding: 0; }
.toc li { margin: 4px 0; }
.toc li.toc-h3 { padding-left: 16px; font-size: 0.875rem; }
.toc a { color: var(--fg); }
.toc a:hover { color: var(--accent); }
.post-body :is(h2, h3) { scroll-margin-top: calc(var(--header-h) + 16px); }

/* previous / next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.post-nav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); font-weight: 600; }
.post-nav a:hover { border-color: var(--accent); text-decoration: none; }
.post-nav span { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.post-nav-newer { grid-column: 2; text-align: right; }
@media (max-width: 600px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-newer { grid-column: auto; }
}

/* code copy button (js/code.js) */
.has-copy { position: relative; }
.code-copy {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    padding: 2px 10px; font: inherit; font-size: 0.75rem; line-height: 1.6; cursor: pointer;
    color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    opacity: 0; transition: opacity .15s;
}
.has-copy:hover .code-copy, .code-copy:focus-visible, .code-copy.copied { opacity: 1; }
.code-copy:hover { color: var(--fg); border-color: var(--accent); }
.code-copy.copied { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .code-copy { opacity: 1; } }
/* 파일 이름 줄이 있으면 버튼을 그 줄 안에 */
.block-code:has(.code-header) .code-copy { top: 3px; }
.block-code:has(.code-header) .code-lang { margin-right: 56px; }

/* blocks: math (KaTeX) */
.block-math { margin: 1.6em 0; }
.block-math .math.display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.block-math figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.post-body div.math { overflow-x: auto; overflow-y: hidden; margin: 1em 0; }
.katex { font-size: 1.08em; }

.error-page { text-align: center; padding: 48px 0; }
.error-page h1 { font-size: 3rem; margin: 0; }

/* ───────── 화면 배치: 카테고리 | 본문 | 목차 ─────────
   <html>의 layout-three / layout-two / layout-one(디자인 메뉴)과 화면 폭으로 칸을 정한다.
   1280px 이상: 세 칸(두 칸 배치는 본문 | 목차), 960~1280px: 카테고리 | 본문(목차는 본문 위),
   960px 미만: 본문만(카테고리는 메뉴 서랍). 옆 칸 접기는 left-collapsed / right-collapsed(js/layout.js) */
:root {
    --shell-w: var(--content-width);
    --header-h: 56px; --side-left: 232px; --side-right: 216px; --rail: 40px; --shell-gap: clamp(32px, 3vw, 56px);
    --left-w: var(--side-left); --right-w: var(--side-right);
}
html.left-collapsed { --left-w: var(--rail); }
html.right-collapsed { --right-w: var(--rail); }

/* 머리글·푸터의 안쪽 폭 = 지금 보이는 칸들의 폭(--shell-w: 배치·화면 폭·접은 상태에 따라). 양끝이 본문 칸들과 맞는다 */
.wrap-wide {
    max-width: calc(var(--shell-w) + 2 * clamp(16px, 4vw, 24px));
    margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); transition: max-width .2s ease;
}
/* 본문이 짧아도 푸터는 화면 맨 아래(body가 세로 flex) */
.site-footer { margin-top: auto; }
.page-shell { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.page-shell {
    display: grid; grid-template-columns: minmax(0, var(--content-width)); grid-template-areas: "main";
    justify-content: center; column-gap: var(--shell-gap); padding: 0 clamp(16px, 4vw, 24px);
    transition: grid-template-columns .2s ease;
}
.page-main { grid-area: main; min-width: 0; padding-top: clamp(28px, 5vw, 56px); padding-bottom: 80px; min-height: 60vh; }
.side-left { grid-area: left; }
.side-right { grid-area: right; }
.side {
    display: none; position: sticky; top: var(--header-h); align-self: start;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 0 32px; font-size: 0.875rem; line-height: 1.5; scrollbar-width: thin;
}

@media (min-width: 960px) {
    html.layout-three { --shell-w: calc(var(--left-w) + var(--shell-gap) + var(--content-width)); }
    .layout-three .page-shell { grid-template-columns: var(--left-w) minmax(0, var(--content-width)); grid-template-areas: "left main"; }
    .layout-three .side-left { display: block; }
}
@media (min-width: 1280px) {
    html.layout-three { --shell-w: calc(var(--left-w) + var(--content-width) + var(--side-right) + 2 * var(--shell-gap)); }
    html.layout-three:has(.page-shell.has-aside) { --shell-w: calc(var(--left-w) + var(--content-width) + var(--right-w) + 2 * var(--shell-gap)); }
    html.layout-two:has(.page-shell.has-aside) { --shell-w: calc(var(--content-width) + var(--right-w) + var(--shell-gap)); }
    /* 오른쪽 칸이 없는 페이지도 같은 자리에 빈 칸을 둬서 본문 위치가 페이지마다 흔들리지 않게 */
    .layout-three .page-shell { grid-template-columns: var(--left-w) minmax(0, var(--content-width)) var(--side-right); grid-template-areas: "left main ."; }
    .layout-three .page-shell.has-aside { grid-template-columns: var(--left-w) minmax(0, var(--content-width)) var(--right-w); grid-template-areas: "left main right"; }
    .layout-two .page-shell.has-aside { grid-template-columns: minmax(0, var(--content-width)) var(--right-w); grid-template-areas: "main right"; }
    :is(.layout-three, .layout-two) .has-aside .side-right { display: block; }
    :is(.layout-three, .layout-two) .has-aside .toc-inline { display: none; }
}

/* 접기 버튼과 접힌 띠 */
.side-toggle {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 12px;
    padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.side-left .side-toggle { margin-left: auto; }
.side-toggle:hover, .side-toggle:focus-visible { color: var(--fg); background: var(--surface); border-color: var(--border); }
.side-toggle svg, .nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
html.left-collapsed .side-left .side-toggle svg, html.right-collapsed .side-right .side-toggle svg { transform: rotate(180deg); }
html.left-collapsed .side-left .side-toggle, html.right-collapsed .side-right .side-toggle { margin: 0 auto; }
/* 접힌 칸의 내용은 보이지 않고 Tab 이동에서도 빠진다(display: none) */
html.left-collapsed .side-left .side-body, html.right-collapsed .side-right .side-body { display: none; }

/* 옆 칸 내용 */
.side-profile { margin-bottom: 24px; padding: 0 10px 20px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.side-profile img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; }
.side-profile p { margin: 0; }
.side-profile-name { font-weight: 700; }
.side-profile-bio { margin-top: 4px !important; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.side-profile-links { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.85rem; }
.side-profile-links li { padding: 1px 0; }
.side-section { margin-bottom: 28px; }
.side-heading { margin: 0 0 8px; padding: 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.side-heading a { color: inherit; }
.side-tree, .side-list, .side-toc ol { list-style: none; margin: 0; padding: 0; }
.side-tree a, .side-list a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--fg); }
.side-tree a:hover, .side-list a:hover { background: var(--surface); text-decoration: none; }
/* 하위 카테고리 접기: 이름은 링크, 오른쪽 화살표로 펼친다 */
.side-tree summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: 8px; }
.side-tree summary::-webkit-details-marker { display: none; }
.side-tree summary a { flex: 1; min-width: 0; }
.side-tree summary::after { content: "›"; flex: none; width: 28px; color: var(--muted); text-align: center; transition: transform .15s; }
.side-tree details[open] > summary::after { transform: rotate(90deg); }
.side-tree summary:hover::after { color: var(--fg); }
.side-tree-sub { list-style: none; margin: 0; padding: 0; }
.side-tree .depth-1 a { padding-left: 24px; }
.side-tree .depth-2 a { padding-left: 38px; font-size: 0.95em; }
.side-tree a.in-path { color: var(--accent); }
.side-tree a.current, .side-list a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-list a { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-toc a { display: block; padding: 4px 10px; color: var(--muted); border-left: 2px solid var(--border); }
.side-toc .toc-h3 a { padding-left: 22px; font-size: 0.95em; }
.side-toc a:hover { color: var(--fg); text-decoration: none; }
.side-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.side-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.side-top { display: inline-block; padding: 0 10px; font-size: 0.8rem; color: var(--muted); }

/* 좁은 화면(세 칸 배치): 왼쪽 칸을 메뉴 서랍으로 */
.nav-toggle {
    display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--fg); cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.nav-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .35); }
@media (max-width: 959.98px) {
    .layout-three .nav-toggle { display: inline-flex; }
    html.nav-open .side-left {
        /* 격자 칸의 align-self: start가 남으면 고정 위치여도 내용 높이로 줄어든다 */
        display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px, 85vw); align-self: stretch;
        max-height: none; padding: 20px 16px; background: var(--bg); border-right: 1px solid var(--border);
        box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    }
    html.nav-open .side-left .side-toggle { display: none; }
    html.nav-open .side-left .side-body { display: block; }
    html.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .page-shell, .side-toggle svg, .wrap-wide { transition: none; }
}