.contents-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 24px;
  align-items: start;
}

.contents-stage { width: 100%; }
.contents-inspector { display: grid; min-width: 0; }
.contents-inspector > div { grid-area: 1 / 1; }

.contents-inspector-empty {
  min-height: 380px;
  padding: 40px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.contents-inspector-empty img { width: 88px; height: 50px; object-fit: contain; margin-bottom: 24px; }
.contents-inspector-empty h3 { font: 400 28px / 1.2 var(--serif); margin: 0 0 16px; }
.contents-inspector-empty p { margin: 0; font-size: var(--text-body); color: var(--muted); }

.contents-inspector .contents-popover {
  position: static;
  width: 100%;
  min-height: 380px;
  max-height: none;
  overflow: visible;
  transform: none;
  box-shadow: none;
}

.contents-inspector .popover-paper { min-height: 362px; padding-inline: 16px; }

.content-item.has-page-turn {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 400px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  perspective: 1100px;
  isolation: isolate;
  overflow: hidden;
}

.has-page-turn .item-detail {
  position: relative;
  min-height: 400px;
  height: 100%;
  padding: 24px 24px 80px;
  background: var(--white);
  pointer-events: none;
}

.has-page-turn .item-detail .item-top { margin-bottom: 24px; }
.has-page-turn .item-detail h3, .has-page-turn .item-detail > p { grid-column: auto; }
.has-page-turn.is-open .item-detail { pointer-events: auto; }

.item-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.item-cover-front, .item-cover-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.item-cover-front {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-left: 4px solid #d7b5bc;
  background: linear-gradient(145deg, var(--white), var(--paper));
  box-shadow: inset 2px 0 6px rgba(94, 49, 53, .04), 4px 2px 12px rgba(94, 49, 53, .06);
}

.item-cover-front .item-top { width: 100%; margin-bottom: 16px; }
.item-cover-front .item-cover-bow { width: 72px; height: 40px; object-fit: contain; margin: 0 0 18px; }
.item-cover-title { font: 400 26px / 1.2 var(--serif); letter-spacing: -.02em; margin-bottom: 12px; }
.item-cover-quantity { color: var(--muted); font-size: var(--text-small); line-height: 1.6; }
.item-cover-hint { margin-top: auto; padding-top: 24px; color: var(--accent); font-size: var(--text-small); line-height: 1.6; }

.item-cover-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(rgba(247, 241, 232, .78), rgba(247, 241, 232, .78)),
    var(--pattern-bows) center / 520px auto;
  box-shadow: inset -8px 0 20px rgba(94, 49, 53, .12);
}

.has-page-turn.is-open .item-cover { transform: rotateY(-118deg); pointer-events: none; }
.item-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }

.item-return {
  position: absolute;
  right: 20px;
  bottom: 20px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #bf9696;
  border-radius: 8px;
  background: var(--paper);
  color: var(--accent);
  font-size: var(--text-small);
  transition: background 180ms ease;
}

.item-return:hover { background: var(--blush); }
.has-page-turn.is-highlighted, .has-page-turn:target { box-shadow: 0 0 0 2px #b77b84; }

@media (max-width: 1050px) {
  .contents-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
}

@media (max-width: 900px) {
  .contents-layout { grid-template-columns: minmax(0, 1fr); }
  .contents-inspector-empty { min-height: 200px; padding: 24px; }
  .contents-inspector-empty img { margin-bottom: 12px; }
  .contents-inspector .contents-popover, .contents-inspector .popover-paper { min-height: 200px; }
}

@media (max-width: 520px) {
  .contents-inspector .popover-heading { grid-template-columns: minmax(0, 1fr) 48px 44px; }
  .contents-inspector .popover-bow { width: 48px; height: 32px; }
  .content-item.has-page-turn, .has-page-turn .item-detail { min-height: 360px; }
  .has-page-turn .item-detail { padding: 20px 20px 80px; }
  .item-cover-front { padding: 20px; }
  .item-cover-front .item-top { flex-direction: row; margin-bottom: 12px; }
  .item-cover-front .item-cover-bow { width: 64px; height: 36px; margin-bottom: 12px; }
  .item-cover-title { font-size: 24px; }
}

@media print {
  .contents-layout { display: block; }
  .contents-inspector, .item-cover, .item-return { display: none; }
  .content-item.has-page-turn { min-height: 0; overflow: visible; }
  .has-page-turn .item-detail { min-height: 0; padding: 24px; opacity: 1; }
}