@import url("https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=block");
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500&display=swap");

:root {
  color-scheme: dark;
  --bg: #191a1e;
  --ink: #ece8e0;
  --ink-2: #a6a29b;
  --ink-3: #64625d;
  --code-bg: color-mix(in srgb, var(--ink) 6%, transparent);
  --gutter: clamp(1rem, 4vw, 3rem);
  --notes-width: 26rem;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e6e5e1;
  --ink: #1f2024;
  --ink-2: #55534f;
  --ink-3: #85837e;
  --code-bg: #f2f1ed;
}

/* 같은 사이트 안에서 페이지를 옮기면 헤더의 로고와 버튼이 옛 자리에서 새 자리로 미끄러짐 (전체 레이아웃 페이지는 헤더 칸이 넓어서 자리가 바뀜) */
@view-transition { navigation: auto; }
.lab-logo { view-transition-name: lab-logo; }
/* 헤더 버튼은 .lab-header button { all: unset } 이 이름까지 지우므로 같은 자리에서 더 구체적으로 줌 */
.lab-header .lab-theme { view-transition-name: lab-theme; }
.lab-header .lab-notes-toggle { view-transition-name: lab-notes-toggle; }
::view-transition-group(lab-logo), ::view-transition-group(lab-theme), ::view-transition-group(lab-notes-toggle) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* 테마 전환은 화면 전체를 한 장으로 닦아 냄. 이때는 헤더 요소를 따로 떼지 않아야 로고와 버튼도 같이 닦임 */
:root[data-theme-wipe] :is(.lab-logo, .lab-theme, .lab-notes-toggle) { view-transition-name: none; }
:root[data-theme-wipe]::view-transition-old(root), :root[data-theme-wipe]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root[data-theme-wipe]::view-transition-new(root) { animation: lab-theme-wipe 1.1s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes lab-theme-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
  }
}
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 22%, transparent) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 38%, transparent); }

/* 화면을 꽉 쓰는 페이지는 <html data-layout="full"> 하나로 정함: 헤더 내용이 화면 끝에 맞춰지고, 노트는 전체 화면 드로어로 열림 (theme.js) */
:root[data-layout="full"] { --lab-header-width: 100%; }
/* 헤더는 화면 폭 전체를 덮고(스크롤 때 깔리는 유리판이 끝까지 가도록), 내용은 --lab-header-width(기본 1280px) 칸에 맞춤 */
.lab-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: clamp(1rem, 3vh, 1.75rem) max(var(--gutter), calc((100% - var(--lab-header-width, 1280px)) / 2 + var(--gutter)));
  pointer-events: none;
}
/* 페이지가 스크롤되면 바탕색 유리판이 서서히 깔려, 지나가는 글자가 헤더 글자와 겹치지 않음 (theme.js 의 data-scrolled) */
.lab-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 9%, transparent), 0 12px 32px -24px rgb(0 0 0 / .45);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.lab-header[data-scrolled]::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lab-header::before { background: color-mix(in srgb, var(--bg) 94%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  .lab-header::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.lab-scroll-mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.lab-header button {
  all: unset;
  height: 2.25rem;
  color: var(--ink-2);
  cursor: pointer;
  pointer-events: auto;
  transition: color .2s;
}
.lab-header button:hover, .lab-notes-toggle[aria-expanded="true"] { color: var(--ink); }
.lab-header :is(a, button):focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; border-radius: 2px; }

.lab-logo {
  display: block;
  margin-right: auto;
  color: var(--ink-3);
  pointer-events: auto;
  transition: color .45s var(--ease-out);
}
.lab-logo svg { display: block; width: auto; height: 2.25rem; overflow: visible; fill: currentColor; }
/* 로고를 써 내려가는 펜 (theme.js 의 writeLogo 가 마스크 안에 그림) */
.lab-ink { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.lab-logo:hover, .lab-logo:focus-visible { color: var(--ink); }

.lab-header .lab-theme {
  display: grid;
  place-items: center;
  width: 2.25rem;
  margin-right: -.5625rem;
}
.lab-theme svg { width: 1.125rem; height: 1.125rem; transition: transform .5s var(--ease-out); }
:root[data-theme="light"] .lab-theme svg { transform: rotate(180deg); }

.lab-header .lab-notes-toggle {
  font: 500 .8125rem/2.25rem "Schibsted Grotesk", "Apple SD Gothic Neo", system-ui, sans-serif;
}

.lab-notes {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(var(--notes-width), 100%);
  --notes-top: calc(2.25rem + 2 * clamp(1rem, 3vh, 1.75rem));
  padding-top: var(--notes-top);
  background: var(--bg);
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-2);
  font: 400 .875rem/1.75 "Schibsted Grotesk", "Apple SD Gothic Neo", Pretendard, system-ui, sans-serif;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .4s var(--ease-out), visibility 0s .4s;
}
.lab-notes[data-open] { visibility: visible; transform: none; transition: transform .4s var(--ease-out); }
.lab-notes[data-expanded] { width: 100%; border-left-color: transparent; }
.lab-notes[data-open][data-expanded] { transition: transform .4s var(--ease-out), width .4s var(--ease-out); }
.lab-notes-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 2rem 3rem;
}
.lab-notes[data-expanded] .lab-notes-body { padding-inline: max(2rem, calc(50% - 22rem)); }
.lab-notes-body:focus { outline: none; }

.lab-notes-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .4375rem;
  height: var(--notes-top);
  padding: 0 max(4rem, calc(50% - 22rem)) 0 max(2rem, calc(50% - 22rem));
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
/* 아래 선은 왼쪽에서부터 그어짐 */
.lab-notes-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
/* 줄마다 넘치는 부분을 가리고 내용이 그 아래에서 올라옴. 들어올 때는 길게 미끄러지며 줄마다 조금씩 늦게, 나갈 때는 짧게 가라앉음 */
.lab-notes-bar-row { max-width: 100%; overflow: hidden; padding-block: .2em; margin-block: -.2em; }
.lab-notes-bar-row > * { translate: 0 115%; opacity: 0; transition: translate .26s cubic-bezier(.5, 0, .75, 0), opacity .2s linear; }
.lab-notes-bar strong { color: var(--ink); font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.lab-notes-bar-info { display: flex; align-items: center; gap: .625rem; max-width: 100%; }
.lab-notes-bar span { flex: none; color: var(--ink-3); font-size: .75rem; line-height: 1; }
.lab-notes .lab-notes-bar .lab-notes-stack { flex-wrap: nowrap; gap: .25rem; min-width: 0; margin: 0; overflow: hidden; }
.lab-notes-bar .lab-notes-stack li { padding: .0625rem .5rem; font-size: .6875rem; }
.lab-notes[data-expanded][data-scrolled] .lab-notes-bar { opacity: 1; }
.lab-notes[data-expanded][data-scrolled] .lab-notes-bar::after { transform: none; transition: transform 1s cubic-bezier(.16, 1, .3, 1) .06s; }
.lab-notes[data-expanded][data-scrolled] .lab-notes-bar-row > * { translate: none; opacity: 1; transition: translate .8s cubic-bezier(.16, 1, .3, 1), opacity .5s var(--ease-out); }
.lab-notes[data-expanded][data-scrolled] .lab-notes-bar-row + .lab-notes-bar-row > * { transition-delay: .09s; }

.lab-notes-expand, .lab-notes-close {
  all: unset;
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lab-notes-expand {
  top: 50%;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 50%;
  background: var(--bg);
  translate: -50% -50%;
}
.lab-notes-close {
  top: clamp(1rem, 3vh, 1.75rem);
  right: 2rem;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: -.5625rem;
}
.lab-notes[data-expanded] .lab-notes-close { right: var(--gutter); }
.lab-notes-expand svg, .lab-notes-close svg { width: 1rem; height: 1rem; }
.lab-notes-expand:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.lab-notes-close:hover { color: var(--ink); }
.lab-notes :is(.lab-notes-expand, .lab-notes-close):focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.lab-notes[data-expanded] .lab-notes-expand { display: none; }
.lab-notes h2 {
  margin: 0 0 .625rem;
  color: var(--ink);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.lab-notes p, .lab-notes ul, .lab-notes ol, .lab-notes pre { margin: 0 0 .75rem; }
.lab-notes ul, .lab-notes ol { padding-left: 1.1rem; }
.lab-notes a { color: var(--ink); text-underline-offset: 3px; }
.lab-notes code { color: var(--ink); font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lab-notes pre {
  overflow-x: auto;
  padding: .875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 6px;
  background: var(--code-bg);
}
.lab-notes pre code { line-height: 1.75; }
.lab-notes pre:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.lab-notes .shiki span { color: var(--shiki-dark); font-style: var(--shiki-dark-font-style); font-weight: var(--shiki-dark-font-weight); }
:root[data-theme="light"] .lab-notes .shiki span { color: var(--shiki-light); font-style: var(--shiki-light-font-style); font-weight: var(--shiki-light-font-weight); }
.lab-notes .twoslash-hover { border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); cursor: help; }
.lab-notes .twoslash-popup-container {
  position: fixed;
  z-index: 1;
  display: none;
  max-width: min(32rem, calc(100vw - 1rem));
  padding: .375rem .625rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / .22);
  font-size: .8125rem;
  white-space: pre-wrap;
  pointer-events: none;
}
.lab-notes .twoslash-hover:hover .twoslash-popup-container { display: block; }
.lab-notes .twoslash-popup-docs {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink-2);
  font: 400 .75rem/1.5 "Schibsted Grotesk", "Apple SD Gothic Neo", Pretendard, system-ui, sans-serif;
  white-space: normal;
}

.lab-notes .lab-notes-meta { margin: 0; color: var(--ink-3); font-size: .8125rem; }
.lab-notes .lab-notes-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.lab-notes-stack li {
  padding: .1875rem .625rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-2);
  font-size: .75rem;
  line-height: 1.4;
  white-space: nowrap;
}

.lab-notes h3 {
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.lab-notes h4 {
  margin: 2rem 0 .5rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.lab-notes :is(h5, h6) { margin: 1.5rem 0 .25rem; color: var(--ink); font-size: .875rem; font-weight: 500; }
.lab-notes blockquote {
  margin: 0 0 .75rem;
  padding-left: .875rem;
  border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color: var(--ink);
}
/* 노트 그림 크게 보기 (theme.js 의 viewer) */
.lab-notes img { cursor: zoom-in; transition: border-color .2s; }
.lab-notes img:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.lab-notes img:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 3px; }
.lab-lightbox { position: fixed; inset: 0; z-index: 30; font-family: "Schibsted Grotesk", "Apple SD Gothic Neo", Pretendard, system-ui, sans-serif; }
.lab-lightbox[hidden] { display: none; }
.lab-lightbox-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
.lab-lightbox-frame {
  position: absolute;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .55), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  transform-origin: 0 0;
  touch-action: none;
  cursor: zoom-in;
}
.lab-lightbox[data-zoomed] .lab-lightbox-frame { cursor: grab; }
.lab-lightbox[data-dragging] .lab-lightbox-frame { cursor: grabbing; }
.lab-lightbox-frame img { display: block; width: 100%; height: 100%; transform-origin: 0 0; user-select: none; will-change: transform; }
.lab-lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 5.25rem;
  width: max-content;
  max-width: min(60ch, calc(100vw - 2rem));
  margin: 0;
  translate: -50% 0;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}
.lab-lightbox-bar {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  display: flex;
  gap: .125rem;
  padding: .25rem;
  translate: -50% 0;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.lab-lightbox-bar button {
  all: unset;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border-radius: 999px;
  color: var(--ink-2);
  font: 500 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.lab-lightbox-bar button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lab-lightbox-bar button:focus-visible { outline: 1px solid var(--ink-2); outline-offset: -1px; }
.lab-lightbox-bar .lab-lightbox-level { min-width: 3.5rem; }
.lab-lightbox-bar svg { width: 1rem; height: 1rem; }
/* 노트 그림. 다크/라이트 스크린샷을 같이 넣으면(data-theme-only) 지금 테마의 것만 보임 */
.lab-notes figure { margin: 0 0 1.25rem; }
.lab-notes img { display: block; width: 100%; height: auto; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 6px; }
.lab-notes figcaption { margin-top: .5rem; color: var(--ink-3); font-size: .75rem; line-height: 1.5; }
:root[data-theme="light"] .lab-notes [data-theme-only="dark"], :root:not([data-theme="light"]) .lab-notes [data-theme-only="light"] { display: none; }
.lab-notes table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: .8125rem; }
.lab-notes :is(th, td) { padding: .375rem .5rem .375rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); text-align: left; vertical-align: top; }
.lab-notes th { color: var(--ink); font-weight: 500; }

@media (max-width: 700px) {
  .lab-notes { border-left: 0; }
  .lab-notes-body { padding: 1rem 1rem 2.5rem; }
  .lab-notes-close { right: 1rem; }
  .lab-notes-expand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-theme svg, .lab-notes, .lab-notes[data-open], .lab-notes[data-open][data-expanded], .lab-notes-bar, .lab-notes-bar::after, .lab-notes-bar-row > * { transition: none; }
}