@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"),
    url(./font/Pretendard-Black.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"),
    url(./font/Pretendard-ExtraBold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"),
    url(./font/Pretendard-Bold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"),
    url(./font/Pretendard-SemiBold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"),
    url(./font/Pretendard-Medium.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"),
    url(./font/Pretendard-Regular.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"),
    url(./font/Pretendard-Light.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"),
    url(./font/Pretendard-ExtraLight.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"),
    url(./font/Pretendard-Thin.subset.woff) format("woff");
}
:root {
  --md-text-font: "Pretendard";
  --light-gray-100: #fafaff;
  --light-gray-150: #efeff5;
  --light-gray-200: #e3e2eb;
  --light-gray-250: #d3d2e0;
  --light-gray-300: #cccbd8;
  --light-gray-400: #b0aebc;
  --light-gray-500: #9291a1;
  --light-gray-550: #848395;
  --light-gray-600: #77758a;
  --light-gray-700: #565568;
  --light-gray-800: #393847;
  --light-gray-850: #2e2d39;
  --light-gray-900: #212331;
  --light-gray-950: #15161e;
  --light-gray-980: #0b0b0f;
}
.md-header {
  background: #fff;
  font-family: "Pretendard";
  border-bottom: 1px solid var(--light-gray-200);
  color: var(--light-gray-800);
}
/* .md-main__inner {
  margin: 0rem;
} */
/* .md-sidebar.md-sidebar--primary {
  border-right: 1px solid #333;
  height: auto;
} */
.md-sidebar {
  height: auto;
}
/* 2026-01-12: 탭을 헤더 영역으로 이동 */
.md-tabs {
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  margin-left: 5rem;
  border-bottom: none;
}

.md-tabs .md-grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-tabs__list {
  display: flex;
  gap: 32px;
  color: var(--light-gray-800);
  font-size: 16px;
  font-weight: 700;
}

/* 2026-01-12: 탭 폰트 크기 조정 */
.md-tabs__link {
  font-size: 17px;
}

/* 2026-01-12: 선택된 탭만 보라색 */
.md-tabs__link--active {
  color: #6366F1 !important;
}
.md-tabs__item--active .md-tabs__link {
  color: #6366F1 !important;
}
.md-tabs__link[aria-selected="true"] {
  color: #6366F1 !important;
}

.md-search__form {
  border-radius: 30px;
  background: #fff;
  border: 2px solid var(--light-gray-200);
}
.md-search__input + .md-search__icon {
  color: var(--light-gray-800);
}
.md-header--shadow {
  box-shadow: none;
}

/* 페이지 상단 타이틀 표시 방지 */
.md-header__topic {
  visibility: hidden;
}

/* 이미지 테두리 추가 - 랜딩 페이지 제외 */
.md-content__inner p img {
  border: var(--light-gray-100) solid;
  max-width: 100%;
  height: auto;
}

/* 랜딩 페이지 이미지는 제외 */
.landing_main img,
.card img {
  border: none !important;
  max-width: none !important;
  height: auto !important;
}

p {
  word-break: keep-all;
}
.md-nav {
  font-size: 16px;
}
.md-nav__toggle ~ .md-nav > .md-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 15px;
}

/* 사이드바 1수준 리스트: 왼쪽 여백 제거 */
.md-nav[data-md-level="1"] > .md-nav__list {
  padding-left: 0 !important;
}

/* 1수준 섹션 간 간격 축소 */
.md-nav__item--section {
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

.md-content {
  max-width: 1440px;  /* 헤더와 동일한 너비 */
}
.md-content__inner {
  max-width: none !important;  /* 헤더와 정렬을 위해 제한 해제 */
}
.md-typeset {
  max-width: none !important;  /* 헤더와 정렬을 위해 제한 해제 */
}
.title_desc {
  font-size: 16px;
}
div[data-md-type="navigation"] {
  font-size: 2em;
}
.md-main__inner {
  margin-top: 0;
  max-width: 1440px;  /* 헤더와 동일한 너비 */
}
.md-header__button.md-logo {
  margin: 0;
  padding: 0;
}
.md-header__button.md-logo .md-tooltip {
  display: none !important;
}
/*GNB 네비게이션*/
.md-header__inner {
  height: 64px;
  max-width: 1440px;
}

/* 2026-01-12: 헤더 ellipsis 영역에 탭 배치 */
.md-header__ellipsis {
  display: flex;
  align-items: center;
  gap: 2rem;
}
/*네비게이션 */
.md-nav__link {
  padding: 3px 12px;
  margin-top: 0px;
  font-size: 14px;
}

.md-sidebar__scrollwrap {
  height: calc(100vh - 206px) !important;
}
.md-nav__link[for]:focus,
.md-nav__link[for]:hover,
.md-nav__link[href]:focus,
.md-nav__link[href]:hover {
  color: #6366F1;
}
.md-nav__item .md-nav__link--active {
  background:#f0f5fa;
  color: #6366F1;
  font-weight: 500;
}


.md-typeset a {
  color: var(--light-gray-800);
  text-decoration: underline;
  word-break: keep-all;
}
.step_desc li {
  list-style: none;
  margin-left: 0 !important;
  font-size: 14px;
}
.sub_title {
  color: var(--light-gray-800);
  font-size: 20px;
  font-weight: 700;
  margin-top: 40px;
}
.admonition.example p {
  color: var(--light-gray-800);
}
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px;
}
.mt80 {
  margin-top: 80px;
}
.mt100 {
  margin-top: 100px;
}
.md-footer {
  background: #fff;
  color: var(--light-gray-800);
}
.md-search__input::placeholder {
  color: var(--light-gray-500);
  font-size: 14px;
  font-weight: 500;
}
.md-footer__link.md-footer__link--prev:hover,
.md-footer__link.md-footer__link--next:hover {
  color: #6366F1;
}
.md-header__button.md-logo img {
  height: auto;
}
.step_box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--light-gray-100);
  border: 1px solid var(--light-gray-200);
  border-radius: 12px;
}
.step_box > p {
  margin: 0;
}
.step_box > p > img {
  width: 100px;
}
.step_title {
  font-size: 20px;
  font-weight: 700;
  color: var(--light-gray-800);
  margin-bottom: 12px;
}
.admonition.note p {
  color: var(--light-gray-800);
}
.md-nav--lifted > .md-nav__list > .md-nav__item > [for] {
  font-size: 15px;
  color: #6366F1;
  margin-bottom: 12px;  
}
/* 2026-01-12: 섹션 타이틀 스타일 조정 (보라색, 패딩 조정) */
.md-nav__item--section > .md-nav__link[for] {
  color: var(--light-gray-500);
  font-size: 14px;
  font-weight: 700;
  color: #818CF8;
  padding: 6px 3px;
  padding-left: 0px;
}

/* === section-index 공통: 컨테이너 레이아웃 === */
.md-nav__link.md-nav__container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 0 !important;
  background: none !important;
}

/* 공통: 토글 버튼 */
.md-nav__link.md-nav__container > label.md-nav__link {
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  background: none !important;
}
.md-nav__link.md-nav__container > label.md-nav__link--active {
  background: none !important;
  color: inherit !important;
}

/* === 1수준 섹션 타이틀 (--section: 시작하기, 관리하기 등) === */
.md-nav__item--section > .md-nav__link.md-nav__container > a.md-nav__link {
  flex: 1 !important;
  padding: 6px 3px !important;
  padding-left: 0px !important;
  margin-top: 0px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #818CF8 !important;
  text-decoration: none !important;
  background: none !important;
}
.md-nav__item--section > .md-nav__link.md-nav__container > a.md-nav__link:hover {
  color: #6366F1 !important;
}
.md-nav__item--section > .md-nav__link.md-nav__container > a.md-nav__link--active {
  color: #818CF8 !important;
  background: none !important;
}

/* === 2수준 섹션 타이틀 (--nested만: 내 계정 및 키 관리, 프로젝트 관리 등) === */
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link.md-nav__container > a.md-nav__link {
  flex: 1 !important;
  padding: 6px 12px !important;
  margin-top: 0px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--light-gray-700) !important;
  text-decoration: none !important;
  background: none !important;
}
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link.md-nav__container > a.md-nav__link:hover {
  color: #6366F1 !important;
}
/* 2수준 active: 인덱스 페이지 자체가 선택됐을 때만 컨테이너 전체에 음영 */
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link.md-nav__container:has(> a.md-nav__link--active) {
  background: #f0f5fa !important;
}
/* 2수준 active: 타이틀 텍스트 색상 */
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link.md-nav__container > a.md-nav__link--active {
  background: none !important;
  color: #6366F1 !important;
  font-weight: 700 !important;
}

/* === 2수준 index 없는 섹션 (label[for] 구조) === */
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link[for] {
  padding: 6px 12px !important;
  margin-top: 0px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--light-gray-700) !important;
}
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link[for]:hover {
  color: #6366F1 !important;
}
.working {
  display: inline-block;
  color: #3ea882;
  background: #e5f6f0;
  padding: 2px 4px;
  margin: 0px 4px;
  border-radius: 4px;
  font-weight: 700;
}


.md-typeset h1 {
  color: var(--light-gray-800);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;  
}

.md-typeset h2 {
  font-size: 22px;
  font-weight: 600;
}
.md-typeset h3 {
  font-weight: 500;
  font-size: 19px;
  margin: 16px 0 8px;
}
.md-typeset h4 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 22px;
  margin-bottom: 4px;
  color: var(--light-gray-600);
}
.md-typeset h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.md-content__inner.md-typeset li {
  font-size: 16px;
}
.md-content__inner.md-typeset p {
  font-size: 16px;
}
.highlight {
  font-size: 17px;
}
.md-footer-meta {
  background: #fff;
  border-top: 1px solid var(--light-gray-200);  
}

.md-footer-meta__inner.md-grid {
  max-width: 1440px;  /* 풋터를 헤더와 동일한 너비로 조정 2026-01-15 */
}

.md-copyright__highlight {
  color: var(--light-gray-800);
  font-size: 11px;
}
.md-nav__title {
  margin-bottom: 12px;
}

/* LNB 상단 타이틀(가이드 제목) 숨기기 - 탭 1 */
.md-nav--primary .md-nav__link[for="__nav_1"] {
  display: none !important;
}
/* LNB 상단 타이틀(가이드 제목) 숨기기 - 탭 2 */
.md-nav--primary .md-nav__link[for="__nav_2"] {
  display: none !important;
}
/* LNB 상단 타이틀(가이드 제목) 숨기기 - 탭 3 */
.md-nav--primary .md-nav__link[for="__nav_3"] {
  display: none !important;
}

/* 스타일칩 */
.chip {
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 32px;
  margin-top: 40px;
}
.new_features {
  background: hsl(266, 87%, 95%);
  color: #6366F1;
}
.improvements {
  background: hsl(149, 76%, 95%);
  color: #117f46;
}
.known_issue {
  background: hsl(44, 99%, 95%);
  color: #8b6600;
}
.bug_fixes {
  background: hsl(221, 76%, 95%);
  color: #11347f;
}
.deprecated {
  background: hsl(0, 76%, 95%);
  color: #970000;
}
.md-header__button[aria-label="언어설정"],
.md-header__button[aria-label="Select language"] {
  width: 24px;
  height: 24px;
  margin: 8px 30px 8px 8px;
  background: url(../img/global_icon.svg);
}
.md-header__button[aria-label="언어설정"] > svg,
.md-header__button[aria-label="Select language"] > svg {
  display: none;
}
@media screen and (max-width: 1200px) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: 100vh;
  }
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: #fff;
  }
}

/* 404 page */
.section_404 {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 200px;
}
.section_404 .lottie {
}
.section_404 .wrapper_404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.section_404 .title_404 {
  font-family: "Pretendard";
  color: #393847;
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 80px */
  text-transform: capitalize;
}
.section_404 p {
  font-family: "Pretendard";
  color: #77758a;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
}
.section_404 a {
  font-family: "Pretendard";
  font-weight: 600;
  display: flex;
  height: 32px;
  min-width: 64px;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  border-radius: var(--popover-border-radius, 4px);
  border: 1px solid #6366F1;
  background: #6366F1;
  color: white;
  text-decoration: none;
}
.section_404 a:hover,
.section_404 a:focus {
  color: white;
}

/* 커스텀 버튼 색상 */
.md-button--purple {
  background-color: #6366F1 !important;
  color: white !important;
  border-color: #6366F1 !important;
  padding: 4px 16px !important;
  height: auto !important;
  text-decoration: none !important;
}

.md-button--purple:hover {
  background-color: #0f2744 !important;
  opacity: 0.9;
  text-decoration: none !important;
}
/* Content Tabs - Equal Width Distribution */
.md-typeset .tabbed-set.tabbed-alternate {
  background: var(--light-gray-100);
  padding: 10px;
  border-radius: 5px;
}

.md-typeset .tabbed-labels {
  display: flex !important;
  width: 100% !important;
}

.md-typeset .tabbed-labels > label {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Remove underline from tab labels */
.md-typeset .tabbed-labels > label,
.md-typeset .tabbed-labels > label:hover,
.md-typeset .tabbed-labels > label > a {
  text-decoration: none !important;
}

/* Purple color for active tab text */
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > label:nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) {
  color: #6366F1 !important;
}

/* Purple bottom border line for all tabs */
.md-typeset .tabbed-labels::before {
  background: #6366F1 !important;
}

/* Purple bottom indicator for active tab */
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > label:nth-child(1)::before,
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2)::before,
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3)::before,
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4)::before,
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5)::before,
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6)::before {
  background: #6366F1 !important;
}

/* 테이블 폰트 사이즈 - 본문과 동일하게 */
.md-typeset table {
  font-size: 16px !important;
}

/* 테이블 내 리스트 스타일 */
.md-typeset table ul {
  padding-top: 12px;
  padding-left: 0px;
  margin-top: 0;
  margin-bottom: 0;
}

/* 테이블 내 2단계 ul은 padding-top 제거 */
.md-typeset table ul ul {
  padding-top: 0;
}

/* Nested list 스타일 커스터마이징 */
/* 두 번째 단계 - 하이픈 */
.md-typeset ol li ul,
.md-typeset ul li ul {
  list-style-type: "-  " !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 세 번째 단계 - ◦ */
.md-typeset ol li ul li ul,
.md-typeset ul li ul li ul {
  list-style-type: "◦  " !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 앵커 링크 이동 시 제목이 헤더에 가려지지 않도록 스크롤 여백 추가 */
.md-typeset h1[id],
.md-typeset h2[id],
.md-typeset h3[id],
.md-typeset h4[id],
.md-typeset h5[id],
.md-typeset h6[id] {
  scroll-margin-top: 140px;
}

/* 툴팁 박스 크기 및 스타일 커스터마이징 */
.md-tooltip {
  border-radius: 8px !important; /* 모서리 둥글게 */
}

.md-tooltip__inner {
  max-width: 25vw !important;   /* 최대 너비 - 화면 너비의 25% */
  min-width: 280px !important;  /* 최소 너비 */
  width: auto !important;       /* 너비 자동 조정 */
  padding: 10px !important;     /* 내부 여백 - 균등 */

  /* 텍스트 크기 조정 */

  font-size: 13px !important;
  font-weight: 500 !important;  /* 본문 볼드 해제 */

  /* 툴팁 배경 및 그림자 색상 */
  background-color: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important; /* 모서리 둥글게 */
}



/* 툴팁 제목 스타일 (strong 태그) */
/* .md-tooltip strong, */
.md-tooltip__inner strong {
  font-size: 14px !important;   /* 제목 폰트 크기 - 본문보다 1px 크게 */
  font-weight: 700 !important;  /* 제목만 굵게 */
}

/* 순서 리스트 마커(숫자) 스타일 - 첫 번째 수준만 적용 */
.md-typeset > ol > li::marker {
  color: #FF2F92;
  font-size: 18px;
  font-weight: 600;
}

/* 언어 전환 아이콘 숨김 (영문 번역 미완성) */
.md-header__option {
  display: none;
}

/* 카드 그리드 1열 강제 */
.md-typeset .grid.cards.grid-1col {
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 카드 그리드 1열 배경색 */
.md-typeset .grid.cards.grid-1col > ul > li {
  background-color: #f8f9fa;
}