.bds {
  

  
  --color-bg:         #e4e8e1;   
  --color-surface:    #ffffff;   
  --color-border:     #c6cdc3;   
  --color-text:       #1b1f1a;   
  --color-text-muted: #575f55;   
  --color-link:       #476b4a;   

  
  --color-accent:       #476b4a;  
  --color-accent-ink:   #ffffff;  
  --color-accent-soft:  #cfe0c9;  
  --color-rule-strong:  #aab3a6;  

  
  --color-brand:        #476b4a;  
  --color-brand-ink:    #ffffff;  
  --color-ink-deep:     #304b32;  
  --color-ink-deep-2:   #476b4a;  
  --color-on-deep:      rgba(255, 255, 255, .76);  
  --color-on-deep-faint:rgba(255, 255, 255, .62);  
  --color-on-deep-rule: rgba(255, 255, 255, .14);  
  --color-on-brand:     rgba(255, 255, 255, .88);  
  --color-on-brand-hover: rgba(255, 255, 255, .14); 

  
  --font-body:    system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
                                 
  --font-heading: var(--font-body);  
  --font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;  
  --text-base:    16px;          
  --leading-body: 1.66;          

  
  --text-xs:  .75rem;       
  --text-sm:  .875rem;      
  --text-lg:  1.125rem;     
  --text-xl:  1.25rem;      
  --text-2xl: 1.5rem;       
  --text-3xl: 1.875rem;     
  --leading-tight: 1.25;    
  --leading-snug:  1.375;   
  --title-tracking: -0.02em;     
  --weight-title:   700;         

  
  --measure: 768px;              

  
  --page-max:    1152px;         
  --aside-w:     216px;          
  --gap-col:     40px;           
  --header-glass: rgba(228, 232, 225, .85);  
  --header-blur:  8px;           
  --header-h:    56px;           
  --section-gap: 64px;           
  --page-gutter: 16px;           
  --page-gutter-lg: 24px;        
  --nav-indent:  24px;           

  
  --radius: 3px;                 
  --border: 1px;                 

  
  --bd-icon-size:   18px;        
  --bd-icon-stroke: 1.75;        
}






:where(.bds) *, :where(.bds) *::before, :where(.bds) *::after { box-sizing: border-box; }

.bds { -webkit-text-size-adjust: 100%; }

.bds {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

:where(.bds) h1, :where(.bds) h2, :where(.bds) h3, :where(.bds) h4, :where(.bds) h5, :where(.bds) h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
}

:where(.bds) a { color: var(--color-link); }

:where(.bds) a:focus-visible,
:where(.bds) button:focus-visible,
:where(.bds) [tabindex]:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

:where(.bds) hr { border: 0; border-top: 1px solid var(--color-border); }

:where(.bds) img { max-width: 100%; height: auto; }

:where(.bds) button { font: inherit; color: inherit; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.bds) *, :where(.bds) *::before, :where(.bds) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}





.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1; }


.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}


.measure { max-width: var(--measure); }


.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.shell__content { min-width: 0; }   


.shell__content .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}


.side-nav {
  display: none;                     
}


.site-main > .shell,
.site-main > .container {
  padding-block: 32px;               
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);           
}




.post-shell {
  max-width: var(--measure);
  margin-inline: auto;
}


.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;               
}


.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;                         
  margin-top: 20px;                  
}








.bd-icon {
  inline-size: var(--bd-icon-size, 16px);
  block-size:  var(--bd-icon-size, 16px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bd-icon-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}





.bd-topbar {
  
  --bd-topbar-h:            64px;   
  --bd-topbar-max:        1280px;   
  --bd-topbar-gutter:       20px;
  --bd-topbar-gap:           8px;
  --bd-topbar-z:              50;
  --bd-topbar-bg:           var(--color-bg, #fff);
  --bd-topbar-border:       var(--color-border, transparent);
  --bd-topbar-border-width:  0px;
  --bd-topbar-brand-font:   var(--font-heading, inherit);
  --bd-topbar-brand-size:   18px;
  --bd-topbar-brand-weight:  600;
  --bd-topbar-brand-lh:      1.2;
  --bd-topbar-brand-tracking: normal;
  --bd-topbar-brand-color:  var(--color-text, inherit);
  --bd-topbar-nav-font:     var(--font-body, inherit);
  --bd-topbar-nav-size:     14px;
  --bd-topbar-nav-gap:      24px;
  --bd-topbar-nav-color:    var(--color-text-muted, inherit);
  --bd-topbar-nav-hover:    var(--color-text, inherit);
  --bd-topbar-btn:          44px;   
  --bd-topbar-btn-radius:    6px;
  --bd-topbar-btn-hover-bg: var(--color-surface, transparent);
  --bd-topbar-menu-icon-size:   24px;   
  --bd-topbar-menu-icon-stroke:    2;

  position: sticky;
  top: 0;
  z-index: var(--bd-topbar-z);
  display: flex;
  align-items: center;
  min-height: var(--bd-topbar-h);
  background: var(--bd-topbar-bg);
  border-block-end: var(--bd-topbar-border-width) solid var(--bd-topbar-border);
}

.bd-topbar__inner {
  width: 100%;
  max-width: var(--bd-topbar-max);
  margin-inline: auto;
  padding-inline: var(--bd-topbar-gutter);
  display: flex;
  align-items: center;
  gap: var(--bd-topbar-gap);
  min-height: var(--bd-topbar-btn);
}


.bd-topbar__brand {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--bd-topbar-brand-font);
  font-size: var(--bd-topbar-brand-size);
  font-weight: var(--bd-topbar-brand-weight);
  line-height: var(--bd-topbar-brand-lh);
  letter-spacing: var(--bd-topbar-brand-tracking);
  color: var(--bd-topbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-topbar__brand:hover { text-decoration: none; }


.bd-topbar__end {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}


.bd-topbar__nav { display: none; }
.bd-topbar__nav ul {
  display: flex;
  gap: var(--bd-topbar-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-topbar__nav a {
  font-family: var(--bd-topbar-nav-font);
  font-size: var(--bd-topbar-nav-size);
  color: var(--bd-topbar-nav-color);
  text-decoration: none;
  white-space: nowrap;
}
.bd-topbar__nav a:hover { color: var(--bd-topbar-nav-hover); }


.bd-topbar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bd-topbar-btn);
  min-height: var(--bd-topbar-btn);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--bd-topbar-btn-radius);
  color: var(--bd-topbar-brand-color);
}
.bd-topbar__menu:hover { background: var(--bd-topbar-btn-hover-bg); }
.bd-topbar__menu-icon {
  --bd-icon-size:   var(--bd-topbar-menu-icon-size);
  --bd-icon-stroke: var(--bd-topbar-menu-icon-stroke);
}

.bd-topbar__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (min-width: 1024px) {
  .bd-topbar__nav  { display: flex; }
  .bd-topbar__menu { display: none; }
}





.category-nav {}         
.tags-index {}           


.post-list {}
.post-list-item {}
.post-list-item__thumb {}
.post-list-item__title {}
.post-list-item__excerpt {}
.post-meta {}            


.featured-post {}        
.related-posts {}        
.post-nav {}             
.pagination {}           




.bd-footer {
  
  --bd-footer-max:         1280px;
  --bd-footer-gutter:        20px;
  --bd-footer-pad-top:       32px;
  --bd-footer-pad-bottom:    48px;
  --bd-footer-stack-gap:     16px;   
  --bd-footer-link-gap:      16px;   
  --bd-footer-feed-gap:      24px;   
  --bd-footer-feed-offset:   16px;   
  --bd-footer-bg:       transparent;
  --bd-footer-border:        var(--color-border, transparent);
  --bd-footer-border-width:   0px;
  --bd-footer-color:         var(--color-text-muted, inherit);
  --bd-footer-link-color:    inherit;
  --bd-footer-link-hover:    var(--color-text, inherit);
  --bd-footer-link-decoration-hover: underline;
  --bd-footer-font:          var(--font-body, inherit);
  --bd-footer-size:          14px;
  --bd-footer-lh:            20px;
  --bd-footer-tracking:      normal;
  --bd-footer-align:         center;
  --bd-footer-icon-size:     16px;   
  --bd-footer-icon-stroke:      2;
  --bd-footer-icon-gap:       8px;

  background: var(--bd-footer-bg);
  border-block-start: var(--bd-footer-border-width) solid var(--bd-footer-border);
  padding-block: var(--bd-footer-pad-top) var(--bd-footer-pad-bottom);
  color: var(--bd-footer-color);
  font-family: var(--bd-footer-font);
  font-size: var(--bd-footer-size);
  line-height: var(--bd-footer-lh);
}

.bd-footer__inner {
  width: 100%;
  max-width: var(--bd-footer-max);
  margin-inline: auto;
  padding-inline: var(--bd-footer-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bd-footer-stack-gap);
  text-align: var(--bd-footer-align);
}

.bd-footer__copyright { margin: 0; }

.bd-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bd-footer-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-footer__feeds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bd-footer-feed-gap);
  padding-block-start: var(--bd-footer-feed-offset);
}

.bd-footer__feeds a {
  display: inline-flex;
  align-items: center;
  gap: var(--bd-footer-icon-gap);
}
.bd-footer__feeds .bd-icon {
  --bd-icon-size:   var(--bd-footer-icon-size);
  --bd-icon-stroke: var(--bd-footer-icon-stroke);
}

.bd-footer a {
  color: var(--bd-footer-link-color);
  letter-spacing: var(--bd-footer-tracking);
  text-decoration: none;
}
.bd-footer a:hover {
  color: var(--bd-footer-link-hover);
  text-decoration: var(--bd-footer-link-decoration-hover);
}


.bd-footer__inner:empty { min-height: 0; }







.site .bd-topbar {
  --bd-topbar-h: var(--header-h);                
  --bd-topbar-max: var(--page-max);              
  --bd-topbar-gutter: var(--page-gutter);        
  --bd-topbar-bg: var(--color-brand);            
  --bd-topbar-border: transparent;               
  --bd-topbar-border-width: var(--border);       
  --bd-topbar-brand-color: var(--color-brand-ink);   
  --bd-topbar-brand-weight: var(--weight-title); 
  --bd-topbar-brand-tracking: var(--title-tracking); 
  --bd-topbar-nav-color: var(--color-on-brand);  
  --bd-topbar-nav-hover: var(--color-brand-ink); 
  --bd-topbar-btn-hover-bg: var(--color-on-brand-hover);  
}


.site .bd-topbar {
  transition: background-color .2s ease, border-color .2s ease;   
}
.site .bd-topbar :is(.bd-topbar__brand, .bd-topbar__nav a, .bd-topbar__menu) {
  transition: color .2s ease;                                      
}
.site .bd-topbar.is-scrolled {
  --bd-topbar-bg: var(--header-glass);           
  --bd-topbar-border: var(--color-border);       
  --bd-topbar-brand-color: var(--color-brand);   
  --bd-topbar-nav-color: var(--color-text-muted);
  --bd-topbar-nav-hover: var(--color-text);
  --bd-topbar-btn-hover-bg: var(--color-accent-soft);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}
@media (prefers-reduced-motion: reduce) {
  .site .bd-topbar,
  .site .bd-topbar :is(.bd-topbar__brand, .bd-topbar__nav a, .bd-topbar__menu) { transition: none; }
}


.site .bd-footer {
  --bd-footer-bg: var(--color-ink-deep);                 
  --bd-footer-color: var(--color-on-deep-faint);         
  --bd-footer-link-color: var(--color-on-deep-faint);    
  --bd-footer-link-hover: #ffffff;                       
  --bd-footer-link-decoration-hover: none;               
  --bd-footer-border: transparent;                       
  --bd-footer-border-width: 0;
  --bd-footer-max: var(--page-max);                      
  --bd-footer-gutter: var(--page-gutter);                
  --bd-footer-pad-top: 40px;                             
  --bd-footer-pad-bottom: 40px;
  --bd-footer-size: var(--text-xs);                      
  --bd-footer-align: left;                               
  margin-top: var(--section-gap);                        
}
.site .bd-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "feeds" "copy" "nav";             
  align-items: center;
  gap: 0;
}

.site .bd-footer__feeds {
  grid-area: feeds;
  justify-content: flex-start;
  padding-block-start: 0;
  font-size: var(--text-sm);                             
  --bd-footer-link-color: var(--color-on-deep);          
}

.site .bd-footer__copyright {
  grid-area: copy;
  align-self: stretch;
  margin: 32px 0 0;                                      
  padding: 24px 0 0;                                     
  border-top: 1px solid var(--color-on-deep-rule);       
}

.site .bd-footer__nav { grid-area: nav; margin-top: 8px; }   
.site .bd-footer__nav ul { justify-content: flex-start; gap: 8px 12px; }   
@media (min-width: 640px) {                              
  .site .bd-footer__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "feeds feeds" "copy nav";
  }
  .site .bd-footer__feeds { justify-content: flex-end; } 
  .site .bd-footer__copyright { padding-right: 16px; }
  
  .site .bd-footer__nav {
    align-self: stretch;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-on-deep-rule);
    display: flex;
    justify-content: flex-end;
  }
  .site .bd-footer__nav ul { justify-content: flex-end; }
}


.side-nav__sticky {
  position: sticky;
  top: 80px;                                   
  display: flex;
  flex-direction: column;
  padding-block: 32px;                         
}
.side-nav__group + .side-nav__group {
  margin-top: 20px;                            
  border-top: var(--border) solid var(--color-border);  
  padding-top: 20px;                           
}
.side-nav__title {
  margin: 0;
  padding-inline: 12px;                        
  font-size: var(--text-sm);                   
  font-weight: var(--weight-title);            
  letter-spacing: var(--title-tracking);       
  line-height: var(--leading-snug);
}
.side-nav__list {
  list-style: none;
  margin: 8px 0 0;                             
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;                                    
  font-size: var(--text-sm);
}
.side-nav__list a {
  display: block;
  padding: 8px 12px 8px var(--nav-indent);     
  border-radius: var(--radius);                
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color .15s, color .15s;  
}
.side-nav__list a:hover {
  background: var(--color-accent-soft);        
  color: var(--color-text);                    
}

.side-nav__list a[aria-current="page"] {
  background: var(--color-brand);
  color: var(--color-brand-ink);
  font-weight: 600;                            
}


.section-head h2 {
  margin: 0;
  font-size: var(--text-xl);                   
  font-weight: var(--weight-title);
  letter-spacing: var(--title-tracking);
  line-height: var(--leading-snug);
}

.section-more {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.section-more:hover { color: var(--color-accent); }   


.card {
  display: block;
  overflow: hidden;
  border: var(--border) solid var(--color-border);  
  border-radius: var(--radius);                    
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.card:hover {
  transform: translateY(-2px);                     
  border-color: var(--color-rule-strong);          
}
.card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;                            
  object-fit: cover;
}
.card__body { padding: 16px; }                     
.card__date {
  display: block;
  font-size: var(--text-xs);                       
  font-weight: 500;
  color: var(--color-text-muted);
}
.card__title {
  margin: 6px 0 0;                                 
  font-size: var(--text-base);
  font-weight: 700;                                
  line-height: var(--leading-snug);                
  transition: color .15s;
}
.card:hover .card__title { color: var(--color-accent); }  
.card__excerpt {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  line-height: 1.625;                              
  color: var(--color-text-muted);
}



.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                                
  padding: 12px 24px;                              
  border: var(--border) solid transparent;
  border-radius: var(--radius);                    
  background: var(--color-ink-deep);               
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;                                
  text-decoration: none;
  transition: background-color .15s;
}
.btn:hover { background: var(--color-ink-deep-2); }   


.post-list { list-style: none; margin: 0; padding: 0; }


.post-list--grid {
  display: grid;
  grid-template-columns: 1fr;                    
  gap: 16px;                                     
}
.post-list--grid .post-list-item {
  border: var(--border) solid var(--color-border);  
  border-radius: var(--radius);                     
  background: var(--color-surface);
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.post-list--grid .post-list-item + .post-list-item { border-top: var(--border) solid var(--color-border); }
.post-list--grid .post-list-item:hover {
  transform: translateY(-2px);                      
  border-color: var(--color-rule-strong);
}
.post-list--grid .post-list-item > a { padding: 0 0 16px; }   

.post-list--grid .post-list-item > a { display: flex; flex-direction: column; }
.post-list--grid .post-list-item__thumb { order: -1; margin: 0; }

.post-list--grid .post-list-item > a::before {
  content: "";
  order: 0;
  flex: none;
  height: 16px;                                     
}
.post-list--grid .post-list-item .post-meta { order: 1; margin-top: 0; font-weight: 500; }  
.post-list--grid .post-list-item__title { order: 2; margin-top: 6px; }                       
.post-list--grid .post-list-item__excerpt { order: 3; margin-top: 6px; }                     
.post-list--grid .post-list-item__title,
.post-list--grid .post-list-item__excerpt,
.post-list--grid .post-list-item .post-meta { padding-inline: 16px; }  
.post-list--grid .post-list-item__title {
  font-size: var(--text-base);                      
}
.post-list--grid .post-list-item__excerpt {
  font-size: var(--text-xs);                        
  line-height: 1.625;                               
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;                                 
}
.post-list-item + .post-list-item {
  border-top: var(--border) solid var(--color-border);   
}
.post-list-item > a,
.post-list-item article { display: block; padding-block: 20px; text-decoration: none; color: inherit; }
.post-list-item a { text-decoration: none; color: inherit; }
.post-list-item__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px; }
.post-list-item h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--title-tracking);
}
.post-list-item a:hover h3 { color: var(--color-accent); }   
.post-meta {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.featured-post {
  border: var(--border) solid var(--color-border);        
  border-radius: var(--radius);                           
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .15s, border-color .15s;
}
.featured-post:hover {
  transform: translateY(-2px);                            
  border-color: var(--color-rule-strong);
}
.featured-post > a > :not(img) { padding-inline: 20px; }  
.featured-post > a > :last-child { padding-bottom: 20px; }
.featured-post h2,
.featured-post h3 { margin: 8px 0 0; letter-spacing: var(--title-tracking); line-height: var(--leading-snug); }

.featured-post > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.featured-post > a:hover h3 { color: var(--color-accent); }   
.featured-post img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;                                      
  object-fit: cover;
  margin-bottom: 16px;
}
.featured-post p { margin: 8px 0 0; }
.featured-post h3 { font-size: var(--text-xl); }             

.featured-post > a > p:not(.post-meta) {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.category-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.category-nav a {
  padding: 6px 12px;                               
  border: var(--border) solid var(--color-border);
  border-radius: var(--radius);                    
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.category-nav a:hover { background: var(--color-accent-soft); color: var(--color-text); }
.category-nav a[aria-current="page"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-ink);
}


.load-more { display: flex; justify-content: center; margin-top: 32px; }



.nav-drawer[hidden] { display: none; }
.nav-drawer { position: fixed; inset: 0; z-index: 60; }
.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, .5);          
}
.nav-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(84vw, 320px);
  background: var(--color-surface);
  border-inline-end: var(--border) solid var(--color-rule-strong);   
  padding: 20px;
  overflow-y: auto;
}
.nav-drawer__panel ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer__panel a {
  display: block;
  padding: 10px var(--nav-indent);
  border-radius: var(--radius);                                      
  color: var(--color-text-muted);
  text-decoration: none;
}
.nav-drawer__panel a:hover { background: var(--color-accent-soft); color: var(--color-text); }


.category-selector { overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.category-selector::-webkit-scrollbar { display: none; }
.category-selector__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.category-selector a {
  display: block;
  white-space: nowrap;
  padding: 6px 12px;                        
  border-radius: var(--radius);             
  border: var(--border) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.category-selector a[aria-current="page"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-ink);
}



.empty-state {
  border: var(--border) dashed var(--color-border);
  border-radius: var(--radius);                                      
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
}






.post-body p {}


.post-body h2 {}
.post-body h3 {}


.post-body .heading-anchor {
  
}


.post-body figure {}
.post-body figure img {}
.post-body figcaption {}

.post-body p > img {}          
.post-body p:has(> img) {}     


.post-body ul {}
.post-body ol {}
.post-body li {}
.post-body li > strong {}


.post-body ul.checklist {}
.post-body ul.checklist li {}
.post-body .checkmark {}


.post-body a {}
.post-body strong {}
.post-body em {}


.post-body table {}
.post-body thead {}
.post-body th {}
.post-body td {}


.post-body blockquote {}


.post-body code {}
.post-body pre {}
.post-body pre code {}


.post-body hr {}













@media (min-width: 640px) {
  
  .card-grid,
  .post-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  
  .container,
  .shell { padding-inline: var(--page-gutter-lg); }

  
  .site-main > .shell,
  .site-main > .container { padding-block: 40px; }

  
  .section-head h2 { font-size: var(--text-2xl); }

  
  .site .bd-topbar { --bd-topbar-gutter: var(--page-gutter-lg); }
  .site .bd-footer { --bd-footer-gutter: var(--page-gutter-lg); }

  
  .featured-post > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 4px;
  }
  .featured-post img {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
    margin: 0;
  }
  .featured-post > a > :not(img) { grid-column: 2; padding-inline: 20px 24px; }
  .featured-post > a > :nth-child(2) { grid-row: 2; margin-top: 0; }
  .featured-post > a > :nth-child(3) { grid-row: 3; }
  .featured-post > a > :nth-child(4) { grid-row: 4; }
  .featured-post > a > :nth-child(5) { grid-row: 5; }
  .featured-post > a > :last-child { padding-bottom: 0; }
}


@media (min-width: 1024px) {
  
  .shell {
    display: grid;
    grid-template-columns: var(--aside-w) 1fr;
    gap: var(--gap-col);
  }

  
  .side-nav { display: block; }

  
  .category-selector { display: none; }
}


@media (hover: none) {
  .side-nav__list a,
  .nav-drawer__panel a,
  .category-selector a,
  .category-nav a { min-height: 44px; display: flex; align-items: center; }
}


.bds{--font-body:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}
.bds .post-cover{margin:24px 0 0;max-width:var(--b-layout-column-width)}
.bds .post-cover img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.bds .post-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--b-layout-column-width);margin:40px 0 0;padding:0;list-style:none}
.bds .post-tags a{display:inline-block;padding:5px 12px;border:var(--border) solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.4;text-decoration:none}
.bds .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--b-layout-column-width)}
.bds .post-nav a{display:flex;align-items:center;gap:8px;padding:16px 18px;border:var(--border) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-weight:600;line-height:1.5;text-decoration:none}
.bds .post-nav a[rel=next]{grid-column:2;justify-content:flex-end;text-align:right}
.bds .post-nav a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.bds .post-nav a{min-width:0}
.bds .post-nav__text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bds .post-nav .bd-icon{flex-shrink:0}
.bds .post-body h2{position:relative}
.bds .post-body h2 .heading-anchor{display:none;position:absolute;left:-1.2em;color:var(--color-text-muted);text-decoration:none;font-weight:400}
.bds .post-body h2:hover .heading-anchor{display:inline}
.bds .load-more{gap:12px}
@media (max-width:640px){.bds .post-nav{grid-template-columns:1fr}.bds .post-nav a[rel=next]{grid-column:auto}}
.bds .bd-footer__inner{display:flex;flex-direction:column;align-items:center;gap:var(--bd-footer-stack-gap);text-align:center}
.bds .bd-footer__copyright,.bds .bd-footer__nav{margin:0;padding:0;border-top:0;display:block}
.bds .bd-footer__nav ul,.bds .bd-footer__feeds{justify-content:center}
.bds .bd-footer__feeds{padding-block-start:var(--bd-footer-feed-offset)}