/* GPT가 그린 UI 부품(img/ui/)을 입힌다. 이 파일을 빼면 CSS로만 그린 옛 모양으로 돌아간다.
   글자는 그림에 없다. 모두 웹 글자다. [인간님 2026-11-14 20:14] */
:root{--pk:.0208;--qk:.0234}   /* 원본 1px이 몇 u인가. 양피지 0.40배 · 패널 0.45배(폭 1920 기준) */

/* 양피지 — 네 귀 · 네 변은 틀 그림, 가운데는 종이 결 타일 */
.parch,.sheet{border:0 solid transparent;border-radius:0;box-shadow:none;
  background:url(img/ui/parch_tile.webp) 0 0/calc(var(--u)*2048*var(--pk)) calc(var(--u)*336*var(--pk)) repeat content-box;
  border-image:url(img/ui/parch.webp) 112 115 112 115/calc(var(--u)*112*var(--pk)) calc(var(--u)*115*var(--pk))/0 stretch;
  filter:drop-shadow(0 calc(var(--u)*.45) calc(var(--u)*.8) #000c)}
.parch::before,.parch::after,.sheet::before,.sheet::after{content:"";position:absolute;left:50%;z-index:1;pointer-events:none;
  width:calc(var(--u)*112*var(--pk));height:calc(var(--u)*58*var(--pk));margin-left:calc(var(--u)*-56*var(--pk));background:center/100% 100% no-repeat}
.parch::before,.sheet::before{top:0;background-image:url(img/ui/parch_gem_t.webp)}
.parch::after,.sheet::after{bottom:0;background-image:url(img/ui/parch_gem_b.webp)}

/* 보라 패널 */
.panel,.book{position:relative;border:0 solid transparent;border-radius:0;background:none;outline:0;box-shadow:none;
  border-image:url(img/ui/panel.webp) 64 fill/calc(var(--u)*64*var(--qk))/0 stretch;
  filter:drop-shadow(0 calc(var(--u)*.45) calc(var(--u)*.9) #000b)}
.panel::before,.panel::after,.book::before,.book::after{content:"";position:absolute;left:50%;z-index:1;pointer-events:none;
  width:calc(var(--u)*108*var(--qk));height:calc(var(--u)*46*var(--qk));margin-left:calc(var(--u)*-54*var(--qk));background:center/100% 100% no-repeat}
.panel::before,.book::before{top:0;background-image:url(img/ui/panel_gem_t.webp)}
.panel::after,.book::after{bottom:0;background-image:url(img/ui/panel_gem_b.webp)}

/* 화면 제목 — 월계수 제목 판. 양끝(월계수)은 그대로 두고 가운데만 글 길이에 맞춰 늘린다 */
.cast-head h1{position:relative;gap:0;justify-content:center;min-width:calc(var(--u)*3.4);padding:0 calc(var(--u)*1.1);font-size:max(22px,calc(var(--u)*1.95));text-shadow:0 2px 0 #1B1030,0 0 calc(var(--u)*.7) #8A4DFFaa;
  border:0 solid transparent;border-image:url(img/ui/title.webp) 0 215 0 215 fill/0 calc(var(--u)*4.2)/calc(var(--u)*.95) calc(var(--u)*3.3) stretch}
.cast-head h1::before,.cast-head h1::after{display:none}
.cast-head p{position:relative;top:calc(var(--u)*.6)}
.parch.spc .sp-head{padding-right:calc(var(--u)*4.4)}

/* 탭 단추 */
.tab{clip-path:none;border:0;border-radius:0;background:url(img/ui/tab_off.webp) center/100% 100% no-repeat;color:#EADFFF;padding-top:.62em;padding-bottom:.42em}
.tab:hover{color:#FFE7A8;filter:brightness(1.15)}
.tab.on{background:url(img/ui/tab_on.webp) center/100% 100% no-repeat;color:#3A2206;text-shadow:0 1px 0 #FFF3C4}

/* 가이드 묶음 이름 — 리본 */
.parch.gd h2{display:block;box-sizing:border-box;width:13.4em;max-width:100%;height:2.25em;line-height:2.25em;padding:0 2.2em 0 2em;clip-path:none;white-space:nowrap;
  background:url(img/ui/ribbon.webp) left center/100% 100% no-repeat}

/* 봉랍 */
.seal,.parch .seal{top:calc(var(--u)*-1.25);width:calc(var(--u)*3.5);height:calc(var(--u)*3.6);border-radius:0;box-shadow:none;background:url(img/ui/seal.webp) center/contain no-repeat}

/* 아이콘 */
.topbar nav a{display:inline-flex;align-items:center;gap:.4em}
.mi{width:1.85em;height:1.85em;flex:none;margin:-.3em 0}
.sp header{justify-content:flex-start}
.sp header .badge{margin-left:auto}
.spi{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);flex:none;margin:calc(var(--u)*-.4) 0}
.stat-legend li{align-items:center}
.sti{width:1.9em;height:1.9em;flex:none;margin:-.45em 0 -.45em -.6em}
.jhead{align-items:center}
.jico{width:calc(var(--u)*3);height:calc(var(--u)*3);flex:none;margin:calc(var(--u)*-.5) 0}
.jt{position:relative}
.jt .jti{position:absolute;left:calc(var(--u)*.05);top:calc(var(--u)*.05);width:calc(var(--u)*2.1);height:calc(var(--u)*2.1);aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 1px 2px #000c)}
.stepi{width:calc(var(--u)*2.5);height:calc(var(--u)*2.5);margin:calc(var(--u)*-.3) 0}

@media (max-width:900px){.mi{display:none}}