/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- 글꼴 — 사이트 폴더의 fonts/ 에 들어 있어 인터넷 없이도 뜬다 (둘 다 SIL OFL, fonts/LICENSE.txt) ---------- */
/* 영문 본문: Maison Neue Mono (Milieu Grotesque, 상용 — 구매한 라이선스) */
@font-face {
  font-family: "Maison Neue Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MaisonNeueMono.ttf") format("truetype");
}
/* 제목 영문: Megumi Ultra Light (The Type Founders, Adobe Fonts 약관 — 구매한 라이선스). 지금은 글쓴이 이름에만 쓴다 */
@font-face {
  font-family: "Megumi";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/MegumiUltraLight.ttf") format("truetype");
}
/* 영문 보조: Geist Mono — Maison Neue Mono 에 없는 글자(●, 그리스 문자 등)를 받는다 */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 한글: D2Coding (네이버) */
@font-face {
  font-family: "D2 coding";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/D2Coding.woff2") format("woff2");
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  /* 전체 배경 — kv/seosema-bg-1.png 를 웹용(2560px WebP)으로 줄인 것. 화면을 꽉 채우고 스크롤해도 따라오지 않는다 */
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)), #d9cbc1 url("bg/bg-1.webp") center / cover no-repeat fixed;   /* WebGL 이 안 될 때의 대체 — 캔버스의 bg1Opacity 와 비슷하게 옅게 */
  color: #000;
  /* 영문은 Maison Neue Mono(없는 글자는 Geist Mono), 한글은 D2Coding(주말에 교체 예정). 못 불러오면 뒤의 글꼴로 넘어간다. 이전: "Geist Mono" 단독, "Helvetica Neue" */
  font-family: "Maison Neue Mono", "Geist Mono", "D2 coding", "Apple SD Gothic Neo", Pretendard,
               -apple-system, system-ui, monospace;
  -webkit-font-smoothing: antialiased;
}

/* 배경 캔버스 — 모든 것의 맨 뒤. 글쓴이의 반전(difference)은 이 위에서 계산된다 */
.crt-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;               /* 첫 프레임이 그려지기 전에는 숨겨 둔다 — 그동안은 CSS 배경이 보인다 */
}
html.crt-on .crt-bg { opacity: 1; }

button:focus { outline: none; }
button:focus-visible { outline: 1px solid #000; outline-offset: 3px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- page frame ---------- */
.page {
  height: 100dvh;
  /* 본문은 위아래로 화면 끝까지 쓴다. 오른쪽은 타임라인과 날짜 칸(--tl-gut)만큼 더 비워 글이 날짜 숫자 아래로 들어가지 않는다 */
  padding: 0 max(var(--pad-x), calc(var(--tl) + var(--tl-gut) + 12px)) 0 var(--pad-x);
  display: flex;
  flex-direction: column;
}

/* ---------- 화면 위에 떠 있는 것들 ---------- */
/* 글쓴이 — 가운데 위. 뒤로 지나가는 글·사진에 따라 색이 뒤집힌다 */
.author {
  position: fixed;
  top: var(--pad-y);
  /* 글쓴이는 자기 쪽 끝에 붙는다 — main.js 가 --author-x 를 재서 넣는다 */
  left: var(--pad-x);
  transform: translateX(var(--author-x, 0px));
  /* 이름은 미끄러지지 않는다 — 자리가 바뀌어도 그 자리에서 바로 나타나고, 움직임은 타이핑뿐이다 */
  z-index: 60;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #000;                  /* 본문과 같은 검정. 배경이 깔린 뒤로는 반전(difference)을 쓰지 않는다 — 이전: color #fff + mix-blend-mode: difference */
  pointer-events: none;
}

/* ---------- grid ---------- */
:root {
  --pad-x: clamp(20px, 5vw, 75px);     /* 좌우 여백 */
  --pad-y: clamp(24px, 4.6vw, 70px);   /* 위아래 여백 */
  --img-max-h: 78vh;    /* 사진 한 장이 넘지 않는 높이 */
  --tl: clamp(8px, .9vw, 12px);     /* 타임라인 스트립 폭 */
  --tl-gut: clamp(34px, 3.6vw, 48px);   /* 타임라인 왼쪽에 비워 둔 날짜 칸 폭 */
  --tl-lf: clamp(10px, .9vw, 12px);     /* 날짜 칸 숫자 크기 — 가리켰을 때 크기의 절반 (이전: 8~11px) */
  --now-fs: max(7px, calc(var(--tl) * .75));   /* 지금 날짜 글자 크기 — 눈금 높이 안에 들어간다 */
  --now-w: calc(var(--now-fs) * 7 + var(--tl));   /* 지금 날짜 직사각형의 길이 (모노 10자 + 양옆 여백 + 오른쪽 끝의 눈금 한 칸, 거기에 바늘이 있다) */
  --gap: clamp(16px, 2.7vw, 40px);
}

.grid {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  column-gap: var(--gap);
}

.col { position: relative; min-height: 0; }

/* ---------- right : media column — 날짜 레일 아래 레이어 ---------- */
.col-media {
  grid-column: 2;
  overflow: hidden;
  z-index: 0;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 900ms cubic-bezier(.22, .72, .18, 1);
}

.item {
  margin: 0 0 clamp(22px, 3.4vw, 52px) 0;   /* figure 기본 여백 제거 */
  opacity: 0;
  transition: opacity 2000ms ease;   /* 사진이 천천히 떠오름 */
}

.item.in { opacity: 1; }

.item .ph,
.item img {
  display: block;
  width: 100%;
  background: #dcdcdc;
}

.item img { object-fit: cover; }

.cap {
  margin: clamp(10px, 1.5vw, 22px) 0 0;
  padding: .6em .8em;
  background: #000;               /* 배경 위에서도 읽히도록 검정 바탕에 흰 글씨 */
  color: #fff;
  white-space: pre-line;          /* 주석 안의 줄바꿈도 그대로 */
  font-size: clamp(9px, .87vw, 13px);
  line-height: 1.58;
  letter-spacing: 0;
}

/* ---------- left : typing column ---------- */
.col-type {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.flow {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.type-stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--head-h, 140px);      /* 처음엔 헤더 아래에서 시작 */
  padding-bottom: var(--foot-h, 120px);   /* 끝은 리플라이 위에서 멎는다 */
  transition: transform 240ms cubic-bezier(.22, .72, .18, 1), opacity 460ms ease;
}

.type-stack.leaving { transition: transform 460ms ease, opacity 460ms ease; }

/* 손으로 굴리는 동안은 따라오는 지연 없이 즉시 움직인다 */
.stack.dragging,
.type-stack.dragging { transition: none; }

/* 엔터 두 번(빈 줄)으로 나뉜 문단 사이는 한 줄 띄운다 */
.body + .body { margin-top: var(--para-gap, 1.34em); }

.body {
  margin: 0;
  font-size: clamp(16px, 2.25vw, 34px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
}

.body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
  transition: opacity 240ms ease;
}

.body a:hover { opacity: .45; }

.cap a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.caret {
  display: inline-block;
  width: .075em;
  min-width: 2px;
  height: .95em;
  margin-left: .06em;
  background: #000;
  vertical-align: -0.1em;
  animation: blink 1.05s step-end infinite;
}

.caret.typing { animation: none; }
.caret.hidden { display: none; }

@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* leaving transition between posts */
.leaving { opacity: 0; transform: translateY(-38px); }

/* 좌측 이미지는 자리 이동 없이 페이드아웃 */
.stack.leaving { opacity: 0; transition: opacity 900ms ease; }
.stack.leaving .item { transition: none; }

/* ---------- 격자 배치 : 글은 정해진 칼럼 구간, 사진은 칼럼을 옮겨 다닌다 ---------- */
[data-columns="grid"] .col-media { display: none; }

[data-columns="grid"] .grid {
  grid-template-columns: minmax(0, 1fr);
}

[data-columns="grid"] .type-stack {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
  align-items: start;
}

[data-columns="grid"] .type-stack .item {
  margin-top: clamp(22px, 3.4vw, 52px);
}

/* ---------- 한 칼럼 배치 : 글과 사진이 같은 칼럼 ---------- */
[data-columns="1"] .col-media { display: none; }

[data-columns="1"] .grid {
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
}

[data-columns="1"] .type-stack .item {
  margin-top: clamp(22px, 3.4vw, 52px);
}

/* ---------- reply ---------- */
.reply {
  position: absolute;
  right: max(var(--pad-x), calc(var(--tl) + var(--tl-gut) + 12px));   /* 본문 오른쪽 끝(타임라인·날짜 칸 왼쪽)에 맞춘다 */
  bottom: var(--pad-y);
  z-index: 60;
  width: clamp(34px, 4.6vw, 70px);
  line-height: 0;
  color: #000;                       /* 배경 위에서 다른 색으로 뒤집히지 않게 본문 글자와 같은 검정. (이전: 흰색 + difference 블렌드 — 배경 색이 도는 지금은 초록 등으로 변해 패턴 속에 묻혀 보였다) */
  transition: opacity 320ms ease, transform 220ms ease, color 300ms ease;
}

.reply svg { width: 100%; height: auto; display: block; }
.reply:hover { transform: translateY(3px); }

.reply[disabled] {
  opacity: .14;
  cursor: default;
  transform: none;
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .col-type  { grid-column: 1; grid-row: 1; }
  .col-media { grid-column: 1; grid-row: 2; }
  /* 격자·한 칼럼 배치에서는 사진 칼럼이 없으니 글이 화면 전체 높이를 쓴다 */
  [data-columns="grid"] .grid,
  [data-columns="1"] .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .body { font-size: clamp(15px, 4.4vw, 22px); }
  .cap  { font-size: 10px; }

  /* 하단 버튼 — 손가락으로 누르고 읽을 만큼 키운다. 눌리는 면은 글자보다 넓게 */
  .foot { gap: 14px; }
  .foot .info-btn,
  .foot .switch {
    font-size: 13px;
    padding: 12px 6px;
    margin: -12px -6px;
  }
  /* 분홍·노랑 배경 위에서도 꺼진 쪽이 읽히도록 데스크톱보다 진하게 */
  .foot .switch span { color: #6b6b6b; }
  .foot .switch span.on { color: #000; }
  .foot .switch i { margin: 0 .3em; color: #8a8a8a; }
}

/* ---------- 전시안내 버튼 ---------- */
/* 좌하단, KO/EN 왼쪽에 같은 크기로 붙는다 */
.info-btn {
  font-size: clamp(8px, .95vw, 13px);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  color: #000;
  transition: color 300ms ease;
}

.info-btn:hover { color: #777; }

/* ---------- 전시안내 종이 ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.sheet[hidden] { display: none; }

.dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity 460ms ease;
}

.sheet.open .dim { opacity: 1; }

.paper {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(640px, 88vw);
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  background: #fff;
  padding: clamp(28px, 4vw, 54px);
  transform: translate(-50%, 100%);
  transition: transform 820ms cubic-bezier(.16, .84, .26, 1);
}

.paper::-webkit-scrollbar { display: none; }
.sheet.open .paper { transform: translate(-50%, 0); }

.close-btn {
  position: absolute;
  top: clamp(22px, 3vw, 40px);
  right: clamp(22px, 3vw, 40px);
  font-size: clamp(10px, 1.05vw, 14px);
  letter-spacing: .02em;
  transition: opacity 260ms ease;
}

.close-btn:hover { opacity: .45; }

.paper-in {
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.65;
}

.paper-sub {
  margin: 0 0 .7em;
  padding-right: 4em;
  color: #9a9a9a;
}

.paper-title {
  margin: 0 0 clamp(24px, 3.2vw, 42px);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.paper-rows {
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: minmax(4.5em, max-content) 1fr;
  gap: .55em 1.2em;
}

.paper-rows dt { color: #9a9a9a; }
.paper-rows dd { margin: 0; white-space: pre-line; }

.paper-body {
  margin: 0;
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 1px solid #e2e2e2;
  white-space: pre-line;
}

/* ---------- 우측 끝 타임라인 ---------- */
.timeline {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--tl);
  z-index: 56;                 /* 점이 이어지며 화면이 어두워질 때(52)도 환하게 — 날짜가 움직이는 게 보여야 한다 */
  background: #fff;
  isolation: isolate;          /* 블렌딩을 이 안에서만 */
}

/* 지나온 만큼 차오르는 바 — 흰색 + difference 라서
   빈 곳에서는 검게, 눈금 위에서는 눈금을 희게 뒤집는다 */
.tl-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--tl) / 2);
  height: 0;
  background: #fff;
  mix-blend-mode: difference;
  z-index: 2;
  transition: height var(--tl-ms, 760ms) var(--tl-ease, cubic-bezier(.22, .72, .18, 1));
}

.timeline.no-anim .tl-bar { transition: none; }

.tl-tick {
  position: absolute;
  right: 0;
  width: var(--tl);
  height: var(--tick-h, var(--tl));                         /* 날짜가 많아 촘촘하면 가늘어진다 (main.js) */
  margin-top: calc((var(--tl) - var(--tick-h, var(--tl))) / 2);   /* 가늘어져도 중심은 그대로 — 바늘이 가운데를 지난다 */
  background: #000;
  z-index: 1;
}

/* 눈금을 집는 영역 — 타임라인과 날짜 칸을 덮는다. 마우스는 올리면 날짜가 펼쳐지고, 누른 채 끌면 바늘이 따라온다 */
.tl-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: max(44px, calc(var(--tl) + var(--tl-gut) + 4px));
  z-index: 6;
  touch-action: none;
  cursor: pointer;
}

/* 날짜 칸 — 바늘 가까운 날짜만 숫자가 보인다. 뒤가 어두워져도(점이 이어질 때) 읽히도록 글쓴이 이름처럼 색이 뒤집힌다 */
.tl-labels {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--tl) + var(--tl-gut));
  z-index: 57;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}

.tl-lab {
  position: absolute;
  right: calc(var(--tl) + 6px);
  margin-top: calc(var(--tl) / 2);
  transform: translateY(-50%);
  font-size: var(--tl-lf);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 240ms ease;
}

/* 마우스로 가리킨 날짜 — 큰 칩 하나, 눈금 바로 옆 */
.tl-chip {
  position: absolute;
  right: calc(var(--tl) + 4px);
  margin-top: calc(var(--tl) / 2);
  transform: translateY(-50%);
  padding: 8px 16px;
  background: #000;
  color: #fff;
  font-size: clamp(20px, 1.8vw, 24px);   /* 이전: 10~12px — 그 크기는 이제 평소 날짜 숫자 크기 */
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 5;
}
.tl-chip.on { opacity: 1; }
/* 끄는 동안 — 손가락이 가리지 않도록 날짜 칸 왼쪽으로 띄우고 크게. 작은 날짜 직사각형은 숨긴다 */
.tl-chip.drag {
  right: calc(var(--tl) + var(--tl-gut) + 14px);
  padding: 8px 16px;
  font-size: clamp(20px, 1.8vw, 24px);   /* 가리킬 때와 같은 크기 (이전: 16~20px) */
}
html.tl-drag .tl-now { opacity: 0; }

/* 현재 날짜는 눈금 하나가 가로로 길어진 검정 직사각형 안에 흰 글씨로 들어가고, 눈금을 따라 같이 내려간다 */
.tl-now {
  position: absolute;
  right: 0;
  width: var(--now-w);
  height: var(--tl);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--tl);       /* 오른쪽 끝 한 칸은 눈금 자리 — 바늘이 예전처럼 거기에 놓인다 */
  background: #000;
  color: #fff;
  white-space: nowrap;
  font-size: var(--now-fs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  pointer-events: none;
  transition: top var(--tl-ms, 760ms) var(--tl-ease, cubic-bezier(.22, .72, .18, 1));
}

.timeline.no-anim .tl-now { transition: none; }
.tl-now .tl-date { display: inline-block; }   /* 날짜가 바뀔 때 흔들리고 잘리는 글자 (main.js 의 DATE_FX) */

/* 주파수 바늘 — 빨간 가는 선. 바와 큰 날짜가 움직이는 대로 같이 눈금을 따라 내려간다 */
.tl-needle {
  position: absolute;
  right: 0;
  width: calc(var(--tl) * var(--needle, 1));
  height: var(--tl);
  z-index: 4;                   /* 바(2)보다 위 — 바가 색을 뒤집지 못한다 */
  pointer-events: none;
  transition: top var(--tl-ms, 760ms) var(--tl-ease, cubic-bezier(.22, .72, .18, 1));
}
.tl-needle::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--needle-h, 1.5px);
  transform: translateY(-50%);
  background: var(--tick-color, #e00000);
}
.timeline.no-anim .tl-needle { transition: none; }

/* ---------- 좌하단 스위치 : KO/EN, A/M ---------- */
.foot {
  position: fixed;
  left: var(--pad-x);
  bottom: var(--pad-y);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}

.switch {
  font-size: clamp(8px, .95vw, 13px);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.switch span {
  color: #bdbdbd;
  transition: color 300ms ease;
}

.switch span.on { color: #000; }

.switch i {
  font-style: normal;
  color: #d5d5d5;
  margin: 0 .35em;
}

.switch:hover span { color: #777; }
.switch:hover span.on { color: #000; }

/* ---------- 글쓴이가 바뀔 때 : 지지직거리는 신호 ---------- */
.glitch {
  position: fixed;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.glitch .gl-band {
  position: absolute;
  inset: 0;
  will-change: transform, clip-path;
}

.glitch .gl-band > * { position: absolute; left: 0; right: 0; }

/* 주사선 */
.glitch .gl-scan {
  position: absolute;
  inset: -4px 0;
  opacity: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0.55) 1px,
    rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px);
}

/* 신호가 아주 끊기는 순간 */
.glitch .gl-drop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
}

/* 이름도 같이 떤다 */
.author.glitching { animation: name-glitch 110ms steps(2, end) infinite; }

@keyframes name-glitch {
  0%   { transform: translateX(var(--author-x, 0px)); opacity: 1 }
  25%  { transform: translateX(calc(var(--author-x, 0px) + 7px)); opacity: .35 }
  50%  { transform: translateX(calc(var(--author-x, 0px) - 5px)); opacity: 1 }
  75%  { transform: translateX(calc(var(--author-x, 0px) + 2px)); opacity: .6 }
  100% { transform: translateX(var(--author-x, 0px)); opacity: 1 }
}

/* ---------- 글쓴이가 없는 쪽에 드리우는 그늘 : 멀수록 어둡다 ---------- */
.veil {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

/* ---------- 그늘이 깔린 쪽에 얹힌 UI 는 밝은 색으로 뒤집는다 ---------- */
/* 오른쪽 사람이 쓰면 왼쪽이 어두워진다 → 좌하단 UI 반전 */
[data-veil="on"][data-side="right"] .info-btn        { color: #fff; }
[data-veil="on"][data-side="right"] .info-btn:hover  { color: #b5b5b5; }
[data-veil="on"][data-side="right"] .switch span     { color: #8c8c8c; }
[data-veil="on"][data-side="right"] .switch span.on  { color: #fff; }
[data-veil="on"][data-side="right"] .switch i        { color: #6f6f6f; }
[data-veil="on"][data-side="right"] .switch:hover span    { color: #c9c9c9; }
[data-veil="on"][data-side="right"] .switch:hover span.on { color: #fff; }

/* 왼쪽 사람이 쓰면 오른쪽이 어두워진다 → 큰 날짜 반전 */
[data-veil="on"][data-side="left"] .tl-now { color: #fff; }
[data-veil="on"][data-side="left"] .reply   { color: #fff; }   /* 오른쪽에 그늘이 깔리면 화살표는 흰색 */

/* ---------- 본문이 이름 쪽으로 올라가면 서서히 흐려진다 (TOP_STYLE = 1) ---------- */
[data-top="fade"] .flow,
[data-top="fade"] .ghost,
[data-top="fade"] .glitch {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent var(--fade-from, 100px),
    #000 var(--head-h, 140px));
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent var(--fade-from, 100px),
    #000 var(--head-h, 140px));
}

/* ---------- 글쓴이가 바뀔 때 : 서로 답을 주고받는 느낌 (main.js 의 EXCHANGE) ---------- */
/* 받은 편지의 잔상 — 보낸 사람 쪽에 흐릿하게 남는다.
   사진은 언제나 글보다 앞이므로, 새 글의 사진(글 칼럼, z-index 1)보다 뒤에 둔다 */
.ghost {
  position: fixed;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 그늘이 깔린 버전에서는 보낸 사람 쪽이 어두우므로 잔상은 흰 글씨 */
[data-veil="on"] .ghost { color: #fff; }

/* ---------- 교신하는 느낌 (main.js 의 LISTEN / STATIC / TUNE) ---------- */
/* 듣는 쪽 — 쓰는 사람의 반대편에 상대 이름이 옅게 떠 있고, 그 옆에서 커서가 깜빡인다 */
.author.listen { color: rgba(0, 0, 0, 0.28); animation: listen-in 700ms ease both; }
@keyframes listen-in { from { opacity: 0; } to { opacity: 1; } }
.author.listen::after {
  content: "";
  position: absolute;            /* 이름 오른쪽 바깥에 붙는다 — 이름의 폭과 자리를 바꾸지 않는다 */
  left: 100%;
  top: 50%;
  width: 0.21em;
  height: 0.8em;
  margin-left: 0.14em;
  transform: translateY(-46%);
  background: #000;
  animation: listen-blink 1.1s steps(1) infinite;
}
.author.listen.typing::after { display: none; }   /* 이름이 쳐지는 동안은 커서를 숨긴다 */
/* LISTEN_STYLE = "dots" — 이름 대신 ". . ." 이 하나씩 회색에서 검정으로 깜빡인다 (이름은 반전이라 흰색이 검정으로 보인다) */
.author.listen.dots::after { display: none; }
.author.listen.dots .dot { font-size: 2em; line-height: 0; letter-spacing: -0.3em; animation: dot-lit 1.5s steps(1) infinite; }   /* 점은 크게 (줄 높이는 건드리지 않는다) */
.author.listen.dots span:not(.dot) { display: inline-block; width: 0.04em; }                              /* 점 사이 간격은 좁게 */
.author.listen.dots .dot:nth-child(3) { animation-delay: .5s; }
.author.listen.dots .dot:nth-child(5) { animation-delay: 1s; }
@keyframes dot-lit { 0% { color: #000; } 33.3% { color: rgba(0, 0, 0, 0.28); } }
@keyframes listen-blink { 0%, 55% { opacity: 1; } 55.1%, 100% { opacity: 0; } }

/* 주파수가 맞춰지는 순간 — 타임라인도 같이 떤다 */
html.tune .timeline { animation: tune-jit 330ms steps(1) 1; }
@keyframes tune-jit {
  0%   { translate: 3px 0;  opacity: .4; }
  20%  { translate: -4px 0; opacity: 1; }
  40%  { translate: 2px 0;  opacity: .3; }
  60%  { translate: 0 0;    opacity: 1; }
  80%  { translate: -2px 0; opacity: .5; }
  100% { translate: 0 0;    opacity: 1; }
}
.glitch.gl-all { z-index: 58; -webkit-mask-image: none; mask-image: none; }


/* ---------- 맨 왼쪽의 사각형 막대 (main.js 의 SEND_BAR) — 오른쪽 타임라인의 눈금과 같은 사각형이 촘촘히. 항상 회색, 보낼 때 하나씩 검게 ---------- */
.send-bar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--tl) * var(--seg-w, 1));
  z-index: 56;
  display: flex;
  flex-direction: column;
  justify-content: space-between;     /* 위에서 아래까지 꽉 채운다 */
  pointer-events: none;
}
.send-seg {
  flex: 0 0 var(--tl);
  width: var(--tl);
  height: var(--tl);
  background: var(--seg-off, #cdcdcd);
  transition: background-color 420ms ease;
}
.send-seg.on {
  background: #000;
  transition: none;            /* 켜질 때는 바로, 꺼질 때만 서서히 */
}

/* 이름이 타이핑되는 동안 마지막 글자 뒤에서 따라가는 커서 (main.js 의 typeName) — 글자 사이에 폭 0 으로 끼어 있어서 글자 자리를 밀지 않는다 */
.name-caret {
  position: relative;
  display: inline-block;
  width: 0;
}
.name-caret::after {
  content: "";
  position: absolute;
  left: 0.04em;
  bottom: -0.075em;             /* 이 상자는 높이 0 이라 아래끝이 글자의 기준선(baseline) — 기준선 조금 아래에서 대문자 높이만큼 올라간다 (옅은 이름 뒤의 깜빡이는 커서와 같은 높이) */
  width: 0.21em;
  height: 0.8em;
  background: #fff;             /* 이름은 반전(difference)이라 흰색이 검정으로 보인다 */
}