/* Monologue Gaze — 연출: 탐문 대화 · 수사 보고서 · 단서 발견 효과 · 속말 자막 */

/* ───────── 탐문: 대화 말풍선 ───────── */
.per-tr .qa{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(60,50,30,.25)}
.per-tr .qa,.per-tr .c-ans{display:flex;flex-direction:column;gap:7px}
.per-tr .qa-first{margin-top:0;padding-top:0;border-top:0}
.c-q,.c-bub{position:relative;max-width:min(86%,560px);padding:8px 13px 7px;border-radius:14px;font:14.5px/1.65 var(--f-web);word-break:keep-all;overflow-wrap:anywhere}
.c-q{align-self:flex-end;border-bottom-right-radius:3px;background:var(--ink);color:#f3ecd8;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.c-q .c-k{display:block;margin-top:2px;font:11px var(--f-mono);letter-spacing:.04em;opacity:.55}
.qa.press .c-q{background:#5b1f1a;box-shadow:0 0 0 2px rgba(176,52,42,.35),0 2px 0 rgba(0,0,0,.2)}
.c-bub{align-self:flex-start;border:1px solid rgba(60,50,30,.22);border-bottom-left-radius:3px;background:#fffdf6;color:var(--sheet-ink);box-shadow:0 1px 0 rgba(60,50,30,.12);cursor:pointer;transition:border-color .15s,box-shadow .15s}
@media (hover:hover){.c-bub:hover{border-color:rgba(60,50,30,.45)}}
.c-bub:has(.pin.on){border-left:3px solid var(--olive)}
.c-bub.me{align-self:flex-end;border-color:transparent;border-radius:14px 14px 3px 14px;background:var(--ink);color:#f3ecd8}
.c-bub.me .pin{border-color:rgba(243,236,216,.5);background:transparent;color:#f3ecd8}
.c-bub .pin{margin-left:8px}
@media (hover:hover){.c-bub:hover .pin{opacity:1}}
.c-bub .kw{font-size:inherit}
.c-mid{font:italic .92em/1 var(--f-doc);color:#7a715c} /* 말 도중의 몸짓 */
.c-bub.me .c-mid{color:rgba(243,236,216,.66)}
.c-act{align-self:flex-start;margin:2px 0 0 6px;max-width:80%;font:italic 13px/1.5 var(--f-doc);color:#6d6552}
.c-act::before{content:"— ";opacity:.6}
.c-ev{align-self:flex-end;max-width:min(78%,480px);margin:0 6px 2px 0;padding:7px 12px 6px;background:#f3e7b3;background-image:var(--noise);color:var(--ink);font:19px/1.25 var(--f-hand);box-shadow:0 3px 8px rgba(0,0,0,.2);transform:rotate(1.2deg)}
.c-ev-k{display:block;font:11px var(--f-mono);letter-spacing:.06em;color:var(--red)}
.qa.pressing .c-ev{animation:slap .45s cubic-bezier(.2,1.4,.5,1) both}
@keyframes slap{from{opacity:0;transform:translateX(40px) rotate(8deg) scale(1.1)}to{opacity:1;transform:rotate(1.2deg)}}
.qa.flash{animation:qaflash 1.2s ease-out}
@keyframes qaflash{from{background:rgba(243,231,179,.8)}to{background:transparent}}

/* 재생 중: 아직 안 나온 것은 숨기고, 찍히는 글자만 보인다 */
.per-tr .wait{visibility:hidden!important} /* 자리는 처음부터 잡아 둔다 — 말풍선이 하나씩 나올 때 아래 질문 칩이 밀려 내려가 엉뚱한 칩이 눌리지 않게 */
.per-tr .c-dots{margin-bottom:-35px} /* 점 세 개는 다음 말풍선 자리 위에 겹쳐 뜬다 (높이 26 + 위 여백 2 + 틈 7) */
.c-bub.typing .ch{visibility:hidden}
.c-bub.typing .ch.on{visibility:visible}
.c-bub.typing .kw{border-color:transparent;background:transparent}
.c-bub.typing .pin{visibility:hidden}
.c-dots{align-self:flex-start;display:flex;gap:4px;margin:2px 0;padding:10px 12px;border-radius:14px;background:rgba(255,253,246,.8)}
.c-dots i{width:6px;height:6px;border-radius:50%;background:#8b8170;animation:dot 1s infinite ease-in-out}
.c-dots i:nth-child(2){animation-delay:.15s}.c-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.qa.live{cursor:pointer}
.per-tr .qa{position:relative}
.qa.live::after{content:var(--t-skip,"누르면 건너뛴다");position:absolute;left:0;right:0;bottom:-19px;text-align:center;pointer-events:none;font:11px var(--f-mono);letter-spacing:.06em;color:#6d6552}
@media (hover:hover) and (pointer:fine){.qa.live::after{content:var(--t-skip-esc,"누르거나 Esc — 건너뛴다")}} /* 자판이 있는 기기: Esc 로도 넘긴다 */
.qa.pressing .c-dots{background:rgba(91,31,26,.12)}
.qa.pressing .c-dots i{background:var(--red);animation-duration:1.6s}
.chip.again{border:1.5px solid var(--red);box-shadow:0 0 0 2px rgba(176,52,42,.15)}

/* ───────── 수사 보고서 (읽기 칸) ───────── */
.nb-rep .rep-sum{margin:0;font:21px/32px var(--f-hand)}
.nb-rep .rep-sum b{font-weight:400;color:var(--red);white-space:nowrap}
.rep-view .doc-b{font:14px/1.7 var(--f-web)}
.rep-view h4{margin:0 0 8px;font:800 15px/1.4 var(--f-doc)}
.rep-view h4 .no{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border:1.5px solid currentColor;border-radius:50%;font:11px var(--f-mono)}
.rep-sec,.rep-claim{margin:0 0 14px;padding:12px 14px;border:1px solid rgba(43,40,35,.25);background:rgba(255,255,255,.35)}
.rep-claim.filled{border-left:4px solid var(--olive)}
.rep-claim.open{border-color:rgba(43,40,35,.55);background:rgba(255,255,255,.55)}
.rep-people{display:flex;flex-wrap:wrap;gap:8px}
.rep-per{display:flex;flex-direction:column;gap:1px;min-width:92px;padding:7px 12px 6px;border:1px dashed #8e7f5c;background:#f7f1dc;cursor:pointer}
.rep-per input,.rep-opt input{position:absolute;opacity:0;pointer-events:none}
.rep-per b{font:800 15px/1.3 var(--f-doc)}
.rep-per small{font:11px/1.35 var(--f-mono);color:var(--ink-soft)}
.rep-per.on{border:2px solid var(--red);background:#fbeee8;box-shadow:0 0 0 3px rgba(176,52,42,.12)}
.rep-per:has(input:focus-visible),.rep-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.rep-pick{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px}
.rep-memo,.rep-empty{flex:1 1 260px;word-break:keep-all;margin:0;font:19px/1.35 var(--f-hand);color:var(--ink)}
.rep-memo .n,.rep-opt .n{color:var(--pencil)}
.rep-memo .src{font-size:15px;color:var(--pencil)}
.rep-empty{color:#6f6858}
.rep-tog{flex:0 0 auto;padding:4px 10px;border:1px solid #8e7f5c;background:#f4ebc6;color:var(--ink);font:12px var(--f-web);cursor:pointer}
.rep-tog small{margin-left:2px;font:10px var(--f-mono);opacity:.7}
@media (hover:hover){.rep-tog:hover{background:#efe1ad}}
.rep-acc{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(43,40,35,.3)}
.rep-filter{width:100%;margin:0 0 8px;padding:6px 9px;border:1px solid #8e7f5c;background:#fffdf5;color:var(--ink);font:14px var(--f-web)}
.rep-grp{margin:0 0 6px}
.rep-grp>summary{padding:3px 0;font:12px var(--f-mono);letter-spacing:.04em;color:var(--ink-soft);cursor:pointer}
.rep-grp>summary small{opacity:.7}
.rep-opt{position:relative;display:block;margin:0 0 3px;padding:6px 10px;border:1px solid transparent;border-left:3px solid rgba(43,40,35,.18);background:rgba(255,255,255,.5);font:14px/1.6 var(--f-web);cursor:pointer}
@media (hover:hover){.rep-opt:hover{border-color:rgba(43,40,35,.3)}}
.rep-opt.on{border-left-color:var(--olive);background:#eef0dc}
.rep-opt[hidden],.rep-grp[hidden]{display:none}
.rep-used{color:var(--pencil);font-size:12px;white-space:nowrap} /* 다른 주장에 이미 붙인 메모 */
.rep-view .submit-row{margin-top:14px!important}
.rep-view .verdict{margin-top:8px;font:20px/1.3 var(--f-hand)}
.verdict.wait{color:var(--ink-soft);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.rep-view.judging form{opacity:.55;pointer-events:none;transition:opacity .4s}
.rep-view.bounced,.m-who.bounced{animation:bounce .5s ease-out}
@keyframes bounce{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.rep-solved{margin-top:14px;overflow:hidden}
.rep-solved .epi .b-p,.rep-solved .epi p{font:15px/1.8 var(--f-doc)}
/* 좁은 칸(폰·수첩)에서는 종결 도장이 글을 한 줌 너비로 밀어내지 않게: 글 위에 비스듬히 찍힌다 (인주는 곱하기로 비친다) */
@container stage (max-width:520px){.rep-solved .stamp{float:none;margin:2px 0 8px auto;width:84px;height:84px;font-size:15px;pointer-events:none}.rep-solved .stamp small{font-size:9px}} /* 좁은 화면에서도 도장은 글을 덮지 않고, 글이 도장을 돌아 흐른다 */

/* 수첩의 메모 묶음 */
.ng{margin:0}
.ng>summary{display:block;height:32px;list-style:none;font:20px/32px var(--f-hand);color:var(--pencil);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ng>summary::-webkit-details-marker{display:none}
.ng>summary::before{content:"";display:inline-block;width:0;height:0;margin:0 7px 3px 2px;border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.ng[open]>summary::before{transform:rotate(90deg)}
.ng>summary small{font-size:15px;opacity:.8}
.ng-t{display:inline-block;max-width:calc(100% - 3.4em);overflow:hidden;text-overflow:ellipsis;vertical-align:top} /* 긴 문서 이름은 말줄임, 메모 수는 끝까지 보인다 */

/* ───────── 단서 발견 효과 ───────── */
#app.cue-clue .stage-frame{animation:cueClue .9s ease-out}
@keyframes cueClue{0%{box-shadow:0 0 0 0 rgba(243,231,179,.0)}25%{box-shadow:0 0 0 3px rgba(243,231,179,.55),0 0 40px rgba(243,231,179,.35)}100%{box-shadow:0 0 0 0 rgba(243,231,179,0)}}
#app.cue-match .stage-frame,#app.cue-unlock .stage-frame{animation:cueMatch 1.4s ease-out}
@keyframes cueMatch{0%{filter:none}12%{filter:brightness(1.35) contrast(1.1)}30%{filter:brightness(.92)}100%{filter:none}}
#app.cue-solved{animation:cueMatch 1.6s ease-out}
#app.cue-confess .case-view{animation:quake .7s cubic-bezier(.36,.07,.19,.97) .05s,quake .5s cubic-bezier(.36,.07,.19,.97) .9s}
#app.cue-confess::after{content:"";position:fixed;inset:0;z-index:88;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(120,10,6,.45));animation:redPulse 1.6s ease-out both}
#app:is(.cue-gore,.cue-bonesaw)::after{content:"";position:fixed;inset:0;z-index:88;pointer-events:none;background:radial-gradient(ellipse at center,transparent 34%,rgba(38,2,0,.62));animation:goreDim 1.6s ease-out both} /* 끔찍한 기록을 처음 펼칠 때 */
@keyframes goreDim{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes redPulse{0%{opacity:0}20%{opacity:1}55%{opacity:.35}70%{opacity:.8}100%{opacity:0}}
@keyframes quake{10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(2px,1px)}30%,50%,70%{transform:translate(-3px,-1px)}40%,60%{transform:translate(3px,1px)}}
#app.cue-miss .stage-frame{animation:quake .35s cubic-bezier(.36,.07,.19,.97)}

.cue-stamp{position:fixed;left:50%;top:42%;z-index:96;pointer-events:none;transform:translate(-50%,-50%)}
.cue-stamp span{display:block;padding:8px 22px 6px;border:5px double var(--red);border-radius:6px;color:var(--red);font:800 34px/1 var(--f-doc);letter-spacing:.18em;background:rgba(236,226,198,.18);mix-blend-mode:multiply;animation:cueStamp 1.9s cubic-bezier(.2,1.5,.45,1) both}
.cue-stamp.big span{padding:14px 34px 12px;font-size:54px;border-width:7px}
.cue-stamp.press span{border-radius:50%;padding:22px 20px;font-size:30px;background:rgba(40,0,0,.12)}
@keyframes cueStamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}14%{opacity:.92;transform:rotate(-12deg) scale(1)}75%{opacity:.85;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-12deg) scale(1.04)}}

/* 주인공 속말 자막 */
.mono-cap{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:94;max-width:min(640px,calc(100vw - 32px));padding:6px 18px 5px;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:rgba(14,14,16,.78);color:#efe6cf;font:23px/1.3 var(--f-hand);text-align:center;border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:opacity .35s,transform .35s,bottom .25s}
.mono-cap::before{content:"— ";opacity:.6}
.mono-cap.on{opacity:1;transform:translate(-50%,0)}
.mono-cap.top{top:calc(2px + env(safe-area-inset-top,0px));bottom:auto!important;font-size:19px;padding:4px 14px 3px} /* 노트북 탭 줄에 걸치지 않게 낮고 작게 */
/* 아래쪽 알림 쪽지가 떠 있으면 그 키(--toast-h, 엔진 toast)만큼 위로 비켜 선다 — 여러 줄 쪽지가 자막을 덮지 않게 */
body:has(#toast.on) .mono-cap{bottom:max(calc(64px + env(safe-area-inset-bottom,0px)),calc(34px + var(--toast-h,40px) + env(safe-area-inset-bottom,0px)))}


@media (prefers-reduced-motion:reduce){
  #app[class*="cue-"] .stage-frame,#app[class*="cue-"] .case-view,#app.cue-solved,.rep-view.bounced,.m-who.bounced,.qa.pressing .c-ev,.c-dots i{animation:none!important}
  #app.cue-confess::after,#app:is(.cue-gore,.cue-bonesaw)::after{animation-duration:.01s}
  .cue-stamp span{animation:cueFade 1.2s ease-out both;transform:rotate(-12deg)} /* 움직임 줄이기: 쾅 내려찍는 크기 변화 없이 스며 나왔다 사라진다 */
  .mono-cap{transition:opacity .2s}
  .verdict.wait{animation:none}
}
@media (max-width:560px){
  .c-q,.c-bub{max-width:92%}
  .cue-stamp.big span{font-size:38px}
  .mono-cap{font-size:20px;bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  body:has(#toast.on) .mono-cap{bottom:max(calc(70px + env(safe-area-inset-bottom,0px)),calc(34px + var(--toast-h,40px) + env(safe-area-inset-bottom,0px)))}
}

/* 글자 없는 지도·약도 그림 위에 얹는 이름표 */
.art-wrap{position:relative;display:block}
.art-wrap>img{display:block;width:100%;height:auto}
.art-labs{position:absolute;inset:0;pointer-events:none}
.art-lab{position:absolute;transform:translateY(-85%);padding:0 4px;border-radius:2px;background:rgba(246,241,226,.8);box-shadow:0 0 0 1px rgba(43,40,35,.12);color:#2b2823;font:700 clamp(9px,1.4vw,12.5px)/1.35 var(--f-web);white-space:nowrap}
.art-lab.c{transform:translate(-50%,-85%)}
.art-lab.r{transform:translate(-100%,-85%)}
.art-labs.axis{container-type:size}
.art-labs.axis .art-lab{padding:0;background:none;box-shadow:none;color:#4f4f4f;font:400 11px/1.2 var(--f-web);font-size:1.6cqw} /* 도표(소나그램)의 눈금 글자: 그림에서 지운 글자 자리에 */
.art-lab.hid{visibility:hidden} /* 조사 지점에 깔린 이름표 (js mapTidy) */
.zoom .art-lab.hid{visibility:visible} /* 크게 보기에는 핀이 없으니 전부 */

/* 자료를 펼칠 때 종이가 스르르 */
.pane-read>.enter{animation:paperIn .32s ease-out both}
@keyframes paperIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pane-read>*{animation:none!important}}

.cab-foot .credit{margin-top:4px;font-size:11px;opacity:.9}
.cab-foot .credit a{color:inherit}
.cab-foot .unsaved{flex-basis:100%;max-width:none;color:#a4382c;font-weight:700} /* 저장이 막힌 브라우저: 알림 한 번이 다른 알림에 덮여도 기록실에는 늘 적혀 있게 */

/* 그림 크게 보기 */
.cmp-art img,.b-img img,.map img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:97;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;overflow:auto;overscroll-behavior:contain;gap:10px;padding:24px 16px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));background:rgba(10,9,8,.86);cursor:zoom-out;animation:zoomIn .2s ease-out}
.zoom figure{margin:0;max-width:min(1400px,96vw,100%);max-height:86svh;display:flex}
.zoom figure img,.zoom figure .art-wrap{max-width:100%;max-height:86svh;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.zoom figure .art-wrap>img{max-height:86svh;width:auto}
.zoom p{margin:0;font:11px var(--f-mono);letter-spacing:.08em;color:#bdb4a0}
.zoom.big{align-items:flex-start;justify-content:flex-start}
.zoom.big figure{flex:none;margin:auto 0;width:calc(200vw - 32px);max-width:none;max-height:none;transform:none}
.zoom.big figure img,.zoom.big figure .art-wrap,.zoom.big figure .art-wrap>img{width:100%;max-width:none;max-height:none}
.zoom.big p{display:none}
@keyframes zoomIn{from{opacity:0}to{opacity:1}}

/* 지도: 넓은 화면에서는 읽기 칸에 크게, 목록 칸의 작은 지도는 점만 */
.map-read{max-width:860px;margin:0 auto}
.map-desc{margin:0 0 10px;font:21px/1.35 var(--f-hand);color:var(--pencil)}
.map.big{box-shadow:0 3px 14px rgba(0,0,0,.35)}
.map.big .spot{width:26px;height:26px}
.map.big .spot span{top:28px;font-size:12.5px}
/* 점 이름이 옆 점·이름표에 깔리면 덜 겹치는 자리로: 위 · 오른쪽 · 왼쪽 (js mapTidy) */
.map .spot.lab-up span{top:auto;bottom:calc(100% + 2px)}
.map .spot:is(.lab-r,.lab-l) span{top:50%;transform:translateY(-50%)}
.map .spot.lab-r span{left:calc(100% + 3px);right:auto}
.map .spot.lab-l span{left:auto;right:calc(100% + 3px)}
.map .spot:focus-visible{transform:translate(-50%,-50%) scale(1.15)}
@media (hover:hover){.map .spot:hover{transform:translate(-50%,-50%) scale(1.15)}}
@container stage (min-width:701px){
  .pane-list .map .spot{width:16px;height:16px;border-width:1.5px}
  .pane-list .map .spot span{display:none}
}
/* 크게 본 사진 밑에 사진 설명. 종이 기록철의 사진은 인화지 여백째 약간 비뚤게 들어 올린다 */
.zoom .z-cap{max-width:min(760px,90vw);font:13px/1.5 var(--f-web);letter-spacing:0;color:#e4dccb;text-align:center;text-wrap:balance}
.zoom[data-frame="papers"] figure{transform:rotate(-.6deg)}
.zoom[data-frame="papers"] figure img,.zoom[data-frame="papers"] figure .art-wrap{box-sizing:border-box;max-height:80svh;border:10px solid #f1ecdf;box-shadow:0 24px 50px rgba(0,0,0,.65),0 1px 0 rgba(0,0,0,.3)}
.zoom[data-frame="papers"] figure .art-wrap>img{max-height:calc(80svh - 20px);border:0;box-shadow:none}
.zoom[data-frame="papers"] .z-cap{font:21px/1.35 var(--f-hand);color:#efe5cc}
/* 문서가 나타나는 방식도 틀마다: 종이는 살짝 비뚤게 내려놓이고, 화면 속 파일은 창이 열리듯 */
.case-view[data-frame="papers"] .pane-read>.enter{animation-name:paperDown}
.case-view[data-frame="laptop"] .pane-read>.enter{animation:winIn .18s ease-out both}
.case-view[data-frame="crt"] .pane-read>.enter{animation:winIn .12s steps(3,end) both}
@keyframes paperDown{from{opacity:0;transform:translate(3px,10px) rotate(-.5deg)}to{opacity:1;transform:none}}
@keyframes winIn{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.case-view .pane-read>.enter{animation:none}}

@keyframes cueFade{0%,100%{opacity:0}15%,75%{opacity:.9}}
/* 추궁: 붉은 테 단어를 누르면 내밀 메모를 고른다 */
.press-pick{padding-top:10px;border-top:1px dashed rgba(43,40,35,.3)}
.press-pick .per-ask-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.press-x{margin-left:auto;padding:2px 9px;border:1px solid rgba(43,40,35,.4);background:transparent;color:inherit;font:12px var(--f-mono);cursor:pointer}
.press-list{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain}
button.press-opt{width:100%;text-align:left;color:inherit}
.press-opt .src{color:var(--pencil);font-size:12px}
.press-opt[hidden]{display:none}
.press-no{margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--red);background:rgba(160,40,30,.06);font:14px/1.6 var(--f-web)}
.press-no b{margin-right:4px}
/* 메모가 길어지면 보고서는 맨 밑 — 메모 머리에서 바로 펼친다 */
.nb-jump-row{margin:-2px 0 4px;text-align:right}
.nb-jump{padding:0 0 1px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--red);font:12px/1.3 var(--f-mono);letter-spacing:.02em;cursor:pointer}
@media (hover:hover){.nb-jump:hover{opacity:.75}}
/* 고르는 목록에서 긴 메모(부검 소견 한 줄 따위)는 세 줄까지만 — 마흔 장 넘는 목록에서 한 장이 화면을 다 먹지 않게. 고른 것은 다 펼치고, 전문은 title 로 */
.rep-opt:not(.on):not([hidden]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.rep-opt:not(.on):not([hidden]):focus-within{display:block;-webkit-line-clamp:unset;line-clamp:none} /* 화살표로 옮겨 다니면 고르기 전에 끝까지 읽힌다 (마우스는 title 풍선으로) */
.hh small.bump{display:inline-block;animation:nbump .7s ease-out}
@keyframes nbump{0%{transform:scale(1);color:inherit}30%{transform:scale(1.5);color:var(--red)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hh small.bump{animation:none}}
body:has(#paneRead .rep-solved .epi) #solvedBox :is(.epi,.epi-share,.epi-rate,.lv-fin){display:none} /* 올린 보고서 칸에 결말이 펼쳐져 있으면 수첩에는 도장과 다음 사건만 (같은 글이 두 번 보이지 않게) */