@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&display=swap');
/* ══ 나노 리서치 — 책 펼침 한 권(표지 + 본문 + 아래 이동 바)의 모양 ══════════════════════════════
   리서치 탭과 관리자 미리보기가 같은 이 규칙으로 그린다(web/rs-core.js NRS.book). 화면 틀(칩 바·레일·편집기)은
   research.html 이 갖는다. 값은 핸드오프 design_handoff_nano_research_book 「책 펼침 읽기 화면」 그대로다.
   ⚠ 책 본문·제목만 Noto Serif KR — UI 는 Pretendard, 숫자·라벨은 IBM Plex Mono(desk.css 의 --sans · --mono). */
.nrTok{
 --nr-bg:#0A0908; --nr-row:#100E0A; --nr-am:#FFB400; --nr-amHi:#FFC633; --nr-link:#FFD066;
 --nr-t1:#F3EBDA; --nr-t2:#D8CFBC; --nr-t3:#A39780; --nr-t4:#938771; --nr-t5:#5F5646;
 --nr-ln:#2A2419; --nr-ln2:#16130E; --nr-bar:#5A5244; --nr-up:#22C55E; --nr-dn:#FF4747; --nr-sel2:#4A3A12; --nr-chip:#3A3226;
 --nr-serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;
}
.rb{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--nr-bg);color:var(--nr-t2);
 font-family:var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;}
.rbVp{flex:1;min-height:0;position:relative;overflow:hidden;margin:30px 44px 0;}
.rbIn{position:absolute;inset:0;}
/* 흐름 묶음이 통째로 옆으로 밀린다(쪽 넘김) · 표지와 구역 흐름은 그 안에서 제 자리(left)에 선다 — 자리와 단 수는 rs-core NRS.pager 가 잰다.
   ⚠ 미끄러짐(transition)은 넘기는 동안에만 단다(.slide — NRS.pager 가 붙였다 뗀다). 미끄러지는 동안에는 흐름 묶음 전체(수십 쪽 폭)가
   합성 층이 된다(2026-10-14 실측: 4.3만 자 글에서 26909×545 · 4배 느린 CPU 에서 넘기기 한 번 주 스레드 20ms → 172~184ms).
   편집기는 아예 미끄러지지 않는다(NRS.pager opt.slide:false) — 치는 도중에 미끄러지면 흐름 전체가 '겹침' 층(25816×508)으로 끝까지 남아
   글자 하나마다 층을 다시 나눈다(한 글자에 Layerize 89ms → 1.5ms). 늘 달아 둬도 같다. 읽기 화면은 칠 일이 없어 층이 넘기는 동안에만 있다
   (editor.mjs E15 가 넘기는 내내 층 트리를 본다) */
.rbFlows{position:absolute;left:0;top:0;bottom:30px;width:100%;}
.rbFlows.slide{transition:transform .55s cubic-bezier(.22,.7,.12,1);}
.rbFlow{position:absolute;left:0;top:0;bottom:0;width:100%;column-count:2;column-gap:96px;column-fill:auto;}
.rbSpine{position:absolute;left:50%;top:0;bottom:30px;width:1px;background:var(--nr-ln);pointer-events:none;}
.rb.wide .rbSpine{display:none;}   /* 한 장(두 쪽을 합친 면)에는 가운데 제본선이 없다 */
.rbPn{position:absolute;bottom:6px;font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--nr-t4);pointer-events:none;}
.rbPn.l{left:0;} .rbPn.r{right:0;}
.rb.single .rbVp{margin:22px 22px 0;}
.rb.single .rbSpine,.rb.single .rbPn.r{display:none;}

/* 표지(1쪽) — 한 쪽 크기(폭·높이는 NRS.pager 가 박는다). 위(라벨·날짜) / 가운데(막대·제목·부제·작성자) / 아래(핵심 요약) */
.rbCover{position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding-right:8px;overflow:hidden;}
.rbCvTop{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 11px var(--mono);letter-spacing:.12em;color:var(--nr-am);}
.rbCvTop i{font-style:normal;color:var(--nr-t4);letter-spacing:0;font-variant-numeric:tabular-nums;}
.rbCvMid{display:flex;flex-direction:column;gap:16px;}
.rbCvBar{width:48px;height:2px;background:var(--nr-am);}
.rbCvT{margin:0;font:700 40px/1.32 var(--nr-serif);letter-spacing:-.02em;color:var(--nr-t1);text-wrap:balance;}
.rbCvS{margin:0;font:400 16px/1.7 var(--nr-serif);color:var(--nr-t3);text-wrap:pretty;}
.rbCvBy{font:500 13px var(--sans);color:var(--nr-t2);}
.rbCvBy span{color:var(--nr-t4);}
/* AI 표시(NRS.aiBadge) — 작성자 옆 각진 칩. 지시 "각진 네모로 카드처럼": 모서리 0 · 1px 앰버 테 · 옅은 앰버 바탕(채운 앰버 배지 .nrBadge · 분류 칩과 갈린다) ·
   크기는 놓인 글자에 따라(em — 메인 대표 · 표 · 레일 · 책 표지 · 편집 표지가 같은 규칙). 줄바꿈 · 말줄임에 안 쪼개진다(flex:none · nowrap) */
.nrAi{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;height:1.72em;padding:0 .5em;margin-left:.55em;vertical-align:middle;
 border:1px solid rgba(255,180,0,.6);border-radius:0;background:rgba(255,180,0,.09);color:var(--nr-am,#FFB400);
 font:700 max(9px,.74em)/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-indent:.12em;white-space:nowrap;}
.rbCvSum{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--nr-ln);display:flex;flex-direction:column;gap:8px;}
.rbCvSum li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;}
.rbCvSum li span:first-child{font:600 11.5px/1.6 var(--mono);color:var(--nr-am);}
.rbCvSum li span:last-child{font:400 13.5px/1.6 var(--sans);color:var(--nr-t2);}

/* 본문(2쪽부터) */
.rbH{break-inside:avoid;break-after:avoid;padding-top:18px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px;}
.rbH.first{padding-top:0;}
.rbH>span{font:600 11.5px var(--mono);letter-spacing:.04em;color:var(--nr-am);}
.rbH h2{margin:0;font:700 22px/1.4 var(--nr-serif);letter-spacing:-.01em;color:var(--nr-t1);}
.rbP{margin:0 0 14px;font:400 16px/1.9 var(--nr-serif);color:var(--nr-t2);orphans:2;widows:2;text-wrap:pretty;}
.rb b{font-weight:700;color:var(--nr-t1);}
.rbQ{break-inside:avoid;margin:4px 0 18px;padding:2px 0 2px 16px;border-left:2px solid var(--nr-am);font:600 17px/1.6 var(--nr-serif);color:var(--nr-t1);text-wrap:pretty;}
.rbL{margin:0 0 14px;display:flex;flex-direction:column;gap:8px;}
.rbLi{display:grid;grid-template-columns:28px minmax(0,1fr);break-inside:avoid;}
.rbLi span:first-child{font:600 12px/1.7 var(--mono);color:var(--nr-am);}
.rbLi span:last-child{font:400 16px/1.7 var(--nr-serif);color:var(--nr-t2);}
/* 편집기에서 늘어난 서식 — 작은 소제목 · 기울임 · 링크 · 구분선 · 그림 */
.rbH3{break-inside:avoid;break-after:avoid;margin:6px 0 10px;font:700 17.5px/1.5 var(--nr-serif);color:var(--nr-t1);}
.rb i{font-style:italic;}
.rb .rbCvTop i{font-style:normal;}   /* ⚠ 위 줄(기울임 서식)이 표지 작성일까지 눕혔다 — 핸드오프는 바로 선 숫자다. 편집 화면 표지와 맞대어 본다(editor.mjs E9) */
.rb a{color:var(--nr-am);text-decoration:underline;text-decoration-color:rgba(255,180,0,.45);text-underline-offset:3px;}
/* 밑줄 ++ · 취소선 ~~ · 형광펜 == (2026-10-14) — 편집 화면(research.html .nrRich u · s · rs-edit MARKC)과 같은 값이어야 쓰는 대로 보인다.
   배치에 드는 값(여백 · 테두리)은 두지 않는다 — 형광펜이 줄 폭을 바꾸면 편집 화면과 쪽 나눔이 갈린다(editor.mjs E14) */
.rb u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.rb s{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--nr-t3);}
.rb mark{background:rgba(255,180,0,.3);color:inherit;}
/* 표(2026-10-14 · 업그레이드 3번) — 책과 편집 칸(rs-edit · 같은 .rbTbl)이 같은 규칙으로 그린다(쪽 나눔 쌍둥이 E14 · 앞에 .rb 를 붙이지 않는다).
   숫자는 고정 폭(tabular) · 머리 아래 앰버 줄 · 단을 넘어 쪼개지 않는다(단보다 길면 브라우저가 쪼갠다).
   table.rbTbl — 편집 칸의 .nrSecEd>*{margin} 보다 특이도가 높아야 두 화면의 여백이 같다 */
table.rbTbl{width:100%;border-collapse:collapse;margin:4px 0 18px;font:400 13.5px/1.55 var(--sans);font-variant-numeric:tabular-nums;color:var(--nr-t2);break-inside:avoid;}
.rbTbl th{font-weight:600;color:var(--nr-t1);text-align:left;vertical-align:bottom;padding:6px 8px;border-bottom:1px solid var(--nr-am);}
.rbTbl td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--nr-ln);}
.rbTbl tr{break-inside:avoid;}   /* 행은 단 사이에서 안 쪼갠다 */
/* 단 폭을 넘는 표만(rs-core NRS.fitTables 가 잰다) 칸 글자를 아무 데서나 접는다 — 넘친 표는 옆 단 · 옆 쪽 글자를 덮는다.
   늘 접으면 숫자 칸이 쪼개진다(긴 글 칸이 폭을 다 가져간다). 1단(fit)은 글자 열만 · 2단(fit2)은 숫자 열(n · r)까지 */
table.rbTbl.fit :is(th,td){padding-left:4px;padding-right:4px;}   /* 맞출 때는 칸 여백부터 줄인다 */
table.rbTbl.fit :is(th,td):not(.n,.r){overflow-wrap:anywhere;}
table.rbTbl.fit2 :is(th,td){overflow-wrap:anywhere;}
table.rbTbl.fit2:has(tr > :nth-child(10)) :is(th,td){padding-left:1px;padding-right:1px;}   /* 10 열 이상이 2단까지 가면 — 320 폰(단 220px)에서 16 열이 232px 로 넘쳤다(2026-10-14) */
/* 열이 많은 표는 촘촘하게(6 열부터 · 10 열부터 — 글자와 칸 여백을 줄인다). 칸 여백만으로도 16 열 × 16px = 256px 라 폰 단(260px)을 다 먹는다(2026-10-14 실측 — 472px 로 넘쳤다).
   가로 스크롤로 풀지 않는다 — 스크롤 칸은 쪼갤 수 없는 덩어리라 긴 표가 단 · 쪽 사이에서 안 나뉜다 */
table.rbTbl:has(tr > :nth-child(6)){font-size:12px;}
table.rbTbl:has(tr > :nth-child(6)) :is(th,td){padding:5px 4px;}
table.rbTbl:has(tr > :nth-child(10)){font-size:10.5px;}
table.rbTbl:has(tr > :nth-child(10)) :is(th,td){padding:3px 2px;}
.rbTbl .r,.rbTbl .n{text-align:right;} .rbTbl .c{text-align:center;} .rbTbl .l{text-align:left;}   /* n = 정하지 않은 숫자 열(rs-core NRS.numCol) */
.rb a:hover{text-decoration-color:var(--nr-am);}
/* 각주(2026-10-14 · 업그레이드 4번) — 글 안 ^[출처] 는 위첨자 번호(.rbFn) · 출처 글자는 그 구역 끝 목록(.rbFns). 책과 편집 칸(rs-edit — 같은 이름)이
   같은 규칙으로 그린다(쪽 나눔 쌍둥이 E14 · 앞에 .rb 를 붙이지 않는다). 번호는 줄 높이를 늘리지 않는다(line-height 0).
   ⚠ 목록은 div.rbFns … 로 특이도를 올린다 — 편집 칸의 .nrSecEd>* (여백) · .nrSecEd li (번호 · 들여쓰기 · 본문 글꼴) · .nrRich a 가 이기면 편집 화면만 달라진다 */
sup.rbFn{font:600 .66em/0 var(--mono);color:var(--nr-am);vertical-align:super;margin:0 1px 0 2px;cursor:help;}
div.rbFns{margin:20px 0 14px;padding-top:10px;border-top:1px solid var(--nr-ln);font:400 12.5px/1.6 var(--sans);color:var(--nr-t3);}
div.rbFns .rbFnH{font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--nr-t4);margin:0 0 6px;break-after:avoid;}
div.rbFns ol{list-style:none;margin:0;padding:0;}
div.rbFns li{display:flex;gap:8px;margin:0 0 4px;padding:0;font:inherit;counter-increment:none;break-inside:avoid;}
div.rbFns li::before{content:none;}
div.rbFns li>span:first-child{flex:none;min-width:16px;font:600 10.5px/1.95 var(--mono);color:var(--nr-am);}
div.rbFns a{color:var(--nr-t2);}
.rbHr{border:0;margin:10px 0 22px;height:20px;text-align:center;break-inside:avoid;}
.rbHr::before{content:'·  ·  ·';font:700 18px/20px var(--nr-serif);letter-spacing:.3em;color:var(--nr-t4);}
.rbFig{margin:6px 0 20px;break-inside:avoid;}
/* 데이터 카드({coin:…} — rs-core coinHTML · 지금 값은 rs-live.js). 줄마다 높이가 고정이라 값이 늦게 와도 쪽이 안 밀린다(편집 칸 · 책 쌍둥이).
   div.rbCoin — 편집 칸의 .nrSecEd>*(여백 0 0 14px)보다 특이도를 올려 한 규칙이 두 화면에 먹는다(다르면 카드 사이가 6px 갈렸다) */
div.rbCoin{margin:6px 0 20px;padding:11px 13px 9px;border:1px solid var(--nr-ln);border-left:2px solid var(--nr-am);border-radius:8px;background:rgba(255,180,0,.035);font:400 12.5px/21px var(--sans);color:var(--nr-t2);break-inside:avoid;box-sizing:border-box;}
.rbCoinH{display:flex;align-items:baseline;gap:7px;height:24px;margin-bottom:4px;white-space:nowrap;overflow:hidden;}
.rbCoinH b{font:700 15px/24px var(--mono);color:var(--nr-t1);letter-spacing:.02em;}
.rbCoinH span{font-size:11px;color:var(--nr-t4);}
.rbCoinGo{margin-left:auto;font-size:11.5px;color:var(--nr-am);text-decoration:none;}
.rbCoinGo:hover{text-decoration:underline;}
.rbCoinR{display:flex;gap:8px;height:21px;white-space:nowrap;overflow:hidden;}
.rbCoinR .l{flex:none;width:6.6em;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--nr-t4);}
.rbCoinR .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--nr-t2);}
.rbCoinR .v b{font-weight:600;color:var(--nr-t1);} .rbCoinR .v .t{font-size:11px;color:var(--nr-t4);}
.rbCoin .up{color:#2ebd85;} .rbCoin .dn{color:#f6465d;} .rbCoin .no{color:var(--nr-t4);}
.rbCoinM{height:26px;margin:7px 0 3px;}
.rbCoinM svg{display:block;width:100%;height:100%;}
.rbCoinF{display:flex;justify-content:space-between;gap:8px;height:16px;font-size:10.5px;line-height:16px;color:var(--nr-t4);white-space:nowrap;overflow:hidden;}

.rbFig img{display:block;width:100%;height:auto;max-height:var(--rbImgH,420px);object-fit:contain;background:rgba(255,255,255,.03);}
.rbFig figcaption{margin-top:8px;font:400 12.5px/1.5 var(--sans);color:var(--nr-t4);text-align:center;}
.rbFig.broken img{height:80px;object-fit:none;}
.rbEnd{break-inside:avoid;margin-top:6px;display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);color:var(--nr-t4);}
.rbEnd i{width:6px;height:6px;background:var(--nr-am);flex:none;}
.rbEnd span:first-of-type{font-family:var(--sans);}

/* 아래 이동 바(40px) — 현재 소제목 · 쪽 막대 · 이전 · p.1–2 / 5 · 다음 */
.rbNav{height:40px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px 0 28px;margin-top:14px;border-top:1px solid var(--nr-ln);}
.rbCur{font:500 12px var(--sans);color:var(--nr-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;flex:0 1 auto;min-width:0;}
.rbSegs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden;}
.rbSegs button{width:24px;height:18px;border:0;background:transparent;padding:0 2px;cursor:pointer;display:flex;align-items:center;flex:none;}
.rbSegs i{display:block;width:100%;height:3px;background:var(--nr-ln);transition:background .3s;}
.rbSegs .rd i{background:var(--nr-bar);}
.rbSegs .on i{background:var(--nr-am);}
.rbB{height:26px;padding:0 9px;border:1px solid var(--nr-ln);background:transparent;color:var(--nr-t2);font:500 12px var(--sans);cursor:pointer;white-space:nowrap;flex:none;}
.rbB:hover{border-color:var(--nr-am);}
.rbB.off{opacity:.35;pointer-events:none;}
.rbB.go{background:var(--nr-am);border-color:var(--nr-am);color:var(--nr-bg);font-weight:600;padding:0 11px;}
.rbB.go:hover{background:var(--nr-amHi);}
.rbCnt{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--nr-t2);min-width:76px;text-align:center;white-space:nowrap;flex:none;}
.rb :focus-visible{outline:2px solid var(--nr-am);outline-offset:2px;}

@media (max-width:760px){
 .rbNav{gap:8px;padding:0 10px;}
 .rbCur{display:none;}
 .rbCvT{font-size:30px;}
}
@media (prefers-reduced-motion:reduce){ .rbFlows,.rbSegs i{transition:none!important;} }