/* moble.co.kr top bar on guide.moble.co.kr (Sean 2026-10-16: "모블 가이드 상단이 모블 사이트와 일치하지 않는다 … 키셋 가이드
   뉴스는 모두 상단바를 공유하는 것처럼"). Rules after the guide block are extracted from moBle-site src/styles/global.css with
   moBle-blog tools/extract-header-css.mjs and converted from rem to px (this page's root font is 12px), so the band sits on the
   same pixels as on moble.co.kr and blog.moble.co.kr. */
:root {
  --header-paper: #f6f5ef; --header-ink: #16180f; --header-muted: #5a5d52; --header-line: #cfd1c7;
  --header-accent: #1b743c; --header-lime: #a7d12b;
  --utility-paper: #f6f5ef; --utility-ink: #16180f; --utility-muted: #5a5d52; --utility-line: #cfd1c7;
  --max-width: 1152px;
  --font-sans: "Pretendard Variable", Pretendard, sans-serif;
  --mark-filter: none;
}
:root[data-theme="dark"] {
  --header-paper: #dfe0d9; --header-ink: #111310; --header-muted: #555a52; --header-line: #b9bcb3;
  --header-accent: #1a6f3a; --header-lime: #a7d12b;
  --utility-paper: #0c0d0c; --utility-ink: #f4f5f0; --utility-muted: #a8ada5; --utility-line: #30342f;
}
.site-header {
  position: relative; z-index: 20;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400;
  line-height: 1.65; letter-spacing: normal; font-synthesis: none;
}
.site-header ul { margin: 0; padding: 0; }
.site-header a { text-decoration: none; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 3.2px solid var(--accent); outline-offset: 4px; }

.site-header {
  width: 100%;
  color: var(--header-ink);
  background: var(--header-paper);
  border-bottom: 1px solid var(--header-line);
}

.site-header__inner {
  width: min(calc(100% - 32px), var(--max-width));
  margin-inline: auto;
}

.site-header__primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 100px;
}

.site-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14.4px;
  color: var(--header-ink);
  text-decoration: none;
}

.site-project-mark {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  place-items: center;
}

.site-project-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-identity__words {
  display: grid;
  gap: 1.92px;
  min-width: 0;
}

.site-identity__words > span {
  color: var(--header-muted);
  font-size: 10.88px;
  font-weight: 520;
  letter-spacing: 0.04em;
}

.wordmark {
  color: var(--header-ink);
  font-size: 27.2px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}

.site-nav {
  justify-self: end;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 5.6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 13.6px;
  border-radius: 0;
  color: var(--header-muted);
  font-size: 14.4px;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover, .site-nav a[aria-current] {
  color: var(--header-ink);
  background: rgba(17, 19, 16, 0.07);
}

.site-nav a[aria-current] {
  box-shadow: inset 0 -2.4px var(--accent);
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  margin-right: 5.6px;
  padding-inline: 16px;
  color: var(--header-paper);
  background: transparent;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 6px 0;
  border-radius: 999px;
  background: var(--header-ink);
  transition: background-color 180ms ease;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']):hover {
  color: var(--header-paper);
  background: transparent;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']):hover::before {
  background: color-mix(in srgb, var(--header-ink) 84%, var(--header-paper));
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])[aria-current] {
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])[aria-current]::before {
  background: var(--accent);
}

.site-header__utility {
  display: flex;
  min-height: 42.4px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--header-line);
}

.site-header__utility p {
  margin: 0;
  color: var(--header-muted);
  font-size: 11.52px;
  font-weight: 450;
}

.site-header__utility-controls {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}

.site-locales {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  border-left: 1px solid var(--header-line);
}

.site-locales a {
  display: inline-grid;
  min-width: 48px;
  min-height: 44px;
  place-items: center;
  border-right: 1px solid var(--header-line);
  color: var(--header-muted);
  font-size: 10.56px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.site-locales a[aria-current] {
  color: var(--header-paper);
  background: var(--header-ink);
}

@media (max-width: 704px) {
  .site-header__primary {
    min-height: 86.4px;
  }

  .site-identity {
    gap: 10.4px;
  }

  .site-project-mark {
    width: 57.6px;
    height: 57.6px;
  }

  .site-header__utility p {
    font-size: 10.72px;
  }

  .site-locales a {
    min-width: 41.6px;
  }
}

@media (max-width: 560px) {
  .site-header__primary {
    gap: 5.6px;
  }

  .site-project-mark {
    width: 48px;
    height: 48px;
  }

  .site-identity__words > span {
    display: none;
  }

  .wordmark {
    font-size: 23.2px;
  }

  .site-nav a {
    min-height: 44px;
    padding-inline: 7.68px;
    font-size: 12.8px;
  }

  .site-header__utility {
    gap: 6.4px;
  }

  .site-header__utility p {
    display: none;
  }

  .site-locales a {
    min-width: 44px;
    font-size: 9.28px;
  }
}

.site-header__primary {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 64px;
  gap: clamp(12.8px, 2vw, 22.4px);
}

.site-project-mark {
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.site-project-mark img {
  filter: var(--mark-filter);
  transform: scale(1.24);
}

.site-identity {
  gap: 12px;
}

.site-identity__words {
  gap: 0;
  align-content: center;
}

.wordmark {
  font-family: 'BlenderLogo', var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.92;
}

.site-identity__words > span {
  font-size: 9.92px;
  line-height: 1.08;
}

.site-nav ul {
  width: 100%;
  gap: 8px;
}

.site-nav li:last-child {
  margin-left: auto;
}

.site-nav a {
  min-height: 44px;
  font-size: 13.44px;
}

.site-nav li:last-child a {
  border: 1px solid var(--header-line);
  color: var(--header-ink);
}

.site-nav li:last-child a::after {
  margin-left: 8.8px;
  color: var(--header-muted);
  content: '↗';
}

.site-nav li:last-child a:hover {
  border-color: var(--header-ink);
  background: transparent;
}

.site-nav a:hover, .site-nav a[aria-current], .landing-theme:hover {
  color: var(--header-ink);
  background: color-mix(in srgb, var(--header-ink) 8%, transparent);
}

.site-header__utility {
  min-height: 36.8px;
}

.site-header__utility > p {
  font-size: 10.56px;
}

.landing-theme {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  min-height: 44px;
  padding: 4px 12.8px;
  border: 0;
  border-left: 1px solid var(--header-line);
  border-radius: 0;
  color: var(--header-ink);
  background: transparent;
  font: 680 10.88px/1 var(--font-sans);
}

.landing-theme:focus-visible {
  outline: 3.2px solid var(--accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .landing-theme {
    transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
  }
}

@media (max-width: 704px) {
  .site-header__primary {
    min-height: 60px;
  }

  .site-project-mark {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 560px) {
  .site-header__primary {
    grid-template-columns: minmax(0, 1fr);
    gap: 5.6px;
    padding-block: 6.4px;
  }

  .site-nav {
    width: 100%;
    justify-self: stretch;
    border-top: 1px solid var(--header-line);
  }

  .site-nav ul {
    justify-content: flex-end;
  }

  .site-nav li:last-child {
    margin-left: 0;
  }

  .site-nav a {
    min-height: 44px;
    padding-inline: 9.6px;
    font-size: 12.48px;
  }

  .site-header__utility > p {
    display: none;
  }
}

.site-header {
  border-bottom-color: var(--utility-line);
}

.site-header__utility {
  color: var(--utility-ink);
  background: var(--utility-paper);
  border-top-color: var(--utility-line);
  box-shadow: 0 0 0 100vmax var(--utility-paper);
  clip-path: inset(0 -100vmax);
}

.site-header__utility > p {
  color: var(--utility-muted);
}

.landing-theme {
  color: var(--utility-muted);
  border-left-color: var(--utility-line);
}

.landing-theme:hover {
  color: var(--utility-ink);
  background: transparent;
}

.site-locales {
  border-left-color: var(--utility-line);
}

.site-locales a {
  color: var(--utility-muted);
  border-right-color: var(--utility-line);
}

.site-locales a:hover {
  color: var(--utility-ink);
}

.site-locales a[aria-current] {
  color: var(--utility-paper);
  background: var(--utility-ink);
}

.landing-theme {
  padding-left: calc((48px - 1px) / 2 - 4.8px - 0.6px);
}

@media (max-width: 704px) {
  .landing-theme {
    padding-left: calc((41.6px - 1px) / 2 - 4.8px - 0.6px);
  }
}

@media (max-width: 560px) {
  .landing-theme {
    padding-left: calc((44px - 1px) / 2 - 4.224px - 0.6px);
  }
}

.site-header__utility {
  border-left: 1px solid var(--utility-line);
}

.site-header__utility > p {
  padding-left: calc((48px - 1px) / 2 - 4.8px - 0.074em);
}

@media (max-width: 704px) {
  .site-header__utility > p {
    padding-left: calc((41.6px - 1px) / 2 - 4.8px - 0.074em);
  }
}

@media (max-width: 560px) {
  .site-header__utility {
    border-left: 0;
  }
}

.site-nav li:last-child a {
  position: relative;
  padding-inline: calc(13.6px + 1px);
  border: 0;
}

.site-nav li:last-child a::before {
  position: absolute;
  inset: 0;
  border: 1px solid var(--header-line);
  content: '';
  pointer-events: none;
}

.site-nav li:last-child a:hover {
  color: var(--header-accent);
}

.site-nav li:last-child a:hover::before {
  border-width: 2px;
  border-color: var(--header-ink);
}

.site-nav li:last-child a:hover::after {
  color: inherit;
}

@media (max-width: 560px) {
  .site-nav li:last-child a {
    padding-inline: calc(9.6px + 1px);
  }
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
  font-size: 12px;
  line-height: 20px;
}

@media (max-width: 560px) {
  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
    font-size: 11.2px;
  }
}

@media (max-width: 400px) {
  .site-nav ul {
    gap: 6px;
  }

  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
    margin-right: 0;
    padding-inline: 11.2px;
  }
}

.site-header .wordmark {
  display: block;
  min-width: 82.91px;
  height: 24.08px;
  margin-top: -2px;
  background: currentColor;
  -webkit-mask: url(/logo/moble-wordmark-header.svg) 0 0 / 84px 25px no-repeat;
  mask: url(/logo/moble-wordmark-header.svg) 0 0 / 84px 25px no-repeat;
}

@media (max-width: 560px) {
  .site-header .wordmark {
    -webkit-mask-image: url(/logo/moble-wordmark-header-compact.svg);
    mask-image: url(/logo/moble-wordmark-header-compact.svg);
  }
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
  margin-right: 0;
  padding-inline: 13.6px;
  color: var(--header-muted);
  font-size: 12.8px;
  line-height: 20px;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])::before {
  inset: auto 13.6px 6.4px;
  height: 3px;
  border-radius: 0;
  background: var(--header-lime);
  opacity: 0;
  transform: scaleX(0.4);
  transition:
  opacity 180ms ease,
  transform 180ms ease;
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']):hover {
  color: var(--header-ink);
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']):hover::before {
  background: var(--header-lime);
  opacity: 0.5;
  transform: scaleX(1);
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])[aria-current] {
  color: var(--header-ink);
}

.site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])[aria-current]::before {
  background: var(--header-lime);
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 560px) {
  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
    padding-inline: 9.6px;
    font-size: 12.16px;
  }

  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])::before {
    inset: auto 9.6px 5.6px;
  }
}

@media (max-width: 400px) {
  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news']) {
    padding-inline: 8px;
  }

  .site-nav li :is(a[data-nav='keyset'], a[data-nav='guide'], a[data-nav='news'])::before {
    inset: auto 8px 5.6px;
  }
}

.site-project-mark {
  overflow: visible;
}

.site-project-mark .moble-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: scale(1.24);
}

.site-project-mark .moble-mark__tuft, .site-project-mark .moble-mark__head {
  fill: #000;
}

.site-project-mark .moble-mark__eyes path {
  fill: var(--header-paper, #f6f5ef);
}

.site-project-mark .moble-mark__squint {
  opacity: 0;
  fill: none;
  stroke: var(--header-paper, #f6f5ef);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 56px;
}

.site-project-mark .moble-mark__tuft {
  transform-box: view-box;
  transform-origin: 0 0;
}

.site-project-mark .moble-mark__eyes {
  transform-box: fill-box;
  transform-origin: center;
}

.site-project-mark .moble-mark.is-blink .moble-mark__eyes {
  animation: moble-mark-blink 240ms ease-in-out;
}

.site-project-mark .moble-mark.is-shake .moble-mark__tuft--1 {
  animation: moble-mark-sway-1 900ms ease-out;
}

.site-project-mark .moble-mark.is-shake .moble-mark__tuft--2 {
  animation: moble-mark-sway-2 900ms ease-out 45ms;
}

.site-project-mark .moble-mark.is-shake .moble-mark__tuft--3 {
  animation: moble-mark-sway-3 900ms ease-out 90ms;
}

.site-project-mark .moble-mark.is-shake .moble-mark__eyes {
  opacity: 0;
}

.site-project-mark .moble-mark.is-shake .moble-mark__squint {
  opacity: 1;
}

@keyframes moble-mark-blink {
  0%, 100% { transform: scaleY(1); }
  40%, 58% { transform: scaleY(0); }
}

@keyframes moble-mark-sway-1 {
  0% { transform: none; }
  16% { transform: matrix(0.9561, -0.0066, 0.2934, 1.0439, -65, -9.7); }
  34% { transform: matrix(1.0322, 0.0048, -0.2152, 0.9678, 47.7, 7.1); }
  52% { transform: matrix(0.9795, -0.0031, 0.1369, 1.0205, -30.3, -4.5); }
  70% { transform: matrix(1.0102, 0.0015, -0.0685, 0.9898, 15.2, 2.3); }
  86% { transform: matrix(0.9963, -0.0005, 0.0245, 1.0037, -5.4, -0.8); }
  100% { transform: none; }
}

@keyframes moble-mark-sway-2 {
  0% { transform: none; }
  16% { transform: matrix(1.1452, -0.1123, 0.1877, 0.8548, -128, 99); }
  34% { transform: matrix(0.8935, 0.0824, -0.1376, 1.1065, 93.9, -72.6); }
  52% { transform: matrix(1.0678, -0.0524, 0.0876, 0.9322, -59.8, 46.2); }
  70% { transform: matrix(0.9661, 0.0262, -0.0438, 1.0339, 29.9, -23.1); }
  86% { transform: matrix(1.0121, -0.0094, 0.0156, 0.9879, -10.7, 8.3); }
  100% { transform: none; }
}

@keyframes moble-mark-sway-3 {
  0% { transform: none; }
  16% { transform: matrix(1.0474, -0.2923, 0.0077, 0.9526, -18.8, 115.8); }
  34% { transform: matrix(0.9653, 0.2144, -0.0056, 1.0347, 13.8, -84.9); }
  52% { transform: matrix(1.0221, -0.1364, 0.0036, 0.9779, -8.8, 54); }
  70% { transform: matrix(0.989, 0.0682, -0.0018, 1.011, 4.4, -27); }
  86% { transform: matrix(1.0039, -0.0244, 0.0006, 0.9961, -1.6, 9.6); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-project-mark .moble-mark *, .site-project-mark .moble-mark.is-shake .moble-mark__tuft--1, .site-project-mark .moble-mark.is-shake .moble-mark__tuft--2, .site-project-mark .moble-mark.is-shake .moble-mark__tuft--3 {
    animation: none !important;
  }
}

/* Guide tools in the lower row (the guide's own bar is gone): contents (when the side list is hidden), search and more,
   boxed like the theme toggle. EN and VI stay visible but inactive: this guide is Korean only. */
.site-header .guide-tool {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--utility-line);
  border-radius: 0;
  color: var(--utility-muted);
  background: transparent;
  cursor: pointer;
}
.site-header .guide-tool svg { width: 17px; height: 17px; }
.site-header .guide-tool:hover { color: var(--utility-ink); }
.site-header .guide-tool--list { display: none; }
@media screen and (max-width: 1100px) { .site-header .guide-tool--list { display: inline-grid; } }
.site-header .site-locales .is-unavailable {
  display: inline-grid; min-width: 48px; min-height: 44px; place-items: center;
  border-right: 1px solid var(--utility-line); color: var(--utility-muted); opacity: 0.38;
  font-size: 10.56px; font-variant-numeric: tabular-nums; font-weight: 680; letter-spacing: 0.08em; cursor: default;
}
@media (max-width: 704px) { .site-header .site-locales .is-unavailable { min-width: 41.6px; } }
@media (max-width: 560px) { .site-header .site-locales .is-unavailable { min-width: 44px; font-size: 9.28px; } }
/* The three tool cells need 133px beside the theme toggle and KO: EN/VI step aside below 375px (320px phones). */
@media (max-width: 374px) { .site-header .site-locales .is-unavailable { display: none; } }
/* The guide renders "from projects.mo" with static Pretendard (moble.co.kr ships the variable subset), 1.2px wider;
   pin the identity column to moble.co.kr's width so the navigation starts on the same pixel. */
@media (min-width: 561px) { .site-header .site-identity__words { width: 83.5px; } .site-header .site-identity__words > span { white-space: nowrap; } }