/* editorial-web.css — /editorial-web/ (Editorial & Web — World View).
   Ported from withok.kr's /editorial-web-worldview-beta
   (business_withok/assets/css/templates/webs-beta.css). The rules below the
   first block are that file with the page's class prefix (webs-beta__x →
   editorial-web-x); the first block stands in for withok.kr's theme: its
   spacing steps are exactly this site's --sp steps, and its type sizes take
   this site's tokens — the list's 16px becomes 13px because Jost runs about
   an eighth wider than withok.kr's serif, so each row keeps its width there
   (12.8 → 13, 10.24 → 10px for the small UI text),
   and its faces are this site's (Jost and 210 MGothic for the list, Space
   Mono for small UI) — withok.kr's serif is licensed to that domain and this
   site sets no serif. Colours are withok.kr's "classic" theme as rendered
   there on 18 Sep 2026. */

body.editorial-web-page {
  --space-4: var(--sp-1);
  --space-8: var(--sp-2);
  --space-16: var(--sp-4);
  --space-32: var(--sp-8);
  --body-padding-sides: var(--sp-8);
  --header-height: var(--header-h);
  --font-size-ui: var(--text-label-small);
  --font-size-small: var(--text-body);
  --font-family-ui: var(--sans);
  --text-color: #f0f0f0;
  --sub-color: #111111;
  --main-color: #f0f0f0;
  --background-color: #111111;
  --overlay-white: rgba(255, 255, 255, 0.8);
  --clock-line-width: 0.065rem;
  --transition-fast: 0.25s ease;
  --border: var(--clock-line-width) solid var(--main-color);
  --button-outline-padding: 0 var(--sp-1);
  --button-outline-min-height: 1.2rem;
  --button-outline-border: var(--border);
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
}
/* the header floats over the 3D space here, as withok.kr's does */
body.editorial-web-page .site-header { background: transparent; }

body.editorial-web-page {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

.editorial-web {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.editorial-web-stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
}

.editorial-web-stage.is-dragging { cursor: grabbing; }
.editorial-web-stage.is-hovering { cursor: pointer; }

/* CSS3DRenderer 가 만드는 레이어 — 손가락·마우스는 무대(stage)가 받고, 요소들은 지나가게 둔다
   (iframe 이 끌기·클릭을 먹지 않게) */
/* 도식(맵 격자·궤도선·XYZ·글자 고리) — CSS3D 층 뒤에 깔리는 WebGL 캔버스, 같은 카메라 */
.editorial-web-diagram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.editorial-web-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.editorial-web-layer * { pointer-events: none !important; }

/* 웹 창: 브라우저 창 느낌 — 위에 신호등·주소 막대(/web 의 .webs-window 와 같은 색), 아래에 화면.
   요소는 실제로는 --k 배 크게 만들고 3D 에서 1/k 로 줄여 둔다 — 그래야 카메라가 다가가 키워도
   흐려지지 않는다(CSS3D 는 요소를 배치된 px 크기로 래스터한다). 그래서 크기는 모두 px × --k 로 적는다. */
.editorial-web-win {
  --wb-shell: rgba(251, 251, 247, 0.94);
  --wb-toolbar: rgba(245, 245, 240, 0.9);
  --wb-address-bg: rgba(255, 255, 255, 0.74);
  --wb-address-color: rgba(18, 18, 18, 0.5);
  --wb-dot: rgba(22, 22, 18, 0.14);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(3.5px * var(--k, 1));
  background: var(--wb-shell);
  box-shadow:
    0 0 0 calc(0.5px * var(--k, 1)) rgba(0, 0, 0, 0.1),
    0 calc(3px * var(--k, 1)) calc(8px * var(--k, 1)) rgba(10, 10, 10, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.35s ease;
}

.editorial-web-bar {
  flex: 0 0 calc(4.667px * var(--k, 1));   /* BAR_H in js/editorial-web.js: withok.kr's 7, a third thinner */
  display: flex;
  align-items: center;
  gap: calc(1.6px * var(--k, 1));
  padding: 0 calc(2px * var(--k, 1));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), var(--wb-toolbar));
}

.editorial-web-dots {
  display: flex;
  gap: calc(1.2px * var(--k, 1));
  flex-shrink: 0;
}

.editorial-web-dots span {
  width: calc(2px * var(--k, 1));
  height: calc(2px * var(--k, 1));
  border-radius: 999px;
  box-shadow: inset 0 0 0 calc(0.2px * var(--k, 1)) rgba(0, 0, 0, 0.08);
}

.editorial-web-dots span:nth-child(1) { background: #ff5f57; }
.editorial-web-dots span:nth-child(2) { background: #ffbd2e; }
.editorial-web-dots span:nth-child(3) { background: #28c840; }

.editorial-web-address {
  flex: 1;
  min-width: 0;
  height: calc(3.2px * var(--k, 1));
  line-height: calc(3.2px * var(--k, 1));
  padding: 0 calc(2px * var(--k, 1));
  border-radius: 999px;
  background: var(--wb-address-bg);
  color: var(--wb-address-color);
  font-family: var(--font-family-ui);
  font-size: calc(2.267px * var(--k, 1));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editorial-web-meta {
  display: inline-flex;
  gap: calc(0.667px * var(--k, 1));
  flex-shrink: 0;
}

.editorial-web-meta span {
  width: calc(0.667px * var(--k, 1));
  height: calc(0.667px * var(--k, 1));
  border-radius: 999px;
  background: var(--wb-dot);
}

.editorial-web-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #f6f4ef;
}

.editorial-web-screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Vimeo 배경 재생 — /web 의 .vimeo-embed 와 같은 규칙: --r 은 보여 줄 비율, --vr 은 파일 비율 */
.editorial-web-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000 center / cover no-repeat;
}

.editorial-web-video iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% * var(--r, 0.5625) / var(--vr, var(--r, 0.5625)));
  height: 100%;
  border: 0;
  display: block;
}

/* 책의 여섯 면 — 상자를 DOM 으로 조립한다. 안쪽 면이 비치지 않게 뒷면은 숨긴다 */
.editorial-web-face {
  box-sizing: border-box;
  overflow: hidden;
  background: #efede6;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.editorial-web-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* 고르면(.is-open) 고른 것(.is-focus)만 제 색이고 나머지는 회색·반투명, 바깥으로 돌아가면 원래 색으로.
   고른 것을 가리는 창·책은 잠깐 아예 사라진다(JS 가 .is-ghost 를 붙인다) */
.editorial-web-face { transition: opacity 0.35s ease; }
.editorial-web-screen img,
.editorial-web-video iframe,
.editorial-web-face img { transition: filter 0.35s ease; }
/* 흐리게 하는 것은 요소마다의 opacity 가 아니라 고른 것 뒤에 세운 막 한 장(.editorial-web-veil) — 겹친 곳이 진해지지 않게 */
.editorial-web-veil {
  background: var(--background-color, #111111);   /* 페이지 바탕과 같은 색(테마를 따른다) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.editorial-web.is-open .editorial-web-veil { opacity: 0.75; }
.editorial-web.is-open .editorial-web-win:not(.is-focus) img,
.editorial-web.is-open .editorial-web-win:not(.is-focus) iframe,
.editorial-web.is-open .editorial-web-face:not(.is-focus) img { filter: grayscale(1); }
.editorial-web-win.is-ghost,
.editorial-web-face.is-ghost { opacity: 0 !important; }

.editorial-web-face--spine { filter: brightness(0.86); }
.editorial-web-face--tail { filter: brightness(0.94); }
.editorial-web-face--top,
.editorial-web-face--bottom { filter: brightness(0.9); }

/* ── 안내 ── */
.editorial-web-hint {
  position: absolute;
  right: calc(var(--space-16) + 4.6rem);   /* 뒤로가기 알약(.editorial-web-back) 옆 */
  bottom: calc(var(--space-16) + 0.3em);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-ui);
  color: var(--text-color);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.editorial-web.is-open .editorial-web-hint { opacity: 0; }
/* the lists run down to the screen's edge, through the hint's line: where a
   visible chip lies over the hint, the hint gives way (js/editorial-web.js,
   fitHint) — only while the lists are showing, since hiding them clears it */
.editorial-web.has-lists .editorial-web-hint.is-crowded { opacity: 0; }

/* ── 정보 패널(모바일) ── */
.editorial-web-panel {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  width: min(24rem, calc(100vw - var(--space-16) * 2));
  box-sizing: border-box;
  /* 상자 없이 칩과 글만 놓는다 (withok.kr World View 와 같게) */
  padding: 0;
  padding-right: 2rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

.editorial-web.is-open .editorial-web-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.editorial-web-close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.editorial-web-close svg {
  width: var(--space-16);
  height: var(--space-16);
  stroke: currentColor;
  stroke-width: var(--clock-line-width);
  fill: none;
}

/* 정보 태그·열기 단추 — 목록 칩과 같은 규격(0.72rem 고딕, 0.26rem 위아래), 색은 JS 가 형광색을 무작위로 칠한다 */
.editorial-web-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.editorial-web-tags + .editorial-web-tags { margin-top: var(--space-4); }

.editorial-web-tag,
.editorial-web-open {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: 0.26rem var(--space-8);
  border: 0;
  border-radius: 0;
  background-color: var(--overlay-white);
  color: #111;
  font-family: var(--font-family-ui);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.editorial-web-tag--title {
  white-space: normal;
  line-height: 1.2;
}

.editorial-web-desc {
  margin: var(--space-8) 0 0;
  font-family: var(--font-family-ui);
  font-size: 0.72rem;
  line-height: 1.45;
}

.editorial-web-open {
  margin-top: var(--space-8);
  cursor: pointer;
}

.editorial-web-open:hover {
  filter: brightness(1.15);
}

.editorial-web-empty {
  position: absolute;
  left: var(--space-16);
  top: calc(var(--header-height) * 2);
}

/* 언어 — 이 페이지 안의 kr/eng 짝은 body.eng 가 정한다 */
body.eng .editorial-web .kr { display: none; }
body:not(.eng) .editorial-web .eng { display: none; }

/* ── 오른쪽 목록: 에디토리얼의 .editorial-page__list 규칙을 그대로 옮겼다 ──
   줄마다 [크레딧][제목][크기·연도] 칩, 색은 JS 가 형광색을 무작위로 칠한다.
   칩 위에 올리면 줄이 왼쪽으로 살짝, 선택된 줄은 1.05 배. */
.editorial-web-list {
  position: fixed;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  /* first row starts where the header ends; no bottom padding: both lists run
     on to the screen's bottom edge, the rows that don't fit going out of view
     there, and the list scrolls for the rest (the owner's choice, 19 Sep 2026) */
  padding: calc(var(--header-h) - var(--space-4)) calc(var(--body-padding-sides) - var(--space-16)) 0;
  color: var(--text-color);
  text-align: center;
  z-index: 4;
  pointer-events: none;            /* 칩만 받고, 빈 칸에서는 무대를 끌 수 있게 */
  opacity: 0;                      /* 처음부터 보인다(.has-lists 는 마크업에 있다). 배경을 누르면 숨기고 다시 보인다 */
  transition: opacity 0.3s ease;
}

.editorial-web-list--books { right: 0; }
.editorial-web-list--webs { left: 0; }

.editorial-web.has-lists .editorial-web-list,
.editorial-web.is-open .editorial-web-list { opacity: 1; }

.editorial-web-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scroll-snap-type: y mandatory;
  /* no scrollbar: rows running off the edge already say there is more, and an
     always-on scrollbar would run down behind the Back pill */
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-8);
  align-items: flex-end;
  --row-pitch: calc(1.5rem + var(--space-8));           /* a row and the gap after it */
  --list-tail: calc(var(--space-16) - var(--space-8));  /* see ::after below */
  scroll-padding-bottom: calc(var(--list-tail) + var(--space-8));   /* helps keep a focused row off the tail */
}

.editorial-web-list-items::-webkit-scrollbar { display: none; }

/* The room under the last row sits inside the scroll, not under the list, so the
   list reaches the screen's edge and, scrolled to the end, its last row comes up
   clear of it: 16px at least, for the books 16px plus the Back pill's room
   (2.5rem). The row gap comes before this spacer too, hence the minus one gap.
   Where mod() works it adds what puts the end of the scroll on a whole row, as
   every other snap position is: the top row isn't left as a sliver under the
   header, and a pointer resting on a chip stays on a chip at the end instead of
   landing in a gap and turning the wheel on the 3D scene. (100% here is the
   list's own height. Behind @supports because a var() in the declaration would
   otherwise knock out the plain tail in a browser without mod().) */
.editorial-web-list--books .editorial-web-list-items { --list-tail: calc(var(--space-16) - var(--space-8) + 2.5rem); }
.editorial-web-list-items::after { content: ""; flex: 0 0 var(--list-tail); }
@supports (width: mod(3px, 2px)) {
  .editorial-web-list-items::after { flex-basis: calc(var(--list-tail) + mod(100% - var(--list-tail), var(--row-pitch))); }
}

.editorial-web-list-item {
  display: flex;
  gap: var(--space-4);
  min-height: 1.5rem;
  height: 1.5rem;
  cursor: default;
  transition: all 0.3s ease;
  align-items: center;
  scroll-snap-align: start;
  justify-content: flex-end;
  padding: 0 var(--space-16);
  width: 100%;
  box-sizing: border-box;
}

.editorial-web-list-item:first-child { padding-top: var(--space-4); }

/* 목록 칩은 /editorial 의 목록과 똑같이: 줄 높이 1.5rem, 칩 높이 1.5rem, 좌우 여백 8px, 본문 글꼴 그대로 */
.editorial-web-list-item > * {
  flex-shrink: 0;
  min-width: fit-content;
  min-height: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-8);
  color: #111;
  background-color: var(--overlay-white);
  cursor: pointer;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
  font-size: inherit;
}

.editorial-web-list-item > .editorial-web-item-title {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.editorial-web-list-item > .editorial-web-item-size { justify-content: flex-end; text-align: right; }

.editorial-web.has-lists .editorial-web-list-item > *,
.editorial-web.is-open .editorial-web-list-item > * { pointer-events: auto; }

.editorial-web-list-item:has(> :hover) { transform: translateX(calc(var(--space-16) * -1)); }

/* 왼쪽(웹) 목록은 거울처럼: 왼쪽 정렬, 올리면 오른쪽으로 */
.editorial-web-list--webs .editorial-web-list-items { align-items: flex-start; }
.editorial-web-list--webs .editorial-web-list-item { justify-content: flex-start; transform-origin: left center; }
.editorial-web-list--books .editorial-web-list-item { transform-origin: right center; }
.editorial-web-list--webs .editorial-web-list-item > .editorial-web-item-title,
.editorial-web-list--webs .editorial-web-list-item > .editorial-web-item-size { justify-content: flex-start; text-align: left; }
.editorial-web-list--webs .editorial-web-list-item:has(> :hover) { transform: translateX(var(--space-16)); }

.editorial-web-list-item.is-selected,
.editorial-web-list--webs .editorial-web-list-item.is-selected {
  color: var(--sub-color);
  transform: scale(1.05);
}

/* 골랐을 때: 그 줄만 또렷하고 나머지는 회색으로 흐리게(창·책과 같이) */
.editorial-web.is-open .editorial-web-list-item:not(.is-selected) { opacity: 0.12; filter: grayscale(1); }

/* 열기 링크는 선택된 줄에만 붙는다 */
.editorial-web-item-open { display: none; }
.editorial-web-list-item.is-selected .editorial-web-item-open { display: flex; }

/* PC: 목록이 정보를 보여 주므로 팝업 패널은 쓰지 않고, 안내는 왼쪽 아래로 */
@media only screen and (min-width: 769px) {
  .editorial-web-panel { display: none; }
  .editorial-web-hint { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }
}

@media only screen and (max-width: 768px) {
  .editorial-web-list { display: none; }
  .editorial-web-panel {
    left: var(--space-8);
    right: var(--space-8);
    bottom: var(--space-8);
    width: auto;
  }
  .editorial-web-hint { right: calc(var(--space-8) + 4.6rem); bottom: calc(var(--space-8) + 0.3em); }
}

/* ── 내지 창: 책을 누르면 0.8초 뒤 떠오르는 브라우저 창들(에디토리얼의 image-window 를 따름) ── */
.editorial-web-pages {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.editorial-web-pagewin {
  --pw-shell: rgba(251, 251, 247, 0.94);
  --pw-toolbar: rgba(245, 245, 240, 0.9);
  --pw-address: rgba(18, 18, 18, 0.5);
  --pw-stage: #f6f4ef;
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--pw-shell);
  border-radius: 0.72rem;
  box-shadow: 0 0.7rem 1.6rem rgba(10, 10, 10, 0.12);
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: auto;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.editorial-web-pagewin.is-visible {
  opacity: 1;
  transform: none;
}

.editorial-web-pagewin-bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.14rem var(--space-8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), var(--pw-toolbar));
}

.editorial-web-pagewin-dots {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.editorial-web-pagewin-dots span {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 999px;
  border: var(--clock-line-width) solid rgba(0, 0, 0, 0.08);
}

.editorial-web-pagewin-dots span:nth-child(1) { background: #ff5f57; }
.editorial-web-pagewin-dots span:nth-child(2) { background: #ffbd2e; }
.editorial-web-pagewin-dots span:nth-child(3) { background: #28c840; }

.editorial-web-pagewin-address {
  flex: 1;
  min-width: 0;
  padding: 0 0.54rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--pw-address);
  font-family: var(--font-family-ui);
  font-size: calc(var(--font-size-ui) * 0.92);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editorial-web-pagewin-meta {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.editorial-web-pagewin-meta span {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 999px;
  background: rgba(22, 22, 18, 0.14);
}

.editorial-web-pagewin-stage {
  flex: 1;
  min-height: 0;
  background: var(--pw-stage);
  overflow: hidden;
}

.editorial-web-pagewin-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* 뒤로가기 — 오른쪽 아래(왼쪽 아래는 동의 알림 자리). 책 목록은 그 뒤로 화면 끝까지 지나가서 알약은 불투명하다. 안내 글은 그 왼쪽으로 비켜난다 */
.editorial-web-back {
  position: fixed;
  right: var(--space-16);
  bottom: var(--space-16);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--background-color, #111);
  font-family: var(--font-family-ui, sans-serif);
  font-size: var(--font-size-ui, 0.85rem);
  text-decoration: none;
  /* dimmed by its colour, not by opacity: the books list runs on behind the
     pill, and its rows must not show through it */
  color: var(--text-color, #fff);
  color: color-mix(in srgb, var(--text-color, #fff) 85%, var(--background-color, #111));
}

.editorial-web-back:hover,
.editorial-web-back:focus-visible {
  color: var(--text-color, #fff);
  opacity: 1;                      /* not style.css's a:hover 0.6 — the row under the pill would show through */
}

body.eng .editorial-web-back .kr,
body:not(.eng) .editorial-web-back .eng { display: none; }

/* 정보 패널이 열린 동안(모바일)은 알약을 치운다 — 패널 위에 얹히지 않게 */
.editorial-web.is-open .editorial-web-back { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .editorial-web-back { right: var(--space-8); bottom: var(--space-8); }
}