@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; }
header.site-header { view-transition-name: site-header; }
aside#doc-nav { view-transition-name: site-sidebar; }

::selection {
  background-color: #ffedd5 !important;
  color: #ea580c !important;
}
.dark ::selection, .dark::selection {
  background-color: rgba(249, 115, 22, 0.3) !important;
  color: #ffffff !important;
}

html, body, button, input, textarea {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
.dark * { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

article h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f0f0f0; }
.dark article h1 { border-color: #262626; color: #ffffff; }

article h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 3rem; margin-bottom: 0.75rem; }
.dark article h2 { color: #ffffff; }

article h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.015em; margin-top: 2rem; margin-bottom: 0.5rem; }
.dark article h3 { color: #ffffff; }

article p { font-size: 0.875rem; line-height: 1.625; color: #525252; margin-bottom: 1rem; }
.dark article p { color: #a3a3a3; }

article strong { font-weight: 700; color: #171717; }
.dark article strong { color: #ffffff; }

article em { font-style: italic; }

article a { color: #171717; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #d4d4d4; transition: text-decoration-color 0.15s; }
article a:hover { text-decoration-color: #171717; }
.dark article a { color: #ffffff; text-decoration-color: #525252; }
.dark article a:hover { text-decoration-color: #ffffff; }

article code:not(pre code) {
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: #f5f5f5;
  color: #171717;
  border: 1px solid #e5e5e5;
}
.dark article code:not(pre code) {
  background-color: #1f1f1f;
  color: #f5f5f5;
  border-color: #2e2e2e;
}

article pre {
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.625;
  color: #171717;
}
.dark article pre {
  background-color: #121212;
  border-color: #262626;
  color: #e5e5e5;
}

article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.75rem;
  text-align: left;
}
article thead { border-bottom: 2px solid #171717; }
.dark article thead { border-bottom-color: #ffffff; }
article th { padding: 0.75rem 1rem; font-weight: 600; color: #171717; }
.dark article th { color: #ffffff; }
article td { padding: 0.875rem 1rem; border-bottom: 1px solid #f0f0f0; color: #404040; }
.dark article td { border-bottom-color: #262626; color: #d4d4d4; }

article ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 1rem; color: #525252; font-size: 0.875rem; }
.dark article ul { color: #a3a3a3; }
article ol { list-style-type: decimal; padding-left: 1.25rem; margin-bottom: 1rem; color: #525252; font-size: 0.875rem; }
.dark article ol { color: #a3a3a3; }
article li { margin-bottom: 0.375rem; }
article hr { margin: 2.5rem 0; border: 0; border-top: 1px solid #f0f0f0; }
.dark article hr { border-top-color: #262626; }

.search-active { background-color: #f5f5f5 !important; }
.dark .search-active { background-color: #1a1a1a !important; }
.toc-active { color: #000000 !important; font-weight: 600 !important; }
.dark .toc-active { color: #ffffff !important; font-weight: 600 !important; }

mark.find-match {
  background-color: #fde68a !important;
  color: #1a1a1a !important;
  border-radius: 2px;
}
mark.find-match-current {
  background-color: #ea580c !important;
  color: #ffffff !important;
  border-radius: 2px;
}