/* 작품 서재 — 작은 미술관의 작품 목록(상점·대시보드 아님) */
.bar-home{color:var(--wine);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding-right:12px}
.bar.on-wall .bar-home{color:#e3c88a}
.bar.is-lib{display:none}
.lib-head{position:relative;min-height:min(92vh,860px);min-height:min(92svh,860px);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:#1b1830;color:#fff;text-align:center;isolation:isolate}
.lib-cover-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 54%;z-index:-3}
.lib-head::before{content:"";position:absolute;z-index:-2;left:50%;top:6%;width:min(94vw,620px);height:48%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(23,18,48,.58) 0,rgba(23,18,48,.32) 48%,rgba(23,18,48,0) 76%);pointer-events:none}
.lib-head::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:24%;background:linear-gradient(to bottom,rgba(17,13,33,0),rgba(17,13,33,.68));pointer-events:none}
.lib-titlebox{width:100%;padding:clamp(76px,12vh,112px) var(--gutter) 26px;padding-top:clamp(76px,12svh,112px);text-shadow:0 2px 14px rgba(15,10,35,.92),0 1px 2px rgba(0,0,0,.9)}
.lib-kicker{margin:0 0 18px;color:#f4d7a1;font-size:13px;font-weight:700;letter-spacing:.28em;line-height:1.5}
.lib-head h1{font-size:clamp(36px,10vw,58px);margin:0 auto 20px;color:#fff;font-weight:700;line-height:1.25;letter-spacing:.035em;word-break:keep-all;text-wrap:balance}
.lib-head h1::after{content:"";display:block;width:44px;height:1px;background:#f4d7a1;margin:24px auto 0;box-shadow:0 1px 8px rgba(0,0,0,.7)}
.lib-sub{margin:0;color:#fff3dc;font-size:clamp(15px,4.15vw,19px);letter-spacing:.07em;line-height:1.75;word-break:keep-all;text-wrap:balance}
.cover-tools{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:max(22px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cover-btn{min-height:44px;padding:0 18px;border:1px solid rgba(255,243,220,.5);border-radius:999px;background:rgba(24,18,42,.42);letter-spacing:.06em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(0,0,0,.25);color:#fff8e9;font:inherit;font-size:13.5px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cover-btn:hover{background:rgba(24,18,42,.76)}
.cover-btn[hidden]{display:none}
.cover-status{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:78px;margin:0;color:#fff8e9;font-size:13px;line-height:1.55;text-shadow:0 1px 6px rgba(0,0,0,.95)}
.cover-status:empty{display:none}
.lib-tools{max-width:42rem;margin:0 auto;padding:22px var(--gutter) 4px}
.lib-lab{display:block;font-size:15px;color:var(--ink2);margin:0 0 6px;font-weight:700}
.lib-search input{display:block;width:100%;min-height:52px;font:inherit;font-size:17px;padding:0 14px;color:var(--ink);background:#fbf6e8;border:1px solid rgba(31,26,21,.35);border-radius:2px;-webkit-appearance:none;appearance:none}
.lib-search input::placeholder{color:#8a7d6a}
.lib-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 6px}
.chip{font:inherit;font-size:15px;min-height:44px;padding:0 4px;white-space:nowrap;background:transparent;color:var(--ink2);border:1px solid rgba(31,26,21,.3);border-radius:22px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
.lib-count{font-size:15px;color:var(--ink2);margin:10px 0 0;min-height:1.6em}
.lib-list{list-style:none;margin:0 auto;padding:6px var(--gutter) 40px;max-width:42rem}
.lib-item{padding:22px 0;border-bottom:1px solid rgba(31,26,21,.16)}
.lib-main{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:inherit}
.lib-cover{flex:none;width:96px;aspect-ratio:4/5;background:#1b1713;box-shadow:0 4px 14px rgba(40,25,5,.28);overflow:hidden;display:block}
.lib-cover img{display:block;width:100%;height:100%;object-fit:cover}
.lib-cover.plate{display:grid;place-items:center;background:var(--paper2);color:var(--wine);font-size:34px;border:1px solid rgba(138,106,38,.45)}
.lib-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.lib-title{font-size:20px;font-weight:700;line-height:1.4;color:var(--ink)}
.lib-line{font-size:15px;color:var(--ink2);line-height:1.5}
.lib-themes{font-size:15px;color:var(--gold);font-weight:700;letter-spacing:.02em}
.lib-sum{font-size:15px;color:var(--ink2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.lib-hit{font-size:14px;color:var(--wine);margin-top:2px}
.lib-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0 112px}
.badge{font-size:14px;line-height:1;padding:6px 9px 5px;border:1px solid currentColor;border-radius:2px;color:var(--ink2)}
.badge.bm{color:var(--wine)}
.badge.note{color:#2e4a3c}
.badge.warn{color:#9a2a2a}
.lib-rec{font-size:15px;color:var(--wine);display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.lib-empty{max-width:42rem;margin:0 auto;padding:12px var(--gutter) 56px;color:var(--ink2)}
.lib-empty[hidden]{display:none}
.lib-msg{max-width:42rem;margin:0 auto;padding:110px var(--gutter) 56px;text-align:center}
.lib-back{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media (max-width:430px){.lib-head{min-height:min(76vh,660px);min-height:min(76svh,660px)}.lib-titlebox{padding-top:11vh;padding-top:11svh}.lib-head h1{max-width:8em}.cover-status{bottom:76px}}
@media (max-width:340px){.chip{font-size:14px;padding:0 2px}.lib-kicker{font-size:12px;letter-spacing:.2em}}
@media (max-width:360px){.lib-cover{width:84px}.lib-meta{margin-left:0}.cover-btn{padding:0 12px;font-size:13px}.lib-titlebox{padding-left:16px;padding-right:16px}.lib-sub{letter-spacing:.045em}}
@media (min-width:720px){.lib-head{min-height:min(86svh,860px)}.lib-cover-art{object-position:center 58%}}
@media (prefers-reduced-motion:no-preference){.lib-cover-art{animation:cover-reveal .9s ease-out both}.lib-titlebox{animation:title-reveal .8s .12s ease-out both}@keyframes cover-reveal{from{opacity:.72;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}@keyframes title-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

/* ── 태블릿(720~1023px): 카드를 2열로 ── */
@media (min-width:720px) and (max-width:1023px){
  .lib-tools,.lib-empty{max-width:56rem}
  .lib-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;max-width:56rem}
}

/* ── PC(1024px 이상): 표지는 글과 그림을 나란히, 서재는 갤러리형 카드 ── */
@media (min-width:1024px){
  .lib-head{--pad:max(48px,calc((100vw - 1400px) / 2 + 48px));min-height:min(72vh,720px);min-height:min(72svh,720px);align-items:center;justify-content:flex-start}
  .lib-cover-art{left:auto;right:0;width:clamp(520px,52vw,1040px);object-position:center 50%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
  .lib-head::before,.lib-head::after{display:none}
  .lib-titlebox{width:min(58%,760px);padding:0 0 64px var(--pad);text-align:left}
  .lib-head h1{max-width:none;margin:0 0 20px;font-size:clamp(44px,4.6vw,78px)}
  .lib-head h1::after{margin:26px 0 0}
  .lib-sub{font-size:clamp(18px,1.5vw,24px)}
  .cover-tools{left:var(--pad);right:auto;bottom:44px;justify-content:flex-start}
  .cover-status{left:var(--pad);right:auto;bottom:100px;text-align:left}

  .lib-tools{max-width:1240px;padding:44px 48px 8px}
  .lib-search input{max-width:560px}
  .lib-chips{grid-template-columns:repeat(4,max-content);gap:10px;justify-content:start}
  .chip{padding:0 22px}
  .lib-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 36px;max-width:1240px;padding:28px 48px 96px}
  .lib-item{display:flex;flex-direction:column;padding:0 0 22px}
  .lib-main{flex:1;flex-direction:column;gap:16px}
  .lib-cover{width:100%;aspect-ratio:5/4;box-shadow:0 8px 26px rgba(40,25,5,.3)}
  .lib-cover img{object-position:center 35%}
  .lib-cover.plate{font-size:56px}
  .lib-title{font-size:24px}
  .lib-meta{margin:14px 0 0}
  .lib-empty{max-width:1240px;padding:12px 48px 56px}
}
@media (min-width:1200px){
  .lib-tools,.lib-empty{max-width:1400px}
  .lib-list{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1400px}
}
@media (min-width:1700px){
  .lib-head{--pad:calc((100vw - 1560px) / 2 + 48px)}
  .lib-tools,.lib-empty,.lib-list{max-width:1560px}
}