/* ============================================================
   Reble 블로그 — 글 음성으로 듣기
   voice/<slug>/ 가 있는 글에만 실린다(build.py). 색·활자는 blog.css 토큰을 그대로 쓴다.
   ============================================================ */

/* ---------- 바이라인: 듣기 + 링크 복사 ---------- */
.byline-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
#listen {
  font-family: var(--folio); font-size: .78rem; letter-spacing: .05em;
  background: none; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); padding: .3rem .9rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
}
#listen .ic { font-size: .62rem; line-height: 1; }
#listen:hover, #listen.playing { background: var(--accent); color: var(--bg); }
/* 2026-10-02 Peter: 블로그 글의 듣기 버튼(.stealth)은 자리를 아는 사람(이 서비스 개발자)만
   쓰게 한다 — 평소엔 배경색과 같게 숨기고 호버·커서·글자 선택으로도 드러나지 않게, 눌러서
   재생 막대가 열린 동안에만 원래 모습으로 보인다. 접근 제어가 아니라 눈가림이다(HTML·음성
   주소는 공개). 홈(reble.ai/)의 버튼은 .stealth 가 없어 늘 보인다. */
body:not(.narr-open) #listen.stealth,
body:not(.narr-open) #listen.stealth:hover {
  color: var(--bg); background: none; border-color: transparent;
  cursor: default; -webkit-user-select: none; user-select: none;
}

/* ---------- 하단 재생 막대 ---------- */
.narr-dock {
  /* left/right:0 이 아니라 폭을 100vw 로 묶는다 — 본문이 화면보다 넓은 글(모바일)에서
     레이아웃 뷰포트가 넓어져도 막대는 화면 폭에 맞는다 */
  position: fixed; left: 0; bottom: 0; width: min(100%, 100vw); z-index: 60;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.narr-dock[hidden] { display: none; }
.narr-inner {
  position: relative; max-width: 46rem; margin: 0 auto;
  padding: .7rem clamp(1rem, 4vw, 2rem) .75rem;
}

.narr-bar {
  position: relative; height: 4px; margin: 0 0 .7rem;
  background: var(--line); border-radius: 2px; cursor: pointer; touch-action: none;
}
.narr-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } /* 손가락 닿는 폭 */
.narr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-hi); border-radius: 2px; }
.narr-bar i { position: absolute; top: -2px; width: 1px; height: 8px; background: var(--ink-2); opacity: .45; pointer-events: none; }

.narr-row { display: flex; align-items: center; gap: .6rem; }
.narr-play {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--bg); cursor: pointer;
  font-size: .78rem; line-height: 1; display: grid; place-items: center;
}
.narr-now {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem;
  background: none; border: 0; padding: .15rem 0; margin: 0; cursor: pointer;
  text-align: left; color: var(--ink); font: inherit;
}
.narr-now .k {
  font-family: var(--folio); font-size: .7rem; letter-spacing: .06em; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.narr-now .t {
  font-size: .88rem; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.narr-now .t::after { content: " ▾"; font-size: .7rem; color: var(--ink-2); font-weight: 400; }
.narr-now[aria-expanded="true"] .t::after { content: " ▴"; }

.narr-ctl {
  flex: 0 0 auto; font-family: var(--folio); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .28rem .62rem; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.narr-ctl:hover { color: var(--ink); border-color: var(--ink-2); }
.narr-loop.on { color: var(--accent); border-color: var(--accent); }
.narr-close { border-color: transparent; font-size: 1rem; line-height: 1; padding: .3rem .45rem; }

/* 단계 목록 — 막대 위로 펼친다 */
.narr-steps {
  position: absolute; left: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem);
  bottom: calc(100% + .5rem); max-height: min(60vh, 32rem); overflow-y: auto;
  list-style: none; margin: 0; padding: .4rem 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 32px rgb(0 0 0 / .14);
}
.narr-steps[hidden] { display: none; }
.narr-steps button {
  width: 100%; display: flex; align-items: baseline; gap: .75rem; text-align: left;
  background: none; border: 0; padding: .5rem 1rem; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: .88rem; line-height: 1.5;
}
.narr-steps button:hover { background: var(--bg-elev); color: var(--ink); }
.narr-steps .n { flex: 0 0 1.4rem; font-family: var(--folio); font-size: .72rem; }
.narr-steps .tm { margin-left: auto; flex: 0 0 auto; font-family: var(--folio); font-size: .72rem; font-variant-numeric: tabular-nums; }
.narr-steps button.on { color: var(--accent); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent-hi); }

/* ---------- 지금 읽는 블록 ---------- */
.narr-band {
  position: absolute; z-index: -1; pointer-events: none;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  border-left: 2px solid var(--accent-hi); border-radius: 0 6px 6px 0;
  transition: top .35s ease, height .35s ease, opacity .25s ease;
}
:root[data-theme="dark"] .narr-band { background: color-mix(in oklab, var(--accent) 15%, transparent); }
.narr-band[hidden] { display: none; }

/* 막대가 떠 있는 동안 페이지 끝과 챗봇 버튼을 가리지 않게 */
body.narr-open { padding-bottom: var(--narr-h, 5rem); }
body.narr-open .rbl-fab, body.narr-open .rbl-panel { bottom: calc(var(--narr-h, 5rem) + 12px) !important; }

@media (max-width: 560px) {
  .narr-row { gap: .45rem; }
  .narr-loop .w { display: none; }
}
@media print {
  #listen, .narr-dock, .narr-band { display: none !important; }
}