/* PNODEX 서버 홍보 게시판. */
.pnx-server-list,
.pnx-server-write,
.pnx-server-view {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    color: #1d2433;
    box-sizing: border-box
}

.pnx-board-head {
    margin-bottom: 24px
}

.pnx-board-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px
}

.pnx-board-kicker {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #5268e8
}

.pnx-board-head h2,
.pnx-server-hero h1 {
    margin: 0;
    font-size: clamp(26px, 4vw, 25px);
    line-height: 1.15;
    color: #121827
}

.pnx-board-head p {
    margin: 10px 0 0;
    color: #697386
}

.pnx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.pnx-btn-primary {
    background: #4056d6;
    color: #fff
}

.pnx-btn-outline {
    border-color: #d8ddeb;
    background: #fff;
    color: #29324a
}

.pnx-btn-muted {
    background: #eef1f7;
    color: #374159
}

.pnx-category-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 18px;
    padding-bottom: 4px
}

.pnx-category-nav a {
    flex: none;
    padding: 9px 14px;
    border: 1px solid #e1e5ef;
    border-radius: 999px;
    background: #fff;
    color: #586176;
    text-decoration: none
}

.pnx-category-nav a.is-active {
    border-color: #4056d6;
    background: #4056d6;
    color: #fff
}

.pnx-server-search {
    display: grid;
    grid-template-columns: 170px 1fr 90px;
    gap: 8px;
    margin-bottom: 22px
}

.pnx-server-search select,
.pnx-server-search input,
.pnx-server-search button,
.pnx-field input,
.pnx-field select {
    min-height: 46px;
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    background: #fff;
    padding: 0 13px;
    font: inherit;
    color: #252c3b
}

.pnx-server-search button {
    border-color: #222d4f;
    background: #222d4f;
    color: #fff;
    font-weight: 700
}

.pnx-list-check-all {
    margin-bottom: 10px;
    color: #7a8498;
    font-size: 13px
}

.pnx-server-table {
    border-top: 2px solid #273456;
    border-bottom: 1px solid #dfe5ee
}

.pnx-server-table-head,
.pnx-server-row {
    display: grid;
    grid-template-columns: 70px 112px 130px 116px minmax(260px, 1fr) 128px 72px;
    align-items: center
}

.pnx-server-table-head:has(.pnx-col-check),
.pnx-server-row:has(.pnx-col-check) {
    grid-template-columns: 38px 70px 112px 130px 116px minmax(260px, 1fr) 128px 72px
}

.pnx-server-table-head {
    min-height: 46px;
    background: #f7f8fb;
    color: #616c81;
    font-size: 12px;
    font-weight: 700;
    text-align: center
}

.pnx-server-row {
    min-height: 62px;
    border-top: 1px solid #edf0f5;
    background: #fff;
    transition: background .18s
}

.pnx-server-row:hover {
    background: #fafbff
}

.pnx-server-row.is-notice {
    background: #fff8eb
}

.pnx-server-row.is-pinned {
    background: #f9f9ff
}

.pnx-server-row.is-bumped {
    background: #fbfdff
}

.pnx-server-row.is-current {
    box-shadow: inset 3px 0 #5368e8
}

.pnx-server-row>span {
    min-width: 0;
    padding: 11px 10px;
    box-sizing: border-box
}

.pnx-col-num,
.pnx-col-game,
.pnx-col-version,
.pnx-col-open,
.pnx-col-writer,
.pnx-col-hit {
    text-align: center
}

.pnx-col-subject {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden
}

.pnx-server-subject {
    overflow: hidden;
    min-width: 0;
    color: #151d30;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pnx-game-label {
    display: inline-flex;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef1ff;
    color: #4056cc;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pnx-col-version,
.pnx-col-open,
.pnx-col-writer,
.pnx-col-hit {
    color: #7a8498;
    font-size: 12px
}

.pnx-list-number {
    color: #9aa3b4;
    font-size: 12px;
    font-weight: 700
}

.pnx-list-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800
}

.pnx-list-badge.is-notice {
    background: #e33924
}

.pnx-list-badge.is-pin {
    background: #5e54d8
}

.pnx-list-badge.is-bump {
    background: #168a78
}

.pnx-server-status {
    flex: none;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f0f2f6;
    color: #697386;
    font-size: 10px;
    font-weight: 700
}

.pnx-comment-count {
    flex: none;
    color: #6946ed;
    font-size: 12px;
    font-weight: 800
}

.pnx-hot-server {
    position: relative;
    display: inline-flex;
    flex: none;
    overflow: hidden;
    height: 22px;
    align-items: center;
    padding: 0 8px;
    border-radius: 5px;
    background: #ffe7b5;
    color: #a85b00;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -.02em;
    isolation: isolate
}

.pnx-hot-server::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hot-progress);
    background: linear-gradient(90deg, #ff5b28, #ffae32);
    content: "";
    z-index: -1;
    transition: width .25s
}

.pnx-hot-server span {
    mix-blend-mode: multiply
}

.pnx-empty-state {
    padding: 70px 20px;
    text-align: center;
    color: #6c7588
}

.pnx-empty-state strong {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    color: #2c3447
}

.pnx-pagination {
    margin-top: 28px;
    text-align: center
}

.pnx-list-admin-actions {
    display: flex;
    gap: 7px;
    margin-top: 14px
}

.pnx-list-admin-actions button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    background: #fff;
    color: #4f596d;
    font-weight: 700
}

@media(max-width:980px) {
    .pnx-server-table-head {
        display: none
    }

    .pnx-server-row,
    .pnx-server-row:has(.pnx-col-check) {
        grid-template-columns: 34px 74px minmax(0, 1fr) 62px;
        grid-template-areas: "check num subject hit" "check game subject hit";
        padding: 8px 0
    }

    .pnx-server-row:not(:has(.pnx-col-check)) {
        grid-template-columns: 74px minmax(0, 1fr) 62px;
        grid-template-areas: "num subject hit" "game subject hit"
    }

    .pnx-col-check {
        grid-area: check
    }

    .pnx-col-num {
        grid-area: num
    }

    .pnx-col-game {
        grid-area: game
    }

    .pnx-col-subject {
        grid-area: subject;
        flex-wrap: wrap
    }

    .pnx-col-hit {
        grid-area: hit
    }

    .pnx-col-version,
    .pnx-col-open,
    .pnx-col-writer {
        display: none
    }

    .pnx-server-subject {
        width: 100%;
        font-size: 14px
    }

    .pnx-col-num,
    .pnx-col-game,
    .pnx-col-hit {
        text-align: center
    }
}

@media(max-width:640px) {

    .pnx-server-list,
    .pnx-server-write,
    .pnx-server-view {
        padding: 20px 14px 46px
    }

    .pnx-board-head-row {
        align-items: flex-start;
        flex-direction: column
    }

    .pnx-board-head h2 {
        font-size: 30px
    }

    .pnx-server-search {
        grid-template-columns: 1fr 72px
    }

    .pnx-server-search select {
        grid-column: 1/-1
    }

    .pnx-category-nav {
        margin-right: -14px;
        padding-right: 14px
    }

    .pnx-server-row,
    .pnx-server-row:has(.pnx-col-check) {
        grid-template-columns: 28px 58px minmax(0, 1fr);
        grid-template-areas: "check num subject" "check game subject"
    }

    .pnx-server-row:not(:has(.pnx-col-check)) {
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas: "num subject" "game subject"
    }

    .pnx-col-hit {
        display: none
    }

    .pnx-server-row>span {
        padding: 8px 5px
    }

    .pnx-hot-server {
        height: 20px;
        padding: 0 6px;
        font-size: 9px
    }
}

.pnx-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.pnx-field {
    margin-bottom: 18px
}

.pnx-field-full {
    grid-column: 1/-1
}

.pnx-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #30384a
}

.pnx-field label strong {
    color: #e34b5f
}

.pnx-field input,
.pnx-field select {
    width: 100%;
    box-sizing: border-box
}

.pnx-help {
    margin: -2px 0 9px;
    color: #7a8395;
    font-size: 13px
}

.pnx-file-field {
    padding: 15px;
    border: 1px solid #e5e8f0;
    border-radius: 12px
}

.pnx-file-delete {
    margin-top: 10px !important;
    font-weight: 400 !important
}

.pnx-policy-box {
    margin: 20px 0;
    padding: 15px 17px;
    border: 1px solid #f0d8b8;
    border-radius: 12px;
    background: #fff9ef;
    color: #77542d
}

.pnx-form-actions,
.pnx-view-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px
}

.pnx-server-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f3f5ff, #f7f8fb)
}

.pnx-server-hero h1 {
    margin-top: 12px
}

.pnx-server-author {
    margin: 12px 0 0;
    color: #737c90
}

.pnx-server-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.pnx-server-summary {
    margin: 20px 0
}

.pnx-server-summary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e3e7ef;
    border-radius: 15px;
    background: #e3e7ef
}

.pnx-server-summary dl div {
    padding: 15px;
    background: #fff
}

.pnx-server-summary dt {
    margin-bottom: 5px;
    color: #858ea0;
    font-size: 12px
}

.pnx-server-summary dd {
    margin: 0;
    color: #252d40;
    font-weight: 700
}

.pnx-server-files {
    display: grid;
    gap: 12px;
    margin: 24px 0
}

.pnx-server-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 14px
}

.pnx-server-content {
    min-height: 220px;
    padding: 28px 4px;
    font-size: 16px;
    line-height: 1.8
}

.pnx-download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #dfe4ef;
    border-radius: 14px;
    background: #f8f9fc
}

.pnx-download-box p {
    margin: 6px 0 0;
    color: #747d90
}

.pnx-comment-wrap {
    margin-top: 34px
}

@media (max-width:980px) {
    .pnx-server-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .pnx-server-summary dl {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .pnx-server-hero {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (max-width:640px) {

    .pnx-server-list,
    .pnx-server-write,
    .pnx-server-view {
        padding: 18px 14px 40px
    }

    .pnx-board-head-row {
        align-items: flex-start;
        flex-direction: column
    }

    .pnx-board-head-row .pnx-btn {
        width: 100%
    }

    .pnx-server-search {
        grid-template-columns: 1fr 76px
    }

    .pnx-server-search select {
        grid-column: 1/-1
    }

    .pnx-server-grid {
        grid-template-columns: 1fr
    }

    .pnx-form-grid {
        grid-template-columns: 1fr
    }

    .pnx-field-full {
        grid-column: auto
    }

    .pnx-server-hero {
        padding: 21px
    }

    .pnx-server-actions,
    .pnx-server-actions .pnx-btn {
        width: 100%
    }

    .pnx-server-summary dl {
        grid-template-columns: 1fr 1fr
    }

    .pnx-download-box {
        align-items: flex-start;
        flex-direction: column
    }

    .pnx-download-box .pnx-btn {
        width: 100%
    }

    .pnx-form-actions,
    .pnx-view-actions {
        flex-wrap: wrap
    }

    .pnx-form-actions .pnx-btn,
    .pnx-view-actions .pnx-btn {
        flex: 1
    }
}

/* 서버 상세 상단 배경과 외부 링크 버튼 정리. */
.pnx-server-hero {
    border: 1px solid #dce4ff;
    background:
        radial-gradient(circle at 88% 12%, rgba(123, 97, 255, .16), transparent 34%),
        linear-gradient(135deg, #f4f7ff 0%, #eef2ff 52%, #f8f5ff 100%);
    box-shadow: 0 18px 44px rgba(61, 76, 142, .09);
}

.pnx-server-actions .pnx-btn {
    min-width: 132px;
    border: 0;
    box-shadow: 0 8px 20px rgba(42, 53, 105, .14);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pnx-server-actions .pnx-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(42, 53, 105, .2);
    filter: brightness(1.04);
}

.pnx-btn-download {
    background: linear-gradient(135deg, #08a88a, #20c3a1);
    color: #fff
}

.pnx-btn-homepage {
    background: linear-gradient(135deg, #4d5fdb, #6d58e7);
    color: #fff
}

.pnx-btn-discord {
    background: linear-gradient(135deg, #5865f2, #7b61ff);
    color: #fff
}

.pnx-server-summary dl {
    border-color: #dfe5f5;
    background: #dfe5f5;
    box-shadow: 0 10px 28px rgba(55, 69, 125, .06);
}

.pnx-server-summary dl div {
    background: #fbfcff
}

.pnx-policy-box {
    border-color: #dfe5fb;
    background: linear-gradient(135deg, #f7f9ff, #f3f5ff);
    color: #596580;
}

@media(max-width:640px) {
    .pnx-server-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px
    }

    .pnx-server-actions .pnx-btn {
        min-width: 0;
        width: 100%
    }
}

/* PNODEX 포인트 색상과 서버 목록 세부 정렬. */
.pnx-btn-primary,
.pnx-category-nav a.is-active {
    border-color: #9823f5;
    background: #9823f5;
    color: #fff
}

.pnx-btn-primary:hover,
.pnx-category-nav a.is-active:hover {
    background: #8618d9
}

.pnx-server-table-head .pnx-col-subject,
.pnx-server-row .pnx-col-subject {
    padding-left: 22px
}

.pnx-col-version {
    color: #4c566d;
    font-weight: 700
}

.pnx-game-label {
    font-weight: 700
}

.pnx-game-label.is-lineage {
    background: #f1eaff;
    color: #6e2cc8
}

.pnx-game-label.is-lineage2 {
    background: #e8f0ff;
    color: #315fc0
}

.pnx-game-label.is-maple {
    background: #fff0dc;
    color: #b35d09
}

.pnx-game-label.is-baram {
    background: #e6f8ef;
    color: #17764b
}

.pnx-game-label.is-mu {
    background: #fde9f2;
    color: #b12e69
}

.pnx-game-label.is-darkeden {
    background: #ececf2;
    color: #3e4150
}

.pnx-game-label.is-etc {
    background: #eef1f6;
    color: #596276
}

.pnx-writer-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0
}

.pnx-member-icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: cover
}

/* 서버 상세 주요 버튼 색상 통일. */
.pnx-server-actions .pnx-btn-homepage,
.pnx-server-actions .pnx-btn-discord {
    background: #9823f5;
    color: #fff;
    font-weight: 600
}

.pnx-server-actions .pnx-btn-homepage:hover,
.pnx-server-actions .pnx-btn-discord:hover {
    background: #8618d9
}

.pnx-view-actions .pnx-btn-primary {
    background: #9823f5;
    color: #fff
}

/* 등록 이미지 레이어 보기. */
.pnx-server-image {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: zoom-in
}

.pnx-server-image img {
    transition: transform .2s ease, filter .2s ease
}

.pnx-server-image:hover img {
    transform: scale(1.006);
    filter: brightness(.97)
}

.pnx-image-viewer[hidden] {
    display: none
}

.pnx-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center
}

.pnx-image-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 19, .88);
    backdrop-filter: blur(5px)
}

.pnx-image-viewer-dialog {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box
}

.pnx-image-viewer-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.pnx-image-viewer-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.pnx-image-viewer-tools {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    display: flex;
    gap: 4px
}

.pnx-image-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d5d8e2;
    cursor: pointer;
    transition: color .18s ease, background .18s ease
}

.pnx-image-tool:hover,
.pnx-image-tool:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    outline: none
}

.pnx-image-tool img {
    width: 22px;
    height: 22px
}

.pnx-image-viewer-open {
    overflow: hidden
}

.pnx-image-viewer-stage:fullscreen {
    background: #070a13
}

.pnx-image-viewer-stage:fullscreen img {
    max-width: 100vw;
    max-height: 100vh
}

@media(max-width:980px) {
    .pnx-server-row .pnx-col-subject {
        padding-left: 10px
    }
}

@media(max-width:640px) {
    .pnx-image-viewer-dialog {
        padding: 10px
    }

    .pnx-image-viewer-tools {
        top: 10px;
        right: 10px
    }

    .pnx-image-tool {
        width: 40px;
        height: 40px
    }
}

/* 서버 등록 버튼 글자색 고정. */
.pnx-board-head-row .pnx-btn-primary,
.pnx-view-actions .pnx-btn-primary,
.pnx-form-actions .pnx-btn-primary {
    color: #fff;
}

.pnx-board-head-row .pnx-btn-primary:visited,
.pnx-view-actions .pnx-btn-primary:visited,
.pnx-form-actions .pnx-btn-primary:visited {
    color: #fff;
}

/* 서버 상세 작성자 평가와 활동 경험치. */
.pnx-server-author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.pnx-server-author-row .pnx-server-author {
    margin: 0
}

.pnx-server-votes {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.pnx-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(152, 35, 245, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #59627a;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(80, 54, 132, .06);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.pnx-vote-btn strong {
    font-size: 12px;
    font-weight: 700
}

.pnx-vote-btn.is-good {
    border-color: #c9dcff;
    background: #eaf2ff;
    color: #245bb8
}

.pnx-vote-btn.is-nogood {
    border-color: #ffd1da;
    background: #fff0f3;
    color: #c23e59
}

.pnx-vote-btn:hover {
    transform: translateY(-1px)
}

.pnx-vote-btn.is-good:hover {
    border-color: #9fc2ff;
    background: #dceaff;
    color: #174b9d
}

.pnx-vote-btn.is-nogood:hover {
    border-color: #ffadbc;
    background: #ffe2e8;
    color: #a92d47
}

.pnx-vote-btn.is-disabled {
    opacity: .72;
    cursor: default
}

.pnx-server-side {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 18px;
    min-width: 430px
}

.pnx-activity-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 310px;
    padding: 11px 15px;
    border: 1px solid rgba(152, 35, 245, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 24px rgba(91, 61, 151, .08);
    backdrop-filter: blur(8px);
}

.pnx-activity-emblem {
    position: relative;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: conic-gradient(#9823f5 var(--activity-progress), #e9e3f2 0);
    box-shadow: 0 7px 18px rgba(152, 35, 245, .18);
}

.pnx-activity-emblem::before {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #f5effc);
    content: "";
}

.pnx-activity-core {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #9823f5;
    font-size: 18px;
    font-weight: 900;
}

.pnx-activity-node {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #d9d1e8;
    box-shadow: 0 2px 6px rgba(52, 31, 92, .16);
}

.pnx-activity-node.is-filled {
    background: #9823f5
}

.pnx-activity-node.node-1 {
    top: -3px;
    left: 24px
}

.pnx-activity-node.node-2 {
    top: 6px;
    right: 2px
}

.pnx-activity-node.node-3 {
    top: 24px;
    right: -3px
}

.pnx-activity-node.node-4 {
    right: 2px;
    bottom: 6px
}

.pnx-activity-node.node-5 {
    bottom: -3px;
    left: 24px
}

.pnx-activity-node.node-6 {
    bottom: 6px;
    left: 2px
}

.pnx-activity-node.node-7 {
    top: 24px;
    left: -3px
}

.pnx-activity-node.node-8 {
    top: 6px;
    left: 2px
}

.pnx-activity-info {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: 2px 10px;
    min-width: 0
}

.pnx-activity-info span {
    color: #707993;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em
}

.pnx-activity-info strong {
    grid-row: 1/3;
    grid-column: 2;
    color: #5e19a1;
    font-size: 18px;
    font-weight: 800
}

.pnx-activity-info small {
    color: #8b8399;
    font-size: 11px
}

@media(max-width:980px) {
    .pnx-server-side {
        align-items: stretch;
        width: 100%;
        min-width: 0
    }

    .pnx-activity-card {
        align-self: flex-start;
        min-width: 0
    }
}

@media(max-width:640px) {
    .pnx-server-author-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px
    }

    .pnx-activity-card {
        width: 100%;
        box-sizing: border-box
    }

    .pnx-server-votes {
        width: 100%
    }

    .pnx-vote-btn {
        flex: 1;
        justify-content: center
    }
}

/* 이미지 최적화 표시와 레이어 도구 가독성. */
.pnx-server-files {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

.pnx-server-image img {
    width: auto;
    max-width: 100%;
    max-height: 860px;
    object-fit: contain;
}

.pnx-image-tool {
    border: 1px solid rgba(255, 255, 255, .48);
    background: rgba(245, 247, 252, .24);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
    backdrop-filter: blur(8px);
}

.pnx-image-tool:hover,
.pnx-image-tool:focus-visible {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .36);
}

.pnx-image-tool img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}


/* 상세 이미지 실제 표시 크기와 상단 회원아이콘. */
.pnx-server-author {
    display: flex;
    align-items: center;
    gap: 7px
}

.pnx-server-author .pnx-author-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover
}

.pnx-server-author>span {
    min-width: 0
}

.pnx-server-image {
    display: flex;
    justify-content: center
}

.pnx-server-image img {
    width: min(100%, 900px);
    max-width: 900px;
    max-height: 720px
}

@media(max-width:640px) {
    .pnx-server-image img {
        width: 100%;
        max-width: 100%;
        max-height: 560px
    }
}

/* 추천·비추천 중앙 안내 레이어. */
.pnx-vote-btn {
    font-family: inherit;
    cursor: pointer
}

.pnx-vote-btn[aria-busy="true"] {
    opacity: .6;
    pointer-events: none
}

.pnx-vote-layer[hidden] {
    display: none
}

.pnx-vote-layer {
    position: fixed;
    inset: 0;
    z-index: 100100;
    font-family: "Pretendard", sans-serif;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box
}

.pnx-vote-layer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 18, 30, .56);
    cursor: default;
    backdrop-filter: blur(3px)
}

.pnx-vote-layer-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 390px);
    padding: 30px 26px 24px;
    border: 1px solid rgba(152, 35, 245, .16);
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 24px 70px rgba(30, 18, 54, .28)
}

.pnx-vote-layer-dialog>strong {
    display: block;
    color: #27213a;
    font-size: 20px;
    font-weight: 800
}

.pnx-vote-layer-dialog>p {
    margin: 13px 0 22px;
    color: #646078;
    font-size: 14px;
    line-height: 1.7;
    word-break: keep-all
}

.pnx-vote-layer-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b8796;
    font-size: 26px;
    line-height: 1;
    cursor: pointer
}

.pnx-vote-layer-login,
.pnx-vote-layer-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box
}

.pnx-vote-layer-login {
    margin-right: 6px;
    background: #9823f5;
    color: #fff
}

.pnx-vote-layer-login:link,
.pnx-vote-layer-login:visited,
.pnx-vote-layer-login:hover,
.pnx-vote-layer-login:focus,
.pnx-vote-layer-login:active {
    color: #fff
}

.pnx-vote-layer-confirm {
    background: #f0edf4;
    color: #4f495c
}

.pnx-vote-layer-open {
    overflow: hidden
}

@media(max-width:640px) {
    .pnx-vote-layer {
        padding: 16px
    }

    .pnx-vote-layer-dialog {
        padding: 28px 20px 22px;
        border-radius: 17px
    }
}