/* LOL플레이 룩북 — portal.css 의 심야 상영관 톤 위에 사진만 올린다. */
.lb-main { width: var(--wrap); margin: 0 auto; padding: 36px 0 24px; min-width: 0; }
.lb-head { padding: 12px 0 26px; }
.lb-eyebrow { margin: 0 0 8px; color: var(--red-hi); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.lb-title { margin: 0; font: 800 clamp(32px, 5.4vw, 56px)/1.1 var(--serif); letter-spacing: -0.02em; word-break: keep-all; text-wrap: balance; }
.lb-lede { margin: 12px 0 0; max-width: 52ch; color: var(--muted); font-size: 16px; }
.lb-h2 { margin: 0 0 16px; font: 700 21px/1.3 var(--serif); letter-spacing: -0.01em; }
.lb-back { display: inline-block; margin: 0 0 18px; color: var(--dim); font-size: 14px; font-weight: 600; }
.lb-back:hover { color: var(--text); }
.lb-empty { padding: 60px 0; color: var(--dim); text-align: center; }
.lb-note { margin: 36px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.6; max-width: 70ch; }

/* 모델 줄 */
.lb-models { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 2px 6px; margin: 0 0 22px; }
.lb-models::-webkit-scrollbar { display: none; }
.lb-model { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; color: var(--muted); }
.lb-model-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--ink-3); box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow .2s var(--ease); }
.lb-model-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lb-model-n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.lb-model:hover .lb-model-av, .lb-model.on .lb-model-av { box-shadow: 0 0 0 2px var(--red-hi); }
.lb-model:hover, .lb-model.on { color: var(--text); }

/* 카테고리 칩 */
.lb-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 0 0 4px; margin: 0 0 22px; }
.lb-cats::-webkit-scrollbar { display: none; }
.lb-chip { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.lb-chip:hover { color: var(--text); border-color: var(--line-2); }
.lb-chip.on { background: var(--red); border-color: var(--red); color: #fff; }

/* 그리드 — 모바일 2열, 데스크톱 4열 */
.lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
@media (min-width: 900px) { .lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 18px; } }
.lb-card { display: block; min-width: 0; }
.lb-card-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--ink-3); }
.lb-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s var(--ease); }
.lb-card:hover .lb-card-img img { transform: scale(1.03); }
.lb-card-t { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-card-m { display: block; margin-top: 1px; font-size: 12.5px; color: var(--dim); }
.lb-card-like, .lb-card-motion { position: absolute; font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.lb-card-like { right: 8px; bottom: 7px; }
.lb-card-motion { left: 8px; top: 7px; font-size: 10px; padding: 3px 6px; border-radius: 999px; background: rgba(11,5,7,.55); text-shadow: none; }
.lb-more-wrap { display: flex; justify-content: center; margin: 34px 0 0; }
.lb-more { min-width: 160px; }

/* 모델 페이지 */
.lb-profile { display: flex; align-items: center; gap: 22px; padding: 6px 0 28px; }
.lb-profile-av { flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--ink-3); box-shadow: 0 0 0 1px var(--line-2); }
.lb-profile-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lb-profile-b { min-width: 0; }
.lb-count { margin: 8px 0 0; color: var(--dim); font-size: 14px; }

/* 이 배우가 나오는 작품 */
.lb-works { margin: 8px 0 34px; }
.lb-works-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.lb-work { display: flex; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); transition: border-color .2s; }
.lb-work:hover { border-color: var(--line-2); }
.lb-work-img { flex: none; width: 72px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--ink-3); }
.lb-work-img img { width: 100%; height: 100%; object-fit: cover; }
.lb-work-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.lb-work-k { color: var(--red-hi); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; }
.lb-work-t { font: 700 17px/1.35 var(--serif); }
.lb-work-s { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-work-go { margin-top: auto; padding-top: 6px; color: var(--text); font-size: 13px; font-weight: 700; }

/* 상세 */
.lb-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .lb-detail-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; align-items: start; } }
.lb-photos { display: grid; gap: 10px; min-width: 0; }
.lb-photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--ink-3); }
.lb-photo img, .lb-photo video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.lb-info { min-width: 0; }
@media (min-width: 900px) { .lb-info { position: sticky; top: 84px; } }
.lb-by { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 14px; }
.lb-by:hover { color: var(--text); }
.lb-by img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--line-2); }
.lb-title-d { margin-top: 14px; font-size: clamp(28px, 4vw, 42px); }
.lb-caption { margin: 14px 0 0; color: #e9d8d5; font-size: 16px; white-space: pre-line; }
.lb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.lb-like, .lb-share { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.lb-like:active, .lb-share:active { transform: scale(.97); }
.lb-like:hover, .lb-share:hover { border-color: rgba(245, 222, 222, .45); }
.lb-like[aria-pressed="true"] { border-color: var(--red); background: color-mix(in oklab, var(--red) 18%, transparent); }
.lb-like-i { font-size: 17px; line-height: 1; color: var(--red-hi); }
.lb-like-n:empty { display: none; }
.lb-views { margin-left: auto; color: var(--dim); font-size: 13px; }

.lb-items { margin: 34px 0 0; }
.lb-item-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lb-item-list li { border-bottom: 1px solid var(--line); }
.lb-item-a { display: flex; gap: 14px; padding: 14px 0; min-width: 0; }
.lb-item-img { flex: none; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: #fff; }
.lb-item-img img { width: 100%; height: 100%; object-fit: cover; }
.lb-item-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lb-item-slot { color: var(--dim); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; }
.lb-item-n { font-size: 14.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lb-item-p { font-size: 15px; font-weight: 800; color: var(--text); }
.lb-item-d { color: var(--muted); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-buy { align-self: flex-start; margin-top: 6px; padding: 6px 13px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; transition: background .2s; }
.lb-item-a:hover .lb-buy { background: var(--red-hi); }

.lb-ad { display: flex; justify-content: center; min-height: 250px; margin: 30px 0 0; overflow: hidden; }
.lb-detail .lb-works { margin: 34px 0 0; }
.lb-others { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.lb-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lb-all { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lb-all:hover { color: var(--text); }

.lb-404 { padding: 80px 0; }
.lb-404 .btn { margin-top: 24px; }

@media (max-width: 640px) {
  .lb-main { padding-top: 22px; }
  .lb-profile { gap: 16px; }
  .lb-profile-av { width: 84px; height: 84px; }
  .lb-photos { margin-inline: -12px; gap: 6px; }
  .lb-photo { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-card-img img { transition: none; }
  .lb-card:hover .lb-card-img img { transform: none; }
}