/* ==========================================================================
   READER — "lights on" reading view.
   Home is dark; clicking a column turns the lights on (ink → paper) and the
   article appears, like understanding dawning. Reading surface is always light.
   ========================================================================== */
#reader {
  position: fixed; inset: 0; z-index: 500; display: none; overflow-y: auto;
  background: #131209; -webkit-overflow-scrolling: touch;
  /* re-scope semantic tokens to LIGHT so the article reads comfortably
     even when the page theme is dark */
  --color-bg-page: #f7f4ed; --color-bg-surface: #fcfaf5;
  --color-text-primary: #1f1f1a; --color-text-body: #3f3d33; --color-text-secondary: #5f5d50;
  --color-text-muted: #8a8678; --color-accent: #5c6940; --color-link: #4e5a34;
  --color-accent-soft: rgba(92,105,64,0.12);
  --color-border-soft: #e3dccd; --color-border-default: #d9d3c4;
}
#reader.is-open { display: block; }
html.reader-lock, html.reader-lock body { overflow: hidden; }

#reader .reader__paper {
  position: relative; min-height: 100%;
  background: transparent;           /* the dark room shows through */
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--pad-x) clamp(4.5rem, 9vw, 8rem);
}

/* warm lamp halo — light pools slowly around the page */
#reader .reader__glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(48% 40% at 50% 24%, rgba(255,238,205,0.42), rgba(255,238,205,0) 72%);
  transition: opacity 2.1s cubic-bezier(0.4, 0, 0.2, 1);
}
#reader.is-lit .reader__glow { opacity: 1; }

/* room chrome — light text on ink, present as soon as you enter */
#reader .reader__bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  height: 3.4rem; width: min(100%, 44rem); margin: 0 auto clamp(0.8rem, 2.5vw, 1.6rem);
  opacity: 0; transition: opacity 1s ease 0.15s;
}
#reader.is-open .reader__bar { opacity: 1; }
#reader .reader__brand { font-family: var(--font-serif); font-size: 1.15rem; color: #e9e3d4; white-space: nowrap; }
#reader .reader__brand em { font-style: italic; color: #aab38c; }
#reader .reader__close {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; white-space: nowrap;
  background: rgba(245,247,238,0.06); border: 1px solid rgba(245,247,238,0.18);
  border-radius: var(--radius-pill); padding: 0.5rem 1rem;
  font-family: var(--font-meta); font-size: var(--text-sm); color: #e9e3d4;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
#reader .reader__close:hover { background: rgba(245,247,238,0.12); border-color: rgba(245,247,238,0.36); }

/* THE PAGE — a sheet of paper lying in the dark room.
   Unlit it is barely a shape; lit, it warms to paper and the ink appears. */
#reader .reader__content {
  position: relative; z-index: 2; width: min(100%, 44rem);
  margin: clamp(0.5rem, 3vh, 2.5rem) auto 0;
  padding: clamp(2.2rem, 4vw, 3.8rem) clamp(1.6rem, 4.5vw, 3.4rem) clamp(3rem, 6vw, 4.5rem);
  border-radius: 5px;
  background: #1b1913;               /* paper in the dark */
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transition: background 1.9s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 1.9s cubic-bezier(0.4, 0, 0.2, 1);
}
#reader.is-lit .reader__content {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,252,245,0.55), rgba(255,252,245,0) 60%),
    #faf6ee;                         /* light warm paper (v3, 상세페이지와 일치) */
  box-shadow: 0 50px 130px rgba(0,0,0,0.55), 0 0 0 1px rgba(120,96,52,0.07),
    0 0 100px rgba(255,236,198,0.12);
}
/* paper tooth — fine fibrous grain that fades in with the page */
#reader .reader__content::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(150,120,70,0.025) 0 2px, rgba(150,120,70,0) 2px 5px);
  background-size: 200px 200px, 100% 100%;
  transition: opacity 1.9s cubic-bezier(0.4, 0, 0.2, 1);
}
#reader.is-lit .reader__content::before { opacity: 0.5; }
#reader .reader__content > * { position: relative; z-index: 1; }

/* masthead (kicker + title) appears once the paper is lit; the title is then typed in by JS */
#reader .reader__content > .rd-kicker,
#reader .reader__content > .rd-title { opacity: 0; transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1) 0.5s; }
#reader.is-lit .reader__content > .rd-kicker,
#reader.is-lit .reader__content > .rd-title { opacity: 1; }

/* the body block rises in one piece, only after the title finishes typing */
#reader .reader__content > .rd-meta,
#reader .reader__content > .rd-rule,
#reader .reader__content > .rd-body,
#reader .reader__content > .rd-foot {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s cubic-bezier(0.4,0,0.2,1), transform 1.1s cubic-bezier(0.4,0,0.2,1);
}
#reader.is-read .reader__content > .rd-meta,
#reader.is-read .reader__content > .rd-rule,
#reader.is-read .reader__content > .rd-body,
#reader.is-read .reader__content > .rd-foot { opacity: 1; transform: none; }

/* 측정된 최종 줄을 블록으로 고정 → 타이핑 내내 줄 구성이 완성본과 동일 */
#reader .rd-title .rd-line { display: block; }
/* 안 친 부분은 자리만 차지하고 투명 → 줄바꿈 위치 고정(완성 시 reflow 없음) */
#reader .rd-title .rd-rest { color: transparent; }
/* blinking caret — 현재 타이핑 중인 줄의 친 글자 경계에만 표시.
   줄 박스 높이를 키우지 않도록(줄 흔들림 방지) 폭 0·절대배치로 그려 레이아웃에 영향 없음 */
#reader .rd-title .rd-typed { position: relative; }
#reader .rd-title.is-typing .rd-typed.is-cursor::after {
  content: ""; position: absolute; left: 100%; bottom: 0.1em;
  width: 0.06em; height: 0.92em; margin-left: 0.04em;
  background: var(--color-accent);
  animation: rdCaret 0.8s steps(1) infinite;
}
@keyframes rdCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

#reader .rd-kicker {
  font-family: var(--font-meta); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); font-weight: var(--fw-semibold); color: var(--color-accent);
}
#reader .rd-title {
  margin-top: var(--space-4); font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.1rem); line-height: 1.1;
  letter-spacing: var(--tracking-tight); color: var(--color-text-primary); text-wrap: balance;
}
#reader .rd-meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
#reader .rd-rule { height: 1px; background: var(--color-border-default); margin: clamp(1.8rem, 3vw, 2.6rem) 0; }
/* 리더는 라이트(크림 종이)로 토큰을 재스코프하므로, 본문 컨테이너에 색을 명시해
   목록(li)·강조 등 개별 규칙이 없는 요소도 어두운 글자색을 상속하게 한다(가독성). */
#reader .rd-body { font-family: var(--font-serif); color: var(--color-text-body); }
#reader .rd-body p { font-size: 1.18rem; line-height: 1.82; color: var(--color-text-body); margin-bottom: 1.4rem; text-wrap: pretty; }
#reader .rd-body ul, #reader .rd-body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
#reader .rd-body li { font-size: 1.12rem; line-height: 1.8; margin: 0.3rem 0; color: var(--color-text-body); }
#reader .rd-body strong, #reader .rd-body b { color: var(--color-text-primary); }
#reader .rd-lead { font-size: 1.34rem !important; line-height: 1.6 !important; color: var(--color-text-primary) !important; }

/* 유튜브 임베드 — 반응형 16:9 (리더 .rd-body + 상세 .aw-article-body 공용) */
.yt-embed { position: relative; width: 100%; margin: clamp(1.6rem, 3vw, 2.4rem) 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) { .yt-embed { height: 0; padding-bottom: 56.25%; } }
#reader .rd-body h2 {
  font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 1.65rem;
  line-height: 1.3; letter-spacing: var(--tracking-tight); color: var(--color-text-primary);
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
}
#reader .rd-quote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.4vw, 1.8rem);
  line-height: 1.5; color: var(--color-accent); border-left: 3px solid var(--color-accent);
  padding-left: 1.4rem; margin: clamp(1.8rem, 3vw, 2.6rem) 0;
}
#reader .rd-foot {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-3);
}
#reader .rd-foot .meta { white-space: nowrap; }
/* 본문 맨 아래 '닫기' — 크림 종이용(상단 바의 어두운 닫기 스타일 오버라이드).
   맨 아래까지 읽고 위로 안 올라가도 바로 닫을 수 있게. */
#reader .rd-foot__close {
  margin-left: auto; cursor: pointer;
  background: transparent; border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary); border-radius: var(--radius-pill);
  padding: 0.45rem 1.05rem; font-family: var(--font-meta); font-size: var(--text-sm);
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
#reader .rd-foot__close:hover {
  color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
/* 하단 고정 독바 — 화면 하단 중앙에 떠 있는 종이톤 알약. 본문이 다 떠오른(is-read)
   뒤에야 스르륵 페이드인 → 입장 연출을 방해하지 않는다. 모바일 엄지존에 특히 유용. */
#reader .reader__dock {
  position: fixed; left: 50%; bottom: clamp(0.9rem, 2.5vw, 1.6rem); transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem; border-radius: var(--radius-pill);
  background: rgba(250,246,238,0.92); border: 1px solid rgba(120,96,52,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.9s;
}
#reader.is-read .reader__dock {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
}
#reader .reader__dock-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem; font-family: var(--font-meta); font-size: var(--text-sm);
  color: #5b513c; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#reader .reader__dock-btn:hover { background: rgba(120,96,52,0.1); color: var(--color-accent); }
/* 두 버튼 사이 가느다란 구분선 */
#reader .reader__dock-btn + .reader__dock-btn::before {
  content: ""; position: absolute; left: -1px; top: 22%; bottom: 22%;
  width: 1px; background: rgba(120,96,52,0.18);
}
#reader .reader__dock-btn + .reader__dock-btn { position: relative; }

.is-clickable { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  #reader .reader__content, #reader .reader__content > *, #reader .reader__content::before, #reader .reader__glow, #reader .reader__bar, #reader .reader__dock { transition: none; }
  #reader.is-lit .reader__glow { opacity: 1; }
  #reader.is-lit .reader__content > .rd-meta,
  #reader.is-lit .reader__content > .rd-rule,
  #reader.is-lit .reader__content > .rd-body,
  #reader.is-lit .reader__content > .rd-foot { opacity: 1; transform: none; }
  #reader .rd-title.is-typing .rd-typed.is-cursor::after { display: none; }
}

/* ==========================================================================