/* Library — Book Detail (Figma 22316:130054 & state variants) + Book Request / Cancel sheets. Prefix ld-. */
.screen.ld { display: flex; flex-direction: column; overflow: hidden; background: var(--gohan); }
.ld-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: calc(var(--sb) + 24px) 20px 40px; isolation: isolate; }
.ld-body::-webkit-scrollbar { display: none; }
/* Soft peach glow: three blurred ellipses (Figma "Container" 22316:130055, 499.5×514.8 at the top-left). */
.ld-glow { position: absolute; left: 0; top: 0; width: 100%; height: 1100px; overflow: hidden; pointer-events: none; z-index: -1; }
.ld-glow img { position: absolute; left: -500px; top: -499.66px; width: 1489.54px; height: 1504.81px; max-width: none; }

.ld-head { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 8px; }
.ld-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.ld-icon-btn:hover { background: var(--heles); }
.ld-back { width: 31.69px; height: 31.69px; }
.ld-back img { transform: rotate(180deg); }

.ld-form { display: flex; flex-direction: column; gap: 24px; }
.ld-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ld-cover {
  width: 157px; height: 240px; object-fit: cover; border-radius: 4px; border: 1px solid var(--pan, rgba(0, 0, 0, .25));
  box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .64), 0 0 1px rgba(0, 0, 0, .56); background: var(--goku);
}
.ld-hero-text { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ld-badge { max-width: 100%; padding: 2px 16px; border-radius: 8px; color: var(--gohan); font: 700 14px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-title { width: 100%; padding: 0 8px; text-align: center; font: 600 24px/32px var(--font); color: var(--bulma); }
.ld-author { width: 100%; text-align: center; font: 400 16px/24px var(--font); color: var(--trunks); }

/* White cards */
.ld-card { background: var(--gohan); border-radius: 8px; padding: 12px 16px; }
.ld-status { display: flex; flex-direction: column; gap: 16px; }
.ld-status-head { display: flex; align-items: center; gap: 8px; height: 24px; }
.ld-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ld-status-title { flex: none; font: 500 16px/24px var(--font); white-space: nowrap; }
.ld-status-right { flex: 1; min-width: 0; text-align: right; font: 400 12px/18px var(--font); color: var(--trunks); }
.ld-status-right.is-red, .ld-strip-value.is-red { color: var(--dodoria); }

.ld-strip { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 4px 8px; border-radius: 8px; background: var(--goku); }
.ld-strip-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.ld-strip.is-center .ld-strip-col { align-items: center; text-align: center; }
.ld-strip-label { font: 400 12px/16px var(--font); color: rgba(0, 0, 0, .25); }
.ld-strip-value { font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.ld-strip-sep { flex: none; width: 1px; height: 24px; background: var(--beerus); }
.ld-note { display: flex; align-items: center; gap: 6px; font: 400 14px/24px var(--font); color: var(--trunks); }
.ld-note.is-red { color: var(--dodoria); }
.ld-note b { font-weight: 700; }

/* Tags + Details (sections share an 8px gap, Figma 22316:130342) */
.ld-group { display: flex; flex-direction: column; gap: 8px; }
.ld-sec { display: flex; flex-direction: column; }
.ld-sec-title { display: flex; align-items: center; width: 100%; padding: 12px 16px; font: 700 18px/28px var(--font); color: var(--bulma); text-align: left; }
.ld-tags-sec { padding-bottom: 12px; }
.ld-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-tag { padding: 4px 12px; border-radius: 16px; background: var(--goku); border: 1px solid var(--beerus); font: 400 16px/24px var(--font); color: var(--trunks); }

.ld-details { display: flex; flex-direction: column; gap: 24px; }
.ld-rows { display: flex; flex-direction: column; gap: 12px; }
.ld-row { display: flex; gap: 2px; font-size: 12px; line-height: 16px; }
.ld-row dt { flex: 1 1 0; min-width: 0; font-weight: 500; color: var(--bulma); }
.ld-row dd { flex: 1 1 0; min-width: 0; color: var(--trunks); overflow-wrap: anywhere; }
.ld-more { align-self: flex-start; display: flex; align-items: center; gap: 6px; font: 700 12px/16px var(--font); color: var(--piccolo); }
.ld-more.is-open img { transform: rotate(180deg); }

/* Related Books (tile shared with the home screens: 120×184 cover) */
.ld-related { display: flex; flex-direction: column; gap: 8px; }
.ld-related-head { display: flex; align-items: center; gap: 28px; width: 100%; text-align: left; }
.ld-related-head h2 { flex: 1; font: 700 18px/28px var(--font); color: var(--bulma); }
.ld-related-btn { flex: none; display: grid; place-items: center; padding: 4px; border-radius: 8px; background: var(--beerus); }
.ld-related-head:hover .ld-related-btn { filter: brightness(.95); }
.ld-row-scroll { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px 8px; overflow-x: auto; scrollbar-width: none; }
.ld-row-scroll::-webkit-scrollbar { display: none; }
.ld-tile { flex: none; width: 120px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ld-tile-cover { position: relative; display: block; width: 120px; height: 184px; }
.ld-tile-cover img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .64), 0 0 1px rgba(0, 0, 0, .56); background: var(--goku);
}
.ld-new { position: absolute; left: 4px; top: 4px; padding: 0 8px; border-radius: 8px; background: var(--zeno); color: var(--gohan); font: 400 10px/16px var(--font); }
.ld-tile-text { display: flex; flex-direction: column; padding: 0 4px; min-width: 0; }
.ld-tile-title, .ld-tile-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-tile-title { font: 700 12px/16px var(--font); color: var(--bulma); }
.ld-tile-author { font: 400 10px/16px var(--font); color: var(--trunks); }
.ld-tile:hover .ld-tile-title { color: var(--piccolo); }

/* My Activity (22316:130408) */
.ld-act-toggle { justify-content: space-between; gap: 24px; padding: 14px 16px; }
.ld-act-chev { display: grid; place-items: center; padding: 4px; border-radius: 4px; }
.ld-act-toggle.is-closed .ld-act-chev img { transform: rotate(180deg); }
.ld-act { display: flex; flex-direction: column; gap: 16px; background: var(--goku); }
.ld-act .ld-strip { background: var(--gohan); }
.ld-act-item { display: flex; flex-direction: column; gap: 16px; }
.ld-act-head { display: flex; align-items: center; min-height: 24px; color: var(--trunks); }
.ld-act-head span:first-child { flex: 1; font: 500 16px/24px var(--font); }
.ld-act-dur { flex: 1; text-align: right; font: 400 12px/18px var(--font); }
.ld-act-div { height: 1px; background: #E4E7EC; }

/* Sticky footer button (reuses .an-foot / .an-next) */
.ld-foot { position: relative; z-index: 1; }
.an-next.ld-danger { background: var(--dodoria); }

/* Book Request sheet (22316:130471) */
.ld-req-book { display: flex; gap: 8px; align-items: flex-start; }
.ld-req-cover {
  flex: none; width: 70px; aspect-ratio: 310 / 475; object-fit: cover; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .64), 0 0 1px rgba(0, 0, 0, .56);
}
.ld-req-text { flex: 1; min-width: 0; padding: 0 8px; align-self: center; }
.ld-req-title { font: 700 20px/28px var(--font); color: var(--bulma); }
.ld-req-author { font: 400 16px/24px var(--font); color: var(--trunks); }
.ld-range-wrap { display: flex; flex-direction: column; gap: 4px; }
.ld-range { display: flex; align-items: center; gap: 8px; height: 50px; padding: 8px 16px; border: 1.32px solid var(--beerus); border-radius: 8px; text-align: left; }
.ld-range:hover { border-color: var(--trunks); }
.ld-range-text { font: 400 16px/24px var(--font); color: var(--bulma); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.ld-range-dur { padding: 0 8px; font: 400 14px/24px var(--font); color: var(--trunks); }
.ld-comment {
  display: block; width: 100%; height: 84px; min-height: 60px; padding: 14px 15px; border: 1px solid var(--beerus); border-radius: 8px;
  font: 400 16px/24px var(--font); color: var(--bulma); background: var(--gohan); resize: vertical;
}
.ld-comment::placeholder { color: var(--trunks); }
.ld-comment:focus { outline: none; border-color: var(--piccolo); }
.ld-fine { display: flex; align-items: center; gap: 6px; font: 400 14px/24px var(--font); color: var(--trunks); }
.ld-fine b { font-weight: 700; }
.ld-hidden-date { position: absolute; left: 50%; bottom: 120px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Cancel confirmation (22316:130658) */
.ld-confirm-text { text-align: center; color: var(--bulma); }
.ld-confirm-btn { width: 100%; padding: 16px 24px; border-radius: 12px; background: var(--dodoria); color: var(--gohan); font: 700 16px/24px var(--font); text-align: center; }
.ld-confirm-btn:hover { filter: brightness(1.08); }

/* Library rules (help) sheet */
.ld-rules { display: flex; flex-direction: column; gap: 12px; padding-left: 18px; list-style: disc; font: 400 14px/22px var(--font); color: var(--bulma); }
.ld-rules b { font-weight: 700; }

/* Status-bar backdrop once the page is scrolled (keeps 9:41 readable over the content) */
.screen.ld::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--sb); z-index: 2; pointer-events: none;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); opacity: 0; transition: opacity .15s;
}
.screen.ld.is-scrolled::before { opacity: 1; }
.ld-tags, .ld-tag { list-style: none; }
.ld-range-text.is-short { letter-spacing: 0; }