:root {
    --bg: #f7f7f8;
    --rail: #f0f0f1;
    --surface: #ffffff;
    --surface-soft: #ececee;
    --line: #dedee2;
    --text: #202123;
    --muted: #565869;
    --faint: #8e8e95;
    --accent: #202123;
    --rail-width: 280px;
    color-scheme: light;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}

/* Context rail and collapsible workspace sidebar */
.sidebar-collapse-control,.sidebar-reopen-control{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.sidebar-collapse-control{position:absolute;top:14px;right:12px;z-index:45}.sidebar-reopen-control{position:fixed;top:11px;left:10px;z-index:70;border:1px solid var(--line);background:var(--rail);opacity:0;pointer-events:none}.sidebar-collapse-control:hover,.sidebar-collapse-control:focus-visible,.sidebar-reopen-control:hover,.sidebar-reopen-control:focus-visible{background:var(--surface-soft);color:var(--text);outline:none}
.context-rail{position:fixed;top:50%;right:12px;z-index:35;width:18px;transform:translateY(-50%)}.context-rail-ticks{display:grid;gap:12px;padding:8px 4px}.context-rail-ticks span{display:block;width:10px;height:2px;margin-left:auto;border-radius:2px;background:var(--faint);opacity:.42;transition:width .14s ease,opacity .14s ease}.context-rail:hover .context-rail-ticks span,.context-rail:focus-within .context-rail-ticks span{width:15px;opacity:.8}.context-rail-popover{position:absolute;top:50%;right:27px;width:310px;max-height:min(72vh,620px);padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 16px 44px rgba(0,0,0,.14);opacity:0;overflow:auto;pointer-events:none;transform:translate(8px,-50%);transition:opacity .15s ease,transform .15s ease;backdrop-filter:blur(16px)}.context-rail:hover .context-rail-popover,.context-rail:focus-within .context-rail-popover{opacity:1;pointer-events:auto;transform:translate(0,-50%)}.context-rail-popover>strong{display:block;margin:0 8px 3px;font-size:13px}.context-rail-popover>p{margin:0 8px 10px;color:var(--faint);font-size:10px}.context-rail .blog-thread-list{max-height:calc(72vh - 70px);overflow:auto}.context-rail .blog-category-children{margin-left:13px}.context-rail .blog-category-posts{margin-left:10px}
@media(min-width:801px){body.sidebar-collapsed .blog-sidebar{transform:translateX(-100%)}body.sidebar-collapsed .blog-main{margin-left:0}body.sidebar-collapsed .article-composer{left:50%;width:min(720px,calc(100% - 48px))}body.sidebar-collapsed .sidebar-reopen-control{opacity:1;pointer-events:auto}.blog-sidebar,.blog-main{transition:transform .2s ease,margin-left .2s ease}}
@media(min-width:801px){body.sidebar-collapsed .blog-topbar{padding-left:48px}}
.sidebar-collapse-control[hidden],.sidebar-reopen-control[hidden]{display:none!important}
@media(max-width:800px){.context-rail,.sidebar-collapse-control,.sidebar-reopen-control{display:none}}
@media(prefers-reduced-motion:reduce){.context-rail-popover,.blog-sidebar,.blog-main{transition:none}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.blog-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 20;
    width: var(--rail-width); display: flex; flex-direction: column;
    padding: 28px 20px 22px; background: var(--rail); border-right: 1px solid var(--line);
    overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--faint) 35%, transparent) transparent;
}
.blog-sidebar::-webkit-scrollbar { width: 5px; }
.blog-sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--faint) 35%, transparent); }
.blog-brand { padding: 0 10px 25px; font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.blog-brand span, .blog-kicker { color: var(--accent); }
.blog-nav { display: flex; flex-direction: column; gap: 4px; padding-top: 25px; }
.blog-index-nav { padding-top: 0; }
.blog-nav-label { padding: 14px 10px 4px; color: var(--faint); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.blog-nav-label:first-child { padding: 0 10px 8px; }
.blog-nav a, .post-back, .category-folder { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 400; }
.blog-nav a i, .post-back i, .category-folder .folder-icon { width: 17px; text-align: center; font-size: 13px; }
.blog-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-nav a:hover, .blog-nav a.active, .category-folder:hover, .category-folder.active { background: #e6e8ed; color: var(--text); }
.category-tree { display: grid; gap: 2px; }
.category-source { display: none !important; }
.category-folder { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.category-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-chevron { width: auto; margin-left: auto; font-size: 9px; opacity: .55; transition: transform .16s ease; }
.category-folder[aria-expanded="false"] .folder-chevron { transform: rotate(-90deg); }
.category-branch { display: grid; gap: 2px; margin-left: 20px; padding-left: 8px; border-left: 1px solid var(--line); }
.category-branch[hidden] { display: none; }
.category-folder-child { min-height: 36px; padding-block: 7px; }
.category-branch-child { margin-left: 17px; }
.blog-nav .category-directory { min-height: 36px; padding: 7px 10px; font-size: 14px; }
.blog-nav .category-directory i { font-size: 13px; }
.blog-nav .category-root-directory { min-height: 44px; margin-top: 2px; padding: 10px; font-size: 14px; }
.blog-nav .category-root-directory i { font-size: 13px; }
.post-toc .toc-h2 { display: grid; grid-template-columns: minmax(0, 1fr); font-weight: 400; }
.post-toc .toc-h2 > i:first-child { width: 17px; }
.post-toc .toc-toggle { display: none; width: 12px; margin-left: 0; justify-self: end; font-size: 9px; opacity: .55; transition: transform .15s ease; }
.post-toc .toc-h2.has-children .toc-toggle { display: block; }
.post-toc .toc-h2.expanded .toc-toggle { transform: rotate(90deg); }
.post-toc .toc-h3 { display: none; min-height: 27px; padding: 4px 10px 4px 20px; color: var(--faint); font-size: 10px; font-weight: 400; }
.post-toc .toc-h3.is-visible { display: flex; }
.toc-child-marker { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: currentColor; opacity: .58; }
.post-toc .toc-h3.active { font-weight: 500; }
.post-back { width: 100%; margin: 0; padding: 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; cursor: pointer; }
.post-back:hover, .post-back:focus-visible { background: var(--surface-soft); color: var(--text); outline: none; }
.blog-profile { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 52px; margin: auto 0 0; padding: 18px 10px 0; border-top: 1px solid var(--line); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
.blog-profile img { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.blog-profile div { min-width: 0; display: flex; flex-direction: column; }
.blog-profile strong { font-size: 13px; line-height: 1.3; font-weight: 700; }.blog-profile span { color: var(--muted); font-size: 11px; line-height: 1.45; font-weight: 400; }
.blog-main { margin-left: var(--rail-width); min-height: 100vh; }
.blog-topbar { position: sticky; top: 0; z-index: 10; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 32px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.blog-topbar > span { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.blog-theme { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }
.blog-menu { display: none; border: 0; background: transparent; color: var(--text); }
.blog-content { width: min(880px, calc(100% - 64px)); margin: 0 auto; padding: 88px 0 110px; }
.blog-hero { max-width: 820px; padding-bottom: 80px; }
.blog-hero.is-filtered { padding-bottom: 40px; }.blog-hero.is-filtered .blog-stats { margin-top: 0; }
.blog-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-hero h1 { margin: 12px 0 20px; font-size: clamp(40px, 4.5vw, 56px); line-height: 1.14; letter-spacing: -.05em; text-wrap: balance; }
.blog-hero p { max-width: 660px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.blog-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--faint); font-size: 11px; }
.blog-stats span { display: inline-flex; align-items: baseline; gap: 6px; }
.blog-stats strong { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.post-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.post-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }.post-section-heading span { color: var(--faint); font-size: 12px; }
.post-heading-tools, .sort-control { display: flex; align-items: center; gap: 8px; }
.search-control { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--faint); }
.search-control:focus-within { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 1px; }
.search-control i { font-size: 10px; }.search-control input { width: 112px; padding: 5px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; }
.search-control input::placeholder { color: var(--faint); }
.sort-control { position: relative; }
.sort-control span { color: var(--faint); font-size: 11px; }
.sort-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 116px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.sort-trigger > span { color: var(--text); }.sort-trigger i { color: var(--faint); font-size: 9px; transition: transform .15s ease; }.sort-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.sort-trigger:hover, .sort-trigger:focus-visible, .sort-trigger[aria-expanded="true"] { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 1px; }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 138px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 34px rgba(28,32,41,.16); }
.sort-menu[hidden] { display: none; }.sort-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sort-option span { color: inherit; font-size: inherit; }.sort-option i { color: var(--accent); font-size: 10px; }.sort-option:hover, .sort-option:focus-visible, .sort-option[aria-selected="true"] { background: var(--surface-soft); color: var(--text); outline: none; }
.post-list { display: grid; }
.post-card { position: relative; padding: 28px 4px; border-bottom: 1px solid var(--line); }
.post-card[hidden] { display: none; }
.post-card-link { position: absolute; inset: 0; z-index: 1; }
.post-meta { display: flex; gap: 10px; align-items: center; color: var(--faint); font-size: 11px; }
.post-meta > span::before, .post-meta > button::before { content: '·'; margin-right: 10px; color: var(--faint); }
.post-view-count { font-variant-numeric: tabular-nums; }
.post-like-count { font-variant-numeric: tabular-nums; }
.article-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 64px; }.article-header > .post-meta { padding-right: 0; }
.post-like-button, .article-share-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.post-like-button i { font-size: 15px; }.post-like-button strong { min-width: 1ch; font-variant-numeric: tabular-nums; }
.article-share-button i { font-size: 14px; }.post-like-button:hover, .post-like-button:focus-visible, .post-like-button[aria-pressed="true"], .article-share-button:hover, .article-share-button:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-soft); color: var(--accent); outline: none; }
.post-like-button:disabled { cursor: wait; opacity: .65; }
.post-title-row { display: flex; align-items: center; gap: 12px; margin: 9px 0 8px; }
.post-card h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }.post-card p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; }
.post-tech-icon { display: inline-grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 10px; background: var(--surface-soft); color: var(--accent); font-size: 15px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--accent); font-size: 11px; }
.post-read { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 12px; font-weight: 650; }.post-read i { transition: transform .16s ease; }
.post-card:hover .post-read i { transform: translateX(4px); }.post-card:hover h2 { color: var(--accent); }
.pagination { display: flex; justify-content: center; gap: 6px; padding-top: 32px; }
.pagination[hidden] { display: none; }
.pagination button { display: grid; place-items: center; min-width: 38px; min-height: 38px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; }
.pagination button:hover, .pagination button:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
.pagination button[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface-soft); color: var(--accent); font-weight: 700; }
.empty-posts { padding: 45px 0; color: var(--muted); text-align: center; }
.article { width: min(960px, calc(100% - 64px)); margin: 0 auto; padding: 68px 0 96px; }
.article-header { position: relative; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.article-title-row { display: flex; align-items: flex-start; gap: 16px; margin: 12px 0 16px; }
.article-title-row .post-tech-icon { flex-basis: 44px; width: 44px; height: 44px; margin-top: 5px; font-size: 17px; }
.article-header h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.04em; word-break: keep-all; overflow-wrap: normal; text-wrap: pretty; }
.article-header > p { max-width: 680px; margin: 0; color: var(--muted); font-size: 16px; }
.article-body { padding-top: 34px; font-size: 16px; line-height: 1.85; }
.article-body h2 { margin: 32px 0 12px; font-size: 27px; letter-spacing: -.035em; scroll-margin-top: 86px; }.article-body h3 { margin: 20px 0 8px; font-size: 19px; scroll-margin-top: 86px; }
.article-body > h2:first-child { margin-top: 0; }
.article-body p { margin: 0 0 18px; }.article-body ul, .article-body ol { padding-left: 24px; }.article-body li { margin: 6px 0; }
.article-body strong { font-weight: 700; }.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body table { display: block; width: 100%; overflow-x: auto; margin: 28px 0; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 1.55; }
.article-body th, .article-body td { min-width: 130px; padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--surface-soft); color: var(--text); font-weight: 650; white-space: nowrap; }
.article-body td { background: var(--surface); color: var(--muted); }
.code-block-shell { position: relative; min-width: 0; max-width: 100%; margin: 24px 0; overflow: hidden; }
.article-body .code-block-shell pre { overflow-x: auto; width: 100%; max-width: 100%; margin: 0; padding: 48px 16px 14px; border: 1px solid #30323a; border-radius: 12px; background: #16181d; color: #eef0f4; font-size: 13px; line-height: 1.7; -webkit-text-size-adjust: none; text-size-adjust: none; }
.article-body pre > code { display: block; width: max-content; min-width: 100%; padding-right: 72px; }
.code-language-label { position: absolute; top: 15px; left: 16px; z-index: 1; color: #8f96a5; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.code-copy-button { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid #3d404a; border-radius: 7px; background: #22252c; color: #bfc4cf; font-size: 11px; cursor: pointer; }
.code-copy-button:hover, .code-copy-button:focus-visible { border-color: #626875; color: #fff; outline: none; }
.code-copy-button.copied { color: #c3e88d; }
.sidebar-close { display: none; }
.article-body code { font-family: 'SFMono-Regular', Consolas, monospace; }.article-body :not(pre) > code { padding: 2px 6px; border-radius: 5px; background: var(--surface-soft); color: var(--accent); font-size: .88em; }
.highlight { background: transparent; }
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: #7f8797; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: #c792ea; }
.highlight .n, .highlight .na, .highlight .nb, .highlight .nc, .highlight .nf, .highlight .nn { color: #82aaff; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .se, .highlight .sr { color: #c3e88d; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh { color: #f78c6c; }
.highlight .o, .highlight .ow, .highlight .p { color: #89ddff; }
.highlight .err { color: #ff5370; }
.article-body blockquote { margin: 30px 0; padding: 3px 0 3px 20px; border-left: 3px solid var(--accent); color: var(--muted); }
.mermaid-diagram { overflow-x: auto; margin: 28px 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.mermaid-diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.mermaid-error { color: var(--muted); font-size: 13px; text-align: left; white-space: pre-wrap; }
.article-footer { margin-top: 70px; padding-top: 25px; border-top: 1px solid var(--line); }.article-footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.article-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.article-navigation > a, .article-navigation > span { display: flex; min-height: 92px; flex-direction: column; justify-content: center; gap: 5px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.article-navigation small { color: var(--faint); font-size: 11px; }.article-navigation strong { overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.article-navigation a:hover, .article-navigation a:focus-visible { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface-soft); outline: none; }.article-nav-next { text-align: right; }.article-nav-empty { opacity: .58; }
.neural-content { width: min(1080px, calc(100% - 64px)); margin: 0 auto; padding: 64px 0 80px; }
.neural-header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }.neural-header h1 { margin: 8px 0 10px; font-size: clamp(34px, 4vw, 50px); line-height: 1.15; letter-spacing: -.045em; }.neural-header p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; }.neural-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--faint); font-size: 11px; }.neural-legend span { display: inline-flex; align-items: center; gap: 6px; }.legend-node { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }.legend-node.depth-two { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }.legend-line { width: 19px; border-top: 2px solid var(--line); }
.neural-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 55px color-mix(in srgb, var(--text) 7%, transparent); }.neural-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 11px; }.neural-toolbar button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }.neural-toolbar button:hover, .neural-toolbar button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.neural-canvas { position: relative; height: 640px; overflow: hidden; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0, var(--surface) 62%); }.neural-canvas svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }.neural-canvas svg:active { cursor: grabbing; }.neural-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 13px; }.neural-status[hidden] { display: none; }.neural-links line { stroke: color-mix(in srgb, var(--muted) 32%, transparent); stroke-width: .8; transition: opacity .2s ease; }.neural-links line[data-link-type="category"] { stroke: color-mix(in srgb, var(--accent) 50%, var(--line)); stroke-width: 1.45; }.neural-node { cursor: pointer; outline: none; transition: opacity .2s ease; }.neural-node.is-dimmed, .neural-links line.is-dimmed { opacity: .1; }.neural-node circle { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 40%, var(--surface)); stroke-width: 3; vector-effect: non-scaling-stroke; transition: filter .18s ease, opacity .18s ease; }.neural-category circle { fill: var(--surface); stroke-width: 4; }.neural-node text { opacity: 0; fill: var(--muted); font: 500 10px 'Noto Sans KR', sans-serif; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; transition: opacity .22s ease; }.neural-category text { opacity: 1; fill: var(--text); font-weight: 700; }.neural-canvas svg.show-labels .neural-node text, .neural-node:hover text, .neural-node:focus-visible text { opacity: 1; }.neural-node:hover circle, .neural-node:focus-visible circle { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 72%, transparent)); }.neural-color-1 circle { fill: #5f8fca; stroke: #5f8fca55; }.neural-category.neural-color-1 circle { fill: var(--surface); stroke: #5f8fca; }.neural-color-2 circle { fill: #b9789d; stroke: #b9789d55; }.neural-category.neural-color-2 circle { fill: var(--surface); stroke: #b9789d; }.neural-color-3 circle { fill: #bc7d56; stroke: #bc7d5655; }.neural-category.neural-color-3 circle { fill: var(--surface); stroke: #bc7d56; }.neural-color-4 circle { fill: #5e9d82; stroke: #5e9d8255; }.neural-category.neural-color-4 circle { fill: var(--surface); stroke: #5e9d82; }.neural-color-5 circle { fill: #9176c7; stroke: #9176c755; }.neural-category.neural-color-5 circle { fill: var(--surface); stroke: #9176c7; }.neural-color-6 circle { fill: #aa8a49; stroke: #aa8a4955; }.neural-category.neural-color-6 circle { fill: var(--surface); stroke: #aa8a49; }.neural-color-7 circle { fill: #7484a8; stroke: #7484a855; }.neural-category.neural-color-7 circle { fill: var(--surface); stroke: #7484a8; }
.dark-theme { --bg: #171717; --rail: #1f1f1f; --surface: #242424; --surface-soft: #2c2c2c; --line: #383838; --text: #f2f2f2; --muted: #b4b4b4; --faint: #808080; --accent: #f2f2f2; color-scheme: dark; }
.dark-theme .blog-nav a:hover, .dark-theme .blog-nav a.active, .dark-theme .category-folder:hover, .dark-theme .category-folder.active { background: #454642; color: var(--text); }
.dark-theme .blog-topbar { background: rgba(41,42,40,.9); }.dark-theme .blog-theme { border-color: #4e4f4b; }
@media (max-width: 800px) {
    :root { --rail-width: 0px; }
    .blog-sidebar { width: 280px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
    .menu-open .blog-sidebar { transform: translateX(0); box-shadow: 18px 0 45px rgba(25,29,38,.16); }
    .sidebar-close { position: absolute; top: 18px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
    .sidebar-close:hover, .sidebar-close:focus-visible { background: var(--surface-soft); outline: none; }
    .blog-main { margin-left: 0; }.blog-topbar { height: 62px; padding: 0 16px; }.blog-menu { display: block; }
    .blog-content, .article { width: min(100% - 32px, 960px); padding-top: 55px; }
    .blog-hero { padding-bottom: 58px; }.blog-hero.is-filtered { padding-bottom: 32px; }.blog-hero h1 { font-size: 40px; }
    .article-header h1 { font-size: 32px; }.article-body { min-width: 0; font-size: 15px; }.article-body .code-block-shell pre { font-size: 12px; line-height: 1.65; }
    .post-card { padding: 24px 4px; }.post-title-row { align-items: flex-start; gap: 10px; margin: 8px 0 7px; }.post-card h2 { font-size: 20px; line-height: 1.38; letter-spacing: -.025em; }.post-tech-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }
    .article-title-row { gap: 12px; }.article-title-row .post-tech-icon { flex-basis: 38px; width: 38px; height: 38px; margin-top: 3px; font-size: 15px; }
    .post-section-heading { align-items: stretch; flex-direction: column; }.post-heading-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width: 100%; }.post-count { grid-row: 1; grid-column: 1 / -1; }.search-control { grid-row: 2; grid-column: 1; min-width: 0; }.search-control input { width: 100%; min-width: 0; }.sort-control { grid-row: 2; grid-column: 2; min-width: 0; }.sort-control > span { display: none; }
    .sort-trigger { width: 100%; min-width: 0; }.sort-menu { right: 0; left: 0; width: 100%; }.article-navigation { grid-template-columns: 1fr; }.article-nav-next { text-align: left; }
    .article-actions { justify-content: flex-start; margin-top: 48px; }.post-like-button, .article-share-button { min-height: 44px; }
    .neural-content { width: calc(100% - 32px); padding: 48px 0 56px; }.neural-header { align-items: flex-start; flex-direction: column; gap: 18px; }.neural-header h1 { font-size: 34px; }.neural-legend { justify-content: flex-start; }.neural-canvas { height: 520px; }.neural-node text { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }

/* Same-origin page transitions: portfolio ↔ blog */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: 140ms cubic-bezier(.4, 0, 1, 1) both page-transition-out;
    }

    ::view-transition-new(root) {
        animation: 220ms cubic-bezier(0, 0, .2, 1) both page-transition-in;
    }
}

@keyframes page-transition-out {
    to { opacity: 0; transform: translateY(-3px); }
}

@keyframes page-transition-in {
    from { opacity: 0; transform: translateY(5px); }
}

/* Codex-style blog workspace */
:root { --rail-width: var(--app-sidebar-width, 244px); }
.blog-sidebar { padding: 16px 12px 14px; overflow: hidden; }
.sidebar-resizer { position: absolute; inset: 0 0 0 auto; z-index: 40; width: 7px; cursor: col-resize; touch-action: none; outline: none; }
.sidebar-resizer::after { content: ''; position: absolute; inset: 0 auto 0 3px; width: 1px; background: transparent; transition: background-color .15s ease; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after, .sidebar-resizing .sidebar-resizer::after { background: var(--muted); }
.sidebar-resizing { cursor: col-resize; user-select: none; }
.blog-brand { display: flex; align-items: center; gap: 7px; padding: 5px 8px 18px; font-family: inherit; font-size: 15px; font-weight: 650; }
.blog-brand i { color: var(--faint); font-size: 9px; }
.blog-nav { min-height: 0; flex: 1; gap: 2px; padding-top: 0; overflow: hidden; }
.blog-nav-label { padding: 14px 9px 4px; font-size: 11px; }
.blog-nav-label:first-child { padding: 0 9px 5px; }
.blog-nav > a, .blog-thread-item { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 6px 9px; border-radius: 8px; color: var(--muted); font-size: 12px; }
.blog-nav > a i, .blog-thread-item i { flex: 0 0 15px; width: 15px; color: var(--muted); font-size: 11px; text-align: center; }
.blog-thread-list { min-height: 0; display: grid; gap: 1px; overflow-y: auto; scrollbar-width: none; }
.blog-thread-list::-webkit-scrollbar { display: none; }
.blog-thread-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-category-group { min-width: 0; }
.blog-category-group summary { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 34px; padding: 6px 9px; border-radius: 8px; color: var(--muted); font-size: 11px; cursor: pointer; list-style: none; }
.blog-category-group summary::-webkit-details-marker { display: none; }
.blog-category-group summary:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.blog-category-group summary i { width: 15px; text-align: center; }
.blog-category-group summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-category-group summary small { color: var(--faint); font-size: 9px; font-variant-numeric: tabular-nums; }
.blog-category-group[open] summary i::before { content: '\f07c'; }
.blog-category-node { min-width: 0; }
.blog-category-node > summary { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 34px; padding: 6px 9px; border-radius: 8px; color: var(--muted); font-size: 11px; cursor: pointer; list-style: none; }
.blog-category-node > summary::-webkit-details-marker { display: none; }
.blog-category-node > summary:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.blog-category-node > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-category-node > summary small { color: var(--faint); font-size: 9px; font-variant-numeric: tabular-nums; }
.blog-category-node[open] > summary i::before { content: '\f07c'; }
.blog-category-children { margin-left: 15px; padding-left: 5px; border-left: 1px solid var(--line); }
.blog-category-posts { display: grid; gap: 1px; margin: 1px 0 4px 17px; padding-left: 8px; border-left: 1px solid var(--line); }
.blog-category-posts .blog-thread-item { min-height: 31px; padding: 5px 8px; font-size: 11px; }
.blog-nav > a:hover, .blog-thread-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.blog-nav > a.active, .blog-thread-item.active { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-weight: 600; }
.blog-profile { min-height: 46px; margin-top: 10px; padding: 13px 8px 0; }
.blog-profile img { flex-basis: 30px; width: 30px; height: 30px; }
.blog-profile strong { font-size: 12px; }
.blog-profile span { font-size: 10px; }
.blog-topbar { height: 50px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 96%, transparent); }
.blog-topbar > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.blog-theme { width: 34px; height: 34px; border: 0; background: transparent; }
.blog-theme:hover { background: var(--surface-soft); }
.blog-empty-state { min-height: calc(100vh - 50px); width: min(720px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 0 90px; text-align: center; }
.blog-empty-mark, .blog-turn-avatar { display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.blog-empty-mark { width: 42px; height: 42px; margin-bottom: 22px; border-radius: 50%; font-size: 17px; }
.blog-empty-state h1 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 38px); line-height: 1.25; letter-spacing: -.04em; }
.blog-empty-state > p { max-width: 560px; margin: 0; color: var(--muted); font-size: 14px; }
.blog-prompt-box { width: min(680px, 100%); min-height: 96px; margin-top: 38px; padding: 16px 18px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.blog-prompt-box > span { color: var(--muted); font-size: 13px; }
.blog-prompt-box .blog-stats { margin: 10px 0 0; }
.blog-recent-posts{width:100%;display:grid;gap:2px;margin-top:9px}.blog-recent-posts a{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:37px;padding:7px 8px;border-radius:8px;color:var(--muted);font-size:12px}.blog-recent-posts a:hover,.blog-recent-posts a:focus-visible{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);outline:none}.blog-recent-posts i{font-size:10px;text-align:center}.blog-recent-posts a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.blog-recent-posts time{color:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}
.article-thread { width: min(880px, calc(100% - 56px)); margin: 0 auto; padding: 42px 0 150px; }
.blog-user-turn, .blog-assistant-turn { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.blog-user-turn { max-width: 760px; margin: 0 auto 34px; }
.blog-assistant-turn { max-width: 820px; margin: 0 auto; }
.blog-turn-avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.blog-turn-avatar.assistant { border-color: var(--text); background: var(--text); color: var(--bg); }
.blog-user-turn small { display: block; margin: 2px 0 7px; color: var(--faint); font-size: 11px; font-weight: 600; }
.blog-user-turn p { width: fit-content; margin: 0; padding: 0 14px 14px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; }
.blog-assistant-turn .article { width: 100%; margin: 0; padding: 0; }
.article-header { padding-bottom: 28px; }
.article-header h1 { font-size: clamp(30px, 4vw, 44px); }
.article-body { padding-top: 30px; font-size: 15px; }
.article-nav-title { margin: 58px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 18px; letter-spacing: -.02em; }
.article-navigation { margin-top: 0; }
.article-composer { position: fixed; left: calc(var(--rail-width) + (100% - var(--rail-width)) / 2); bottom: 20px; z-index: 12; width: min(720px, calc(100% - var(--rail-width) - 48px)); min-height: 74px; display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--muted); font-size: 13px; box-shadow: 0 12px 36px rgba(0,0,0,.10); transform: translateX(-50%); backdrop-filter: blur(16px); }
.article-composer i { margin-top: 2px; color: var(--faint); font-size: 11px; }
body.dark-theme { --bg: #171717; --rail: #1f1f1f; --surface: #242424; --surface-soft: #2c2c2c; --line: #343434; --text: #f2f2f2; --muted: #b4b4b4; --faint: #808080; color-scheme: dark; }
body.dark-theme .blog-turn-avatar.assistant { background: #f2f2f2; color: #171717; }

@media (max-width: 800px) {
    .blog-sidebar { width: 268px; overflow-y: auto; }.sidebar-resizer { display: none; }
    .blog-nav { overflow: visible; }
    .blog-main { margin-left: 0; }
    .blog-empty-state { min-height: calc(100vh - 56px); }
    .article-thread { width: min(100% - 32px, 820px); padding-top: 30px; }
    .article-composer { left: 50%; width: calc(100% - 32px); bottom: 10px; }
}

@media (max-width: 560px) {
    .blog-user-turn, .blog-assistant-turn { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .blog-turn-avatar { width: 27px; height: 27px; }
    .blog-empty-state { width: calc(100% - 32px); }
    .article-header h1 { font-size: 29px; }
}
@media(max-width:800px){.context-rail.blog-context-rail{display:block;top:auto;right:14px;bottom:16px;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.12);transform:none}.blog-context-rail .context-rail-ticks{height:100%;align-content:center;gap:5px;padding:9px}.blog-context-rail .context-rail-ticks span{width:17px;height:2px}.blog-context-rail .context-rail-popover{position:fixed;inset:auto 12px 66px 12px;width:auto;max-height:68vh;transform:translateY(8px)}.blog-context-rail:hover .context-rail-popover,.blog-context-rail:focus-within .context-rail-popover{transform:translateY(0)}.blog-empty-state{justify-content:flex-start;padding-top:54px}.blog-prompt-box{margin-top:28px}}
.blog-context-rail .context-rail-ticks span.active{width:15px;opacity:1;background:var(--text)}
.context-rail-popover{right:18px}.blog-context-rail .context-rail-popover{padding:12px;border-radius:12px;font-weight:400}.blog-context-rail .context-rail-popover>strong{margin:0;padding:5px 9px 8px;color:var(--faint);font-size:10px;font-weight:500}.post-toc a{min-height:32px;padding:6px 9px;border-radius:7px;color:var(--muted);font-size:11px;line-height:1.45;font-weight:400}.post-toc a:hover,.post-toc a:focus-visible{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);outline:none}.post-toc a.active{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);font-weight:500}.post-toc i,.toc-child-marker{display:none!important}