/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2F6EDE;
  --ifm-color-primary-dark: #2160d1;
  --ifm-color-primary-darker: #1f5bc5;
  --ifm-color-primary-darkest: #1a4ba3;
  --ifm-color-primary-light: #467ee2;
  --ifm-color-primary-lighter: #5286e4;
  --ifm-color-primary-lightest: #759fe9;
  --ifm-code-font-size: 95%;

  --ifm-toc-border-color: #D8D8D8;
  --img-border-color: #a4a4a4;
}

[data-theme="dark"]:root {
  --ifm-toc-border-color: #5b5b5b;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

.container img {
  width: 100%;
  max-width: 800px;
  display: block;
}

.container img + em {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.container img[alt$="*border"],
.container img[alt$="*mobile_border"] {
  border: 1px solid var(--img-border-color);
}

.container img[alt$="*mobile"],
.container img[alt$="*mobile_border"] {
  max-width: 360px;
}

.container em:lang(ja),
.container em:lang(ko),
.container em:lang(zh-CN),
.container em:lang(zh-TW) {
  font-style: normal;
  font-weight: 700;
}

.container img.footer__logo {
    max-width: 160px;
}

.navbar {
  box-shadow: none;
}

.navbar__logo {
  margin-right: 0;
}

.footer {
  --ifm-footer-background-color: #000;
  --ifm-footer-color: #F3F3F3;
  --ifm-footer-link-color: #F3F3F3;
  --ifm-footer-title-color: #F3F3F3;
}

[data-theme="dark"] .footer {
  --ifm-footer-background-color: #353A3F;
}

.footer__links {
  margin-bottom: 64px;
}

.footer__item {
  max-width: 210px;
  font-size: 13px;
}

.footer__link-item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
}

.footer__link-item svg {
  display: none;
}

.footer__copyright {
  margin-top: 20px;
  font-size: 14px;
}

/* Navbar */

.navbar {
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

.navbar__link {
  font-size: 14px;
  font-weight: var(--ifm-font-weight-normal);
}

.navbar__brand {
  height: 26px;
}

/* Sidebar */
.table-of-contents__link {
  font-size: 13px;
  font-weight: 300;
}

/* Pagination */
html[data-theme='dark'] .pagination-nav__link {
  border-color: #F3F3F3;
}

.pagination-nav__link:hover,
.pagination-nav__link:focus,
html[data-theme='dark'] .pagination-nav__link:hover,
html[data-theme='dark'] .pagination-nav__link:focus {
  border-color: var(--ifm-color-primary);
}

/* Search */
html[lang='ko'] .navbar__search {
  display: none;
}

@media (max-width: 996px) {
  .navbar__items [class*='searchBox'] {
    top: 6px;
    right: 7px;
  }
}

@media (min-width: 997px) {
  .navbar__items [class*='searchBox'] {
    margin-left: 6px;
    padding: 0;
  }
}

.dropdown__menu li:last-child .dropdown__link {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown__menu li:last-child .dropdown__link::after {
  content: "";
  position: absolute;
  right: 5px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTcgMTYiIHdpZHRoPSIxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMzYzgxZjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIwLjUiPjxwYXRoIGQ9Im0xMi41IDcuODg4Njd2LTMuODg4ODloLTMuODA5NTIiLz48cGF0aCBkPSJtMTIuNDQ3MyA0LjAyNjE3LTQuNTI2MDUgNC42MjAzMSIvPjxwYXRoIGQ9Im02LjM0NDQ4IDQuNjY2OTljLTEuMDE4NjggMC0xLjg0NDQ4LjgyNTgtMS44NDQ0OCAxLjg0NDQ4djMuNDg4ODNjMCAxLjEwNDYuODk1NDMgMiAyIDJoMy41MzA4Yy45OTU1IDAgMS44MDI1LS44MDcgMS44MDI1LTEuODAyNSIvPjwvZz48L3N2Zz4=");
}

@media (prefers-color-scheme: light) {
  /* ... */
}

@media (prefers-color-scheme: dark) {
  /* ... */
}

.youtube-video {
  width: 100%;
  max-width: 560px;
  height: 200px;
}

@media (min-width: 593px) {
  .youtube-video {
    height: 315px;
  }
}

