/* ============================================================
   open — document viewer
   palette: cool paper-grey shell, ink text, highlighter accent
   ============================================================ */

:root{
  --bg-1:#f4f6fa;
  --bg-2:#e9edf5;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#151a22;
  --ink-2:#4b5566;
  --muted:#7b8697;
  --line:#e2e7f0;
  --line-2:#d3dae6;
  --accent:#ffd34e;
  --accent-deep:#f0b400;
  --action:#1b2230;
  --on-action:#ffffff;
  --danger:#d0455a;
  --shadow-s:0 1px 2px rgba(18,26,40,.06), 0 2px 8px rgba(18,26,40,.05);
  --shadow-m:0 2px 6px rgba(18,26,40,.07), 0 12px 32px rgba(18,26,40,.10);
  --shadow-l:0 8px 20px rgba(18,26,40,.10), 0 32px 64px rgba(18,26,40,.16);
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --bar:54px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --paper:#ffffff;
  --paper-ink:#111318;
  --sat:1;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-1:#0e1117;
    --bg-2:#141a24;
    --surface:#171d27;
    --surface-2:#1d2431;
    --ink:#e7ebf2;
    --ink-2:#aeb8c8;
    --muted:#7f8b9d;
    --line:#252d3b;
    --line-2:#303a4b;
    --accent:#ffd34e;
    --accent-deep:#ffc21f;
    --action:#e7ebf2;
    --on-action:#141a24;
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 2px 8px rgba(0,0,0,.45);
    --shadow-l:0 12px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg-1:#0e1117; --bg-2:#141a24; --surface:#171d27; --surface-2:#1d2431;
  --ink:#e7ebf2; --ink-2:#aeb8c8; --muted:#7f8b9d; --line:#252d3b; --line-2:#303a4b;
  --action:#e7ebf2; --on-action:#141a24;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 8px rgba(0,0,0,.45);
  --shadow-l:0 12px 40px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
html{background:var(--bg-1)}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--font);
  font-size:15px;line-height:1.55;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255,211,78,.16), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(119,158,255,.16), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2));
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.02em}
ul{margin:0;padding:0;list-style:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

#app{
  min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);
}

/* ───────── top bar ───────── */
#topbar{
  position:sticky;top:0;z-index:40;
  height:var(--bar);flex:0 0 auto;
  display:flex;align-items:center;gap:2px;padding:0 6px;
  padding-top:env(safe-area-inset-top);
  height:calc(var(--bar) + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg-1) 84%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, transform .24s cubic-bezier(.3,.8,.3,1);
}
#app.scrolled #topbar{border-bottom-color:var(--line)}
#app.immersive #topbar{transform:translateY(-100%)}
#title-wrap{flex:1;min-width:0;padding:0 6px;text-align:center}
#doc-title{
  font-weight:640;font-size:15px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#doc-sub{font-size:11px;color:var(--muted);margin-top:-1px;letter-spacing:.01em}
.mode-home #title-wrap{visibility:hidden}

.ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .15s,color .15s,transform .1s;
}
.ico:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.ico:active{transform:scale(.93)}
.ico.sm{width:32px;height:32px;border-radius:9px}
.ico.sm svg{width:17px;height:17px}
.ico[disabled]{opacity:.28;pointer-events:none}

#btn-back,#btn-outline{display:none}
.mode-doc #btn-back{display:grid}
.mode-doc.has-outline #btn-outline{display:grid}
.mode-home #btn-find,.mode-home #btn-share,.mode-home #btn-more{display:none}

/* ───────── tabs ───────── */
#tabs{
  flex:0 0 auto;display:flex;gap:6px;padding:6px 10px 8px;overflow-x:auto;
  scrollbar-width:none;position:sticky;top:calc(var(--bar) + env(safe-area-inset-top));z-index:39;
  background:color-mix(in srgb, var(--bg-1) 84%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .24s cubic-bezier(.3,.8,.3,1);
}
#tabs::-webkit-scrollbar{display:none}
#app.immersive #tabs{transform:translateY(calc(-100% - var(--bar)))}
.tab{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;max-width:190px;
  padding:6px 8px 6px 11px;border-radius:999px;font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:var(--shadow-s);
}
.tab.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.tab .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;opacity:.5}
.tab .x svg{width:11px;height:11px;stroke-width:2.2}
.tab .x:hover{opacity:1;background:color-mix(in srgb,var(--ink) 10%,transparent)}

/* ───────── stage ───────── */
#stage{flex:1 1 auto;min-height:0;position:relative}
.mode-doc #home{display:none}
.mode-home #docs{display:none}

/* ───────── home ───────── */
.home-inner{max-width:680px;margin:0 auto;padding:18px 16px 64px}
.brand{text-align:center;padding:4px 0 22px}
.mark{width:66px;height:66px;stroke-width:2.1}
.mark .m-back{fill:none;stroke:var(--line-2)}
.mark .m-front{fill:var(--surface);stroke:var(--ink)}
.mark .m-line{stroke:var(--muted);stroke-width:2}
.mark .m-hl{stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.brand h1{font-size:30px;letter-spacing:-.045em;margin-top:8px;font-weight:700}

#dropzone{
  position:relative;border-radius:var(--r-xl);
  background:var(--surface);border:1px dashed var(--line-2);
  box-shadow:var(--shadow-s);
  transition:border-color .16s,background .16s,transform .16s;
}
#dropzone.hot{border-color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 12%,var(--surface));transform:scale(1.008)}
#file-input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.dz-body{padding:30px 20px;text-align:center;pointer-events:none}
.dz-plus{
  width:48px;height:48px;margin:0 auto 12px;border-radius:16px;
  display:grid;place-items:center;background:var(--accent);color:#2a2100;
  box-shadow:0 6px 16px rgba(240,180,0,.28);
}
.dz-plus svg{width:24px;height:24px;stroke-width:2.4}
.dz-body strong{display:block;font-size:16.5px;letter-spacing:-.02em}
.dz-body span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}

.fmt-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:14px 0 6px}
.fmt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  padding:3.5px 8px;border-radius:7px;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line);
}
.fmt.hero{color:var(--ink);border-color:var(--ink);font-weight:600}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 10px}
.sec-head h2{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.txtbtn{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.txtbtn:hover{color:var(--ink)}

#recent-list{display:flex;flex-direction:column;gap:6px}
.rec{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);text-align:left;width:100%;
  transition:transform .12s,border-color .12s;
}
.rec:active{transform:scale(.99)}
.rec:hover{border-color:var(--line-2)}
.rec .ft{
  width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:-.02em;
  color:#fff;text-transform:uppercase;
}
.rec .meta{flex:1;min-width:0}
.rec .nm{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.rec .sb{font-size:11.5px;color:var(--muted);margin-top:1px}
.rec .del{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);opacity:.6}
.rec .del svg{width:14px;height:14px}
.rec .del:hover{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent)}

.notes{display:flex;flex-direction:column;gap:2px;margin-top:24px}
.note{display:flex;align-items:center;gap:9px;padding:7px 2px}
.note .nd{width:5px;height:5px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.note .nd.ok{background:#3fa07a}
.note p{margin:0;flex:1;font-size:12.5px;line-height:1.5;color:var(--muted);letter-spacing:-.01em}
.btn{
  padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;flex:0 0 auto;
  background:var(--action);color:var(--on-action);
}
.btn:active{transform:scale(.97)}
@media (hover:none){ .only-desktop{display:none !important} }

.credit{
  margin-top:34px;display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--muted);font-family:var(--mono);
}
.credit a{text-decoration:none}
.credit a:hover{color:var(--ink)}

/* ───────── document views ───────── */
#docs{position:absolute;inset:0}
.dv{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;display:none;touch-action:manipulation;
    overscroll-behavior:contain;scroll-padding-top:12px}
.dv.on{display:block}
.dv-inner{min-height:100%;display:flow-root}

/* paged (pdf / hwp / pptx / images) */
.pages{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:14px 10px calc(78px + env(safe-area-inset-bottom));
}
.page{
  position:relative;background:var(--paper);border-radius:3px;
  box-shadow:0 1px 2px rgba(18,26,40,.10),0 8px 26px rgba(18,26,40,.13);
  overflow:hidden;max-width:100%;
  content-visibility:auto;
}
.page canvas,.page svg,.page img{display:block;width:100%;height:auto}
.page .pnum{
  position:absolute;right:7px;bottom:6px;font-family:var(--mono);font-size:9.5px;
  color:#8a93a3;background:rgba(255,255,255,.82);border-radius:5px;padding:1px 5px;
  pointer-events:none;
}
.page.pending{min-height:200px;display:grid;place-items:center;background:var(--surface-2)}

/* pdf text layer */
.textLayer{
  position:absolute;inset:0;overflow:hidden;opacity:1;line-height:1;
  text-align:initial;forced-color-adjust:none;transform-origin:0 0;
  -webkit-text-size-adjust:none;text-size-adjust:none;
}
.textLayer :is(span,br){
  color:transparent;position:absolute;white-space:pre;cursor:text;
  transform-origin:0 0;margin:0;
}
.textLayer span.markedContent{top:0;height:0}
.textLayer ::selection{background:rgba(90,150,255,.35)}
.textLayer br::selection{background:transparent}
.textLayer .hl{background:var(--accent);opacity:.55;border-radius:2px}
.textLayer .hl.cur{background:#ff9d3d;opacity:.65}

/* flow (docx / hwp text / txt / md / epub / html) */
.flow{
  padding:22px 18px calc(84px + env(safe-area-inset-bottom));
  max-width:var(--flow-w,760px);margin:0 auto;
  font-size:var(--flow-fs,16px);line-height:var(--flow-lh,1.75);
  color:var(--paper-ink);
  word-break:keep-all;overflow-wrap:anywhere;
}
.flow.sheet-paper{
  background:var(--paper);margin:12px auto;border-radius:8px;
  box-shadow:var(--shadow-m);padding:26px 18px calc(84px + env(safe-area-inset-bottom));
  width:calc(100% - 20px);
}
@media (min-width:640px){
  .flow.sheet-paper{padding:38px 32px calc(88px + env(safe-area-inset-bottom));width:auto}
}
.flow p{margin:0 0 .85em}
.flow h1{font-size:1.5em;margin:1.4em 0 .5em;letter-spacing:-.02em}
.flow h2{font-size:1.26em;margin:1.3em 0 .45em;letter-spacing:-.02em}
.flow h3{font-size:1.1em;margin:1.2em 0 .4em}
.flow h4,.flow h5,.flow h6{font-size:1em;margin:1.1em 0 .35em}
.flow img{max-width:100%;height:auto;border-radius:6px;margin:.6em 0}
.flow table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.92em;display:block;overflow-x:auto}
.flow th,.flow td{border:1px solid var(--line-2);padding:6px 9px;text-align:left;vertical-align:top}
.flow th{background:color-mix(in srgb,var(--ink) 5%,transparent);font-weight:620}
.flow blockquote{margin:1em 0;padding:.2em 0 .2em 14px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.flow pre{background:var(--surface-2);padding:12px 14px;border-radius:10px;overflow:auto;font-family:var(--mono);font-size:.85em;line-height:1.5}
.flow code{font-family:var(--mono);font-size:.88em;background:color-mix(in srgb,var(--ink) 6%,transparent);padding:.1em .34em;border-radius:5px}
.flow pre code{background:none;padding:0}
.flow hr{border:0;border-top:1px solid var(--line-2);margin:1.6em 0}
.flow ul{list-style:disc;padding-left:1.3em;margin:0 0 .85em}
.flow ol{padding-left:1.4em;margin:0 0 .85em}
.flow li{margin:.15em 0}
.flow mark.hl{background:var(--accent);padding:0 1px;border-radius:2px}
.flow mark.hl.cur{background:#ff9d3d}
.flow .pgbreak{margin:1.8em 0;border-top:1px dashed var(--line-2);position:relative}
.flow .pgbreak span{
  position:absolute;right:0;top:-.72em;background:var(--paper);padding:0 6px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
}
.flow .muted{color:var(--muted)}
.ico.active{background:var(--accent);color:#2a2100}
.ico.active:hover{background:var(--accent)}

/* reading paper tints */
.dv[data-paper="sepia"]{--paper:#f6efe2;--paper-ink:#3a3226}
.dv[data-paper="dark"]{--paper:#171b22;--paper-ink:#d6dbe4}
.dv[data-paper="dark"] .page{filter:invert(.92) hue-rotate(180deg)}
.dv[data-paper="dark"] .flow th{background:rgba(255,255,255,.05)}
.dv[data-paper="dark"] .flow pre{background:rgba(255,255,255,.05)}

/* sheets */
.sheet-wrap{
  position:absolute;inset:0;display:flex;flex-direction:column;
}
.sheet-tabs{
  flex:0 0 auto;display:flex;gap:4px;padding:7px 10px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);background:var(--surface);
}
.sheet-tabs::-webkit-scrollbar{display:none}
.sheet-tabs button{
  flex:0 0 auto;padding:5px 11px;border-radius:8px;font-size:12.5px;color:var(--ink-2);
  border:1px solid transparent;white-space:nowrap;
}
.sheet-tabs button.on{background:var(--accent);color:#2a2100;font-weight:620;border-color:var(--accent-deep)}
.sheet-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  padding-bottom:calc(70px + env(safe-area-inset-bottom))}
table.grid{border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
table.grid th,table.grid td{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:4px 8px;white-space:pre;max-width:340px;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface);
}
table.grid thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--muted);
  font-family:var(--mono);font-size:10.5px;font-weight:600;text-align:center;min-width:40px;
}
table.grid tbody th{
  position:sticky;left:0;z-index:1;background:var(--surface-2);color:var(--muted);
  font-family:var(--mono);font-size:10.5px;font-weight:600;text-align:center;min-width:38px;
}
table.grid thead th:first-child{position:sticky;left:0;z-index:3}
table.grid td.num{text-align:right}
table.grid td.hl{background:var(--accent)}
table.grid td.hl.cur{background:#ff9d3d}

/* zip / epub list */
.filelist{padding:12px 14px calc(80px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.fl-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);margin-bottom:6px;width:100%;text-align:left;
}
.fl-item:hover{border-color:var(--line-2)}
.fl-item .ft{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:700;color:#fff}
.fl-item .nm{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-item .sz{font-size:11px;color:var(--muted);font-family:var(--mono)}
.fl-item[disabled]{opacity:.45}

/* states */
.state{
  position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;
}
.state .box{max-width:400px}
.state .sp{
  width:26px;height:26px;margin:0 auto 14px;border-radius:50%;
  border:2.5px solid var(--line-2);border-top-color:var(--ink);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.state strong{display:block;font-size:15px;letter-spacing:-.02em}
.state p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.state .acts{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.state .acts .btn{margin:0}
.state .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.state .bar{height:3px;width:170px;margin:12px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
.state .bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .2s}

/* ───────── bottom bar ───────── */
#bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:2px;
  padding:7px 10px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg-1) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  transition:transform .24s cubic-bezier(.3,.8,.3,1);
}
#app.immersive #bottombar{transform:translateY(120%)}
#bottombar .spacer{flex:1}
#page-chip,#zoom-chip{
  padding:5px 11px;border-radius:9px;font-size:12.5px;font-family:var(--mono);
  color:var(--ink-2);background:color-mix(in srgb,var(--ink) 5%,transparent);
  font-variant-numeric:tabular-nums;
}
#page-chip .sep{opacity:.4;margin:0 2px}
#page-chip:active,#zoom-chip:active{transform:scale(.95)}

/* ───────── find bar ───────── */
#findbar{
  position:fixed;z-index:60;left:10px;right:10px;
  top:calc(env(safe-area-inset-top) + 8px);
  display:flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:15px;box-shadow:var(--shadow-l);
  animation:drop .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
#findbar .fi{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
#find-input{
  flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--ink);
  padding:6px 2px;
}
#find-input::-webkit-search-cancel-button{display:none}
#find-count{font-size:11.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap;padding:0 2px}

/* ───────── outline ───────── */
#outline{
  position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(86vw,320px);
  background:var(--surface);border-right:1px solid var(--line);
  box-shadow:var(--shadow-l);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);
  animation:slidein .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes slidein{from{transform:translateX(-100%)}}
.ol-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px 12px;border-bottom:1px solid var(--line)}
.ol-tabs{display:flex;gap:3px}
.ol-tabs button{padding:5px 11px;border-radius:8px;font-size:12.5px;color:var(--muted)}
.ol-tabs button.on{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-weight:600}
.ol-body{flex:1;overflow:auto;padding:8px 8px calc(16px + env(safe-area-inset-bottom))}
.ol-item{
  display:block;width:100%;text-align:left;padding:7px 10px;border-radius:9px;
  font-size:13px;color:var(--ink-2);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ol-item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.ol-item.lv2{padding-left:22px;font-size:12.5px}
.ol-item.lv3{padding-left:34px;font-size:12px;color:var(--muted)}
.ol-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px}
#ol-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:4px}
.thumb{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--paper);position:relative}
.thumb.on{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.thumb img,.thumb canvas,.thumb svg{display:block;width:100%;height:auto}
.thumb span{position:absolute;right:3px;bottom:2px;font-family:var(--mono);font-size:9px;color:#8a93a3;background:rgba(255,255,255,.85);border-radius:4px;padding:0 3px}
.thumb.ph{aspect-ratio:1/1.414;background:var(--surface-2)}

/* ───────── sheet / scrim ───────── */
#scrim{position:fixed;inset:0;z-index:65;background:rgba(10,14,22,.36);backdrop-filter:blur(2px);animation:fade .18s}
@keyframes fade{from{opacity:0}}
#sheet{
  position:fixed;z-index:80;left:0;right:0;bottom:0;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-l);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  max-height:82dvh;overflow:auto;
  animation:up .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes up{from{transform:translateY(100%)}}
@media (min-width:720px){
  #sheet{left:auto;right:12px;bottom:12px;width:330px;border-radius:var(--r-l);animation:up .2s cubic-bezier(.2,.9,.3,1)}
}
.sheet-grip{width:34px;height:4px;border-radius:2px;background:var(--line-2);margin:9px auto 4px}
.sheet-sec{padding:6px 8px}
.sheet-sec+.sheet-sec{border-top:1px solid var(--line)}
.sheet-sec h3{font-size:11px;color:var(--muted);font-weight:600;padding:8px 12px 5px;letter-spacing:.02em}
.si{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;text-align:left;font-size:14.5px;letter-spacing:-.01em}
.si:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.si:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.si svg{width:19px;height:19px;color:var(--ink-2);flex:0 0 auto}
.si .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.si.danger{color:var(--danger)}
.si.danger svg{color:var(--danger)}
.seg{display:flex;gap:4px;padding:4px 12px 10px}
.seg button{
  flex:1;padding:8px 4px;border-radius:10px;font-size:12.5px;color:var(--ink-2);
  background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid transparent;
}
.seg button.on{background:var(--accent);color:#2a2100;font-weight:620;border-color:var(--accent-deep)}
.rangerow{display:flex;align-items:center;gap:10px;padding:6px 14px 12px;font-size:12.5px;color:var(--ink-2)}
.rangerow input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:22px;background:transparent}
.rangerow input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-2)}
.rangerow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:1.5px solid var(--accent-deep);margin-top:-6px}
.rangerow input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.rangerow input[type=range]::-moz-range-thumb{width:15px;height:15px;border:1.5px solid var(--accent-deep);border-radius:50%;background:var(--accent)}
.rangerow .val{font-family:var(--mono);font-size:11.5px;color:var(--muted);min-width:42px;text-align:right}
.infogrid{padding:4px 14px 12px;font-size:12.5px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
.infogrid dt{color:var(--muted)}
.infogrid dd{margin:0;word-break:break-all;font-family:var(--mono);font-size:11.5px}

/* ───────── toast ───────── */
#toast{
  position:fixed;z-index:95;left:50%;transform:translateX(-50%);
  bottom:calc(76px + env(safe-area-inset-bottom));
  background:var(--action);color:var(--on-action);
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:550;
  box-shadow:var(--shadow-m);animation:up2 .2s cubic-bezier(.2,.9,.3,1);
  max-width:86vw;text-align:center;
}
@keyframes up2{from{opacity:0;transform:translate(-50%,10px)}}

/* ───────── desktop ───────── */
@media (min-width:900px){
  .home-inner{padding-top:34px}
  #outline{animation:none}
  #app.pinned-outline{padding-left:290px}
  #app.pinned-outline #outline{width:290px;box-shadow:none;top:0}
  #app.pinned-outline #bottombar{left:290px}
}
@media print{
  #topbar,#tabs,#bottombar,#findbar,#outline,#sheet,#scrim,#toast,#home{display:none !important}
  #app{padding:0}
  .dv{position:static;overflow:visible;display:none}
  .dv.on{display:block}
  .pages{padding:0;gap:0}
  .page{box-shadow:none;border-radius:0;break-after:page;page-break-after:always}
  .flow{max-width:none;padding:0}
  html,body{background:#fff}
}

/* ── Word 97-2003 / rich legacy rendering ── */
.docview p{margin:0 0 .35em}
.docview p.blank{margin:0 0 .35em}
.docview p.li{position:relative}
.docview p.li .mk{position:absolute;left:0;width:16pt;text-align:left;opacity:.85}
.docview .tab{display:inline-block;width:2em}
.docview .nopic{display:inline-block;padding:2px 8px;border:1px dashed var(--line-2);border-radius:6px;font-size:.8em;color:var(--muted)}
.docview img{display:inline-block;max-width:100%;height:auto;vertical-align:top}
.flow table.wtab{width:100%;border-collapse:collapse;margin:.9em 0;table-layout:fixed;display:table}
.flow table.wtab td{border:1px solid var(--line-2);padding:5px 8px;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
.flow table.wtab td>p:last-child{margin-bottom:0}
.docview ul.odl{list-style:disc;padding-left:1.4em;margin:.4em 0}
.docview ol.odl{list-style:decimal;padding-left:1.5em;margin:.4em 0}
.docview .odl li p{margin:.1em 0}

/* ── print-faithful page rendering ── */
.pages{align-items:center;align-items:safe center}
.docpages{gap:16px}
.docpages.cv .page.dpage{content-visibility:auto;contain-intrinsic-size:var(--pw) var(--ph)}
.page.dpage{
  position:relative;flex:0 0 auto;max-width:none;overflow:hidden;
  content-visibility:visible;
  background:var(--paper);color:#000;border-radius:2px;
  box-shadow:0 1px 2px rgba(18,26,40,.12),0 8px 26px rgba(18,26,40,.14);
}
.dpage .page-body{color:#111;font-family:var(--font);word-break:keep-all;overflow-wrap:break-word}
.dpage p.wp,.dpage h1.wp,.dpage h2.wp,.dpage h3.wp,.dpage h4.wp,.dpage h5.wp,.dpage h6.wp{
  margin:0;padding:0;font-weight:inherit;letter-spacing:normal;
}
.dpage h1.wp,.dpage h2.wp,.dpage h3.wp,.dpage h4.wp,.dpage h5.wp,.dpage h6.wp{font-weight:700}
.dpage .wmk{display:inline-block;text-indent:0}
.dpage .wtab{display:inline-block;text-indent:0}
.dpage img{display:inline-block;vertical-align:baseline;max-width:100%}
.dpage table.wtbl{margin:0;border-collapse:collapse;display:table}
.dpage table.wtbl td{vertical-align:top}
.dpage a{color:#0b57d0;text-decoration:underline}
.docpages-measure p,.docpages-measure h1,.docpages-measure h2,.docpages-measure h3{margin:0}
.dv[data-paper="dark"] .page.dpage{filter:invert(.92) hue-rotate(180deg)}
@media print{
  .docpages{zoom:1 !important;gap:0}
  .page.dpage{box-shadow:none;border-radius:0;break-after:page;page-break-after:always}
}

/* ── 한글 문서: lines placed exactly where Hangul laid them out ── */
.page.dpage.hwp{overflow:hidden}
.hbody{position:absolute;overflow:visible}
.hl{position:absolute;margin:0;line-height:0;white-space:pre;font-kerning:none}
.hl>.hc{display:inline-block;line-height:0;white-space:pre}
.hl .wtab{display:inline-block}
/* boxes must not clip their own text: a substituted font can be a shade taller */
.hobj{position:absolute;overflow:visible}
.hgso>.hpic{overflow:hidden}
.hcell{position:absolute;box-sizing:border-box;overflow:hidden}
.hcin{position:absolute;inset:0}
.hpic{position:absolute;object-fit:fill;max-width:none}
.hl .wtab.lead{
  background-image:radial-gradient(circle at 1px 50%, currentColor .6px, transparent .7px);
  background-size:4px 100%;background-repeat:repeat-x;background-position:0 -.28em;height:1em;vertical-align:baseline;
}

/* ── 본문 모드: the document's own blocks, wrapped to the screen ── */
.flowdoc{--rz:calc(var(--flow-fs,16px) / 13.3px)}
.flowdoc>*{zoom:var(--rz)}
.flowdoc .hc{display:inline;line-height:inherit;white-space:pre-wrap}
.flowdoc .hl{position:static;line-height:inherit;white-space:pre-wrap}
.flowdoc .wtab{width:auto !important;display:inline-block;min-width:1.4em;background:none}
.flowdoc p.rp,.flowdoc h2.rp,.flowdoc h3.rp{margin:0 0 .5em;line-height:inherit}
.flowdoc h2.rp,.flowdoc h3.rp{margin-top:1.1em;font-weight:700}
.flowdoc p.wp,.flowdoc h1.wp,.flowdoc h2.wp,.flowdoc h3.wp,
.flowdoc h4.wp,.flowdoc h5.wp,.flowdoc h6.wp{margin:0 0 .45em}
.flowdoc .rtblwrap{max-width:100%;overflow-x:auto;margin:.7em 0;-webkit-overflow-scrolling:touch}
/* a wide table scrolls sideways rather than squeezing columns down to one letter */
.flowdoc table{width:auto;min-width:100%;table-layout:auto;border-collapse:collapse;margin:.7em 0}
.flowdoc table td,.flowdoc table th{
  border:1px solid var(--line-2);padding:5px 8px;vertical-align:top;
  white-space:normal;word-break:keep-all;overflow-wrap:break-word;
  min-width:4em;max-width:62vw;
}
.flowdoc table p{margin:0}
.flowdoc img,.flowdoc .rpic{display:block;max-width:100%;height:auto;margin:.7em auto}