:root {
  --navy: #0b1b33;
  --navy2: #142b49;
  --blue: #1769e8;
  --red: #c72831;
  --paper: #fff;
  --muted: #9fb0c6;
  --toolbar-h: 66px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; background: radial-gradient(circle at 50% 25%, #1c3558 0, #102542 34%, #071426 100%); color: white; }
button, a { font: inherit; }
button { border: 0; }
#guideApp { width:100%; height:100%; display:grid; grid-template-rows: var(--toolbar-h) 1fr 42px; }

.guide-toolbar { z-index: 50; display:grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items:center; gap:12px; height:var(--toolbar-h); padding:0 20px; background:rgba(7,20,38,.94); border-bottom:1px solid rgba(255,255,255,.10); backdrop-filter:blur(10px); }
.brand-back { justify-self:start; display:flex; align-items:center; gap:10px; color:white; text-decoration:none; }
.back-arrow { font-size:32px; line-height:1; color:#aec1d9; transform:translateY(-1px); }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong { font-size:16px; letter-spacing:-.02em; }
.brand-text span { margin-top:4px; color:#91a6c1; font-size:9px; letter-spacing:.15em; }
.toolbar-title { font-size:15px; font-weight:700; color:#eaf1fb; letter-spacing:-.02em; }
.toolbar-actions { justify-self:end; display:flex; align-items:center; gap:7px; }
.tool-btn { height:34px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#dfe9f6; background:rgba(255,255,255,.07); text-decoration:none; cursor:pointer; transition:.2s ease; white-space:nowrap; }
.tool-btn:hover { background:rgba(255,255,255,.14); color:white; }
.icon-btn { width:34px; padding:0; font-size:18px; }
.emergency-btn { color:#ffe7e7; background:rgba(199,40,49,.20); border:1px solid rgba(235,92,100,.30); }
.emergency-btn:hover { background:rgba(199,40,49,.34); }
.pdf-btn { font-weight:700; }

.guide-stage { position:relative; min-height:0; display:flex; align-items:center; justify-content:center; padding:18px 64px 8px; perspective:2400px; overflow:hidden; }
.book-shell { position:relative; display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; transition:transform .25s ease; transform-origin:center center; }
.book { --page-w: 470px; --page-h: 665px; position:relative; width:calc(var(--page-w) * 2); height:var(--page-h); filter:drop-shadow(0 28px 35px rgba(0,0,0,.42)); transform-style:preserve-3d; }
.spread, .underlay, .flip-layer { position:absolute; inset:0; transform-style:preserve-3d; }
.underlay { z-index:1; }
.spread { z-index:3; }
.flip-layer { z-index:8; pointer-events:none; perspective:2400px; }
.page { position:absolute; top:0; width:var(--page-w); height:var(--page-h); background:white; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.page img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; background:#fff; }
.page.left { left:0; border-radius:8px 0 0 8px; box-shadow:inset -14px 0 22px -22px rgba(0,0,0,.7); }
.page.right { right:0; border-radius:0 8px 8px 0; box-shadow:inset 14px 0 22px -22px rgba(0,0,0,.7); }
.page.single { left:50%; transform:translateX(-50%); border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.page.blank { background:linear-gradient(90deg,#fbfbfb,#fff); }
.book.single-mode { width:var(--page-w); }
.book.single-mode .page.single { left:0; transform:none; }
.book-spine { position:absolute; z-index:6; left:50%; top:0; width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.18) 6%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.18) 94%,transparent); box-shadow:0 0 12px rgba(0,0,0,.2); pointer-events:none; }
.book.single-mode .book-spine { display:none; }

.turning-page { position:absolute; top:0; width:var(--page-w); height:var(--page-h); transform-style:preserve-3d; transition:transform .72s cubic-bezier(.22,.61,.36,1); }
.turning-page .face { position:absolute; inset:0; overflow:hidden; background:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.turning-page .face img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.turning-page .back { transform:rotateY(180deg); }
.turning-page.next { right:0; transform-origin:left center; }
.turning-page.next.go { transform:rotateY(-180deg); }
.turning-page.prev { left:0; transform-origin:right center; transform:rotateY(-180deg); }
.turning-page.prev.go { transform:rotateY(0deg); }
.turning-page::after { content:""; position:absolute; inset:0; pointer-events:none; backface-visibility:hidden; background:linear-gradient(90deg,rgba(0,0,0,.23),transparent 24%,transparent 76%,rgba(0,0,0,.08)); opacity:.35; transition:opacity .7s; }

.nav-zone { position:absolute; z-index:20; top:0; bottom:0; width:64px; background:transparent; color:rgba(255,255,255,.65); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-zone span { width:42px; height:58px; border-radius:21px; display:flex; align-items:center; justify-content:center; font-size:50px; font-weight:200; background:rgba(255,255,255,.045); transition:.2s; }
.nav-zone:hover span { color:white; background:rgba(255,255,255,.12); transform:scale(1.06); }
.nav-prev { left:0; }
.nav-next { right:0; }
.nav-zone:disabled { opacity:.18; cursor:default; }

.guide-footer { display:flex; align-items:center; justify-content:center; position:relative; color:#b7c6d9; font-size:12px; background:rgba(7,20,38,.72); border-top:1px solid rgba(255,255,255,.06); }
.page-counter { font-weight:700; color:white; min-width:74px; text-align:center; }
.footer-hint { position:absolute; right:22px; color:#8296b1; }
.mobile-hint { display:none; }

.toc-drawer { position:fixed; z-index:100; right:0; top:0; bottom:0; width:min(380px,88vw); padding:24px 22px 18px; background:#f7f9fc; color:#10223c; box-shadow:-24px 0 60px rgba(0,0,0,.35); transform:translateX(102%); transition:transform .3s ease; display:flex; flex-direction:column; }
.toc-drawer.open { transform:translateX(0); }
.drawer-backdrop { position:fixed; z-index:90; inset:0; background:rgba(0,0,0,.42); opacity:0; visibility:hidden; transition:.25s; }
.drawer-backdrop.open { opacity:1; visibility:visible; }
.toc-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid #dfe5ed; }
.toc-head small { display:block; color:#7a8aa0; font-size:10px; letter-spacing:.15em; }
.toc-head strong { display:block; margin-top:4px; font-size:28px; }
#tocClose { width:36px; height:36px; border-radius:50%; background:#e9eef5; color:#203650; font-size:26px; cursor:pointer; }
.toc-list { overflow:auto; padding:12px 0; }
.toc-list button { width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; color:#1b2b42; padding:13px 10px; border-bottom:1px solid #e5eaf0; cursor:pointer; text-align:left; }
.toc-list button:hover { background:#edf3fb; }
.toc-list button span { font-weight:650; }
.toc-list button em { font-style:normal; color:#8c9bb0; font-size:12px; }
.toc-list .toc-emergency { color:#b5202a; background:#fff1f2; }
.toc-bottom { margin-top:auto; padding-top:12px; border-top:1px solid #dfe5ed; }
.toc-bottom a { display:flex; justify-content:center; align-items:center; height:44px; border-radius:8px; background:#0f315c; color:white; text-decoration:none; font-weight:700; }

@media (max-width: 900px) {
  :root { --toolbar-h: 56px; }
  #guideApp { grid-template-rows: var(--toolbar-h) 1fr 36px; }
  .guide-toolbar { grid-template-columns:1fr auto; padding:0 10px; }
  .toolbar-title { display:none; }
  .brand-text span { display:none; }
  .toolbar-actions { gap:5px; }
  .toolbar-actions .toc-btn { padding:0 10px; }
  .toolbar-actions .emergency-btn { padding:0 9px; }
  .toolbar-actions .icon-btn:nth-of-type(3), .toolbar-actions .icon-btn:nth-of-type(4) { display:none; }
  .pdf-btn { display:none; }
  .guide-stage { padding:8px 36px 4px; }
  .book { width:var(--page-w); }
  .book-spine { display:none; }
  .nav-zone { width:36px; }
  .nav-zone span { width:30px; height:48px; font-size:38px; background:transparent; }
  .footer-hint { right:10px; }
  .desktop-hint { display:none; }
  .mobile-hint { display:inline; }
}
@media (max-width: 520px) {
  .guide-toolbar { grid-template-columns:auto 1fr; }
  .brand-text strong { font-size:14px; }
  .toolbar-actions { justify-self:end; }
  .toolbar-actions .icon-btn { display:none; }
  .tool-btn { height:32px; font-size:12px; padding:0 8px; }
  .guide-stage { padding-left:24px; padding-right:24px; }
  .nav-zone { width:24px; }
  .nav-zone span { font-size:32px; }
  .footer-hint { display:none; }
}