*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f7f7f5;color:#151515;font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif}
body{font-size:clamp(11px,1.15vw,24px)}
.app{width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:1.15em;padding:2.1em 2.35em 1.45em}
.top{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:.09em solid #202020;padding-bottom:.8em}
.source{font-size:.78em;font-weight:800;letter-spacing:.2em;margin-bottom:.3em}
h1{margin:0;font-size:2.4em;line-height:.92;letter-spacing:-.055em;font-weight:900}
.status{display:flex;gap:.6em;align-items:center;font-size:.72em;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.dot{opacity:.35}
.grid{min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1.05em}
.book{min-width:0;min-height:0;position:relative;display:grid;grid-template-columns:4.25em 1fr;grid-template-rows:1fr;gap:.95em;padding:.95em .85em .85em;border-top:.08em solid #c9c9c5;background:#fff}
.rank{position:absolute;left:.55em;top:.5em;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:2.3em;height:1.55em;padding:0 .45em;background:rgba(255,255,255,.92);border:.06em solid rgba(0,0,0,.08);box-shadow:0 .08em .22em rgba(0,0,0,.08);font-size:1.02em;font-weight:900;line-height:1;letter-spacing:-.06em;color:#111;border-radius:.18em}
.cover{width:4.25em;height:100%;min-height:5.8em;align-self:stretch;display:flex;align-items:center;justify-content:center;background:#ececea;overflow:hidden}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover-fallback{font-size:.65em;letter-spacing:.12em;font-weight:800;opacity:.36}
.meta{min-width:0;align-self:center}
.meta h2{margin:0 0 .55em;font-size:1em;line-height:1.26;letter-spacing:-.04em;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta p{margin:0 0 .35em;font-size:.72em;line-height:1.3;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub,.price{font-size:.66em;color:#858585;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{margin-top:.25em;color:#333;font-weight:700}
.footer{display:flex;align-items:center;justify-content:space-between;border-top:.08em solid #d2d2ce;padding-top:.75em;font-size:.7em;font-weight:700;letter-spacing:.03em}
.pager{display:flex;gap:.38em}
.pager i{display:block;width:1.35em;height:.16em;background:#c8c8c4}
.pager i.on{background:#151515}
.error{position:absolute;left:50%;bottom:4.5em;transform:translateX(-50%);padding:.8em 1.2em;background:#151515;color:#fff;font-size:.72em;border-radius:.25em;white-space:nowrap}
.empty{opacity:.4}
.skeleton .cover,.skeleton .line{background:linear-gradient(90deg,#e8e8e5,#f3f3f1,#e8e8e5);background-size:200% 100%;animation:shimmer 1.1s linear infinite}
.line{height:.72em;margin:.5em 0}
.w80{width:80%}.w55{width:55%}.w35{width:35%}
@keyframes shimmer{to{background-position:-200% 0}}

html[data-orientation="portrait"] body{font-size:clamp(11px,1.65vw,24px)}
html[data-orientation="portrait"] .app{padding:2em 1.55em 1.35em}
html[data-orientation="portrait"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:.8em 1em}
html[data-orientation="portrait"] .book{grid-template-columns:5.2em 1fr}
html[data-orientation="portrait"] .cover{width:5.2em}
html[data-orientation="portrait"] h1{font-size:2.1em}

@media (max-aspect-ratio:4/5){
  .status{font-size:.62em}
  .source{font-size:.68em}
}


  to{transform:scaleX(1);opacity:1}
}

.loading-panel{
  grid-column:1/-1;
  grid-row:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
}
.loading-text{
  font-size:.68em;
  font-weight:800;
  letter-spacing:.18em;
  color:#777;
}