/* Custom color scheme - AWS inspired */
:root {
  --md-primary-fg-color: #232f3e;
  --md-primary-fg-color--light: #37475a;
  --md-primary-fg-color--dark: #131a22;
  --md-accent-fg-color: #ff9900;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1a2332;
  --md-primary-fg-color--light: #2d3d50;
  --md-primary-fg-color--dark: #0d1117;
  --md-accent-fg-color: #ffb347;
  --md-default-fg-color: rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.72);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.54);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.32);
  --md-typeset-a-color: #ffb347;
}

/* ===== 콘텐츠 영역 폭 확장 ===== */
.md-grid {
  max-width: 85rem;
}
.md-content {
  max-width: 52rem;
}

/* ===== 테이블 가운데 정렬 ===== */
.md-typeset__scrollwrap {
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: 100%;
}

.md-typeset__table {
  width: fit-content !important;
  margin-left: auto;
  margin-right: auto;
}

.md-typeset table:not([class]) {
  width: fit-content !important;
}

/* ===== 테이블 테두리 + 셀 글자 가운데 정렬 ===== */
.md-typeset table:not([class]) th {
  text-align: center !important;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.5em 0.8em;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.5em 0.8em;
  text-align: center !important;
}

/* H2 섹션 제목 강조 — 하단 border를 accent가 아닌 subtle로 */

/* ===== 본문 글자 크기 축소 ===== */
.md-typeset {
  font-size: 0.74rem;
  line-height: 1.7;
}

/* ===== H2 섹션 제목 강조 ===== */
.md-typeset h2 {
  font-weight: 700;
  font-size: 1.4em;
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 3px solid var(--md-accent-fg-color);
}

/* Dark mode - sidebar navigation text */
[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(255, 255, 255, 0.82);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #ffb347;
}

/* Card grid enhancements */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card title emphasis — enlarge the card heading (first bold line) ~1.3x
   so titles stand out from the description text. Targets the bold text in
   the card's first paragraph only; does not affect card body copy. */
.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-typeset .grid.cards > ul > li > p:first-child > strong {
  font-size: 1.3em;
  line-height: 1.35;
  display: inline-block;
  margin-bottom: 0.15em;
}

/* Hero section styling */
.md-typeset h1 {
  font-weight: 700;
}

/* Code block enhancements */
.md-typeset pre > code {
  font-size: 0.82rem;
}

/* Navigation tabs styling */
.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}

/* Dark mode - announcement bar */
[data-md-color-scheme="slate"] .md-banner {
  color: rgba(255, 255, 255, 0.85);
  background-color: #1a2332;
}

/* Dark mode - TOC (table of contents) */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: rgba(255, 255, 255, 0.70);
}

/* Admonition custom colors */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #ff9900;
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(255, 153, 0, 0.1);
}

/* Button styling */
.md-typeset .md-button--primary {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: #232f3e;
}

.md-typeset .md-button--primary:hover {
  background-color: #ec7211;
  border-color: #ec7211;
}

/* Secondary button (non-primary) — outline style so it is always visible,
   not only on hover. Uses accent orange outline to pair with the primary button. */
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background-color: var(--md-accent-fg-color);
  color: #232f3e;
}

/* ===== Navigation Hierarchy Enhancement ===== */

/* Level 1 (탭 아래 섹션 타이틀) — 볼드 */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label .md-nav__link {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 1;
  margin-top: 0.35rem;
}

/* Level 2 (서브섹션 그룹 라벨) — 밝은 accent */
.md-nav--primary .md-nav .md-nav__item--nested > .md-nav__link,
.md-nav--primary .md-nav .md-nav__item--nested > label .md-nav__link {
  padding-left: 0;
  font-weight: 400;
  font-size: 0.61rem;
  letter-spacing: 0.03em;
  padding-top: 0.15rem;
  margin-top: 0.15rem;
  opacity: 1;
  color: inherit;
}

/* 섹션 label 자체의 추가 indent 제거 */
.md-nav--primary .md-nav .md-nav__item--nested > label {
  padding-left: 0;
  margin-left: 0;
}

/* Level 3 (실제 페이지 링크) — 왼쪽 보더로 소속감 표현 */
.md-nav--primary .md-nav .md-nav .md-nav__link {
  border-left: 2px solid transparent;
  padding-left: 0.8rem;
  font-size: 0.61rem;
  transition: border-color 0.2s;
}

.md-nav--primary .md-nav .md-nav .md-nav__link:hover,
.md-nav--primary .md-nav .md-nav .md-nav__link--active {
  border-left-color: var(--md-accent-fg-color);
}

/* ===== Level 3의 하위 그룹(예: XC 구매 옵션) =====
   navigation.indexes 로 index.md가 부모와 병합되면 구조가
   li > div.md-nav__container > (a.md-nav__link + label.md-nav__link) 가 된다.
   접기/펼치기 화살표 없이 들여쓰기만으로 계층을 표현한다. */

/* 컨테이너 div도 .md-nav__link 클래스를 가져 위 Level 3 규칙이 중복 적용된다.
   (0.8rem + 0.8rem) 이중 들여쓰기를 없애 형제 링크와 같은 위치에 맞춤. */
.md-nav--primary .md-nav .md-nav > .md-nav__list > .md-nav__item--nested
  > .md-nav__link.md-nav__container {
  padding-left: 0;
  border-left: none;
  font-weight: 400;
  font-size: 0.61rem;
  margin-top: 0.625em;
  padding-top: 0;
}

/* 펼침 화살표(label) 숨김 — 하위 목록을 항상 펼쳐두므로 불필요 */
.md-nav--primary .md-nav .md-nav .md-nav__container > label.md-nav__link {
  display: none;
}

/* 화살표를 없앴으므로 하위 목록을 항상 펼친 상태로 유지.
   Material은 토글 체크박스로 하위 nav를 접으므로 강제 해제. */
.md-nav--primary .md-nav .md-nav .md-nav__item--nested > .md-nav {
  display: block;
}

/* 하위 nav 내부의 중복 제목(label.md-nav__title) 숨김 */
.md-nav--primary .md-nav .md-nav .md-nav > label.md-nav__title {
  display: none;
}

/* 4단계 항목 — 부모보다 한 단계(0.8rem) 더 들여쓰기.
   중첩 nav 자체에 padding-left 0.4rem이 누적되므로 0.4rem만 더한다. */
.md-nav--primary .md-nav .md-nav .md-nav .md-nav__link {
  padding-left: 1.2rem;
}

/* 네비게이션 내 중첩 들여쓰기 강화 */
.md-nav--primary .md-nav .md-nav {
  padding-left: 0.4rem;
}

/* ===== 준비중 배지 (좌측 nav) =====
   main.html의 스크립트가 준비중 페이지 링크에 삽입한다. */
/* 배지가 항목 텍스트와 같은 줄에 남도록 링크를 flex로 */
.md-nav--primary .md-nav__link.nav-pending {
  display: flex;
  align-items: center;
  opacity: 0.72;
}

/* 긴 제목은 말줄임 처리하고 배지 자리를 확보 */
.md-nav--primary .md-nav__link.nav-pending > .md-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nav-pending-badge {
  flex: 0 0 auto;
  margin-left: 0.25rem;
  padding: 0 0.18rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.15rem;
  font-size: 0.4rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* ===== TOC (우측 목차) — 호버 시에만 콘텐츠 표시 ===== */
.md-sidebar--secondary .md-sidebar__scrollwrap {
  opacity: 0.08;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.md-sidebar--secondary:hover .md-sidebar__scrollwrap {
  opacity: 1;
  transform: translateX(0);
}

.md-nav--secondary .md-nav__link {
  font-size: 0.58rem;
  line-height: 1.4;
}

.md-nav--secondary .md-nav__item {
  padding: 0.1rem 0;
}

/* ===== Announce 바 오른쪽 정렬 ===== */
.md-banner .md-banner__inner {
  display: flex;
  justify-content: flex-end;
}

/* ===== 헤더 사이트 제목 크기 확대 ===== */
.md-header {
  padding-top: 0.6rem;
  padding-bottom: 0rem;
}
.md-tabs {
  margin-top: 0.7rem;
  background-color: #3a1f2b !important;
}
.md-tabs__link {
  font-size: 0.9rem !important;
  font-weight: 500;
}


/* Material 은 헤더에 사이트 제목과 페이지 제목을 .md-header__topic 두 개로 겹쳐 놓고
   스크롤에 따라 교차 페이드한다. 그래서 .md-header__title 이 height:2.4rem 로 고정이고
   .md-header__topic 이 position:absolute 다.
   우리는 아래에서 페이지 제목 토픽을 숨겨 교차 페이드를 쓰지 않으므로 겹칠 이유가 없다.
   제목을 흐름 안으로 되돌려 제목+부제가 헤더 높이를 실제로 결정하게 한다.
   이렇게 해두면 제목 크기를 바꿔도 헤더가 알아서 늘어나고, 탭 바를 침범하지 않는다. */
.md-header__title {
  height: auto;
  line-height: inherit;
}
.md-header__title > .md-header__ellipsis {
  height: auto;
}

.md-header__topic {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
}

/* 교차 페이드를 쓰지 않으니, Material 이 --active 를 붙여도 사이트 제목은 계속 보여야
   한다. 이 방어가 없으면 스크롤 시 제목 자리가 비어버린다. */
.md-header__title--active .md-header__topic {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: auto;
}

/* 제목 크기는 폭에 따라 3단계. 제목은 줄바꿈하지 않으므로(아래 nowrap) 각 단계는
   그 폭에서 가로로 들어가는 크기여야 한다.
   실측: 제목 텍스트 폭 = font-size(px) x 11.18. 가용폭 = 뷰포트 - 약 179px
   (햄버거/로고 자리 + 우측 컨트롤). Material 자체 브레이크포인트를 그대로 쓴다. */
.md-header__topic .md-ellipsis {
  /* 60em 미만: 390px 뷰포트에서 가용폭 약 211px → 0.9rem(18px)=약 201px 로 들어간다.
     Material 기본 제목 크기와 같다. */
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: visible;
  /* 사이트 제목은 줄바꿈하지 않는다. 줄바꿈을 허용하면 좁은 화면에서 2줄이 되어
     부제가 탭 바 위로 밀려 내려간다. */
  white-space: nowrap;
}

/* 60em~76.25em: 이 구간의 최소폭인 960px 이 가장 빡빡하다. 1.6rem 은 여유가 8px 뿐이라
   폰트 대체나 소수점 차이로 넘칠 수 있어 1.4rem 을 쓴다(여유 약 52px). */
@media screen and (min-width: 60em) {
  .md-header__topic .md-ellipsis {
    font-size: 1.4rem;
  }
}

/* 76.25em 이상 = 탭과 GitHub 블록이 모두 보이는 본격 데스크톱. 여기서 1.3배. */
@media screen and (min-width: 76.25em) {
  .md-header__topic .md-ellipsis {
    font-size: 2.08rem;
  }
}
.md-header__topic .md-ellipsis .site-title-accent {
  color: var(--md-accent-fg-color);
  font-weight: 800;
}
.site-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* 헤더에 현재 페이지 제목 표시 안 함 (사이트 타이틀만) */
.md-header__topic ~ .md-header__topic {
  display: none;
}

/* ===== 헤더 로고 + 타이틀 간격 축소 ===== */
.md-header__button.md-logo,
.md-header .md-logo {
  display: none;
}

/* 타이틀을 왼쪽 끝으로 당기기 */
.md-header__topic {
  margin-left: 0;
  padding-left: 0.6rem;
}

/* ===== 헤더 우측 컨트롤(언어 전환 / 검색 / GitHub) 수직 위치 =====
   제목을 흐름 안으로 되돌린 덕분에 flex 정렬로 밑단을 맞출 수 있다.
   align-self:flex-end 가 세 요소의 박스 밑단을 부제 밑단에 정렬하고,
   아래 변수는 박스와 아이콘 사이 여백 차이를 메우는 미세 조정용이다.
   제목 크기를 바꿔도 이 값은 그대로 둬도 된다 — flex 가 따라간다.
   .md-select / .md-search 는 Material 이 이미 position:relative 로 두므로
   여기서 top 만 더해도 언어 드롭다운·검색 결과 위치는 영향받지 않는다. */
:root {
  --header-controls-offset: 0rem;
}

/* 검색창이 헤더에 인라인으로 붙는 폭부터 적용. 그보다 좁으면 헤더가
   컴팩트 레이아웃(드로어 + 검색 오버레이)이라 내릴 이유가 없다. */
@media screen and (min-width: 60em) {
  .md-header__inner > .md-header__option,
  .md-header__inner > .md-search,
  .md-header__inner > .md-header__source {
    align-self: flex-end;
    position: relative;
    top: var(--header-controls-offset);
  }

  /* Material 이 .md-search 에 세로 패딩을 넣어서, 박스 밑단을 정렬하면 정작 보이는
     검색창은 그만큼 위로 뜬다. 패딩을 없애 박스가 검색창에 밀착하게 한다. */
  .md-header__inner > .md-search {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ===== 2. 좌측 nav Level 1 (AI INFRA 공통) 더 크게 + 강조 ===== */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label .md-nav__link {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--md-accent-fg-color);
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--md-accent-fg-color);
}

/* ===== 3. 상단 탭바 (개요, AWS AI Chip, ...) 메뉴스럽게 ===== */
.md-tabs {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: visible;
}

.md-tabs__list {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;  /* no gap */
}

.md-tabs__item {
  display: flex;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

.md-tabs__link {
  display: flex;
  align-items: center;
  margin: 0;  /* no margin between items */
  opacity: 1;
  font-weight: 600;
  font-size: 0.62rem;
  padding: 0 0.8rem !important;
  margin: 0 !important;
  height: 100%;
  border-radius: 0;
  transition: background-color 0.2s, color 0.2s;
}

.md-tabs__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--md-accent-fg-color);
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  background-color: rgba(255, 179, 71, 0.12);
  color: var(--md-accent-fg-color);
  box-shadow: inset 0 -3px 0 var(--md-accent-fg-color);
}

/* Light mode 탭 호버 */
[data-md-color-scheme="default"] .md-tabs__link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
  background-color: rgba(255, 153, 0, 0.08);
}

/* ===== 이전/다음 페이지 네비게이션 — JS로 .md-content__inner 안으로 이동됨 ===== */
.md-footer {
  border-top: none;
  margin-top: 1.5rem;
  padding: 0.6rem 0;
  background: transparent;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  width: 100%;
}

.md-footer__link {
  padding: 0.3rem 0;
  font-size: 0.7rem;
}

.md-footer__inner {
  padding: 0;
}

.md-footer__title {
  font-size: 0.8rem;
}

.md-footer__direction {
  font-size: 0.62rem;
  opacity: 0.7;
}

/* footer 하단 meta (Built with MkDocs 등) 숨기기 */
.md-footer-meta {
  display: none;
}

/* ===== 테이블 셀 overflow 방지 ===== */
.md-typeset table {
  word-break: keep-all;
  overflow-x: auto;
  display: block;
}

.md-typeset table td,
.md-typeset table th {
  white-space: normal;
}

/* ===== Nav 토글 버튼 ===== */
.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0.2rem 0.8rem 0.4rem auto;
  border: none;
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
}

.nav-toggle-btn:hover {
  color: var(--md-accent-fg-color);
  opacity: 1;
}

/* 복원 버튼 (sidebar 숨김 상태에서만 표시) */
.nav-restore-btn {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 100;
  border: none;
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-accent-fg-color);
  color: #232f3e;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0.6rem 0.5rem;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: padding 0.2s, background-color 0.2s;
}

.nav-restore-btn:hover {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* 데스크톱 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    transition: transform 0.3s ease, width 0.3s ease, opacity 0.2s ease;
  }

  .nav-hidden .md-sidebar--primary {
    transform: translateX(-100%);
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
  }

  .nav-hidden .md-main__inner {
    margin-left: 15vw;
  }

  .nav-hidden .md-content {
    margin-left: 0;
    max-width: none;
  }

  .nav-hidden .nav-restore-btn {
    display: block;
  }
}

/* 모바일: 둘 다 숨김 */
@media screen and (max-width: 76.24em) {
  .nav-toggle-btn {
    display: none;
  }
  .nav-restore-btn {
    display: none !important;
  }
}


/* 본문 링크에 항상 밑줄 표시 (호버 아닌 기본 상태에서도) */
.md-typeset a:not(.md-nav__link):not(.md-tabs__link):not(.md-footer__link) {
  text-decoration: underline;
}


/* Mermaid diagrams — center within content width */
.md-typeset .mermaid {
  text-align: center;
}