:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#0b0e13;color:#e9edf3;font-family:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:15px 20px;padding-top:max(15px,env(safe-area-inset-top));background:rgba(22,27,35,.96);border-bottom:1px solid #38424f}
.bar a{color:#bdc5d1;font-size:14px}
.bar b{font-size:15px}
main{max-width:1000px;margin:auto;padding:30px 20px 70px}
h1{font-size:30px;margin:5px 0 26px}

/* 작품 목록 — 세로 표지가 나란히 놓인다. 쪽은 관상감게임_기획보드/웹툰/작품쪽_굽기.py 가 굽는다(작품을 더할 때는 그 스크립트의 작품표에). */
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:28px 18px}
.work{display:block}
.poster{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#161b23;border:1px solid #2b3440;transition:border-color .15s,transform .15s}
.poster img{display:block;width:100%;height:100%;object-fit:cover}
.poster em{position:absolute;left:8px;top:8px;z-index:1;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.01em;color:#f3e6c9;background:rgba(11,14,19,.78);border:1px solid rgba(231,189,120,.55);border-radius:6px;padding:4px 8px}
.work:hover .poster,.work:focus-visible .poster{transform:translateY(-3px);border-color:#a88752}
.work b{display:block;margin:11px 2px 4px;font-size:16px;line-height:1.3}
.work .line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 2px;font-size:13px;line-height:1.55;color:#aeb8c6;word-break:keep-all;text-wrap:balance}
.work .last{display:block;margin:7px 2px 0;font-size:12.5px;font-weight:700;color:#e7bd78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .last.wait{font-weight:400;color:#7d8795}
.edit{margin:34px 0 0}
.edit a{display:inline-block;border:1px solid #7a6544;padding:13px 18px;border-radius:10px;color:#edc585}

/* 작품 한 편의 쪽 — 위에 표지와 소개, 아래에 화 목록(최신 화가 위) */
.series{max-width:720px;padding-top:0}
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:18px;margin:0 -20px;padding:30px 20px 24px;background-color:#161b23;background-size:cover;background-position:center 22%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,14,19,.62),rgba(11,14,19,.9) 70%,#0b0e13)}
.face{flex:0 0 auto;display:block;width:132px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid #38424f;background:#161b23}
.info{flex:1;min-width:0}
.day{display:inline-block;margin:0 0 9px;font-size:12px;font-weight:700;color:#f3e6c9;background:rgba(11,14,19,.6);border:1px solid rgba(231,189,120,.55);border-radius:6px;padding:4px 8px}
.series h1{font-size:30px;line-height:1.2;margin:0 0 8px}
.sub{margin:0;font-size:14px;line-height:1.65;color:#c5ccd7;word-break:keep-all}
.go{display:inline-block;margin-top:15px;padding:10px 17px;border-radius:999px;background:#e7bd78;color:#17130c;font-size:14px;font-weight:700}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:14px;padding-bottom:6px;border-bottom:1px solid #2b3440}
.listhead b{font-size:15px}
.sort{display:flex;gap:2px}
.sort button{appearance:none;border:0;background:none;font:inherit;font-size:13px;color:#7d8795;padding:8px 9px;border-radius:6px;cursor:pointer}
.sort button[aria-pressed="true"]{color:#e9edf3;font-weight:700}
.sort button+button{position:relative}
.sort button+button::before{content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:1px;background:#38424f}
.eps{list-style:none;margin:0;padding:0}
.eps li{border-bottom:1px solid #1f2630}
.eps a,.eps .row{display:flex;align-items:center;gap:15px;padding:13px 0}
.thumb{flex:0 0 auto;display:block;width:120px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#161b23}
.thumb.none{border:1px dashed #38424f;background:none}
.t{flex:1;min-width:0}
.t b{display:block;font-size:16px;line-height:1.35}
.t .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:5px;font-size:13px;line-height:1.55;color:#9ca6b4;word-break:keep-all}
.t time{display:block;margin-top:6px;font-size:12px;color:#6f7987;font-variant-numeric:tabular-nums}
.up{display:inline-block;margin-left:7px;font-style:normal;font-size:10.5px;font-weight:800;line-height:1;color:#17130c;background:#e7bd78;border-radius:4px;padding:3px 5px;vertical-align:2px}
.eps .soon{opacity:.62}
.eps .slim .row{padding:15px 2px}
.eps .slim b{display:inline;font-size:14px}
.eps .slim .desc{display:inline;margin:0 0 0 8px}
.eps a:hover b,.eps a:focus-visible b{color:#f3d9a8}

@media(max-width:600px){
  main{padding:24px 16px 60px}
  h1{font-size:26px;margin-bottom:20px}
  .shelf{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .series{padding-top:0}
  .hero{margin:0 -16px;padding:24px 16px 20px;gap:14px}
  .face{width:108px}
  .series h1{font-size:25px}
  .thumb{width:104px}
  .t b{font-size:15px}
}