/*
 * Visual tuning to mimic naver-career.gitbook.io as closely as MkDocs Material allows.
 *
 *  - Primary brand color: NAVER career green (#26CB7C)
 *  - Dark accent for links / hover: #00954A
 *  - Body text: #1D1D1D
 *  - Sidebar tinted very pale green
 */

:root {
  --md-primary-fg-color:        #26CB7C;
  --md-primary-fg-color--light: #4FDB99;
  --md-primary-fg-color--dark:  #00954A;
  --md-accent-fg-color:         #00954A;
  --md-typeset-a-color:         #00954A;

  /* Make the top header a clean white bar like GitBook, with primary
   * color reserved for tabs / links / buttons. */
  --md-primary-bg-color:        #1D1D1D;
  --md-default-fg-color:        #1D1D1D;
}

/* Light scheme: white header with dark text, green tabs underline */
[data-md-color-scheme="default"] {
  --md-default-bg-color:        #ffffff;
  --md-default-fg-color:        #1D1D1D;
  --md-default-fg-color--light: #4a4a4a;
  --md-typeset-a-color:         #00954A;
}

[data-md-color-scheme="default"] .md-header {
  background-color: #ffffff;
  color: #1D1D1D;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: #1D1D1D;
}

[data-md-color-scheme="default"] .md-search__input {
  background-color: #f3f4f6;
}

[data-md-color-scheme="default"] .md-search__input:hover {
  background-color: #eaecef;
}

/* Tab bar: white background, dark text, green underline on active */
[data-md-color-scheme="default"] .md-tabs {
  background-color: #ffffff;
  color: #1D1D1D;
  border-bottom: 1px solid #e6e6e6;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #4a4a4a;
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #1D1D1D;
}

[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
  font-weight: 700;
}

/* Sidebar: faint green tint matching GitBook */
[data-md-color-scheme="default"] .md-sidebar--primary,
[data-md-color-scheme="default"] .md-sidebar--secondary {
  background-color: #f6fcf7;
}

/* Logo size — GitBook displays it at ~28-32px */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* Rounded image / table look — closer to GitBook's softer corners */
.md-typeset img {
  border-radius: 4px;
}

/* Figure layout — emulate GitBook's image rendering for imported pages.
 *
 *  - <div><figure>…</figure>…</div> groups (GitBook image galleries) lay
 *    out as a flex row so multiple screenshots share the page width.
 *  - Standalone <figure> blocks are constrained so a 1284×2778 phone
 *    screenshot doesn't render at natural size. */
.md-typeset figure {
  margin: 1em auto;
  max-width: 480px;
  text-align: center;
}

.md-typeset figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* glightbox wraps each <img> in <a class="glightbox"> — make the wrapper
 * fill its figure so the image keeps its computed width. */
.md-typeset figure a.glightbox {
  display: block;
}

.md-typeset div:has(> figure) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1em 0;
}

/* All figures stay on one row; min-width: 0 lets flex actually shrink them
 * below their image's intrinsic width. flex: 1 1 0 distributes the row
 * evenly so no item gets stretched on its own line. */
.md-typeset div:has(> figure) > figure {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
}

/* Embedded videos (YouTube) — 16:9 responsive frame */
.md-typeset .video-embed {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 1em auto;
}
.md-typeset .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}
.md-typeset .video-caption {
  text-align: center;
  color: #4a4a4a;
  font-size: 0.85em;
  margin: 0.25em auto 1.5em;
}

/* Anchor link headings — keep them subtle so they don't compete with
 * the GitBook-style content density */
.md-typeset .headerlink {
  color: #c0c0c0;
}
.md-typeset .headerlink:hover {
  color: #00954A;
}