body {
  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
#toc-bar .label,
#search-results a,
header .post-desc {
  font-family: Lato, 'Microsoft Yahei', sans-serif;
}

#sidebar .site-title,
#sidebar .site-subtitle,
#sidebar ul li.nav-item a.nav-link span,
#sidebar .taxonomy-link,
#sidebar .taxonomy-more,
#panel-wrapper,
.post-meta,
.content,
footer {
  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
}

#toc nav ul,
#toc #TableOfContents ul {
  list-style: none;
  padding-left: 0;
}

#toc nav ul ul,
#toc #TableOfContents ul ul {
  display: none;
}

#toc nav a,
#toc #TableOfContents a {
  display: block;
  padding: 0.38rem 0 0.38rem 1.25rem;
  color: inherit;
  text-decoration: none;
}

#toc nav a:hover,
#toc #TableOfContents a:hover {
  color: var(--toc-highlight);
}

.post-tail-wrapper .post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.post-tail-wrapper .post-tags .post-tag {
  margin-right: 0;
}

@media all and (max-width: 849.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #main-wrapper,
  #main-wrapper > .container,
  main[aria-label='Main Content'],
  #tail-wrapper,
  main article[data-toc] {
    width: 100%;
    max-width: 100%;
  }

  main[aria-label='Main Content'],
  #tail-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main article[data-toc] > header h1,
  main article[data-toc] .content,
  main article[data-toc] .content p,
  main article[data-toc] .content li,
  .card-title,
  .card-text p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  main article[data-toc] .content img,
  main article[data-toc] .content .img-link,
  .preview-img,
  .preview-img img {
    max-width: 100%;
  }
}

@media all and (max-width: 1199.98px) {
  #main-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  #main-wrapper > .container,
  #main-wrapper > .container > .row,
  main[aria-label='Main Content'],
  #tail-wrapper,
  main article[data-toc] {
    width: 100% !important;
    max-width: 100% !important;
  }

  main[aria-label='Main Content'] {
    flex: 0 0 100% !important;
  }

  main article[data-toc] > header h1 {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  main article[data-toc] .content img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media all and (max-width: 849.98px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
  }

  #main-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: clip;
  }

  #main-wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #main-wrapper > .container > .row {
    --bs-gutter-x: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main[aria-label='Main Content'],
  #tail-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  main article[data-toc] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main article[data-toc] > header,
  main article[data-toc] .content,
  main article[data-toc] .content > *,
  #tail-wrapper > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main article[data-toc] .content a.img-link,
  main article[data-toc] .content a.popup,
  main article[data-toc] .content img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  main article[data-toc] > header h1,
  main article[data-toc] .content p,
  main article[data-toc] .content li {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  :is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta > div:first-child {
    white-space: normal !important;
  }

  :is(#post-list, #related-post-list, #post-neighbor-list) .post-meta .categories,
  :is(#post-list, #related-post-list, #post-neighbor-list) .post-meta .tags {
    display: inline;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
  }
}

#sidebar ul li.nav-item a.nav-link i {
  margin-right: 1.22rem;
}

#sidebar .taxonomy-link {
  font-size: 1rem;
}

#sidebar .taxonomy-count {
  font-size: 0.84rem;
}

#sidebar .taxonomy-more {
  font-size: 0.94rem;
}

main article[data-toc] .content blockquote:not([class^='prompt-']) {
  background: transparent !important;
  border-radius: 0 !important;
}

#related-posts > h3,
#post-neighbor-list .post-nav-label {
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .post-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.42rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .meta-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .meta-tags {
  flex: 1 1 auto;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .preview-tag {
  display: inline-flex;
  align-items: center;
  max-width: 9rem;
  min-height: 1.12rem;
  padding: 0 0.38rem;
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  color: var(--text-muted-color);
  background: transparent;
  font-size: inherit;
  line-height: 1.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-wrapper {
  top: 1rem;
  max-height: calc(100vh - 1rem);
}

#panel-wrapper .access {
  margin-top: 1.25rem;
}

#toc-wrapper ul li a,
#toc #TableOfContents ul li a {
  position: relative;
}

#toc-wrapper ul li a::before,
#toc #TableOfContents ul li a::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: 0;
  display: block;
  width: 1px;
  height: 1.25rem;
  background-color: var(--toc-highlight);
  opacity: 0;
  transition: opacity 0.18s ease;
}

#toc-wrapper ul li a:hover::before,
#toc-wrapper ul li a:focus-visible::before,
#toc #TableOfContents ul li a:hover::before,
#toc #TableOfContents ul li a:focus-visible::before {
  opacity: 1;
}

.post-tail-wrapper .post-tail-bottom {
  gap: 1rem;
}

.post-tail-wrapper .share-wrapper {
  vertical-align: middle;
  user-select: none;
}

.post-tail-wrapper .share-wrapper .share-icons {
  display: flex;
}

.post-tail-wrapper .share-wrapper .share-icons i,
.post-tail-wrapper .share-wrapper .share-icons > * {
  font-size: 1.125rem;
}

.post-tail-wrapper .share-wrapper .share-icons > * {
  margin-left: 0.5rem;
}

.post-tail-wrapper .share-wrapper .share-icons button {
  padding: 0;
  border: none;
  line-height: inherit;
}

.post-tail-wrapper .share-wrapper .share-icons i {
  color: var(--btn-share-color);
}

.post-tail-wrapper .share-wrapper .share-icons > *:hover i {
  color: var(--btn-share-hover-color) !important;
}

.share-label::after {
  content: ':';
}

.shimmer::before,
.preview-img.shimmer::before,
.img-link.shimmer::before {
  display: none !important;
  animation: none !important;
}

.preview-img.shimmer {
  background-image: none !important;
}

#search-results .post-meta {
  font-size: 0.85rem;
}

#search-result-wrapper .post-tag::before {
  content: none !important;
}

@media all and (max-width: 767.98px) {
  :is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .post-meta-line,
  :is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .tags {
    flex-wrap: wrap;
    row-gap: 0.22rem;
  }

  .post-tail-wrapper .post-tail-bottom {
    flex-wrap: wrap-reverse !important;
  }

  .post-tail-wrapper .post-tail-bottom > div:first-child {
    width: 100%;
    margin-top: 1rem;
  }
}

#sidebar .site-subtitle {
  font-size: 0.97rem;
}

#sidebar ul li.nav-item a.nav-link i {
  margin-right: 1.05rem;
}

#sidebar .taxonomy-link,
#sidebar .taxonomy-more {
  font-size: 1rem;
}

#sidebar .taxonomy-link {
  justify-content: flex-start;
  gap: 0.35rem;
}

#sidebar .taxonomy-name {
  flex: 0 0 8em;
  width: 8em;
  max-width: 8em;
}

#sidebar .taxonomy-count {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 0.86rem;
}

main article[data-toc] > header .post-meta,
main article[data-toc] > header .post-meta .readtime {
  font-size: 0.91rem;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .post-meta-line {
  align-items: center;
  gap: 0.42rem;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .meta-item {
  align-items: center;
  line-height: 1.2;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .meta-item > i {
  margin-right: 0.25rem !important;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .preview-category {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 7em;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1.2;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .preview-tag {
  max-width: 5.8rem;
}

:is(#post-list, #related-post-list, #post-neighbor-list) .card .post-meta .meta-tags {
  container-type: inline-size;
}

@container (max-width: 12rem) {
  .preview-tag:nth-child(n + 3) {
    display: none;
  }
}

#panel-wrapper {
  top: 1.5rem;
  max-height: calc(100vh - 1.5rem);
}

#panel-wrapper.no-toc .access {
  margin-top: 2.5rem;
}

#panel-wrapper.has-toc {
  top: 0;
  max-height: 100vh;
}

#panel-wrapper.has-toc .access {
  margin-top: 0;
}

#panel-wrapper.has-toc #toc-wrapper {
  margin-top: 1rem !important;
  padding-bottom: 1rem !important;
}

#panel-wrapper.has-toc #access-lastmod {
  margin-top: 1.15rem;
}

#panel-wrapper section + section {
  margin-top: 1.2rem;
}

#toc nav ul ul,
#toc #TableOfContents ul ul {
  display: block;
  padding-left: 0.78rem;
}

#toc nav a,
#toc #TableOfContents a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

#toc nav a.active,
#toc nav a.is-active-link,
#toc #TableOfContents a.active,
#toc #TableOfContents a.is-active-link,
#toc nav a:hover,
#toc #TableOfContents a:hover {
  color: var(--toc-highlight) !important;
}

#toc nav a.active::before,
#toc nav a.is-active-link::before,
#toc #TableOfContents a.active::before,
#toc #TableOfContents a.is-active-link::before {
  opacity: 1;
}

main article[data-toc] .content .table-wrapper {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

main article[data-toc] .content .table-wrapper > table {
  width: max-content;
  min-width: 100%;
}

@media all and (min-width: 768px) {
  :is(#post-list, #related-post-list, #post-neighbor-list) .preview-img,
  :is(#post-list, #related-post-list, #post-neighbor-list) .preview-img img {
    border-radius: 0 !important;
  }
}

/* Final balance refinements */
:root {
  --custom-top-breath: 0.75rem;
  --custom-panel-section-gap: 3rem;
}

@media all and (min-width: 850px) {
  #main-wrapper {
    padding-top: var(--custom-top-breath);
  }

  #panel-wrapper.no-toc {
    top: calc(1.5rem + var(--custom-top-breath));
    max-height: calc(100vh - 1.5rem - var(--custom-top-breath));
  }

  #panel-wrapper.has-toc {
    top: var(--custom-top-breath);
    max-height: calc(100vh - var(--custom-top-breath));
  }
}

#panel-wrapper.has-toc #access-lastmod,
#panel-wrapper .access > section + section {
  margin-top: var(--custom-panel-section-gap) !important;
}

@media (hover: hover) {
  :is(#post-list, #related-post-list, #post-neighbor-list) .card-wrapper {
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      background-color 0.16s ease;
  }

  :is(#post-list, #related-post-list, #post-neighbor-list) .card-wrapper:hover {
    transform: translateY(-1px);
  }
}

main article[data-toc] .content h2::after {
  opacity: 0.88;
}

main article[data-toc] .content h3::after {
  opacity: 0.5;
}

#panel-wrapper .panel-heading {
  position: relative;
  padding-bottom: 0.45rem;
  margin-bottom: 0.65rem;
}

#panel-wrapper .panel-heading::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--main-border-color);
  opacity: 0.8;
}

.ad-slot,
.adsense-slot {
  display: block;
  max-width: 100%;
  margin: 2rem auto;
  text-align: center;
}

@media all and (max-width: 767.98px) {
  main article[data-toc] > header {
    margin-bottom: 1.35rem;
  }

  main article[data-toc] > header .post-meta {
    margin-top: 0.35rem;
  }

  .ad-slot,
  .adsense-slot {
    margin: 1.6rem auto;
  }
}

/* Match Jekyll sidebar taxonomy name/count rhythm exactly. */
#sidebar .taxonomy-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
}

#sidebar .taxonomy-name {
  flex: 0 0 8em !important;
  width: 8em !important;
  max-width: 8em !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#sidebar .taxonomy-count {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

#toc-popup {
  width: min(36rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 4rem));
  padding: 0;
  border: 1px solid var(--toc-popup-border-color);
  border-radius: 10px;
  color: var(--text-color);
  background: var(--main-bg);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 24%);
}

#toc-popup::backdrop {
  background: rgb(0 0 0 / 35%);
}

#toc-popup .header {
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--main-border-color);
}

#toc-popup .header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--heading-color);
  font-weight: 600;
}

#toc-popup .toc-content {
  max-height: calc(min(36rem, 100vh - 4rem) - 3.5rem);
  padding: .9rem 1rem 1rem;
  overflow-y: auto;
}

#toc-popup .toc-content ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#toc-popup .toc-content ul ul {
  padding-left: 1rem;
}

#toc-popup .toc-content a {
  display: block;
  padding: .35rem 0;
  color: var(--text-color);
  text-decoration: none;
}

#toc-popup .toc-content a:hover,
#toc-popup .toc-content a:focus-visible {
  color: var(--toc-highlight);
}

/* Self-hosted reset so pagination still lays out correctly even if the
   Bootstrap CDN stylesheet fails to load (list markers would otherwise
   show the browser's default bullet before 이전/다음/1 etc). */
.pagination {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.pagination {
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.pagination .page-item {
  display: block !important;
  margin-right: 0 !important;
}

.pagination .page-link {
  min-width: 2.25rem;
  text-align: center;
}

/* The header/TOC-trigger area sat right on top of the body text with
   only 2rem of breathing room (main.css), which felt cramped on pages
   with no cover image (About/policy pages especially, but also any
   post). Give it a bit more air on both mobile and desktop. */
article > .content,
article > header + .content {
  margin-top: 3rem;
}

#toc-solo-trigger {
  margin-bottom: 0.5rem;
}

/* footer had a fixed height (5rem desktop / 6rem mobile in main.css)
   sized for its original two lines (copyright + "Powered by Hugo").
   Adding the policy-links row on top of that squeezed everything
   against the border-top divider instead of letting it breathe.
   Let the footer grow to fit its content and pad it properly. */
footer {
  height: auto !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.footer-policy-links {
  margin-top: 0;
}