/*---------------------------------------------------------
    HERA AUTH POPUPS — 로그인 · 회원가입 · 테더회원가입

    The companion to `screens.css`, and the same bargain. hera's export ships
    `popup_login.css` and `popup_signup.css` and they describe exactly the two
    cards restated below — a 350px login card and a 430px signup card, both on
    a 16px radius, both in the same blue. They are still not loaded, because
    both open with

        :root { --bg-dark: …; --primary-blue: …; }
        input, select { background: … !important; border: … !important; }

    and the signup sheet's bare `input, select` rules carry `!important`, so
    loading it would repaint every box on every route the skin serves — the
    deposit amount field, the game search, the inquiry form. `sports_csr.css`
    is the standing proof of what that does.

    **Every selector in this file begins with `.hera-screen`**, which is what
    makes it safe to load globally: on a route that renders no `hera-screen`
    root, not one rule in here can match. The auth views wrap themselves in
    `.hera-screen .hera-auth` for exactly that reason, and `.hera-auth` then undoes
    the page box `.hera-screen` sets up, since a popup is not a page.

    Variables, buttons, alerts, hints and notices all come from `screens.css`
    and are inherited rather than restated. This file is only the two cards and
    the boxes in them.

    The breakpoint is the site's phone one. The signup sheet broke at 600px,
    which is a width of its own — 공지사항 next to it would still be a table.
    See `lib/table-cards.ts`, and the 「phone」 block at the foot of this file
    for what the login card does, which the export never said.

    **There is a third popup in `side-nav-public.ejs` and it is not here.**
    `popup_services.css` draws a twelve-tile OUR SERVICES grid, and nothing in
    the export ever opens it: the only `popup.open` calls in the archive are
    `login_popup`, `join_popup` and six `popup_advertisement_*`. Every tile's
    handler is `location.replace('')`, and the `data-aos-anchor="#main_services"`
    on each points at a section no page in this archive has. It is a marketing
    landing page's furniture left in a partial. Porting it would be porting a
    dead end whose live equivalent is the header's own nav.
---------------------------------------------------------*/

/* --- the popup root ------------------------------------------------------
   `.hera-screen` is a page: 1600px wide, 30px of vertical margin, 20px of
   padding. A popup is none of those, and left as-is the wrapper would add
   60px of empty page under whatever is showing behind the overlay.        */

.hera-screen.hera-auth {
    max-width: none;
    margin: 0;
    padding: 0;
}

/*
   The ground, which is `popup.css:1-11`'s `#popup` — the export's own overlay,
   and the one thing on this surface that was never restated because it lives in
   a sheet the popups do not link. It darkens to **0.5** and blurs 5px; ours was
   a flat 0.75 with no blur, which is both darker and deader: the lobby behind
   went to near-black instead of staying legibly there under a frost.

   The blur is a full-viewport `backdrop-filter` over a lobby full of artwork,
   which is not free — it is what made the headless measuring pass time out at
   DPR 2. It is what the original shipped, on the same page, over the same
   lobby, so it is what this takes.
*/
.hera-screen .hera-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

/* --- the card ------------------------------------------------------------ */

.hera-screen .hera-auth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    background-color: var(--hera-bg-card);
    border: 1px solid var(--hera-line);
    border-radius: 16px;
    /* Both export sheets say 0.3; ours had drifted to 0.4. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hera-screen .hera-auth-login {
    max-width: 350px;
    padding: 30px;
}

.hera-screen .hera-auth-signup {
    max-width: 430px;
}

.hera-screen .hera-auth-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--hera-ink-dim);
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hera-screen .hera-auth-close:hover {
    color: var(--hera-ink);
    background-color: rgba(0, 0, 0, 0.2);
}

/* --- 로그인: the logo stands in for a title bar --------------------------- */

.hera-screen .hera-auth-logo {
    display: block;
    height: 32px;
    max-width: 100%;
    margin: 0 auto 10px;
    object-fit: contain;
}

.hera-screen .hera-auth-subtitle {
    margin: 0 0 22px;
    text-align: center;
    font-size: 13px;
    color: var(--hera-ink-dim);
}

/* --- 회원가입: a real title bar ------------------------------------------- */

.hera-screen .hera-auth-title {
    margin: 0;
    padding: 22px 56px 18px;
    border-bottom: 1px solid var(--hera-line);
    border-radius: 16px 16px 0 0;
    background-color: #252936;
    color: var(--hera-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
    text-align: center;
}

.hera-screen .hera-auth-body {
    padding: 22px;
}

/*
   The export gave the account block a scrollbox at 60vh. The viewport clamp is
   ours and for the same reason it is on the platform's shell: the card also
   carries a title bar and a submit, and a body measured only against the
   viewport pushes them off a short laptop screen.
*/
.hera-screen .hera-auth-scroll {
    max-height: min(60vh, calc(100dvh - 210px));
    overflow-y: auto;
}

/*
   The form's submit is welded to the bottom of the card, as the export had it.
   The 가입 완료 panel's button is not: it sits inside the padded body with the
   notice above it, so it keeps the ordinary button radius.
*/
.hera-screen .hera-auth-signup form > .hera-btn-submit {
    border-radius: 0 0 16px 16px;
}

/* --- a box ---------------------------------------------------------------
   The 7px inside a box is the export's, in both sheets. What was ours and
   wrong was the distance **between** boxes: 16px against the export's 5
   (`popup_signup.css:108` on `.signup-list`, and the login form's inline
   `margin-top: 5px`). Measured over the eight boxes of 회원가입 that came to
   a 113px pitch against the original's 84, so a 540px scrollbox showed 4.8
   fields where the original showed 6.6 — a third of the form's worth of extra
   scrolling.

   10 rather than 5, and that is the one place this does not simply take the
   export's number. Our boxes carry a hint, a 중복확인 verdict and an error as
   *conditional* lines; the export carried the same lines as permanently
   present empty `<small>`s, so it was already paying ~14px of dead gap per box
   that we do not. Matching 5 on top of that would close boxes up tighter than
   the original ever actually looked.                                        */

.hera-screen .hera-auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}

/*
   `line-height: 1.2` is the other half of the same measurement. The export's
   labels take `normal` and box at 16px; ours inherit the site's 1.5 and boxed
   at 21, which is 5px per label and 40 down a signup form.
*/
.hera-screen .hera-auth-field > label,
.hera-screen .hera-auth-label > label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-auth-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hera-screen .hera-auth-badge {
    padding: 3px 8px;
    border: 1px solid var(--hera-line);
    border-radius: 20px;
    background-color: var(--hera-bg-dark);
    font-size: 11px;
    font-weight: 600;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-auth-field input,
.hera-screen .hera-auth-field select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-ink);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

.hera-screen .hera-auth-field input:focus,
.hera-screen .hera-auth-field select:focus {
    border-color: var(--hera-blue);
    box-shadow: 0 0 10px var(--hera-blue-glow);
}

/*
   The box the browser filled in.

   Chromium and WebKit paint their own background and ink onto an autofilled
   field from the UA sheet, marked `!important`, which outranks an author
   `!important` — this is one of the few places where declaring it harder does
   not win. `globals.css` defers that change site-wide with a transition delay,
   but a transition needs a *change* to run: a field that is already autofilled
   the first time it is painted has nothing to defer, and this form lives in a
   dialog. So the fix is restated here in a form that does not depend on a
   transition running.

   Two rules because the focus ring is itself a `box-shadow` (just above), and
   `box-shadow` replaces rather than adds — a single rule would drop the glow
   from a focused autofilled box. The second rule restates the glow and hangs
   the fill behind it.

   The colours point at the tokens this field already uses, two rules up, so a
   palette change moves both together. `scripts/skin-autofill-probe.mjs` fills
   these boxes for real and compares pixels, so a drift between the two is
   caught rather than left to be noticed.
*/
.hera-screen .hera-auth-field input:-webkit-autofill,
.hera-screen .hera-auth-field input:-webkit-autofill:hover,
.hera-screen .hera-auth-field select:-webkit-autofill {
    /* 44px of box; 100px only has to be larger than that. */
    box-shadow: inset 0 0 0 100px var(--hera-bg-dark);
    /* The UA overrides `color`; `-webkit-text-fill-color` is a different
       property and is not overridden. The caret follows `color`, so it is
       named separately. */
    -webkit-text-fill-color: var(--hera-ink);
    caret-color: var(--hera-ink);
}

.hera-screen .hera-auth-field input:-webkit-autofill:focus,
.hera-screen .hera-auth-field select:-webkit-autofill:focus {
    box-shadow:
        0 0 10px var(--hera-blue-glow),
        inset 0 0 0 100px var(--hera-bg-dark);
}

.hera-screen .hera-auth-field input::placeholder {
    color: var(--hera-ink-dim);
    font-size: 13px;
}

/* 중복확인 rides beside its box rather than under it. */
.hera-screen .hera-auth-row {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

/*
   Filled, not a ghost. `.btn-verify` (popup_signup.css:124-133) grounds itself
   on `--bg-card-header` and turns blue on hover; ours took `hera-btn-secondary`
   whole and came out transparent, which beside a filled input read as the one
   disabled thing in the box rather than as the button that checks the name.

   Both of these tie the secondary button's rules on specificity and win on
   order — `screens.css` is listed before this file in `assets.ts`.
*/
.hera-screen .hera-auth-check {
    flex: 0 0 auto;
    min-width: 82px;
    height: 44px;
    padding: 0 16px;
    background-color: #252936;
    font-size: 13px;
}

.hera-screen .hera-auth-check:hover:not(:disabled) {
    background-color: var(--hera-blue);
    color: var(--hera-bg-dark);
}

.hera-screen .hera-auth-field .hera-hint,
.hera-screen .hera-auth-field .hera-notice {
    margin: 0;
}

/* --- the 중복확인 verdict, which holds its place either way --------------- */

.hera-screen .hera-auth-verdict {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.hera-screen .hera-auth-verdict-success {
    color: var(--hera-ok);
}

.hera-screen .hera-auth-verdict-error {
    color: var(--hera-bad);
}

.hera-screen .hera-auth-verdict-idle {
    color: var(--hera-ink-dim);
}

.hera-screen .hera-auth-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hera-bad);
}

/* --- the route choice, above the referral box ----------------------------
   Two controls of one size off one list, because the operator's report was
   that you cannot see there is a choice at all.                            */

.hera-screen .hera-auth-routes-block {
    margin-bottom: 20px;
}

.hera-screen .hera-auth-routes-label {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hera-ink);
}

.hera-screen .hera-auth-routes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hera-screen .hera-auth-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 8px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-ink-dim);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hera-screen .hera-auth-route:hover {
    border-color: var(--hera-blue);
    color: var(--hera-ink);
}

.hera-screen .hera-auth-route-on {
    border-color: var(--hera-blue);
    background-color: rgba(0, 191, 255, 0.12);
    color: var(--hera-blue);
}

.hera-screen .hera-auth-routes-note {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--hera-line);
    border-left: 3px solid var(--hera-blue);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
}

.hera-screen .hera-auth-routes-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-auth-routes-note p + p {
    margin-top: 8px;
}

/* --- 로그인's two 회원가입 routes ----------------------------------------
   **One column, at the size the export gave them**, and this is the drift on
   this surface that mattered.

   `side-nav-public.ejs:29-40` puts the two routes in `.form_grp`s of their own
   under the submit, each a full-width `.btn_signup` — measured 288×44 on a
   350px card, 16px/600, grounded on `--bg-card-header`, one above the other.
   Ours had them side by side at 139×46 and 13px in a transparent outline, so
   the choice between 일반가입 and 테더가입 was the quietest thing on a card
   whose loudest thing was a submit the visitor cannot use yet.

   That is also, in the other popup, exactly what the operator reported:
   「회원가입 버튼 누르면 일반가입할지 테더가입할지 크게 보여야하는데 지금은 잘
   안보인다」. The 회원가입 popup's own chooser was made large then; this pair
   is the same question asked on the login card and it was missed.

   The two-column phone override that used to live at the bottom of this file
   is gone with it — stacking is now the only arrangement, at every width,
   which is what the export does (`popup_login.css` declares no breakpoint).   */

.hera-screen .hera-auth-join {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hera-line);
}

.hera-screen .hera-auth-join-label {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-auth-join-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.hera-screen .hera-auth-join-actions .hera-btn {
    padding: 10px 16px;
    background-color: #252936;
    font-size: 16px;
}

/* --- phone ---------------------------------------------------------------
   The card takes the screen, and the reason is only half the export's.

   **회원가입 is the export's**: `popup_signup.css:25-32` goes 100vw, square and
   shadowless below 600. We break at 767 instead because that is the site's
   phone width, and a 430px card at 700px with rounded corners and a shadow
   reads as a mistake rather than a card.

   **로그인 is ours.** `popup_login.css` declares no breakpoint at all — the
   export keeps a 350px centred card at every width, measured 350×457 at 390.
   (There *is* an `m/popup_login.css` in the export that would have done this;
   no view links it, so it has never run.) Full-bleed here is a decision rather
   than a port: at 390 that card is 90% of the viewport, so it is nearly
   full width already, and the two popups being a floating card and a
   full-screen sheet at the same width would read as an inconsistency rather
   than as two sizes. Anyone restoring the export's exact login card at
   phone is not undoing a port, they are taking the other side of this.     */

@media (max-width: 767px) {
    .hera-screen .hera-auth-overlay {
        padding: 0;
        place-items: stretch;
    }

    .hera-screen .hera-auth-card {
        max-width: none;
        min-height: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .hera-screen .hera-auth-login {
        justify-content: center;
        padding: 24px 18px;
    }

    .hera-screen .hera-auth-title {
        border-radius: 0;
        font-size: 20px;
    }

    /*
       The card is the screen here, so "welded to the bottom of the card" has
       to mean the bottom of the screen. Without these two the form is an
       ordinary block: the submit lands wherever the last field ended and sits
       full-bleed in the middle of the page with a void under it, which reads
       as a layout that broke rather than one that chose.
    */
    .hera-screen .hera-auth-signup form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .hera-screen .hera-auth-scroll {
        flex: 1 1 auto;
        max-height: none;
    }

    .hera-screen .hera-auth-signup form > .hera-btn-submit {
        border-radius: 0;
    }
}