:root {
  --ink:#242321;
  --muted:#756f65;
  --paper:#fffefb;
  --desk:#e9e3d8;
  --line:#d0c7b8;
  --accent:#c93d31;
  --accent2:#3b8f57;
  --shadow:0 22px 65px rgba(45,36,25,.18),0 5px 18px rgba(45,36,25,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--desk);color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
body{background:
  radial-gradient(circle at 10% 5%,rgba(255,255,255,.74),transparent 32rem),
  repeating-linear-gradient(0deg,rgba(88,74,52,.022) 0 1px,transparent 1px 5px),var(--desk)}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;border-bottom:1px solid rgba(87,73,52,.17);background:rgba(247,243,235,.93);backdrop-filter:blur(14px)}
.brand{display:grid;grid-template-columns:auto auto auto;align-items:baseline;gap:10px;min-width:0}
.brand h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,3vw,34px);letter-spacing:-.04em;white-space:nowrap}
.kicker,.issue{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.issue{color:var(--muted);letter-spacing:.02em}
.top-actions{display:flex;gap:8px}
.icon-btn,.nav-btn{border:1px solid rgba(71,58,41,.16);background:#fffdf8;color:var(--ink);border-radius:999px;box-shadow:0 2px 8px rgba(48,38,25,.05);transition:.18s ease}
.icon-btn{width:42px;height:42px;font-size:20px}
.icon-btn:hover,.nav-btn:hover{transform:translateY(-1px);border-color:rgba(71,58,41,.34)}
.reader{display:grid;grid-template-columns:auto 1fr;flex:1;min-height:0}
.thumb-rail{width:0;overflow:hidden;border-right:1px solid rgba(87,73,52,.14);background:rgba(245,240,231,.78);transition:width .26s ease;padding:0}
.thumb-rail.open{width:190px;padding:16px 12px}
.thumb-btn{display:block;width:100%;margin:0 0 12px;padding:7px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;color:var(--muted)}
.thumb-btn:hover{background:rgba(255,255,255,.55)}
.thumb-btn.active{background:#fff;border-color:rgba(201,61,49,.38);box-shadow:0 4px 12px rgba(50,38,24,.09);color:var(--ink)}
.thumb-btn img{display:block;width:100%;height:auto;border:1px solid #d9d1c5;box-shadow:0 4px 12px rgba(40,32,22,.08);background:white}
.thumb-btn span{display:block;padding-top:5px;font-size:12px;font-weight:700;text-align:center}
.stage-wrap{min-width:0;display:flex;flex-direction:column;align-items:center;padding:22px 18px 28px}
.paper-mat{position:relative;width:min(100%,930px);display:flex;justify-content:center;overflow-x:auto;overscroll-behavior-x:contain}
.page-frame{position:relative;flex:0 0 auto;margin:0;width:min(100%,760px);aspect-ratio:2041/2892;background:var(--paper);box-shadow:var(--shadow);overflow:hidden;transform-origin:center center;border:1px solid rgba(76,64,48,.12)}
.page-frame::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 30px rgba(70,55,38,.04)}
.page-frame.turn-next{animation:turnNext .28s ease both}
.page-frame.turn-prev{animation:turnPrev .28s ease both}
@keyframes turnNext{0%{transform:perspective(1400px) rotateY(0) scale(1);opacity:1}49%{transform:perspective(1400px) rotateY(-4deg) scale(.992);opacity:.55}50%{opacity:.2}100%{transform:perspective(1400px) rotateY(0) scale(1);opacity:1}}
@keyframes turnPrev{0%{transform:perspective(1400px) rotateY(0) scale(1);opacity:1}49%{transform:perspective(1400px) rotateY(4deg) scale(.992);opacity:.55}50%{opacity:.2}100%{transform:perspective(1400px) rotateY(0) scale(1);opacity:1}}
#pageImage{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;background:#fff}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(70,55,40,.02) 2px 3px)}
.page-hit{position:absolute;z-index:5;top:0;bottom:0;width:10%;border:0;background:transparent;opacity:0}
.page-hit-left{left:0}.page-hit-right{right:0}
.controls{margin-top:18px;width:min(100%,760px);display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center}
.nav-btn{padding:10px 16px;font-weight:800}
.counter{display:flex;gap:5px;align-items:baseline;min-width:55px;justify-content:center;font-variant-numeric:tabular-nums;color:var(--muted)}
.counter strong{color:var(--ink);font-size:18px}
.page-range{width:100%;accent-color:var(--accent)}
.hint{margin:9px 0 0;font-size:12px;color:var(--muted);text-align:center}
.zoom-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.zoom-btn{width:30px;height:30px;border:1px solid rgba(71,58,41,.16);border-radius:50%;background:#fffdf8;color:var(--ink);font-size:20px;line-height:1}
.zoom-btn:disabled{cursor:default;opacity:.4}
@media (max-width:760px){
 .topbar{padding:10px 12px}.brand{grid-template-columns:1fr auto}.kicker{display:none}.brand h1{font-size:23px}.issue{font-size:10px}
 .reader{grid-template-columns:1fr}.thumb-rail{position:fixed;z-index:20;left:0;top:63px;bottom:0;box-shadow:12px 0 30px rgba(43,35,25,.14)}
 .thumb-rail.open{width:150px}
 .stage-wrap{padding:12px 8px 20px}.paper-mat{width:100%;justify-content:flex-start}.page-frame{width:100%;box-shadow:0 10px 28px rgba(45,36,25,.16)}
 .controls{grid-template-columns:auto 1fr auto}.counter{display:none}.page-range{grid-column:1/-1;grid-row:2}
 .nav-btn{padding:9px 13px}.hint{font-size:11px}
}
@media print{
 body{background:white}.topbar,.thumb-rail,.controls,.hint,.page-hit{display:none!important}.reader{display:block}.stage-wrap{padding:0}.page-frame{width:100%;box-shadow:none;border:0}
}