/* 디자인 A — player/template.html(사용자 확정 UI)의 스타일을 그대로 옮김. 색·모서리 토큰은 :root 한곳에서 바꾼다.
   아래 "추가 기능" 구역만 새로 붙였다(인물·그만 읽기 버튼, 진행 바, 공유 줄, 힌트, 접근성). */
:root{
  --paper:#fbf8f1; --paper-edge:#efe9dc; --ink:#2b2621; --muted:#6e6458; /* 원본 #8a8073 → 작은 글자 명도 대비 4.5:1 이상(사용자 확인 2026-11-13) */ --line:#e3dccd;
  --accent:#7a4a2a; --accent-soft:#f1e6da; --ok:#3f6b46; --bad:#9a3b2f; --hl:#fbeaa8;
  --bg:#e9e4d8; --font:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif; --fs:18px;
}
body.dark{
  --paper:#24211d; --paper-edge:#1d1b18; --ink:#d9d2c5; --muted:#9a9184; --line:#3a352f;
  --accent:#d6a77a; --accent-soft:#3a3029; --ok:#8fbf95; --bad:#e08c7f; --hl:#5a4b20; --bg:#161412;
}
body.sans{ --font:"Noto Sans KR","Apple SD Gothic Neo",sans-serif; }
body.round{ --font:"Gowun Dodum","Noto Sans KR","Apple SD Gothic Neo",sans-serif; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}
.app{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:2px 6px 8px;font-family:system-ui,sans-serif}
.topbar button{background:none;border:0;color:var(--muted);font-size:13px;padding:6px;cursor:pointer}
.book{flex:1;position:relative;perspective:1600px}
.page{position:absolute;inset:0;background:var(--paper);border-radius:4px 10px 10px 4px;box-shadow:0 1px 0 var(--paper-edge),0 8px 24px rgba(0,0,0,.12), inset 10px 0 18px -14px rgba(0,0,0,.25);padding:28px 26px 54px;overflow:hidden;transform-origin:left center;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .55s;backface-visibility:hidden}
.page.turn-out{transform:rotateY(-100deg);opacity:.0}
.page.turn-in{transform:rotateY(0)}
@media (prefers-reduced-motion: reduce){ .page{transition:opacity .2s} .page.turn-out{transform:none;opacity:0} }
.content{height:100%;overflow-y:auto;font-size:var(--fs);line-height:1.85;word-break:keep-all;overflow-wrap:break-word}
.content p{margin:0 0 1em;text-indent:0}
.folio{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:var(--muted);font-family:system-ui,sans-serif}
.nav{display:flex;gap:10px;padding-top:10px}
.btn{flex:1;font-family:system-ui,sans-serif;font-size:16px;padding:14px 12px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;min-height:48px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.dark .btn.primary{color:#1b1815}
.btn:disabled{opacity:.4}
h1{font-size:26px;line-height:1.4;margin:.2em 0 .4em}
h2{font-size:21px;margin:.2em 0 .6em}
.small{font-size:13px;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.6}
.cover{display:flex;flex-direction:column;justify-content:center;height:100%;text-align:center}
.cover .meta{margin-top:14px}
.case{display:block;width:100%;text-align:left;margin:0 0 10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;cursor:pointer}
.case small{display:block;color:var(--muted);font-size:12px;margin-top:4px;font-family:system-ui,sans-serif}
.note{font-family:system-ui,sans-serif;font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:8px}
.q{font-size:calc(var(--fs) + 2px);line-height:1.6;margin:6px 0 18px} /* 읽기 설정 글자 크기를 따름(기본 18px → 20px, 원본과 같음) */
.opt{display:block;width:100%;text-align:left;font-family:var(--font);font-size:calc(var(--fs) - 1px);line-height:1.5;padding:13px 14px;margin:0 0 9px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;min-height:48px}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.unk{font-family:system-ui,sans-serif;font-size:14px;color:var(--muted);border-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chips .opt{width:auto;display:inline-block;margin:0}
.inrow{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:12px}
.inrow input,.inrow select{font-size:20px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100px;font-family:system-ui,sans-serif}
.toast{font-family:system-ui,sans-serif;font-size:13px;color:var(--accent);height:18px;margin-top:4px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:9}
.sheet{background:var(--paper);color:var(--ink);width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom))}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-family:system-ui,sans-serif;font-size:15px}
.seg button{font-size:14px;padding:8px 10px;margin-left:4px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.verdict{font-size:24px;margin:6px 0}
.pill{display:inline-block;font-family:system-ui,sans-serif;font-size:12px;padding:3px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);margin:2px 4px 2px 0}
.rv{border-top:1px solid var(--line);padding:12px 0}
.rv .mark{font-family:system-ui,sans-serif;font-size:13px;font-weight:600}
.ok{color:var(--ok)} .bad{color:var(--bad)}
mark{background:none;color:inherit;padding:0 1px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-skip-ink:none;-webkit-text-decoration-line:underline}
details summary{cursor:pointer;font-family:system-ui,sans-serif;font-size:14px;color:var(--accent);padding:6px 0}
.opt:disabled{opacity:.4;cursor:default}
.stars{color:var(--accent);letter-spacing:1px}
.chain{list-style:none;padding:0;margin:10px 0;counter-reset:c}
.chain li{position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--line)}
.chain li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:600 12px/22px system-ui,sans-serif;text-align:center}
.chain .so{display:block;margin-top:4px;font-family:system-ui,sans-serif;font-size:14px;color:var(--ink)}
.tip{font-family:system-ui,sans-serif;font-size:14px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin:8px 0}
/* 원본의 인라인 스타일을 클래스로 */
.reading{font-size:var(--fs);line-height:1.85}

/* ───── 추가 기능 ───── */
.app{height:100dvh}
.topbar .tools{display:flex;gap:2px}
.topbar button{min-height:44px;min-width:44px}
.topbar button[hidden]{display:none}
.progress{height:2px;background:var(--line);margin:0 6px 8px;border-radius:2px;overflow:hidden}
.progress[hidden]{display:none}
.progress span{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.content:focus{outline:none}
.case .badges{display:block;margin-top:6px}
.content p.cont{text-indent:0}
.hint{position:absolute;left:26px;right:26px;bottom:36px;text-align:center;animation:hint 4s ease forwards;pointer-events:none}
@keyframes hint{0%,70%{opacity:1}100%{opacity:0}}
.share-row{display:flex;gap:8px;margin:10px 0}
.btn.sm{font-size:14px;padding:10px 8px;min-height:44px}
.install{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.install>div{flex:1 1 100%}
.preview{font-size:var(--fs);line-height:1.85;margin:14px 0 4px;word-break:keep-all}
.foot{margin-top:18px;text-align:center}
.foot a,.rv a{color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.seg button{margin-left:0;min-height:40px;min-width:40px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.probe{pointer-events:none}
@media (min-width:600px){ .content{max-width:40em;margin:0 auto} }
/* 상단 줄: 버튼이 늘어도 한 줄 유지(사건 제목은 말줄임) */
#crumb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tools{flex:none;white-space:nowrap}
.topbar .tools button{padding:6px 5px}
/* UX 검수 반영: 터치 영역 44px, 표지의 보조 동작(글 링크), 낮은 화면(가로 모드) */
.seg button{min-height:44px;min-width:44px}
details summary{min-height:44px;display:flex;align-items:center}
.link{background:none;border:0;padding:10px 6px;min-height:44px;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-height:500px){
  .app{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .topbar{padding:0 6px 2px}
  .progress{margin-bottom:4px}
  .page{padding:14px 22px 30px}
  .folio{bottom:8px}
  .nav{padding-top:6px}
  .btn{min-height:44px;padding:10px 12px}
  .q{font-size:18px;margin:2px 0 10px}
  .opt{padding:10px 12px;margin-bottom:6px;min-height:44px}
  .page.notebook .content{scrollbar-width:thin}
  .page.notebook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(transparent,var(--paper));pointer-events:none;border-radius:0 0 10px 4px}
}