/* ==========================================================================
   발바닥 투표 styles — self-contained replacement for the snax plugin CSS.

   The snax plugin used to ship FontAwesome and the .snax-voting layout.
   With snax retired, the theme hosts the font itself (glyphs are also used
   by g1-socials icons in the footer/author box via theme CSS overrides).
   ========================================================================== */

@font-face {
    font-family: "FontAwesome";
    src: url("../fonts/fontawesome-webfont.woff2") format("woff2"),
         url("../fonts/fontawesome-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* --------------------------------------------------------------------------
   Voting box
   -------------------------------------------------------------------------- */

.snax-voting {
    display: flex;
    align-items: center;
    gap: 12px;
}

.snax-voting-score {
    font-size: 14px;
    color: #555;
}

.snax-voting-score strong {
    font-size: 16px;
    color: #201b12;
}

/* The recommend box under single posts: centered column */

.snax-voting-container {
    margin: 2em 0;
    text-align: center;
}

.snax-voting-container .snax-voting {
    flex-direction: column;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Paw button
   -------------------------------------------------------------------------- */

/* !important: legacy theme CSS (a.snax-voting-upvote in styles.css, loaded
   after this file) sets display:block + a 16px/32px glyph on the anchor
   itself, breaking the centering — neutralize it. */
a.bmp-paw-vote {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid #201b12;
    border-radius: 50%;
    background: #fff;
    color: #201b12 !important; /* defend against contextual link colors */
    font: 0/0 a; /* kill stray text metrics from legacy font rules */
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

a.bmp-paw-vote:before {
    content: none !important; /* legacy anchor-level glyph off */
}

.bmp-paw-vote .snax-vote-icon {
    display: block;
    line-height: 1;
}

a.bmp-paw-vote:hover {
    background: #fff7da;
    transform: scale(1.06);
}

a.bmp-paw-vote .snax-vote-icon:before {
    /* display !important: legacy styles.css hides span.snax-vote-icon-caret:before
       ("Hide Snax Upvote" era — the old anchor-level glyph we now suppress) */
    display: block !important;
    font: 20px/1 FontAwesome !important;
    content: "\f1b0" !important; /* paw */
}

/* voted state — same yellow the old snax styling used.
   color !important: contextual link colors (e.g. webtoon pages use yellow
   links) repaint the glyph and it disappears against the yellow fill. */

a.bmp-paw-vote.snax-user-voted,
a.bmp-paw-vote.snax-user-voted:hover {
    background-color: #fcdd21;
    border-color: #201b12;
    color: #000 !important;
}

/* --------------------------------------------------------------------------
   Webtoon bottom navigation (dark bar) — compact button, light score text
   -------------------------------------------------------------------------- */

#webtoon-bottom-nav a.bmp-paw-vote {
    width: 36px;
    height: 36px;
    border-color: #fff;
}

#webtoon-bottom-nav a.bmp-paw-vote .snax-vote-icon:before {
    font-size: 15px !important;
}

#webtoon-bottom-nav .snax-voting {
    gap: 8px;
}

#webtoon-bottom-nav .snax-voting-score {
    color: #cfcfcf;
    white-space: nowrap;
}

#webtoon-bottom-nav .snax-voting-score strong {
    color: #fff;
}

/* small card variant */

.snax-voting-m a.bmp-paw-vote,
.snax-voting-s a.bmp-paw-vote,
.snax-voting-xs a.bmp-paw-vote {
    width: 36px;
    height: 36px;
}

.snax-voting-m a.bmp-paw-vote .snax-vote-icon:before,
.snax-voting-s a.bmp-paw-vote .snax-vote-icon:before,
.snax-voting-xs a.bmp-paw-vote .snax-vote-icon:before {
    font-size: 16px !important;
}