/* R19 회차 뷰어(과제⑦) — 카카오페이지 실측 치수. 근거: docs/reports/2026-10-13-task7/viewer-token-spec.md
   ⚠ 클래스는 .vr* 로 접두한다 — app.css 의 .rd*(R11 전체 원고 읽기)와 이름이 섞이면 둘 다 깨진다.
   본문 영역만 테마 색을 쓰고 상·하단 바(크롬)는 앱 골드글라스를 유지한다. */

.vr{
  --vr-fs:18px; --vr-lh:1.6; --vr-pad:16px;
  --vr-bg:#FFFFFF; --vr-ink:#222222; --vr-sub:rgba(0,0,0,.45); --vr-line:rgba(0,0,0,.1);
  --vr-ff:'Noto Serif KR',Batang,바탕,serif;
  margin:0 -16px; min-height:calc(var(--vh100) - 160px);
  background:var(--vr-bg); color:var(--vr-ink); font-family:var(--vr-ff);
}
.vr[data-theme="white"]    {--vr-bg:#FFFFFF;--vr-ink:#222222;--vr-sub:rgba(0,0,0,.45);--vr-line:rgba(0,0,0,.1)}
.vr[data-theme="lightgray"]{--vr-bg:#E0E0E0;--vr-ink:#222222;--vr-sub:rgba(0,0,0,.45);--vr-line:rgba(0,0,0,.12)}
.vr[data-theme="darkgray"] {--vr-bg:#222222;--vr-ink:#BCBCBC;--vr-sub:rgba(255,255,255,.4);--vr-line:rgba(255,255,255,.12)}
.vr[data-theme="black"]    {--vr-bg:#000000;--vr-ink:#EEEEEE;--vr-sub:rgba(255,255,255,.4);--vr-line:rgba(255,255,255,.14)}
.vr[data-theme="sepia"]    {--vr-bg:#F6F1E5;--vr-ink:#4E3726;--vr-sub:rgba(78,55,38,.55);--vr-line:rgba(78,55,38,.16)}
.vr[data-theme="green"]    {--vr-bg:#233E3B;--vr-ink:#C8D9D7;--vr-sub:rgba(200,217,215,.5);--vr-line:rgba(200,217,215,.16)}
.vr[data-font="gothic"] {--vr-ff:Pretendard,'Malgun Gothic','Apple SD Gothic Neo',Dotum,sans-serif}
.vr[data-font="batang"] {--vr-ff:'Noto Serif KR',Batang,바탕,serif}
.vr[data-font="myeongjo"]{--vr-ff:'Nanum Myeongjo','Noto Serif KR',Gungsuh,serif}

/* 읽은 만큼 — 본문 위에 붙어 따라온다(스크롤 컨테이너는 #body) */
.vrprog{position:sticky;top:0;z-index:4;height:3px;background:var(--vr-line)}
.vrprog i{display:block;height:100%;width:0;background:var(--gold);transition:width .12s linear}

.vrhd{max-width:680px;margin:0 auto;padding:20px var(--vr-pad) 0}
.vrhd .vrbook{font:600 12px/1.4 var(--sans);letter-spacing:.04em;color:var(--vr-sub)}
.vrhd h1{margin:6px 0 0;font:700 20px/1.35 var(--vr-ff);color:var(--vr-ink);word-break:keep-all}
.vrhd .vrmeta{margin-top:6px;font:400 12px/1.5 var(--sans);color:var(--vr-sub)}
.vrhd hr{margin:16px 0 0;border:0;border-top:1px solid var(--vr-line)}

.vrtext{max-width:680px;margin:0 auto;padding:6px var(--vr-pad) 24px;font-size:var(--vr-fs);line-height:var(--vr-lh)}
.vrp{margin:.7em 0;text-align:justify;text-indent:.5em;word-break:keep-all;overflow-wrap:anywhere;
  border-radius:6px;transition:background .13s}
.vrp.sel{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-line)}

.vrend{max-width:680px;margin:0 auto;padding:4px var(--vr-pad) 40px;display:flex;flex-direction:column;gap:10px}
.vrnext{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:12px 16px;
  border:1px solid var(--vr-line);border-radius:14px;background:transparent;color:var(--vr-ink);
  font:600 15px/1.4 var(--sans);text-decoration:none;cursor:pointer;transition:transform .16s var(--eo),border-color .13s}
.vrnext small{display:block;font:400 12px/1.4 var(--sans);color:var(--vr-sub);margin-top:3px}
.vrnext:active{transform:scale(.985)}
.vrnext.prev{min-height:48px;font-size:13.5px}
.vrfin{text-align:center;font:400 13px/1.6 var(--sans);color:var(--vr-sub);padding:8px 0}

/* 플로팅 두 개 — 설정 · 목차 */
.vrfab{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;
  display:flex;flex-direction:column;gap:10px;transition:opacity .2s ease,transform .2s var(--eo)}
.vrfab.hide{opacity:0;transform:translateY(8px);pointer-events:none}
.vrfab button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--gold-text);background:var(--glass);border:1px solid var(--gold-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.4);
  font:600 15px/1 var(--sans);transition:transform .13s}
.vrfab button:active{transform:scale(.92)}
/* 분기점 — 재민 2026-10-14: 뷰어 FAB 로 바로 뒤틀기 */
.vrfab button.key{width:58px;height:58px;color:#1b1206;background:linear-gradient(180deg,#f0d49a,#d8ab5e);
  border-color:rgba(255,245,225,.5);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,245,225,.18) inset}
.vrfab button.key svg{width:27px;height:27px;stroke-width:2}
.vrfab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 바텀시트 — 설정 · 목차 · 메뉴가 같은 틀을 쓴다 */
.vrbg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;
  animation:vr-bg .18s ease}
.vrsheet{width:min(520px,100%);max-height:calc(var(--vh100) * 0.84);display:flex;flex-direction:column;
  background:#1d1914;border:1px solid var(--ln2);border-bottom:0;border-radius:16px 16px 0 0;
  padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px));animation:vr-up .26s var(--eo)}
.vrhandle{flex:none;width:36px;height:4px;border-radius:2px;background:var(--ln2);margin:4px auto 10px}
.vrsheet h4{flex:none;margin:0 0 6px;font:700 13px/1.4 var(--sans);color:var(--gold-text)}
.vrscroll{overflow-y:auto;min-height:0}
@keyframes vr-bg{from{opacity:0}to{opacity:1}}
@keyframes vr-up{from{transform:translateY(14px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.vrbg,.vrsheet{animation:none}.vrprog i,.vrfab{transition:none}}

.vrrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid var(--ln)}
.vrrow:last-child{border-bottom:0}
.vrrow>b{font:600 14px/1.4 var(--sans);color:var(--dim)}
.vrseg{display:flex;border:1px solid var(--ln2);border-radius:10px;overflow:hidden}
.vrseg button{height:34px;padding:0 14px;border:0;background:transparent;color:var(--dim);font:600 13px/1 var(--sans);cursor:pointer;transition:background .13s,color .13s}
.vrseg button.on{background:var(--gold-soft);color:var(--gold-text)}
.vrthemes{display:flex;gap:9px}
.vrth{width:32px;height:32px;border-radius:50%;border:1px solid var(--ln2);cursor:pointer;padding:0;transition:transform .13s}
.vrth:active{transform:scale(.92)}
.vrth.on{box-shadow:0 0 0 2px var(--gold);border-color:transparent}
.vrstep{display:flex;align-items:center;gap:6px}
.vrstep button{width:36px;height:36px;border-radius:10px;border:1px solid var(--ln2);background:transparent;color:var(--ink);font:400 18px/1 var(--sans);cursor:pointer;transition:transform .13s,border-color .13s}
.vrstep button:disabled{opacity:.35;cursor:default}
.vrstep button:active:not(:disabled){transform:scale(.92)}
.vrstep span{min-width:30px;text-align:center;font:700 14px/1 var(--mono);color:var(--gold-text)}
.vrreset{width:100%;height:44px;margin-top:10px;border-radius:12px;border:1px solid var(--ln2);background:transparent;
  color:var(--dim);font:600 13.5px/1 var(--sans);cursor:pointer}

/* 메뉴(≡) 행 */
.vrmi{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 4px;border:0;border-bottom:1px solid var(--ln);
  background:transparent;color:var(--ink);font:500 14.5px/1.4 var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.vrmi:last-child{border-bottom:0}
.vrmi em{font-style:normal;color:var(--gold);font-size:13px}
.vrmi small{margin-left:auto;color:var(--faint);font-size:12px}
.vrmi.key{color:var(--gold-text)}
.vrmi:active{background:rgba(255,251,240,.05)}

/* 목차 */
.vrtoc a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 4px;border-bottom:1px solid var(--ln);
  color:var(--ink);font:400 14px/1.4 var(--sans);text-decoration:none}
.vrtoc a i{flex:none;width:46px;font:700 11px/1 var(--mono);color:var(--faint);font-style:normal}
.vrtoc a b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.vrtoc a.on{color:var(--gold-text)}
.vrtoc a.on b{font-weight:700}
.vrtoc a .mk{margin-left:auto;flex:none;font-size:11px;color:var(--gold-dim)}
.vrtoc a:active{background:rgba(255,251,240,.05)}
.vrmore{width:100%;height:44px;margin:10px 0 0;border-radius:12px;border:1px solid var(--ln2);background:transparent;color:var(--dim);font:600 13.5px/1 var(--sans);cursor:pointer}

@media(max-width:768px){
  .vr{margin:0 -12px;min-height:calc(var(--vh100) - 150px)}
  .vrfab{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px))}
  .vrsheet{max-height:calc(var(--vh100) * 0.8)}
}

/* 분기점 시트 — 재민 2026-10-14 */
.vrbnote{font:400 15px/1.6 var(--sans);color:var(--dim);margin:2px 0 12px}
#vrBrTx{width:100%;min-height:124px;line-height:1.65;font-size:17px;resize:vertical}
.vrsheet .vrseg{flex-wrap:wrap}
.vrrow.col{display:block;padding:12px 0}
.vrrow.col>b{display:block;margin-bottom:9px;font-size:16px}
.vrrow.col .vrseg{border:0;gap:8px}
.vrrow.col .vrseg button{height:46px;padding:0 17px;font-size:16px;border:1px solid var(--ln2);border-radius:11px}
.vrreset.key{height:56px;border:0;background:linear-gradient(180deg,#f0d49a,#d8ab5e);color:#1b1206;
  font:700 19px/1 var(--sans);margin-top:16px;border-radius:14px}
.vrreset.key:active{transform:scale(.985)}

/* px 회차: 폰 시안용 대체 아이콘(.vrfx)은 PC·쉬운보기에서 숨김 */
.vrfab .vrfx{display:none}

/* ══ px 회차 · 시안 11 읽기 뷰어 · 12 뷰어 설정 시트 (폰·쉬운보기 아님만) ══
   시안 360 폭 좌표 ±2px. 머리 38 + 진행 줄 14 → 본문. 글자 크기 값 18 이 시안에서 12px 로 보이므로
   폰에서는 본문을 값의 2/3 로 그린다(설정 시트 숫자는 시안 12 와 같은 18). */
@media(max-width:768px){
  body[data-pg="reader"]:not(.easy) .top{height:calc(38px + env(safe-area-inset-top,0px));padding:calc(6px + env(safe-area-inset-top,0px)) 10px 0 14px;gap:0;border-bottom:0;background:#100e0b}
  body[data-pg="reader"]:not(.easy) .top .back{width:26px;height:32px;margin:0 0 0 -7.5px;border-radius:8px;position:relative}
  body[data-pg="reader"]:not(.easy) .top .back svg{width:25px;height:25px;stroke-width:1.6;color:#d9d3c8}
  body[data-pg="reader"]:not(.easy) .top .back::after{content:"";position:absolute;inset:-6px -8px}
  body[data-pg="reader"]:not(.easy) #topTitle{position:absolute;left:50%;top:calc(13.2px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:170px;
    font:400 14px/20px 'Nanum Myeongjo',var(--serif);letter-spacing:0;color:#f3eee5}
  body[data-pg="reader"]:not(.easy) #topActs{gap:11.5px}
  body[data-pg="reader"]:not(.easy) #topActs #vrAa{position:relative;width:28px;min-width:0;height:32px;font:400 16px/1 var(--sans);letter-spacing:-.2px;color:#ece7de}
  body[data-pg="reader"]:not(.easy) #topActs #vrMenu{position:relative;width:24px;min-width:0;height:32px;color:#ece7de}
  body[data-pg="reader"]:not(.easy) #topActs #vrMenu svg{width:24px;height:24px;stroke-width:1.6}
  body[data-pg="reader"]:not(.easy) #topActs #vrAa::after,body[data-pg="reader"]:not(.easy) #topActs #vrMenu::after{content:"";position:absolute;inset:-6px -6px}

  body[data-pg="reader"]:not(.easy) .vr{margin:0 -16px}
  body[data-pg="reader"]:not(.easy) .vr[data-theme="black"]{--vr-bg:#0d0a08;--vr-ink:#e9e3d8;--vr-sub:#a29c93;--vr-line:rgba(255,248,232,.12)}
  body[data-pg="reader"]:not(.easy) .vr[data-theme="black"],body[data-pg="reader"]:not(.easy) .vr[data-theme="darkgray"],body[data-pg="reader"]:not(.easy) .vr[data-theme="green"]{
    background:linear-gradient(rgba(13,10,8,.32),rgba(13,10,8,.32)) 0 14px/100% 156px no-repeat,linear-gradient(90deg,var(--vr-bg) 40%,transparent 78%) 0 14px/100% 156px no-repeat,linear-gradient(0deg,var(--vr-bg),transparent 45%) 0 14px/100% 156px no-repeat,
      url(../img/still-open-book.webp) right 0 top 14px/auto 156px no-repeat,var(--vr-bg)}
  body[data-pg="reader"]:not(.easy) .vrprog{gap:11px;height:14px;padding:0 15px 0 14px;border-bottom:0;background:#100e0b}
  body[data-pg="reader"]:not(.easy) .vrpbar{height:3.4px;border-radius:2px;background:#3e3a34}
  body[data-pg="reader"]:not(.easy) .vrprog .vrpbar i{background:#ffd27e}
  body[data-pg="reader"]:not(.easy) .vrpl{font:400 12px/12px var(--sans);letter-spacing:-.1px;color:#9a948b}

  body[data-pg="reader"]:not(.easy) .vrhd{max-width:none;padding:38px 22px 0}
  body[data-pg="reader"]:not(.easy) .vrhd .vrbook{font:400 13.5px/18px var(--sans);letter-spacing:0;color:var(--vr-sub)}
  body[data-pg="reader"]:not(.easy) .vrhd h1{margin:7px 0 0;font:400 24px/30px 'Nanum Myeongjo',var(--serif);letter-spacing:-.3px;color:var(--vr-ink)}
  body[data-pg="reader"]:not(.easy) .vrhd .vrmeta{margin-top:4px;font-size:12.5px}
  body[data-pg="reader"]:not(.easy) .vrhd hr{display:none}
  body[data-pg="reader"]:not(.easy) .vrtext{max-width:none;padding:30.4px calc(var(--vr-pad) + 6px) 20px;font-size:var(--vr-fs)} /* 10-17 «글자 넘작어» — 축소 배율 제거, 설정값 그대로(처음 20px) */
  body[data-pg="reader"]:not(.easy) .vrp{margin:0 0 18px;text-align:left;text-indent:0}
  body[data-pg="reader"]:not(.easy) .vrend{max-width:none;flex-wrap:nowrap;gap:16px;padding:26px 17px 40px 18px}
  body[data-pg="reader"]:not(.easy) .vrnext,body[data-pg="reader"]:not(.easy) .vrnext.prev{min-height:0;height:35px;padding:0 10px;gap:9px;border-radius:7px;border:1px solid rgba(255,248,232,.1);
    background:#181511;font:400 14px/1 var(--sans);color:#d3cdc2}
  body[data-pg="reader"]:not(.easy) .vrnext svg{width:14.5px;height:14.5px;stroke-width:1.5}
  body[data-pg="reader"]:not(.easy) .vrfin{flex:1 1 0;order:0;padding:0;font-size:13px}

  body[data-pg="reader"]:not(.easy) #vrFab{right:8.8px;bottom:auto;top:425px;gap:9.5px}
  body[data-pg="reader"]:not(.easy) #vrFab>button{min-width:56px;gap:4px}
  body[data-pg="reader"]:not(.easy) #vrFab>button>i:has(.vrfx)>svg:not(.vrfx){display:none}
  body[data-pg="reader"]:not(.easy) #vrFab .vrfx{display:block}
  body[data-pg="reader"]:not(.easy) #vrFab b.vrfx{font:400 15px/1 var(--sans);letter-spacing:-.2px;color:#e9e3d8}
  body[data-pg="reader"]:not(.easy) #vrFab svg.vrfx{width:20px;height:20px;stroke-width:2}
  body[data-pg="reader"]:not(.easy) #vrFab svg.vrfx circle{fill:currentColor}
  body[data-pg="reader"]:not(.easy) #vrFab>button>i,body[data-pg="reader"]:not(.easy) #vrFab>button.key>i{width:40px;height:40px;background:#1b1813;border:1px solid rgba(255,248,232,.2);
    box-shadow:0 4px 14px rgba(0,0,0,.45);color:#ece7de}
  body[data-pg="reader"]:not(.easy) #vrFab>button>i svg{width:18px;height:18px;stroke-width:1.6}
  body[data-pg="reader"]:not(.easy) #vrFab>button.key>i{border-color:rgba(232,195,122,.75);color:#e8c37a;background:#1f1912}
  body[data-pg="reader"]:not(.easy) #vrFab>button>span{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:400 11px/13px var(--sans);letter-spacing:-.2px;color:#b9b3a9}
  body[data-pg="reader"]:not(.easy) #vrFab>button.key>span{color:#e8c37a;font-weight:500}
}

/* px 회차 · 시안 12 뷰어 설정 시트 (폰·쉬운보기 아님만 · 10-17 전체 원고·집필 화면도 같은 시트) */
@media(max-width:768px){
  body:not(.easy) .vrbg{background:rgba(0,0,0,.42)}
  body:not(.easy) .vrsheet{width:100%;max-height:none;padding:7.3px 19px calc(56px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;border:1px solid rgba(255,248,232,.11);border-bottom:0;background:#17140f;box-shadow:0 -12px 30px rgba(0,0,0,.45)}
  body:not(.easy) .vrhandle{width:32px;height:4.5px;margin:0 auto 7.7px;border-radius:3px;background:#5d5850}
  body:not(.easy) .vrsh{height:26px;margin:0;align-items:flex-start}
  body:not(.easy) .vrsheet .vrsh>h4{position:relative;top:3px;font:400 19.3px/26px 'Nanum Myeongjo',var(--serif);letter-spacing:-.2px;color:#f3eee5;margin-left:-1.7px}
  body:not(.easy) .vrx{width:32px;height:32px;margin:-11.2px -10px 0 0;border-radius:6px;color:#bdb7ad}
  body:not(.easy) .vrx svg{width:24px;height:24px;stroke-width:1.4}
  body:not(.easy) .vrx::after{content:"";position:absolute;inset:-6px}
  body:not(.easy) .vrx{position:relative}
  body:not(.easy) .vrscroll{padding:6.8px 0 0;overflow:visible}
  body:not(.easy) .vrsheet .vrrow{min-height:0;height:48px;gap:0;padding:0;border:0}
  body:not(.easy) .vrsheet .vrrow>b{font:500 14.5px/18px var(--sans);letter-spacing:-.2px;color:#ece6db}
  body:not(.easy) .vrsheet .vrrow>.hp{flex:none;width:18px;height:18px;margin:0 0 0 14px;border-radius:4.5px;border:1px solid rgba(255,248,232,.28);background:transparent;font:400 11.5px/1 var(--sans);color:#bdb7ad}
  body:not(.easy) .vrsheet .vrseg{width:200px;height:32px;flex:none;padding:0;border:1px solid rgba(255,248,232,.1);border-radius:7px;background:rgba(255,248,232,.03)}
  body:not(.easy) .vrsheet .vrseg button{flex:1 1 0;min-width:0;height:auto;margin:-1px 0;padding:0;border:1.5px solid transparent;border-radius:7px;background:transparent;font:400 13px/1 var(--sans);color:#aca59b}
  body:not(.easy) .vrsheet .vrseg button.on{border-color:#e3bf7a;background:rgba(227,191,122,.04);color:#ecc77f;font-weight:500}
  body:not(.easy) .vrsheet .vrthemes{width:200px;flex:none;justify-content:space-between;gap:0}
  body:not(.easy) .vrsheet .vrth{width:24px;height:24px;border:0}
  body:not(.easy) .vrsheet .vrth.on{box-shadow:0 0 0 2.2px #e3bf7a}
  body:not(.easy) .vrsheet .vrrow.st{height:44px;margin:1.5px 0 0;padding:0 9px 0 11px;border:1px solid rgba(255,248,232,.08);border-radius:7px;background:rgba(255,248,232,.025)}
  body:not(.easy) .vrsheet .vrrow:not(.st)+.vrrow.st{margin-top:4.7px}
  body:not(.easy) .vrsheet .vrrow.st .vrstep{gap:0}
  body:not(.easy) .vrsheet .vrstep button{position:relative;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,248,232,.07);font:300 19px/1 var(--sans);color:#e3ddd2}
  body:not(.easy) .vrsheet .vrstep button::after{content:"";position:absolute;inset:-8px -6px}
  body:not(.easy) .vrsheet .vrstep span{min-width:0;width:64px;text-align:center;font:400 16px/1 'Nanum Myeongjo',var(--serif);color:#ece6db}
  body:not(.easy) .vrsheet .vrrow.st>.hp{margin-left:16px}
  body:not(.easy) .vrsheet .vrreset.vrlink{height:28px;margin:16.5px auto 0;padding:0 4px;font:400 12.5px/28px var(--sans);color:#c7c1b6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(199,193,182,.7)}
}