:root{
  --ink: #14110d;
  --ink-2: #1c1812;
  --paper: #ede6d6;
  --navy: #1b2a4a;
  --brass: #b08d57;
  --brass-dim: #8a6f47;
  --muted: #9a9186;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--ink); color:var(--paper);
  font-family:'Noto Sans SC', 'Noto Sans KR', sans-serif;
  overflow-x:hidden;
}
#scroll-track{ height: 320vh; width: 100%; }

#stage{
  position: fixed; inset:0; width:100vw; height:100vh;
  /* bug 修复：手机端底部控制栏被浏览器工具条挡住（Chrome 尤其明显）——不是
     #reader-ui 自己的定位错了，是 100vh 这个单位的老问题：移动端地址栏/底部工具条
     会动态显示/隐藏，一部分浏览器（典型如 Android Chrome）的 100vh 是按"工具条
     收起后能达到的最大高度"算的，不会随工具条重新出现而实时收缩，导致贴着
     bottom:6% 定位的按钮实际上被工具条挡在可视区域外面。Safari 对这个问题处理
     得不一样，所以你只在 Chrome 上看到这个问题。
     100dvh(dynamic viewport height)是专门解决这个问题的新单位，会跟着"当前真实
     可见区域"实时变化。写在 100vh 后面，支持 dvh 的浏览器会用这一行覆盖前面的，
     不支持的老浏览器就还是用上面的 100vh 兜底，两行谁都不删，互相兜底。 */
  height: 100dvh;
  background: radial-gradient(120% 90% at 50% 30%, #201a12 0%, var(--ink) 60%, #0b0906 100%);
}
#c{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
/* pan-y 而不是 none：intro 阶段单指纵向滚动还要用来驱动"翻开封面"这个手势，
   不能整个拦掉；只有阅读模式下的双指手势(平移)才需要在 JS 里单独 preventDefault
   盖过默认行为，pan-y 不影响那一步。 */

/* ---------- 语言切换 ---------- */
#lang-switch{
  position:absolute; right:20px; top:20px; z-index:20;
  display:flex; gap:6px;
}
#lang-switch button{
  padding:6px 12px; border-radius:999px; font-size:12px; letter-spacing:.04em;
  border:1px solid rgba(176,141,87,.35); background:rgba(20,17,13,.5);
  color:var(--muted); cursor:pointer; backdrop-filter:blur(4px);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
#lang-switch button.active{
  border-color:var(--brass); color:var(--paper); background:rgba(176,141,87,.16);
}
#lang-switch button:hover{ color:var(--paper); }
#lang-switch button:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* ---------- 顶部品名/标题层 ---------- */
#intro-copy{
  position:absolute; left:50%; top:8%; transform:translateX(-50%);
  text-align:center; width:min(90vw, 720px);
  pointer-events:none;
  transition: opacity .6s ease;
}
#intro-copy .eyebrow{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass); margin-bottom:14px; font-weight:500;
}
#intro-copy h1{
  font-family:'Noto Serif SC', 'Noto Serif KR', serif; font-weight:600;
  font-size:clamp(22px, 3.6vw, 38px); line-height:1.35; margin:0 0 10px;
  color:var(--paper);
}
#intro-copy p{
  margin:0; font-size:clamp(13px, 1.4vw, 15px); color:var(--muted);
  letter-spacing:.02em;
}

#scroll-hint{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--muted); font-size:12px; letter-spacing:.18em;
  pointer-events:none; transition:opacity .5s ease;
}
#scroll-hint .arrow{
  width:1px; height:34px; background:linear-gradient(var(--brass), transparent);
  animation: hint-move 1.8s ease-in-out infinite;
}
@keyframes hint-move{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%{ transform:translateY(8px); opacity:1; }
}

#progress-rail{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:min(60vw, 360px); height:2px; background:rgba(237,230,214,.12);
  pointer-events:none;
}
#progress-fill{
  height:100%; width:0%; background:var(--brass);
  transition:width .05s linear;
}

/* ---------- 极简书签胶囊条 ---------- */
#bookmark-strip{
  position:absolute; left:50%; bottom:13.5%; transform:translateX(-50%);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:80vw;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
#bookmark-strip.active{ opacity:1; pointer-events:auto; }
#bookmark-strip button{
  padding:4px 11px; border-radius:999px; font-size:12px; letter-spacing:.03em;
  border:1px solid rgba(176,141,87,.35); background:rgba(237,230,214,.05);
  color:var(--muted); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
#bookmark-strip button:hover{ border-color:var(--brass); color:var(--paper); }
#bookmark-strip button.current{
  border-color:var(--brass); color:var(--paper); background:rgba(176,141,87,.16);
}

/* ---------- 阅读模式 Bottom 控制栏 ---------- */
#reader-ui{
  position:absolute; left:0; right:0;
  bottom:6%;
  bottom:calc(6% + env(safe-area-inset-bottom)); /* 顺手加上：iPhone 底部手势条也不会挡住按钮 */
  display:flex; align-items:center; justify-content:center; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
#reader-ui.active{ opacity:1; pointer-events:auto; }
#reader-ui button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(176,141,87,.5); background:rgba(237,230,214,.04);
  color:var(--paper); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
#reader-ui button:hover:not(:disabled){ background:rgba(176,141,87,.18); border-color:var(--brass); }
#reader-ui button:active:not(:disabled){ transform:scale(.92); }
#reader-ui button:disabled{ opacity:.3; cursor:default; }
#reader-ui button:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* 页码指示器按钮 */
#page-indicator{
  font-family:'Noto Serif SC', 'Noto Serif KR', serif; font-size:13px; color:var(--paper);
  min-width:110px; text-align:center; letter-spacing:.05em; padding:6px 16px;
  border-radius:999px; background:rgba(176,141,87,.12); border:1px solid rgba(176,141,87,.3);
  cursor:pointer; transition: background .2s ease, border-color .2s ease; user-select:none;
}
#page-indicator:hover{ background:rgba(176,141,87,.25); border-color:var(--brass); }

/* ---------- 阅读缩放控件 ---------- */
#zoom-controls{
  position:absolute; right:20px;
  bottom:16%;
  bottom:calc(16% + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; z-index:15;
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
#zoom-controls.active{ opacity:1; pointer-events:auto; }
#zoom-controls button{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(176,141,87,.5); background:rgba(20,17,13,.5);
  color:var(--paper); font-size:17px; cursor:pointer; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
#zoom-controls button:hover{ background:rgba(176,141,87,.18); border-color:var(--brass); }
#zoom-controls button:active{ transform:scale(.92); }

#reader-title{
  position:absolute; left:50%; top:6%; transform:translateX(-50%);
  text-align:center; opacity:0; pointer-events:none; transition:opacity .6s ease;
  color:var(--muted); font-size:12px; letter-spacing:.14em;
}
#reader-title.active{ opacity:1; }
#reader-title span{ color:var(--brass); }

/* ---------- 通用暗调 Modal 玻璃感弹窗样式 ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,8,6,.78); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }

.modal-card{
  position:relative; width:min(90vw, 440px); background:rgba(28,24,18,.94);
  border:1px solid rgba(176,141,87,.38); border-radius:16px; padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.65); transform:scale(.95); transition:transform .25s ease;
}
.modal-overlay.active .modal-card{ transform:scale(1); }

/* Modal Header 弹性流布局：彻底解决按钮重叠问题 */
.modal-header{
  margin-bottom:20px; display:flex; align-items:center; justify-content:space-between;
}
.modal-title-group{
  display:flex; align-items:center; gap:10px;
}
.modal-title-group h3{
  margin:0; font-family:'Noto Serif SC', 'Noto Serif KR', serif; font-size:18px;
  color:var(--paper); font-weight:600;
}

.bookmark-count-badge{
  font-size:12px; padding:3px 9px; border-radius:999px;
  background:rgba(176,141,87,.2); border:1px solid rgba(176,141,87,.4);
  color:var(--brass); font-weight:600; line-height:1;
}

/* Modal Close 按钮 (流式子元素，非绝对定位) */
.modal-close{
  position:relative; top:auto; right:auto; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(176,141,87,.25); background:rgba(237,230,214,.08); color:var(--paper);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .15s ease; flex-shrink:0;
}
.modal-close:hover{ background:rgba(176,141,87,.25); border-color:var(--brass); }
.modal-close:active{ transform:scale(.92); }

.modal-body{ margin-bottom:20px; font-size:14px; color:var(--muted); }
.modal-body p{ margin:0 0 12px; }

/* 页码类型切换下拉框 */
.jump-type-selector{
  display:flex; justify-content:center; margin-bottom:14px;
}
.jump-type-selector select{
  padding:6px 14px; border-radius:8px; border:1px solid var(--brass-dim);
  background:rgba(20,17,13,.8); color:var(--paper); font-size:13px; outline:none;
  cursor:pointer;
}

.jump-input-group{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;
}
.jump-input-group input[type="number"]{
  width:90px; padding:8px 12px; border-radius:8px; border:1px solid var(--brass-dim);
  background:rgba(20,17,13,.8); color:var(--paper); font-size:18px; text-align:center;
  font-family:'Noto Serif SC', serif;
}
.jump-input-group input[type="number"]:focus{ outline:2px solid var(--brass); border-color:var(--brass); }
.jump-total{ font-size:15px; color:var(--muted); }

.custom-slider{
  width:100%; height:4px; border-radius:2px; background:rgba(237,230,214,.2);
  outline:none; -webkit-appearance:none; margin-bottom:16px;
}
.custom-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--brass); cursor:pointer; transition:transform .15s ease;
}
.custom-slider::-webkit-slider-thumb:hover{ transform:scale(1.2); }

.jump-quick-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.jump-tag-btn{
  padding:5px 12px; border-radius:12px; font-size:12px; border:1px solid rgba(176,141,87,.3);
  background:rgba(237,230,214,.05); color:var(--paper); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.jump-tag-btn:hover{ border-color:var(--brass); background:rgba(176,141,87,.2); }

.modal-footer{ display:flex; gap:12px; justify-content:flex-end; align-items:center; }
.btn-primary{
  padding:8px 20px; border-radius:8px; border:none; background:var(--brass);
  color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; transition:opacity .2s ease, transform .15s ease;
}
.btn-primary:hover{ opacity:.9; }
.btn-primary:active{ transform:scale(.95); }

.btn-secondary{
  padding:8px 18px; border-radius:8px; border:1px solid rgba(176,141,87,.4);
  background:transparent; color:var(--paper); font-size:13px; cursor:pointer;
  transition:background .2s ease;
}
.btn-secondary:hover{ background:rgba(237,230,214,.08); }

.btn-danger{
  padding:8px 16px; border-radius:8px; border:1px solid rgba(217,83,79,.4);
  background:rgba(217,83,79,.12); color:#e86c6c; font-size:13px; cursor:pointer;
  transition:background .2s ease; margin-right:auto;
}
.btn-danger:hover{ background:rgba(217,83,79,.25); }

/* 书签列表弹窗精美列表项 */
.bookmark-card{ width:min(90vw, 480px); }
.bookmark-full-list{
  max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px;
}
.bookmark-full-list::-webkit-scrollbar{ width:4px; }
.bookmark-full-list::-webkit-scrollbar-thumb{ background:rgba(176,141,87,.3); border-radius:2px; }

.bookmark-item{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-radius:10px; background:rgba(20,17,13,.6); border:1px solid rgba(176,141,87,.22);
  transition:border-color .2s ease, background .2s ease;
}
.bookmark-item:hover{ border-color:rgba(176,141,87,.45); }
.bookmark-item.current{ border-color:var(--brass); background:rgba(176,141,87,.14); }
.bookmark-item-info{ display:flex; flex-direction:column; gap:3px; }
.bookmark-item-page{ font-weight:600; color:var(--paper); font-size:14px; }
.bookmark-item-desc{ font-size:12px; color:var(--muted); }

.bookmark-item-actions{ display:flex; gap:8px; align-items:center; }
.btn-item-jump{
  padding:5px 14px; border-radius:6px; font-size:12px; cursor:pointer; border:none;
  background:var(--brass); color:var(--ink); font-weight:600; transition:opacity .2s ease;
}
.btn-item-jump:hover{ opacity:.9; }

.btn-item-del{
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(237,230,214,.08); color:var(--muted); font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.btn-item-del:hover{ background:rgba(217,83,79,.3); color:#fff; }

.bookmark-empty-state{ text-align:center; padding:36px 10px; color:var(--muted); font-size:13px; }
.bookmark-empty-icon{ font-size:32px; margin-bottom:10px; opacity:.7; }

@media (max-width: 640px){
  #lang-switch{ top:14px; right:14px; }
  #lang-switch button{ padding:5px 10px; font-size:11px; }
  #zoom-controls{ right:14px; bottom:15%; }
  .modal-card{ padding:18px; }
}