:root{--color-bg: hsl(240, 25%, 97%);--color-surface: hsl(240, 20%, 93%);--color-text: hsl(240, 35%, 15%);--color-text-secondary: hsl(240, 20%, 45%);--color-accent: hsl(240, 75%, 55%);--color-accent-hover: hsl(240, 75%, 42%);--color-border: hsl(240, 20%, 85%);--color-code-bg: hsl(240, 20%, 92%);color-scheme:light dark}html[data-theme=dark]{--color-bg: hsl(240, 20%, 6%);--color-surface: hsl(240, 20%, 10%);--color-text: hsl(240, 35%, 82%);--color-text-secondary: hsl(240, 28%, 58%);--color-accent: hsl(240, 72%, 75%);--color-accent-hover: hsl(240, 72%, 83%);--color-border: hsl(240, 20%, 18%);--color-code-bg: hsl(240, 22%, 11%)}@font-face{font-family:Iropke Batang;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IropkeBatangM.woff) format("woff"),url(/fonts/IropkeBatangM.ttf) format("truetype")}:root{--radius-sm: 3px;--radius-md: 6px;--transition-color: color .15s ease}html{background-color:var(--color-bg)}body{font-family:Iropke Batang,바탕,Batang,"Noto Serif KR",serif;margin:0;background-color:var(--color-bg);color:var(--color-text);word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.0375em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background-color:var(--color-accent);color:#fff}:where(a,button,[role=button],.post-thumbnail):focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:is(h1,h2,h3,h4,h5,h6){color:var(--color-text);font-weight:400}h1{font-size:1.5rem;line-height:1.4;margin:0 0 1.5rem}h2{font-size:1.25rem;line-height:1.5;margin:2rem 0 1rem}h3{font-size:1.1rem;line-height:1.5;margin:1.5rem 0 .75rem}p{line-height:1.8;margin:0 0 1.5em}a{color:var(--color-accent);text-decoration:none;transition:var(--transition-color);&:hover{color:var(--color-accent-hover)}}time{color:var(--color-text-secondary);font-size:.875rem}blockquote{border-left:3px solid var(--color-accent);margin-left:0;padding-left:1em;color:var(--color-text-secondary)}code{background-color:var(--color-code-bg);padding:.15em .35em;border-radius:var(--radius-sm);font-size:.9em}pre{background-color:var(--color-code-bg);padding:1em;border-radius:var(--radius-md);overflow-x:auto;& code{background-color:transparent;padding:0}}hr{border:none;border-top:1px solid var(--color-border);margin:2rem 0}.container{max-width:38rem;margin:0 auto;padding:6rem 1.5rem;@media(min-width:640px){padding:6rem 2rem}}.site-header{margin-bottom:4rem;display:flex;align-items:center;justify-content:space-between;& a{color:var(--color-text-secondary);font-size:1rem;&:hover{color:var(--color-text)}}}.theme-toggle{background:none;border:none;cursor:pointer;color:var(--color-text-secondary);padding:.25rem;display:flex;align-items:center;justify-content:center;transition:var(--transition-color);&:hover{color:var(--color-text)}}.icon-sun{display:none}.icon-moon,html[data-theme=dark] .icon-sun{display:block}html[data-theme=dark] .icon-moon{display:none}html.theme-transitioning{&::view-transition-old(root),&::view-transition-new(root){animation:none;mix-blend-mode:normal}&::view-transition-old(root){z-index:1}&::view-transition-new(root){z-index:9999;animation:theme-circle-expand .5s ease-out}}@keyframes theme-circle-expand{0%{clip-path:circle(0px at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%))}to{clip-path:circle(var(--theme-transition-radius, 150%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%))}}article{line-height:1.85}.post-meta{display:flex;align-items:center;gap:.75em;margin-bottom:2rem;& time{display:block}}.view-counter{color:var(--color-text-secondary);font-size:.875rem;&:before{content:"·";margin-right:.75em}}.post-bottom-nav{display:flex;justify-content:space-between;align-items:flex-start;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--color-border);& time{color:inherit;font-size:.8rem}}.post-bottom-nav-link{display:flex;align-items:center;gap:.4em;color:var(--color-text-secondary);transition:var(--transition-color);&:hover{color:var(--color-text)}}.post-bottom-nav-next{margin-left:auto}.post-side-nav{position:fixed;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:2.5rem;height:3.5rem;color:var(--color-text-secondary);opacity:0;transition:opacity .3s ease,color .2s ease,transform .3s ease,visibility .3s ease;& svg{transition:transform .3s ease}&:hover{opacity:.7;color:var(--color-text);& svg{transform:scale(1.2)}}&:focus-visible{opacity:.7}@media(min-width:960px){display:flex;opacity:.35}}.post-side-nav-prev{left:max(1rem,calc((100vw - 38rem)/2 - 4rem));&:hover{transform:translateY(-50%) translate(3px)}}.post-side-nav-next{right:max(1rem,calc((100vw - 38rem)/2 - 4rem));&:hover{transform:translateY(-50%) translate(-3px)}}@media(min-width:960px){html[data-bottom-nav-visible] .post-side-nav-prev{opacity:0;transform:translateY(calc(-50% + 2rem)) translate(.5rem);visibility:hidden}html[data-bottom-nav-visible] .post-side-nav-next{opacity:0;transform:translateY(calc(-50% + 2rem)) translate(-.5rem);visibility:hidden}}article>*{animation:stagger-enter .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(min(var(--i, 0),8)*60ms)}article[data-nav=forward]>*{animation-name:stagger-enter-right}article[data-nav=back]>*{animation-name:stagger-enter-left}@keyframes stagger-enter{0%{opacity:0;translate:0px 3px}}@keyframes stagger-enter-right{0%{opacity:0;translate:3px 3px}}@keyframes stagger-enter-left{0%{opacity:0;translate:-3px 3px}}.post-list{list-style:none;margin:0;padding:0;& li{margin-bottom:.75em}}.post-group{margin-bottom:3rem}.post-group-date{font-size:.875rem;color:var(--color-text-secondary);margin:0 0 1rem;font-weight:400}.topics{margin-left:.5em}.topic{color:var(--color-text-secondary);font-size:.85em;&:before{content:"#"}+&{margin-left:.3em}}.post-thumbnails{display:flex;gap:.375em;margin-left:auto}.post-thumbnail{width:2.75rem;height:3.5rem;object-fit:cover;object-position:top;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--color-border);transition:opacity .15s ease;display:block;&:hover{opacity:.75}}article p>img{display:none}.image-lightbox{border:none;padding:0 0 .5em;background:transparent;max-width:90vw;max-height:90vh;max-height:90dvh;&[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}&::backdrop{background:#000c}& img{max-width:90vw;max-height:80vh;max-height:80dvh;object-fit:contain;display:block}}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:1em;padding-top:.75em}.lightbox-nav{background:none;border:none;color:#ffffffb3;font-size:1.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem;transition:var(--transition-color);&:hover{color:#fff}}.lightbox-counter{color:#fff9;font-size:.875rem;font-variant-numeric:tabular-nums}.notebook-container{position:relative;width:100vw;margin-left:calc(-50vw + 50%);height:100vh;min-height:100vh;display:flex;align-items:center;justify-content:center;margin-top:-2rem}.notebook-hovered{cursor:grab}.notebook-dragging{cursor:grabbing}.notebook-canvas{width:100%;height:100%;display:block}.notebook-opening{pointer-events:none}.notebook-opening .notebook-hint{opacity:0!important}.notebook-fade .notebook-canvas{opacity:0;transition:opacity .3s ease}