:root{--bg:#0f1115;--fg:#e7ebf3;--muted:#9aa3b2;--panel:#161a22;--border:rgba(255,255,255,.08);--accent:#8ab4ff;}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.layout{display:grid;grid-template-columns:260px 1fr;grid-template-rows:56px 1fr;height:100%}
header{grid-column:1/3;display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
header .title{font-weight:700;margin-right:auto}
header .btn,header select{height:36px;padding:0 10px;border:1px solid var(--border);background:#12161d;color:var(--fg);border-radius:10px}
header .btn{cursor:pointer}
header .btn:disabled{opacity:.4;cursor:not-allowed}
header .sep{opacity:.4;padding:0 4px}
.info{color:var(--muted);font-size:12px}
.kbd{border:1px solid var(--border);padding:0 6px;border-radius:6px;font-size:12px;background:#11151c;color:var(--muted)}
aside{background:#0c0f14;border-right:1px solid var(--border);overflow:auto}
.panel{padding:10px;display:flex;flex-direction:column;gap:10px}
.toc{display:flex;flex-direction:column;gap:4px}
.toc-item{padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .2s;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-item:hover{background:rgba(255,255,255,.05)}
.toc-item.active{background:var(--accent);color:#fff;border-left-color:#fff}
.toc-item.level-1{padding-left:12px}
.toc-item.level-2{padding-left:24px;font-size:14px}
.toc-item.level-3{padding-left:36px;font-size:13px}
main{overflow:hidden;position:relative;height:calc(100vh - 60px)}

/* 뷰어 컨테이너 */
#viewerWrap{display:flex;justify-content:center;padding:12px;height:100%;position:relative}
/* 1장 보기: 한 페이지 비율 3:4 */
#epubContainer{
  background:white;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05);
  position:relative;height:100%;min-height:480px;transition: all 0.3s ease-in-out;overflow:hidden;
  aspect-ratio:3/4; /* ★ 3:4 */
}

/* 좌우 가장자리 클릭 영역 */
.click-area {
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px;
  z-index: 5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.click-area:hover {
  opacity: 0;
  background: var(--accent);
}
.click-area:active {
  opacity: 0;
  background: var(--accent);
}
.click-area.left {
  left: 0;
  border-radius: 12px 0 0 12px;
}
.click-area.right {
  right: 0;
  border-radius: 0 12px 12px 0;
}
.click-area::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.click-area:hover::before {
  opacity: 0;
}
.click-area.left::before {
  border-right: none;
  border-bottom: none;
  transform: rotate(-45deg);
}
.click-area.right::before {
  border-left: none;
  border-top: none;
  transform: rotate(-45deg);
}

/* 1장 보기에서 내부도 라운드 유지 */
#viewerWrap:not(.dual-page-view) #epubContainer iframe,
#viewerWrap:not(.dual-page-view) #epubContainer > div,
#viewerWrap:not(.dual-page-view) #epubContainer > div > div { border-radius:12px !important; overflow:hidden !important; }
#viewerWrap:not(.dual-page-view) #epubContainer iframe { border:none !important; }

/* 2장 보기: 전체 3:2 (각 페이지 3:4) */
.dual-page-view{ display:flex; gap:0; justify-content:center; align-items:flex-start; perspective:1000px; transform-style:preserve-3d; }
.dual-page-view #epubContainer{
  margin:0;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05);
  height:100%;min-height:480px;position:relative;overflow:hidden;aspect-ratio:3/2 !important; /* ★ 3:2 */
}
.dual-page-view .click-area {
  width: 120px; /* 2장 보기에서는 더 넓게 */
}
.dual-page-view #epubContainer > div{
  position:relative;display:inline-block;width:50%;height:100%;vertical-align:top;overflow:hidden;aspect-ratio:3/4 !important; /* ★ 각 3:4 */
}
.dual-page-view #epubContainer > div:first-child{ border-radius:0 12px 12px 0; box-shadow:-5px 0 15px rgba(0,0,0,0.3), inset -1px 0 0 rgba(255,255,255,0.1); }
.dual-page-view #epubContainer > div:last-child{ border-radius:12px 0 0 12px; box-shadow: 5px 0 15px rgba(0,0,0,0.3), inset 1px 0 0 rgba(255,255,255,0.1); }
.dual-page-view::before{ content:''; position:absolute; top:0; left:50%; width:40px; height:100%; 
  background:linear-gradient(to right, 
    rgba(0,0,0,0.0) 0%, 
    rgba(0,0,0,0.15) 30%, 
    rgba(0,0,0,0.3) 50%, 
    rgba(0,0,0,0.15) 70%, 
    rgba(0,0,0,0.0) 100%);
  transform:translateX(-50%); z-index:10; }
.dual-page-view::after{ content:''; position:absolute; top:0; left:50%; width:100%; height:100%; background:white; transform:translateX(-50%); z-index:1; pointer-events:none; display:none; }

.loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:220px;color:var(--muted);gap:10px}
.spinner{width:40px;height:40px;border:4px solid var(--border);border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite}
.bar{height:6px;width:70%;max-width:520px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>i{display:block;height:100%;width:0%;background:var(--accent);transition:width .15s}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.light{--bg:#f5f6fb;--fg:#0c1220;--muted:#556077;--panel:#ffffff;--border:rgba(0,0,0,.08);--accent:#2559e4}
.light aside{background:#f1f3f9}
.light header .btn,.light header select{background:#fff}
.light #epubContainer{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,0.05)}
.light .dual-page-view::before{ background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.6) 100%); }
.light .dual-page-view::after{ background:white; display:none; }

@media (max-width:768px){
  .layout{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  header{grid-column:1;flex-wrap:wrap;gap:6px;padding:8px}
  aside{grid-row:2;max-height:220px;border-right:none;border-bottom:1px solid var(--border)}
  main{grid-row:3}
  #viewerWrap{padding:4px}
  #epubContainer{border-radius:8px;min-height:400px;width:100%!important;max-width:100%!important;height:calc(100vh - 100px)!important;aspect-ratio:none!important;box-shadow:0 0 4px #ccc;background:white}
  .mobile-hidden{display:none}
  header .btn,header select{height:32px;font-size:12px;padding:0 8px}
  #spreadBtn{display:none}
  .dual-page-view{ flex-direction:column; gap:10px; align-items:center; }
  .dual-page-view #epubContainer{ border-radius:12px; border:1px solid var(--border); aspect-ratio:none !important; }
  .dual-page-view #epubContainer > div{ width:100%; display:block; aspect-ratio:none !important; }
  .dual-page-view::before, .dual-page-view::after{ display:none; }
  .click-area { width: 60px; } /* 모바일에서는 더 작게 */
  
  /* 모바일 로딩 표시 개선 */
  .loading{
    height:100% !important;
    min-height:300px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    color:#666 !important;
    gap:20px !important;
    background:white !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:1000 !important;
  }
  .loading .spinner{
    width:60px !important;
    height:60px !important;
    border:6px solid #ddd !important;
    border-top:6px solid #007bff !important;
    border-radius:50% !important;
    animation:spin 1s linear infinite !important;
  }
  .loading .bar{
    height:10px !important;
    width:90% !important;
    max-width:350px !important;
    border-radius:10px !important;
    background:#f0f0f0 !important;
    overflow:hidden !important;
  }
  .loading .bar>i{
    display:block !important;
    height:100% !important;
    width:0% !important;
    background:#007bff !important;
    transition:width .15s !important;
  }
  .loading div:not(.spinner):not(.bar) {
    font-size:16px !important;
    font-weight:500 !important;
    color:#333 !important;
  }
}
@media (max-width:480px){#epubContainer{min-height:320px}header .info,header .sep{display:none}#fontSizeBtn,#spreadBtn{display:none}}
#epubContainer img, #epubContainer iframe img, #epubContainer * img{ max-width:100% !important; }