/* 16호 설정집 홈페이지 — 인물 도감 (PC 가로 기준) */
.page-cast{min-height:100vh;background:linear-gradient(#0F0B1Ed9,#0F0B1Eb8 28%,#0F0B1Eeb),url(img/bg1.webp) center top/cover fixed no-repeat #0F0B1E}
.cast{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"head head" "book sheet";gap:calc(var(--u)*1.1) calc(var(--u)*1.6);
  max-width:calc(var(--u)*92);margin:0 auto;padding:calc(var(--u)*4.2) calc(var(--u)*2) calc(var(--u)*1)}
.cast-head{grid-area:head;text-align:center}
.cast-head h1{display:inline-flex;align-items:center;gap:calc(var(--u)*1.2);margin:0;font-family:var(--serif);font-weight:800;font-size:max(26px,calc(var(--u)*2.5));
  letter-spacing:.2em;color:#FFE7A8;text-shadow:0 0 calc(var(--u)*1) #8A4DFFcc,0 2px 0 #5A3A00}
.cast-head h1::before,.cast-head h1::after{content:"";width:calc(var(--u)*6);height:2px;background:linear-gradient(90deg,#FFC85700,#FFC857)}
.cast-head h1::after{transform:scaleX(-1)}
.cast-head p{margin:.35em 0 0;color:#EDE7FFcc;font-size:max(13px,calc(var(--u)*.84));letter-spacing:.06em}

.book{grid-area:book;display:flex;flex-direction:column;gap:calc(var(--u)*.75);height:calc(100vh - var(--u)*13.4);min-height:440px;padding:calc(var(--u)*1.2);
  background:#140E2Ae0;border:1px solid #FFC857aa;border-radius:calc(var(--u)*.45);outline:1px solid #8A4DFF55;outline-offset:calc(var(--u)*.3);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) #000a}
.tools{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*1)}
.search{display:flex;align-items:center;gap:.55em;flex:0 1 58%;padding:.45em 1em;border:1px solid #FFC85788;border-radius:999px;background:#0F0B1E;color:var(--gold);font-size:max(13px,calc(var(--u)*.82))}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit}
.search input::placeholder{color:#EDE7FF77}
.count{margin:0;color:#EDE7FFcc;font-size:max(12px,calc(var(--u)*.78))}
.count b{color:var(--gold);font-size:1.5em;font-family:var(--serif);margin:0 .1em}
.chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.5)}
.chip{font:inherit;font-size:max(12px,calc(var(--u)*.76));font-weight:600;padding:.42em .95em;color:#F3E6C2;background:#1B1233;border:1px solid #FFC85788;border-radius:calc(var(--u)*.3);cursor:pointer}
.chip b{color:var(--gold);margin-left:.2em}
.chip:hover{border-color:var(--gold)}
.chip.on{color:#fff;background:linear-gradient(#5A34B8,#3B2A66);border-color:#C9A7FF;box-shadow:0 0 calc(var(--u)*.7) #8A4DFF99}
.grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:calc(var(--u)*.9) calc(var(--u)*.8);
  padding:calc(var(--u)*.7) calc(var(--u)*.5) calc(var(--u)*.5);scrollbar-color:#FFC85788 transparent}
.pc{position:relative;display:block;width:100%;margin:0;padding:calc(var(--u)*.35) calc(var(--u)*.35) calc(var(--u)*.4);border:0;font:inherit;text-align:center;color:#2A1E3F;cursor:pointer;
  background:linear-gradient(160deg,#F4E7C8,#DDC597);box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) #000b;transition:transform .15s}
.pc::before{content:"";position:absolute;left:50%;top:calc(var(--u)*-.35);width:calc(var(--u)*.7);height:calc(var(--u)*.7);margin-left:calc(var(--u)*-.35);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF2C4,#FFC857 45%,#8A5A12);box-shadow:0 2px 3px #0009;z-index:1}
.pc img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#cdb98f}
.pc b{display:block;margin-top:.35em;font-family:var(--serif);font-size:max(12px,calc(var(--u)*.78));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc i{display:block;font-style:normal;font-size:max(10px,calc(var(--u)*.62));color:#6A5A7A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc:hover{transform:translateY(-3px)}
.pc.on{outline:2px solid var(--gold);box-shadow:0 0 0 calc(var(--u)*.22) #8A4DFFaa,0 0 calc(var(--u)*1.1) #FFC857bb}
.empty{margin:auto;color:#EDE7FF99}

.sheet{grid-area:sheet;position:relative;height:calc(100vh - var(--u)*13.4);min-height:440px;padding:calc(var(--u)*1.8) calc(var(--u)*1.6) calc(var(--u)*1.2);color:#2A1E3F;border-radius:calc(var(--u)*.25);
  background:radial-gradient(ellipse at 18% 8%,#F8ECCB 0,#F8ECCB00 60%),radial-gradient(ellipse at 85% 95%,#CFAF7A 0,#CFAF7A00 55%),linear-gradient(135deg,#EBD8AD,#DCC291);
  box-shadow:0 calc(var(--u)*.7) calc(var(--u)*2) #000d,inset 0 0 calc(var(--u)*2.6) #6B3E1A77;display:flex;flex-direction:column}
.seal{position:absolute;top:calc(var(--u)*-1);right:calc(var(--u)*1.6);width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#E8605A,#A32222 55%,#5C0F12);box-shadow:0 calc(var(--u)*.25) calc(var(--u)*.5) #0009,inset 0 0 0 calc(var(--u)*.35) #8E1D1D,inset 0 0 0 calc(var(--u)*.45) #C9463F}
.who{flex:none}
.who-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em calc(var(--u)*.9);padding-right:calc(var(--u)*3.6)}
.who h2{margin:0;font-family:var(--serif);font-weight:800;font-size:max(20px,calc(var(--u)*1.7));line-height:1.25;word-break:keep-all}
.aka{color:#6A5A7A;font-size:max(12px,calc(var(--u)*.74))}
.seat{display:inline-flex;align-items:baseline}
.seat span{display:inline-block;padding:.2em .85em;color:#F6E7C3;background:#5B3F2A;border-radius:calc(var(--u)*.25);font-size:max(12px,calc(var(--u)*.8));font-weight:600}
.seat em{margin-left:.7em;font-style:normal;color:#6A5A7A;font-size:max(12px,calc(var(--u)*.74))}
.intro{margin:calc(var(--u)*.6) 0 0;padding-top:calc(var(--u)*.6);border-top:1px solid #8B5A2B88;font-size:max(13px,calc(var(--u)*.84));line-height:1.7;word-break:keep-all}
.photos{flex:1 1 0;min-height:calc(var(--u)*9);max-height:calc(var(--u)*16.6);display:flex;justify-content:center;align-items:stretch;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*1.5)}
.sheet:has(.exprs[hidden]) .photos{margin-top:auto;margin-bottom:auto}
.shot{position:relative;display:flex;flex:none;margin:0;padding:calc(var(--u)*.42);background:#FBF3DE;box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) #0009}
.shot img{display:block;height:100%;width:auto;object-fit:cover;background:#cdb98f}
.shot.face{transform:rotate(-3deg)}
.shot.face img{aspect-ratio:3/4}
.shot.fight{margin-top:calc(var(--u)*.9);transform:rotate(2.5deg)}
.shot.fight img{aspect-ratio:1/1}
.shot.fight .pin{background:radial-gradient(circle at 35% 30%,#FFF2C4,#FFC857 45%,#8A5A12)}
.shot figcaption{position:absolute;left:calc(var(--u)*.8);bottom:calc(var(--u)*.8);padding:.12em .8em;font-family:var(--serif);font-size:max(11px,calc(var(--u)*.66));letter-spacing:.3em;color:#FFE7A8;background:#140E2Acc;border:1px solid #FFC85799}
.exprs{flex:none;padding-top:calc(var(--u)*1);text-align:center}
.exprs h3{display:flex;align-items:center;gap:calc(var(--u)*.8);margin:0 0 calc(var(--u)*.7);font-family:var(--serif);font-size:max(13px,calc(var(--u)*.9));letter-spacing:.25em}
.exprs h3::before,.exprs h3::after{content:"";flex:1;border-top:1px solid #8B5A2B88}
.thumbs{display:flex;justify-content:center;gap:calc(var(--u)*.8)}
.thumbs button{width:calc(var(--u)*4.4);padding:calc(var(--u)*.2);font:inherit;color:#2A1E3F;background:#FBF3DE;border:2px solid transparent;cursor:pointer;box-shadow:0 2px 6px #0006}
.thumbs img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.thumbs span{display:block;font-size:max(10px,calc(var(--u)*.6));padding-top:.2em}
.thumbs button.on{border-color:#B8862B;box-shadow:0 0 0 calc(var(--u)*.2) #8A4DFF99}

@media (max-width:900px){
  .cast{grid-template-columns:1fr;grid-template-areas:"head" "book" "sheet";padding-top:calc(var(--u)*6)}
  .book{height:auto;max-height:80vh}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet{height:auto;margin-top:calc(var(--u)*1.5)}
  .photos{flex:none;max-height:none;align-items:flex-start}
  .shot{flex:1 1 0;min-width:0}
  .shot img{width:100%;height:auto}
  .tools{flex-wrap:wrap}.search{flex:1 1 100%}
  .thumbs button{width:calc(var(--u)*8)}
}