/* ═══════════════════════════════════════════════════════════════
   PDF 필기 — (주)위드스탭
   판독대(reading desk)의 연장: 밝은 계기판 위에서 문서는 어두운
   뷰박스 안에 놓이고, 종이는 그 위에 떠 있는 흰 면이다.
   색·서체는 wstep.co.kr 본 사이트에서 그대로 이어받는다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --css-ok:1;             /* app.js 가 이 값으로 스타일 적용 여부를 확인한다 */

  /* 브랜드 */
  --navy:#172B46;
  --navy-lit:#25405E;
  --sage:#4C7C6A;
  --sage-deep:#3A6656;

  /* 지면 */
  --bar:#FFFFFF;          /* 계기판 */
  --rail:#F3F6F8;         /* 쪽 목록 */
  --box:#E9EDF1;          /* 뷰박스 */
  --well:#10161D;         /* 문서가 놓이는 어두운 바닥 */
  --well-2:#181F28;
  --paper:#FFFFFF;

  --ink:#111C2B;
  --ink-2:#4E5C6B;
  --ink-3:#8593A0;
  --line:#D3DBE2;
  --line-soft:#E7ECF0;

  --sans:"IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --serif:"Noto Serif KR",Georgia,serif;
  /* mono는 라틴·숫자 전용(계측 판독값). 한글에는 절대 쓰지 않는다 — 폴백에서 자간이 무너진다 */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --r:10px;
  --doc-h:50px;
  --tool-h:54px;
  --rail-w:148px;
}

*,*::before,*::after{ box-sizing:border-box }
/* display 를 지정한 요소가 hidden 속성을 무시하지 않도록 (전역) */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
html,body{ height:100% }

body{
  margin:0; display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  background:var(--well); color:var(--ink);
  font-family:var(--sans); font-size:14px; font-weight:400; line-height:1.6;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,label{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; border-radius:6px }

.ic{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor;
     stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ═══════════ 상단 바 ═══════════ */
#appbar{
  flex:none; background:var(--bar);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(23,43,70,.03), 0 6px 18px -14px rgba(23,43,70,.5);
}
body.chrome-off #appbar{ display:none }

.row{ display:flex; align-items:center; gap:6px; padding:0 10px }
.row-doc{ height:var(--doc-h) }
.row-tool{ height:var(--tool-h); border-top:1px solid var(--line-soft); overflow-x:auto; scrollbar-width:none }
.row-tool::-webkit-scrollbar{ display:none }

.spacer{ flex:1 1 auto; min-width:6px }
.vr{ flex:none; width:1px; height:26px; background:var(--line); margin:0 8px }

/* ── 문서 이름 ── */
.doc{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:9px; padding:0 4px }
.docname{
  font-size:14.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.empty .docname{ font-weight:400; color:var(--ink-3) }
.docmeta{ flex:none; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em }

/* ── 버튼 ── */
.ib{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r);
  color:var(--ink-2); cursor:pointer; touch-action:manipulation;
  transition:background .13s, color .13s;
}
.ib:hover{ background:var(--box); color:var(--ink) }
.ib.sm{ width:38px; height:38px }
.ib[disabled]{ color:#C2CBD4; pointer-events:none }
.ib.is-on{ background:var(--box); color:var(--navy) }

.btn{
  flex:none; height:40px; padding:0 15px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bar); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-size:13.5px; font-weight:500; cursor:pointer;
  touch-action:manipulation; white-space:nowrap;
  transition:background .13s, border-color .13s;
}
.btn:hover{ background:var(--box) }
.btn .ic{ width:19px; height:19px }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff }
.btn-primary:hover{ background:var(--navy-lit); border-color:var(--navy-lit) }
.btn-primary[disabled]{ background:#EDF1F4; border-color:var(--line); color:#A9B4BF; pointer-events:none }
.btn-lg{ height:50px; padding:0 24px; font-size:15px; border-radius:12px }
.btn-lg .ic{ width:21px; height:21px }

/* ── 도구 ── */
.tools{ display:flex; align-items:center; gap:4px; flex:none }
.tool{
  height:44px; padding:0 13px; display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; border-radius:var(--r);
  color:var(--ink-2); font-size:13.5px; font-weight:500;
  cursor:pointer; touch-action:manipulation; white-space:nowrap;
  transition:background .13s, color .13s;
}
.tool:hover{ background:var(--box) }
.tool.is-on{ background:var(--navy); color:#fff }
/* 펜촉은 지금 고른 색으로 — 도구가 곧 상태 표시 */
.tool[data-tool="pen"] .ic{ color:var(--pen,currentColor) }
.tool[data-tool="pen"].is-on .ic{ color:#fff }
.tool[data-tool="highlighter"] .ic{ color:var(--hl,currentColor) }
.tool[data-tool="highlighter"].is-on .ic{ color:#fff }

/* ── 도구 속성 ── */
.props{ flex:none; display:flex; align-items:center }
.pgroup{ display:flex; align-items:center; gap:14px }
.pgroup[hidden]{ display:none }
.plabel{ font-size:12.5px; color:var(--ink-3); white-space:nowrap }
.phint{ font-size:12px; color:var(--ink-3); white-space:nowrap }

.swatches{ display:flex; align-items:center; gap:2px }
.sw{
  width:36px; height:44px; padding:0; border:0; background:transparent;
  position:relative; cursor:pointer; touch-action:manipulation;
}
.sw::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:20px;
  margin:-10px 0 0 -10px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(17,28,43,.14);
  transition:transform .13s, box-shadow .13s;
}
.sw:hover::after{ transform:scale(1.12) }
.sw.is-on::after{
  transform:scale(1.12);
  box-shadow:inset 0 0 0 1px rgba(17,28,43,.14), 0 0 0 2px var(--bar), 0 0 0 4px var(--navy);
}

.widths{ display:flex; align-items:center; gap:2px }
.wd{
  width:38px; height:44px; padding:0; border:0; background:transparent;
  display:grid; place-items:center; cursor:pointer; border-radius:var(--r);
  touch-action:manipulation; transition:background .13s;
}
.wd:hover{ background:var(--box) }
.wd.is-on{ background:var(--box) }
.wd i{ display:block; width:22px; border-radius:9px; background:var(--ink-3) }
.wd.is-on i{ background:var(--navy) }
.wd i.ring{
  width:var(--d); height:var(--d); border-radius:50%;
  background:transparent; box-shadow:inset 0 0 0 1.6px var(--ink-3);
}
.wd.is-on i.ring{ background:transparent; box-shadow:inset 0 0 0 1.8px var(--navy) }

/* ═══════════ 본문 ═══════════ */
#main{ position:relative; flex:1 1 auto; display:flex; min-height:0 }

/* ── 쪽 목록 ── */
#rail{
  flex:0 0 var(--rail-w); background:var(--rail);
  border-right:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
  padding:12px 0 24px;
}
body.rail-off #rail, body.empty #rail{ display:none }
#railScrim{ display:none }

.th{
  display:block; width:100%; padding:7px 14px 3px; border:0; background:transparent;
  cursor:pointer; touch-action:manipulation;
}
.th .tw{
  display:block; position:relative; background:var(--paper);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  box-shadow:0 1px 3px rgba(23,43,70,.1);
  transition:border-color .13s, box-shadow .13s;
}
.th canvas{ display:block; width:100%; height:auto }
.th .tn{
  display:block; text-align:center; padding-top:5px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.th:hover .tw{ border-color:var(--ink-3) }
.th.is-on .tw{ border-color:var(--navy); box-shadow:0 0 0 2px var(--navy), 0 2px 8px rgba(23,43,70,.2) }
.th.is-on .tn{ color:var(--navy); font-weight:500 }

/* 시그니처 — 필기가 있는 쪽에는 잉크 표시가 남는다 */
.th .mark{
  position:absolute; right:5px; top:5px; width:8px; height:8px; border-radius:50%;
  background:var(--sage); box-shadow:0 0 0 2px rgba(255,255,255,.9);
  opacity:0; transform:scale(.4); transition:opacity .18s, transform .18s;
}
.th.has-ink .mark{ opacity:1; transform:scale(1) }

/* ── 문서 ── */
#viewer{
  position:relative; flex:1 1 auto; overflow:auto;
  background:var(--well);
  background-image:radial-gradient(120% 80% at 50% 0%, var(--well-2), var(--well) 70%);
  /* 필기·제스처를 직접 처리하므로 브라우저 기본 터치 동작은 끈다 */
  touch-action:none; overscroll-behavior:contain;
}
#pages{ padding:20px 0 96px; min-height:100% }

.page{
  position:relative; margin:0 auto 20px; background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -8px rgba(0,0,0,.6);
}
.page canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.page canvas.ink{ z-index:2 }
.page.pending::after{
  content:""; position:absolute; inset:0; z-index:1; background:#F7F8FA;
}

/* ── 빈 화면 ── */
#empty{ position:absolute; inset:0; display:grid; place-items:center; padding:24px }
body:not(.empty) #empty{ display:none }
#empty .card{ max-width:440px; text-align:center }
#empty h1{
  margin:0 0 14px; font-family:var(--serif); font-weight:600;
  font-size:clamp(23px,3.6vw,30px); line-height:1.4; letter-spacing:-.02em; color:#F2F5F8;
}
#empty p{ margin:0 0 26px; color:#95A3B2; font-size:14.5px; line-height:1.8 }
#empty .fine{ margin:20px 0 0; font-size:12.5px; color:#6C7A89 }
#empty .btn-primary{ background:var(--sage); border-color:var(--sage) }
#empty .btn-primary:hover{ background:var(--sage-deep); border-color:var(--sage-deep) }

/* ═══════════ 떠 있는 조작 막대 ═══════════ */
#dock{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:2px; padding:4px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:13px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
}
#dock[hidden]{ display:none }
.seg{ display:flex; align-items:center; gap:1px }
.dvr{ width:1px; height:22px; background:var(--line); margin:0 6px }

.pager{ display:flex; align-items:center; gap:5px; padding:0 3px; font-family:var(--mono); font-size:13px }
.pager input{
  width:38px; height:30px; text-align:center; padding:0 2px;
  background:var(--box); border:1px solid transparent; border-radius:7px;
  font-family:var(--mono); font-size:13px; color:var(--ink);
}
.pager input:focus{ background:var(--bar); border-color:var(--navy); outline:none }
.pager em{ font-style:normal; color:var(--ink-3) }
.pager #pageTotal{ color:var(--ink-2); min-width:16px }

.zval{
  height:38px; min-width:62px; padding:0 8px; border:0; border-radius:var(--r);
  background:transparent; cursor:pointer; touch-action:manipulation;
  font-family:var(--mono); font-size:13px; color:var(--ink);
  transition:background .13s;
}
.zval:hover{ background:var(--box) }

#fsExit{
  position:fixed; right:16px; top:16px; z-index:41;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5); touch-action:manipulation;
}
#fsExit[hidden]{ display:none }

/* ═══════════ 팝오버 ═══════════ */
.pop{
  position:fixed; z-index:75; min-width:172px; padding:6px;
  background:var(--bar); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(17,28,43,.4);
}
.pop[hidden]{ display:none }
.pop hr{ border:0; border-top:1px solid var(--line-soft); margin:6px 4px }
.pop-wide{ min-width:290px; max-width:320px }

.pitem{
  display:block; width:100%; text-align:left; padding:10px 12px;
  background:transparent; border:0; border-radius:8px;
  font-size:13.5px; cursor:pointer; touch-action:manipulation;
}
.pitem:hover{ background:var(--box) }
.pitem.is-on{ color:var(--navy); font-weight:600 }
.pitem.danger{ color:#B23A2C }
.pitem.danger:hover{ background:#FBEDEB }

.prow{ display:flex; gap:11px; padding:9px 10px; border-radius:8px; cursor:pointer }
.prow:hover{ background:var(--box) }
.prow input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--sage-deep) }
.prow b{ display:block; font-size:13.5px; font-weight:600 }
.prow em{ display:block; font-style:normal; font-size:12px; color:var(--ink-3); line-height:1.55 }

/* ═══════════ 알림 ═══════════ */
#toast{
  position:fixed; left:50%; bottom:82px; transform:translateX(-50%); z-index:70;
  max-width:min(86vw,460px); padding:11px 17px;
  background:var(--navy); color:#EAF0F5; border-radius:10px;
  font-size:13.5px; line-height:1.6; text-align:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}
#toast[hidden]{ display:none }

#overlay{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(10,15,20,.55); backdrop-filter:blur(3px);
}
#overlay[hidden]{ display:none }
#overlay .box{
  background:var(--bar); border-radius:14px; padding:26px 34px;
  text-align:center; font-size:14px; box-shadow:0 20px 50px -14px rgba(0,0,0,.6);
}
.spin{
  width:30px; height:30px; margin:0 auto 14px;
  border:2.5px solid var(--line); border-top-color:var(--navy);
  border-radius:50%; animation:sp .75s linear infinite;
}
@keyframes sp{ to{ transform:rotate(360deg) } }

/* CDN 실패 안내 */
#libError{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--well); color:#DCE4EB; padding:28px; text-align:center;
}
#libError .box{ max-width:440px; line-height:1.85 }
#libError h2{ font-family:var(--serif); font-weight:600; font-size:20px; margin:0 0 12px }
#libError code{ display:block; margin-top:16px; font-family:var(--mono);
                font-size:11.5px; color:#7C8A99; word-break:break-all }

/* ═══════════ 좁은 화면 ═══════════ */
/* 태블릿 세로(≈800px)까지는 도구 이름을 남긴다 — 아이콘만 있으면 알아보기 어렵다 */
@media (max-width:820px){
  .phint{ display:none }
  /* 오른쪽에 고정된 실행취소 아래로 내용이 숨지 않도록 자리를 비워 둔다 */
  .props{ padding-right:96px }
  .btn span{ display:none }
  .btn{ padding:0 11px }
  .btn-lg span{ display:inline }
}
@media (max-width:700px){
  /* 도구 막대가 한 줄에 다 들어오도록 조작 요소를 조금씩 줄인다
     (터치 목표는 여전히 44px 높이를 유지) */
  .tool span{ display:none }
  .tool{ padding:0 10px }
  .row{ padding:0 6px }
  .vr{ margin:0 4px }
  .pgroup{ gap:8px }
  .sw{ width:30px }
  .sw::after{ width:18px; height:18px; margin:-9px 0 0 -9px }
  .wd{ width:32px }
  .props{ padding-right:88px }
}
@media (max-width:900px){
  /* 태블릿 세로처럼 좁을 때는 쪽 목록이 문서 폭을 먹지 않도록 겹쳐서 연다 */
  :root{ --rail-w:126px }
  #rail{
    position:absolute; left:0; top:0; bottom:0; z-index:30;
    width:var(--rail-w);            /* 절대배치에서는 flex-basis가 먹지 않는다 */
    box-shadow:8px 0 28px -10px rgba(0,0,0,.6);
  }
  body:not(.rail-off):not(.empty) #railScrim{
    display:block; position:absolute; inset:0; z-index:29; background:rgba(10,15,20,.45);
  }
  .plabel{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ── 좁은 화면에서도 실행취소는 늘 오른쪽에 붙어 있게 ── */
.row-tool .tools.end{
  position:sticky; right:0; padding-left:8px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--bar) 14px);
}

/* ── 스크롤바: 얇고 조용하게 ── */
#rail{ scrollbar-width:thin; scrollbar-color:#C3CCD5 transparent }
#viewer{ scrollbar-width:thin; scrollbar-color:#3A434E transparent }
#rail::-webkit-scrollbar, #viewer::-webkit-scrollbar{ width:10px; height:10px }
#rail::-webkit-scrollbar-track, #viewer::-webkit-scrollbar-track{ background:transparent }
#rail::-webkit-scrollbar-thumb{
  background:#C3CCD5; border-radius:6px; border:3px solid var(--rail);
}
#viewer::-webkit-scrollbar-thumb{
  background:#3A434E; border-radius:6px; border:3px solid var(--well);
}
#rail::-webkit-scrollbar-thumb:hover{ background:#A8B4C0 }
#viewer::-webkit-scrollbar-thumb:hover{ background:#4C5766 }

/* 조작 막대는 창이 아니라 '문서'의 가운데에 오도록 (쪽 목록 폭만큼 보정) */
@media (min-width:901px){
  body:not(.rail-off):not(.empty) #dock{ margin-left:calc(var(--rail-w) / 2) }
}

/* 설정 창 아래 버전·화면 폭 (모양이 달라 보일 때 확인용) */
.pver{ padding:6px 12px 2px; font-size:12px; color:var(--ink-3) }
.pver b{ font-family:var(--mono); font-weight:500; color:var(--ink-2) }

/* ── 앱으로 설치 ── */
.btn-install{ background:#EDF4F1; border-color:#BFD8CE; color:var(--sage-deep); font-weight:600 }
.btn-install:hover{ background:#E1EDE8 }
.btn-install .ic{ color:var(--sage-deep) }
#installBtn2{ color:var(--sage-deep); font-weight:600 }
body.installed .pver#installHint{ display:none !important }