.page-diablo-database {
    --db-ink: #202226;
    --db-muted: #70737a;
    --db-line: #d8d3ca;
    --db-paper: #f5f2ec;
    --db-surface: #fffdfa;
    --db-dark: #22252a;
    --db-red: #b74d36;
    margin: 0;
    color: var(--db-ink);
    background: var(--db-paper);
    font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    line-height: 1.5;
}.page-diablo-database * { box-sizing: border-box; }.page-diablo-database a { color: inherit; text-decoration: none; }.page-diablo-database button,
.page-diablo-database input,
.page-diablo-database select { font: inherit; }.page-diablo-database img { max-width: 100%; }.page-diablo-database .db-shell { width: min(calc(100% - 48px), 1180px); margin-inline: auto; }.page-diablo-database .db-hero { color: #fff; background: #282427; border-bottom: 1px solid #3f393c; }.page-diablo-database .db-hero-inner { min-height: 184px; padding-block: 38px; display: flex; align-items: end; justify-content: space-between; gap: 50px; background: linear-gradient(90deg, rgba(40,36,39,.97), rgba(40,36,39,.74)), url("/assets/img/diablo4-pattern.svg") right 12% center / 360px auto no-repeat; }.page-diablo-database .db-hero p { margin: 0 0 8px; color: #df8d77; font: 800 9px/1 Arial, sans-serif; letter-spacing: .18em; }.page-diablo-database .db-hero h1 { margin: 0; font-size: clamp(29px, 4vw, 42px); line-height: 1.18; letter-spacing: -.055em; }.page-diablo-database .db-hero h1 + span { margin-top: 10px; display: block; color: #c7c3c4; font-size: 12px; }.page-diablo-database .db-hero dl { margin: 0; display: grid; grid-template-columns: repeat(3, 96px); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }.page-diablo-database .db-hero dl div { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,.17); }.page-diablo-database .db-hero dl div:last-child { border-right: 0; }.page-diablo-database .db-hero dt { color: #aaa7a9; font-size: 9px; }.page-diablo-database .db-hero dd { margin: 4px 0 0; font: 800 20px/1.2 Arial, sans-serif; }.page-diablo-database .db-content { min-height: 600px; padding-block: 34px 74px; }.page-diablo-database .db-tabs { display: flex; border-bottom: 1px solid #bbb6ad; }.page-diablo-database .db-tabs a { min-width: 116px; padding: 13px 22px; text-align: center; color: #73767b; border: 1px solid transparent; border-bottom: 0; font-size: 12px; font-weight: 750; }.page-diablo-database .db-tabs a.is-current { color: var(--db-ink); background: var(--db-surface); border-color: #bbb6ad; transform: translateY(1px); }.page-diablo-database .db-filter { padding: 18px; display: grid; grid-template-columns: minmax(260px, 1fr) 170px 170px 92px 55px; align-items: end; gap: 10px; background: var(--db-surface); border: 1px solid var(--db-line); border-top: 0; }.page-diablo-database .db-filter label { min-width: 0; display: grid; gap: 6px; }.page-diablo-database .db-filter label > span { color: #777a80; font-size: 9px; font-weight: 750; }.page-diablo-database .db-filter input,
.page-diablo-database .db-filter select { width: 100%; height: 39px; padding-inline: 11px; color: #303238; background: #fff; border: 1px solid #cbc6bd; border-radius: 0; outline: none; font-size: 11px; }.page-diablo-database .db-filter input:focus,
.page-diablo-database .db-filter select:focus { border-color: #4276af; box-shadow: 0 0 0 2px rgba(66,118,175,.15); }.page-diablo-database .db-filter button { height: 39px; color: #fff; background: var(--db-red); border: 0; cursor: pointer; font-size: 11px; font-weight: 750; }.page-diablo-database .db-filter > a { height: 39px; display: grid; place-items: center; color: #777a80; font-size: 10px; }.page-diablo-database .db-result-heading { min-height: 68px; display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--db-line); }.page-diablo-database .db-result-heading div { padding-bottom: 13px; display: flex; align-items: baseline; gap: 5px; }.page-diablo-database .db-result-heading strong { color: var(--db-red); font: 800 20px/1 Arial, sans-serif; }.page-diablo-database .db-result-heading span { font-size: 11px; font-weight: 700; }.page-diablo-database .db-result-heading small { padding-bottom: 14px; color: #92949a; font: 9px/1 Arial, sans-serif; }.page-diablo-database .db-grid { padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.page-diablo-database .db-card { min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); background: var(--db-surface); border: 1px solid var(--db-line); border-top: 3px solid #484b51; }.page-diablo-database .db-card.is-mythic { border-top-color: #987538; }.page-diablo-database .db-card-image { min-height: 148px; display: grid; place-items: center; background: #25282d; border-right: 1px solid var(--db-line); }.page-diablo-database .db-card-image img { width: 72px; height: 72px; object-fit: contain; image-rendering: auto; }.page-diablo-database .db-card-copy { min-width: 0; padding: 14px 14px 10px; }.page-diablo-database .db-card-copy > span { color: #9b573f; font-size: 9px; font-weight: 750; }.page-diablo-database .db-card-copy h2 { margin: 5px 0 8px; overflow: hidden; font-size: 14px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.page-diablo-database .db-card-copy p { margin: 0; display: -webkit-box; overflow: hidden; color: #75787e; font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.page-diablo-database .db-card footer { grid-column: 1 / -1; min-height: 41px; padding-inline: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f1eee8; border-top: 1px solid var(--db-line); color: #777980; font-size: 9px; }.page-diablo-database .db-card footer a { color: #414449; font-weight: 750; }.page-diablo-database .db-card footer b { margin-left: 5px; color: var(--db-red); font-size: 14px; }.page-diablo-database .db-card a:focus-visible { outline: 3px solid #5f91c6; outline-offset: -2px; }.page-diablo-database .db-empty { margin-top: 14px; min-height: 240px; display: grid; place-content: center; text-align: center; background: var(--db-surface); border: 1px solid var(--db-line); }.page-diablo-database .db-empty strong { font-size: 18px; }.page-diablo-database .db-empty p { margin: 7px 0 0; color: var(--db-muted); font-size: 11px; }.page-diablo-database .db-pagination { margin-top: 28px; display: flex; justify-content: center; gap: 5px; }.page-diablo-database .db-pagination a { width: 36px; height: 36px; display: grid; place-items: center; color: #65686d; background: #fff; border: 1px solid var(--db-line); font: 11px/1 Arial, sans-serif; }.page-diablo-database .db-pagination a.is-current { color: #fff; background: var(--db-red); border-color: var(--db-red); }

@media (max-width: 980px) {.page-diablo-database .db-filter { grid-template-columns: minmax(240px, 1fr) 160px 160px 82px; }.page-diablo-database .db-filter > a { display: none; }.page-diablo-database .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {.page-diablo-database .db-shell { width: min(calc(100% - 28px), 1180px); }.page-diablo-database .db-hero-inner { min-height: 210px; padding-block: 30px; display: grid; gap: 22px; }.page-diablo-database .db-hero dl { grid-template-columns: repeat(3, 1fr); width: 100%; }.page-diablo-database .db-filter { grid-template-columns: 1fr 1fr; }.page-diablo-database .db-filter .db-search { grid-column: 1 / -1; }.page-diablo-database .db-filter button { grid-column: 1 / -1; }.page-diablo-database .db-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {.page-diablo-database .db-hero h1 { font-size: 30px; }.page-diablo-database .db-hero h1 + span { font-size: 10px; }.page-diablo-database .db-hero dl div { padding: 11px 9px; }.page-diablo-database .db-content { padding-top: 24px; }.page-diablo-database .db-tabs a { flex: 1; min-width: 0; }.page-diablo-database .db-filter { padding: 13px; grid-template-columns: 1fr; }.page-diablo-database .db-filter .db-search,
.page-diablo-database .db-filter button { grid-column: auto; }.page-diablo-database .db-result-heading small { display: none; }.page-diablo-database .db-card { grid-template-columns: 82px minmax(0, 1fr); }.page-diablo-database .db-card-image { min-height: 138px; }.page-diablo-database .db-card-image img { width: 64px; height: 64px; }
}