/* 볼따구 모음집 — adas2 다크 고정 위의 화면 스타일 */
:root {
  --p-순수: #4fae64; --p-냉정: #4f8fd0; --p-광기: #d0566f; --p-활발: #c9a93a; --p-우울: #9a5fc4; --p-공명: #6f7a8c;
  --dlg-h: min(780px, calc(100dvh - 48px));
  --nav-w: 216px;
  --glass: rgba(24, 22, 20, .62);
}
* { box-sizing: border-box; }
/* 모달이 열려도 문서 스크롤바를 그대로 둔다(adas2 가 넣는 overflow:hidden 과 오른쪽 여백을 무시) */
html { color-scheme: dark; overflow-y: scroll !important; scrollbar-gutter: stable; }
body { margin: 0; padding-right: 0 !important; background: #141210; color: var(--a2-text); font-family: var(--a2-font); font-weight: var(--a2-weight); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; }

/* 배경: 흐린 트릭컬 마을 */
.bg { position: fixed; inset: -48px; z-index: -1; background: url(assets/bg-village.webp) center / cover no-repeat; filter: blur(26px) saturate(1.15); }
.bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20, 18, 16, .70), rgba(20, 18, 16, .84)); }

.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100dvh; }

/* 왼쪽 사이드바 */
.nav { position: sticky; top: 0; height: 100dvh; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav button { all: unset; box-sizing: border-box; position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; height: 44px; padding: .12em 14px 0; border-radius: var(--a2-radius); cursor: pointer; color: var(--a2-text-muted); font-size: 14.5px; -webkit-tap-highlight-color: transparent; transition: color .12s; }
.nav button svg { flex: none; width: 17px; height: 17px; margin-top: -.12em; }
.nav button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: var(--a2-ring) solid transparent; transition: background-color .12s, border-color .12s, inset .18s cubic-bezier(.34, 1.4, .64, 1); }
.nav button:hover { color: var(--a2-text); }
.nav button:hover::before { background: var(--a2-fill-hover); }
.nav button:active::before { inset: 3px; }
.nav button[aria-current="page"] { color: var(--a2-text); font-weight: var(--a2-weight-strong); }
.nav button[aria-current="page"]::before { border-color: var(--a2-accent); background: var(--a2-accent-soft); }
.nav button:focus-visible::before { border-color: var(--a2-accent); }
.nav .n { margin-left: auto; font-size: 12px; color: var(--a2-text-faint); font-weight: var(--a2-weight); }

.page { min-width: 0; padding: 0 28px; }
.top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.top::before { content: ''; position: absolute; inset: 0 -28px; z-index: -1; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.top .q { width: min(320px, 100%); }
.acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.acts a2-button { position: relative; }
.fdot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--a2-accent); color: var(--a2-on-accent); font-size: 11px; line-height: 18px; text-align: center; font-weight: var(--a2-weight-strong); pointer-events: none; }

/* 진행 중인 이벤트 배너 줄 */
.live { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.live:empty { display: none; }
.ev { all: unset; box-sizing: border-box; position: relative; flex: none; width: 260px; aspect-ratio: 16 / 7; border-radius: var(--a2-radius); overflow: hidden; cursor: pointer; background: var(--a2-fill); transition: transform .18s cubic-bezier(.34, 1.4, .64, 1); }
.ev:hover { transform: translateY(-2px); }
.ev:active { transform: scale(.97); }
.ev img { width: 100%; height: 100%; object-fit: cover; }
.ev .shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(10, 9, 8, .82)); }
.ev .t { position: absolute; left: 12px; right: 12px; bottom: 9px; font-size: 13.5px; font-weight: var(--a2-weight-strong); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .left { position: absolute; left: 10px; top: 9px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: .1em 9px 0; border-radius: 7px; background: var(--a2-accent); color: var(--a2-on-accent); font-size: 12px; font-weight: var(--a2-weight-strong); font-variant-numeric: tabular-nums; }
.ev .left svg { width: 11px; height: 11px; margin-top: -.1em; }
.ev.done .left { background: rgba(20, 18, 16, .78); color: var(--a2-text-muted); }

/* 목록 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 18px 0 48px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { all: unset; box-sizing: border-box; position: relative; isolation: isolate; display: block; cursor: pointer; border-radius: var(--a2-radius-lg); border: var(--a2-ring) solid var(--a2-line); transition: border-color .12s; -webkit-tap-highlight-color: transparent; }
.card[hidden] { display: none; }
.card::before { content: ''; position: absolute; inset: var(--a2-gap); z-index: -1; border-radius: calc(var(--a2-radius-lg) - var(--a2-ring) - var(--a2-gap)); background: rgba(255, 255, 255, .05); transition: inset .18s cubic-bezier(.34, 1.4, .64, 1), background-color .12s; }
.card:hover { border-color: var(--a2-line-strong); }
.card:hover::before { background: rgba(255, 255, 255, .09); }
.card:active::before { inset: calc(var(--a2-gap) + 3px); }
.card:focus-visible { border-color: var(--a2-accent); }
.pic { position: relative; margin: var(--a2-gap); aspect-ratio: 1; border-radius: calc(var(--a2-radius-lg) - var(--a2-ring) - var(--a2-gap)) calc(var(--a2-radius-lg) - var(--a2-ring) - var(--a2-gap)) 4px 4px; overflow: hidden; background: rgba(255, 255, 255, .06); transition: margin .18s cubic-bezier(.34, 1.4, .64, 1); }
.card:active .pic { margin: calc(var(--a2-gap) + 3px); }
.pic > img { width: 100%; height: 100%; object-fit: contain; }
.pic.cover > img { object-fit: cover; }
.pic .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: var(--a2-weight-strong); color: var(--a2-text-faint); }
.nm { padding: 6px 10px 10px; font-size: 14px; font-weight: var(--a2-weight-strong); line-height: 1.35; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm small { display: block; font-weight: var(--a2-weight); font-size: 12px; color: var(--a2-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wide .pic { aspect-ratio: 16 / 7; }
.wide .nm { text-align: left; padding: 8px 14px 12px; }
.empty { text-align: center; color: var(--a2-text-muted); padding: 80px 0; }

/* 사도 카드: 테두리 있는 세로 일러스트가 곧 카드 */
.grid.apo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.apo-card { all: unset; box-sizing: border-box; position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.apo-card[hidden] { display: none; }
.apo-card .art2 { position: relative; aspect-ratio: 732 / 1024; border-radius: 0; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s; }
.apo-card .art2 > img.a { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); } /* 원본 일러스트의 둥근 투명 귀를 덮어 각지게 */
.apo-card:hover .art2 { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.apo-card:active .art2 { transform: scale(.96); }
.apo-card:focus-visible .art2 { outline: 2px solid var(--a2-accent); outline-offset: 3px; }
.apo-card .stars { position: absolute; left: 9%; top: 6%; color: #ffd54a; font-size: 12px; letter-spacing: -1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.apo-card .pi { position: absolute; right: 7%; top: 5%; width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.apo-card .plate { position: absolute; left: 3%; right: 3%; bottom: 2.5%; padding: 18px 6px 7px; border-radius: 0; background: linear-gradient(transparent, rgba(12, 10, 9, .8) 50%); text-align: center; }
.apo-card .plate b { display: block; font-size: 14px; font-weight: var(--a2-weight-strong); line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.apo-card .under { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--a2-text-muted); }
.apo-card .under i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); margin-top: -.1em; }

/* 필터 서랍 */
.fg { margin-bottom: 20px; }
.fg h4 { margin: 0 0 8px; font-size: 13px; color: var(--a2-text-muted); font-weight: var(--a2-weight); }
.fg .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tg { all: unset; box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: .1em 12px 0; border-radius: 10px; border: var(--a2-ring) solid var(--a2-line-strong); font-size: 13.5px; cursor: pointer; color: var(--a2-text-muted); transition: border-color .12s, color .12s; }
.tg::before { content: ''; position: absolute; inset: var(--a2-gap); z-index: -1; border-radius: 6px; transform: scale(.6); opacity: 0; background: var(--a2-accent-soft); transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), opacity .12s; }
.tg img { width: 18px; height: 18px; object-fit: contain; margin-top: -.1em; }
.tg:hover { color: var(--a2-text); }
.tg[aria-pressed="true"] { border-color: var(--a2-accent); color: var(--a2-text); font-weight: var(--a2-weight-strong); }
.tg[aria-pressed="true"]::before { transform: none; opacity: 1; }
.tg:focus-visible { border-color: var(--a2-accent); }

/* 상세: 일정한 크기, 왼쪽 고정 · 오른쪽 스크롤 */
#dlg { --w: 1100px; }
#dlg::part(panel) { height: var(--dlg-h); }
#dlg::part(body) { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 22px; }
.dx { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
.side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; }
.main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
.art { position: relative; aspect-ratio: 1; border-radius: var(--a2-radius); overflow: hidden; background: var(--a2-fill); flex: none; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.art.cover img { object-fit: cover; }
.art.banner { aspect-ratio: 16 / 9; }
.art.tall { aspect-ratio: 732 / 1024; width: 78%; align-self: center; background: none; border-radius: 0; }
.art.tall img { object-fit: cover; transform: scale(1.045); }
.side .quote { flex: none; margin: 0; }
.who .n { font-size: 22px; font-weight: var(--a2-weight-strong); line-height: 1.25; padding-top: .1em; }
.who .s { color: var(--a2-text-muted); font-size: 13.5px; }
.who .st { color: #ffd54a; font-size: 15px; letter-spacing: -1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: .1em 11px 0 8px; border-radius: 8px; background: var(--pc, var(--a2-fill-hover)); color: #fff; font-size: 13px; font-weight: var(--a2-weight-strong); white-space: nowrap; }
.chip.plain { background: var(--a2-fill-hover); color: var(--a2-text); padding-left: 11px; }
.chip img { width: 20px; height: 20px; object-fit: contain; margin-top: -.1em; }
.chip:not(:has(img)) { padding-left: 11px; }

.sec { padding-top: 4px; }
h3 { margin: 26px 0 12px; font-size: 15px; font-weight: var(--a2-weight-strong); }
h3:first-child { margin-top: 0; }
.intro { margin: 0 0 18px; white-space: pre-line; }
.quote { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--a2-radius); background: var(--a2-fill); color: var(--a2-text-muted); white-space: pre-line; font-size: 14px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; margin: 0; }
.facts div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--a2-line); min-width: 0; }
.facts dt { flex: none; width: 84px; color: var(--a2-text-muted); font-size: 13.5px; padding-top: .1em; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.facts.one { grid-template-columns: minmax(0, 1fr); }

.sk { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--a2-line); }
.sk:last-child { border-bottom: 0; }
.sk-ic { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--a2-fill); }
.sk-ic img { width: 100%; height: 100%; object-fit: contain; }
.sk-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sk-top b { font-size: 16px; font-weight: var(--a2-weight-strong); padding-top: .1em; }
.kind { font-size: 12px; font-weight: var(--a2-weight-strong); padding: 3px 8px 2px; border-radius: 6px; background: var(--a2-fill-hover); color: var(--a2-text-muted); }
.kind.on { background: var(--a2-accent); color: var(--a2-on-accent); }
.muted { color: var(--a2-text-muted); font-size: 13px; }
.desc { margin: 0; white-space: pre-line; }
.vals { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--a2-fill); font-size: 13.5px; white-space: pre-line; font-variant-numeric: tabular-nums; }
.vals b { font-weight: var(--a2-weight-strong); color: var(--a2-accent); margin-right: 6px; }
.sub { margin-top: 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 12px; background: var(--a2-fill); }
.sub img { width: 40px; height: 40px; object-fit: contain; }

.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl td { padding: 9px 4px; border-bottom: 1px solid var(--a2-line); text-align: right; }
.tbl td:first-child { text-align: left; color: var(--a2-text-muted); }
.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bar { padding: 10px 12px; border-radius: var(--a2-radius); background: var(--a2-fill); font-size: 13.5px; }
.bar i { display: flex; gap: 3px; margin-top: 6px; }
.bar i span { flex: 1; height: 6px; border-radius: 3px; background: var(--a2-fill-active); }
.bar i span.on { background: var(--a2-accent); }

.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.skin { border-radius: var(--a2-radius); background: var(--a2-fill); overflow: hidden; }
.skin img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--a2-fill-hover); }
.skin div { padding: 8px 12px 10px; font-size: 13.5px; }
.skin b { display: block; font-weight: var(--a2-weight-strong); }
.rows { display: flex; flex-direction: column; gap: 8px; }
button.row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--a2-fill); cursor: pointer; }
button.row:hover { background: var(--a2-fill-hover); }
.row img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--a2-fill-hover); }
.row b { display: block; font-weight: var(--a2-weight-strong); font-size: 14px; }
.row span { font-size: 13px; color: var(--a2-text-muted); }
.avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.av { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; font-size: 12.5px; text-align: center; }
.av img { width: 72px; aspect-ratio: 732 / 1024; object-fit: cover; border-radius: 0; clip-path: inset(2.2%); background: var(--a2-fill); transition: transform .18s cubic-bezier(.34, 1.4, .64, 1); }
.av:hover img { transform: translateY(-2px); }

.foot { padding: 20px 0 36px; border-top: 1px solid var(--a2-line); color: var(--a2-text-faint); font-size: 12.5px; }
.foot a { color: inherit; }

@media (max-width: 960px) {
  :root { --nav-w: 68px; }
  .nav { padding: 16px 10px; }
  .nav button { justify-content: center; padding: 0; }
  .nav button span, .nav .n { display: none; }
}
@media (max-width: 860px) {
  .dx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; overflow: visible; }
  .art, .art.tall { width: 96px; align-self: auto; }
  .side .who { flex: 1; min-width: 0; }
  .side .chips { width: 100%; }
  .side .extra { display: none; }
}
@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { position: fixed; z-index: 6; inset: auto 0 0 0; height: auto; flex-direction: row; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .nav button { flex: 1; height: 44px; }
  .page { padding: 0 14px 72px; }
  .top::before { inset: 0 -14px; }
  .top .q { width: auto; flex: 1 1 0; min-width: 0; }
  .acts { gap: 6px; }
  .acts #count { display: none; }
  .ev { width: 220px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .grid.apo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .apo-card .plate b { font-size: 12.5px; }
  .grid.wide { grid-template-columns: minmax(0, 1fr); }
  .nm { font-size: 13px; padding: 4px 6px 8px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .bars { grid-template-columns: minmax(0, 1fr); }
  .sk { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .sk-ic { width: 46px; height: 46px; }
  button.row { grid-template-columns: 88px minmax(0, 1fr); }
  .row img { width: 88px; }
}