:root{--deep:#06284a;--deep2:#031c35;--line:rgba(255,255,255,.28);--text:#fff;--sky:#21aee9;--shadow:0 18px 45px rgba(0,0,0,.38)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;background:#06284a;font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;color:var(--text)}button,input{font:inherit}.app{position:relative;height:100%;min-height:100%;overflow:hidden;background:linear-gradient(rgba(4,40,75,.52),rgba(4,40,75,.72)),url('https://webzine.mynewsletter.co.kr/newsletter/kmpilot-webzine/2026-07/assets/ship-bg.jpg?v=20260722-06') center/cover no-repeat}.app:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(29,99,148,.14),rgba(1,19,38,.32) 75%)}
.topbar{position:relative;z-index:20;height:94px;padding:18px 28px;background:linear-gradient(180deg,rgba(2,30,58,.82),rgba(2,30,58,.08))}.brand{position:absolute;left:28px;top:18px;white-space:nowrap}.brand strong{display:block;font-size:27px;line-height:1.08;font-weight:900;letter-spacing:-1.3px}.brand strong span{font-size:17px;font-weight:600;letter-spacing:.5px;margin-left:9px}.brand small{display:block;margin-top:6px;font-size:11px;color:#e6f4ff;letter-spacing:.15px}.page-controls{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;height:42px;white-space:nowrap}.top-actions{position:absolute;right:28px;top:18px;display:flex;flex-direction:row;align-items:center;gap:10px}.toolbar,.link-actions{display:flex;align-items:center;gap:7px}.page-controls button,.toolbar button{height:38px;min-width:42px;padding:0 11px;border:1px solid var(--line);border-radius:4px;background:rgba(3,37,70,.66);color:#fff;cursor:pointer;font-weight:700;transition:.18s}.page-controls button:hover,.toolbar button:hover{background:rgba(40,146,205,.45);border-color:#71cef5}.page-controls button:disabled{opacity:.35;cursor:default}.page-jump{height:38px;display:flex;align-items:center;border-radius:4px;overflow:hidden;background:#fff;color:#16324a;border:1px solid rgba(255,255,255,.7)}.page-jump input{width:66px;height:36px;border:0;outline:0;text-align:right;color:#16324a;background:#fff;font-weight:700}.page-jump span{min-width:58px;padding:0 10px 0 4px;color:#40596d;font-weight:700;font-size:14px}.toolbar button#zoom_reset_btn{min-width:88px}.link-actions a{display:inline-flex;align-items:center;justify-content:center;height:42px;min-width:142px;padding:0 17px;border-radius:4px;background:linear-gradient(180deg,#27b7f1,#13a4df);box-shadow:0 7px 16px rgba(0,0,0,.16);color:#fff;text-decoration:none;font-weight:800;font-size:14px}.link-actions a:hover{filter:brightness(1.08)}
.stage{position:absolute;z-index:5;left:0;right:0;top:98px;bottom:76px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px 105px 10px}.book-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent;cursor:grab;padding:8px}.book-wrap.is-zoomed{align-items:flex-start;justify-content:flex-start;padding:18px}.book-wrap.dragging{cursor:grabbing}.book{position:relative;display:flex;align-items:stretch;justify-content:center;transition:opacity .2s ease;filter:drop-shadow(0 20px 30px rgba(0,0,0,.34))}.page{position:relative;background:#fff;overflow:hidden;box-shadow:var(--shadow);transition:opacity .2s ease,transform .25s ease}.page img{display:block;height:min(calc(100vh - 225px),820px);width:auto;max-width:calc((100vw - 245px)/2);object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none;cursor:zoom-in}.book.zoomed .page img{cursor:zoom-out}.page-left{border-radius:4px 0 0 4px}.page-right{border-radius:0 4px 4px 0}.page.hidden{display:none}.book.page-exit-next{animation:exit_next .15s ease both}.book.page-exit-prev{animation:exit_prev .15s ease both}.book.page-enter-next{animation:enter_next .22s ease both}.book.page-enter-prev{animation:enter_prev .22s ease both}@keyframes exit_next{to{opacity:.25;transform:translateX(-16px) scale(.99)}}@keyframes exit_prev{to{opacity:.25;transform:translateX(16px) scale(.99)}}@keyframes enter_next{from{opacity:.25;transform:translateX(18px) scale(.99)}to{opacity:1;transform:none}}@keyframes enter_prev{from{opacity:.25;transform:translateX(-18px) scale(.99)}to{opacity:1;transform:none}}.nav{position:absolute;top:50%;z-index:12;width:58px;height:86px;margin-top:-43px;border:0;background:transparent;color:#fff;font-size:64px;line-height:1;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.55)}.nav:disabled{opacity:.22;cursor:default}.prev{left:22px}.next{right:22px}.page-list-toggle{position:absolute;z-index:21;left:50%;bottom:18px;transform:translateX(-50%);height:44px;padding:0 24px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(7,48,86,.88);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.drawer{position:fixed;z-index:60;left:14px;right:14px;bottom:14px;height:210px;background:rgba(3,31,58,.96);border:1px solid rgba(255,255,255,.15);border-radius:8px;box-shadow:0 -14px 44px rgba(0,0,0,.4);transform:translateY(118%);transition:transform .25s ease;display:grid;grid-template-rows:46px 1fr}.drawer.open{transform:translateY(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.12)}.drawer-head button{width:34px;height:34px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:22px;cursor:pointer}.thumb-grid{overflow-x:auto;overflow-y:hidden;padding:10px 12px;display:flex;gap:10px}.thumb{flex:0 0 92px;height:142px;border:2px solid transparent;background:transparent;border-radius:5px;overflow:hidden;cursor:pointer;color:#fff;padding:0}.thumb img{width:100%;height:116px;display:block;aspect-ratio:3/4;object-fit:cover;background:#fff}.thumb span{display:block;padding:4px 0 0;text-align:center;font-size:12px}.thumb.active{border-color:#36b8ff;box-shadow:0 0 0 2px rgba(54,184,255,.28)}.backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.22);opacity:0;visibility:hidden;transition:.2s}.backdrop.show{opacity:1;visibility:visible}
@media(max-width:1260px){.topbar{height:100px;padding:16px 14px}.brand{left:14px;top:17px}.brand strong{font-size:22px}.brand strong span{font-size:13px}.brand small{font-size:10px}.page-controls{top:17px}.top-actions{right:14px;top:16px;gap:6px}.toolbar,.link-actions{gap:5px}.link-actions a{height:38px;min-width:112px;padding:0 11px;font-size:12px}.stage{top:104px;padding-left:68px;padding-right:68px}.page img{max-width:calc((100vw - 160px)/2)}.prev{left:7px}.next{right:7px}}
@media(max-width:980px){.topbar{height:176px;padding:10px 12px}.brand{left:50%;top:10px;transform:translateX(-50%);width:calc(100% - 24px);text-align:center}.page-controls{left:50%;top:58px;transform:translateX(-50%);justify-content:center;max-width:calc(100% - 24px)}.top-actions{left:50%;right:auto;top:104px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:6px;width:calc(100% - 24px)}.toolbar,.link-actions{justify-content:center;flex-wrap:wrap}.stage{top:182px}}
@media(max-width:760px){body{overflow:auto}.app{min-height:100vh}.topbar{height:214px;padding:13px 10px}.brand{position:static}.brand strong{font-size:21px}.brand strong span{font-size:12px}.brand small{font-size:10px}.page-controls{top:63px;gap:5px}.page-controls button,.toolbar button{min-width:36px;padding:0 8px}.page-jump input{width:55px}.page-jump span{min-width:50px;padding-right:7px}.top-actions{top:112px;left:10px;right:10px;flex-direction:column;align-items:center;gap:7px}.toolbar,.link-actions{justify-content:center}.link-actions a{min-width:132px;height:39px}.stage{position:absolute;top:218px;bottom:70px;padding:4px 40px}.page img{height:min(calc(100vh - 305px),800px);max-width:calc(100vw - 88px)}.nav{width:36px;font-size:46px}.prev{left:0}.next{right:0}.page-list-toggle{bottom:11px;height:38px}.drawer{height:190px}.thumb{flex-basis:80px;height:126px}.thumb img{height:101px}}

/* patch 06: centered 2x zoom and stable panning */
.book-wrap.is-zoomed{display:block;overflow:auto;padding:18px 28px 40px;scroll-behavior:auto}
.book-wrap.is-zoomed .book{width:max-content;margin:0 auto;transform-origin:top center}
.book-wrap.is-zoomed .page img{max-width:none}

/* patch 07: mobile compact controls, visible ship background, natural page-turn motion */
.app{
  background-image:
    linear-gradient(rgba(4,40,75,.28),rgba(4,40,75,.46)),
    url('ship-bg.jpg?v=20260722-07');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.app:after{background:radial-gradient(circle at 50% 42%,rgba(29,99,148,.05),rgba(1,19,38,.18) 78%)}
.book{perspective:2200px;transform-style:preserve-3d}
.page{backface-visibility:hidden;transform-style:preserve-3d}
.book.page-exit-next .page-right{animation:turn_out_next .28s cubic-bezier(.45,.05,.55,.95) both;transform-origin:left center}
.book.page-enter-next .page-right{animation:turn_in_next .34s cubic-bezier(.2,.7,.2,1) both;transform-origin:left center}
.book.page-exit-prev .page-left{animation:turn_out_prev .28s cubic-bezier(.45,.05,.55,.95) both;transform-origin:right center}
.book.page-enter-prev .page-left{animation:turn_in_prev .34s cubic-bezier(.2,.7,.2,1) both;transform-origin:right center}
@keyframes turn_out_next{0%{opacity:1;transform:rotateY(0)}100%{opacity:.35;transform:rotateY(-12deg) translateX(-10px)}}
@keyframes turn_in_next{0%{opacity:.25;transform:rotateY(12deg) translateX(12px)}100%{opacity:1;transform:rotateY(0) translateX(0)}}
@keyframes turn_out_prev{0%{opacity:1;transform:rotateY(0)}100%{opacity:.35;transform:rotateY(12deg) translateX(10px)}}
@keyframes turn_in_prev{0%{opacity:.25;transform:rotateY(-12deg) translateX(-12px)}100%{opacity:1;transform:rotateY(0) translateX(0)}}

@media(max-width:760px){
  .topbar{height:174px;padding:8px 8px}
  .brand{position:absolute;left:50%;top:8px;z-index:2;transform:translateX(-50%);text-align:center;width:calc(100% - 16px)}
  .brand strong{font-size:16px;letter-spacing:-.6px}
  .brand strong span{font-size:10px;margin-left:4px}
  .brand small{font-size:8px;margin-top:3px}
  .page-controls{left:8px;right:8px;top:43px;transform:none;justify-content:center;height:31px;gap:3px;max-width:calc(100% - 16px);overflow:hidden}
  .page-controls button,.toolbar button{height:29px;min-width:29px;padding:0 6px;font-size:11px;border-radius:3px}
  .page-jump{height:29px}
  .page-jump input{width:42px;height:27px;font-size:11px}
  .page-jump span{min-width:38px;padding:0 5px 0 2px;font-size:10px}
  .top-actions{top:86px;left:8px;right:8px;gap:4px;align-items:center;transform:none}
  .toolbar,.link-actions{gap:4px;flex-wrap:wrap;justify-content:center}
  .toolbar button#zoom_reset_btn{min-width:54px}
  .link-actions a{height:30px;min-width:102px;padding:0 8px;font-size:10px;border-radius:3px}
  .stage{top:178px;bottom:56px;padding:3px 30px}
  .page img{height:min(calc(100vh - 251px),760px);max-width:calc(100vw - 68px)}
  .nav{width:28px;font-size:38px}
  .page-list-toggle{height:32px;font-size:11px;padding:0 14px}
}

/* patch 08: fade-only page transition and strict page clipping */
.book{perspective:none;transform-style:flat}
.page{backface-visibility:visible;transform-style:flat;isolation:isolate;flex:0 0 auto}
.book.page-exit-next,
.book.page-exit-prev{animation:page_fade_out .22s ease both}
.book.page-enter-next,
.book.page-enter-prev{animation:page_fade_in .26s ease both}
.book.page-exit-next .page-right,
.book.page-enter-next .page-right,
.book.page-exit-prev .page-left,
.book.page-enter-prev .page-left{animation:none;transform:none}
@keyframes page_fade_out{from{opacity:1}to{opacity:0}}
@keyframes page_fade_in{from{opacity:0}to{opacity:1}}

/* patch 10: remove stray blue line on page 38 right edge only */
#right_img[data-page="38"],
#left_img[data-page="38"]{clip-path:inset(0 30px 0 0);}

/* patch 10: remove ship background image only */
.app{
  background-image:linear-gradient(rgba(4,40,75,.52),rgba(4,40,75,.72));
  background-color:#06284a;
}

/* patch 11: approved premium navy + sky-blue accents and larger side arrows */
:root{
  --deep:#031a33;
  --deep2:#020f22;
  --sky:#77c8f4;
  --line:rgba(130,205,246,.38);
}
body{background:#031a33}
.app{
  background-image:
    radial-gradient(circle at 50% 10%,rgba(89,169,220,.17),transparent 42%),
    linear-gradient(145deg,#061f3d 0%,#031a33 52%,#020f22 100%);
  background-color:#031a33;
}
.app:after{
  background:radial-gradient(circle at 50% 44%,rgba(83,170,225,.08),rgba(0,11,27,.18) 76%);
}
.topbar{
  background:linear-gradient(180deg,rgba(2,22,45,.9),rgba(4,31,58,.16));
}
.page-controls button,.toolbar button{
  border-color:rgba(120,199,242,.42);
  background:linear-gradient(180deg,rgba(18,61,103,.9),rgba(5,37,72,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.15);
}
.page-controls button:hover,.toolbar button:hover{
  background:linear-gradient(180deg,rgba(46,119,166,.92),rgba(14,67,108,.94));
  border-color:#8dd5fb;
}
.link-actions a{
  border:1px solid rgba(160,222,255,.48);
  background:linear-gradient(180deg,#79c7f1 0%,#55aee3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 7px 17px rgba(0,0,0,.2);
}
.link-actions a:first-child{
  background:linear-gradient(180deg,rgba(34,91,137,.96),rgba(13,57,96,.98));
}
.page-list-toggle{
  border-color:rgba(124,202,244,.38);
  background:linear-gradient(180deg,rgba(24,76,119,.96),rgba(7,43,80,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.24);
}
.nav{
  width:78px;
  height:104px;
  margin-top:-52px;
  border:1px solid rgba(126,210,255,.78);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(25,80,129,.94),rgba(5,43,82,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 18px rgba(102,195,245,.18),0 10px 25px rgba(0,0,0,.25);
  font-size:78px;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.nav:hover{
  border-color:#9cddff;
  background:linear-gradient(180deg,rgba(54,126,177,.96),rgba(11,61,103,.98));
}
.prev{left:16px}.next{right:16px}
.thumb.active{border-color:#78caf6;box-shadow:0 0 0 2px rgba(120,202,246,.26)}

@media(max-width:1260px){
  .nav{width:68px;height:94px;margin-top:-47px;font-size:70px;border-radius:24px}
  .prev{left:5px}.next{right:5px}
}
@media(max-width:760px){
  .nav{width:48px;height:76px;margin-top:-38px;font-size:54px;border-radius:20px}
  .prev{left:1px}.next{right:1px}
}


/* patch 14: remove round arrow boxes, enlarge arrows, add spacebar hint */
.page-tip{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  z-index:14;
  font-size:12px;
  line-height:1;
  color:rgba(225,242,255,.88);
  letter-spacing:-.1px;
  text-shadow:0 1px 3px rgba(0,0,0,.32);
  pointer-events:none;
  white-space:nowrap;
}
.nav{
  width:96px;
  height:128px;
  margin-top:-64px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:98px;
  text-shadow:0 3px 12px rgba(0,0,0,.45),0 0 10px rgba(120,202,246,.22);
}
.nav:hover{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#ffffff;
}
.prev{left:10px}
.next{right:10px}
@media(max-width:1260px){
  .page-tip{top:4px;font-size:11px}
  .nav{width:82px;height:110px;margin-top:-55px;font-size:86px}
  .prev{left:2px}.next{right:2px}
}
@media(max-width:760px){
  .page-tip{top:2px;font-size:10px}
  .nav{width:60px;height:88px;margin-top:-44px;font-size:68px}
  .prev{left:0}.next{right:0}
}