/* Apollo auth — white, restrained, and theme-aware.
 *
 * This sheet is intentionally unscoped: auth windows render beside #app, not
 * inside the element carrying data-skin. The apollo-/auth-window class names
 * are the boundary, and this sheet is only loaded for Apollo sites.
 */

/* ── Shared modal shell --------------------------------------------------- */

:root {
    --ui-modal-radius: 18px;
    --ui-modal-pad: 28px;
    --ui-modal-head: 64px;
}

.auth-window-layer {
    background: rgb(18 22 29 / 0.58);
    backdrop-filter: blur(8px) saturate(0.82);
}

.auth-window-shell {
    border-color: rgb(var(--t-veil-rgb, 0 0 0) / 0.12);
    background: var(--color-panel);
    box-shadow:
        0 32px 90px rgb(18 22 29 / 0.24),
        0 8px 28px rgb(18 22 29 / 0.12);
}

.auth-window-bar {
    padding-right: 68px;
    background: var(--color-panel);
    border-color: var(--color-line-soft);
}

.auth-window-accent {
    width: 2px;
    height: 18px;
    border-radius: 99px;
    background: var(--apollo-gold);
}

.auth-window-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink-strong);
}

/*
 * 닫기 단추.
 *
 * ── 마우스를 올리면 위로 도망가던 이유 (2026-09-07 사용자 지적) ──────────
 *
 * 「X 닫기버튼 마우스오버하면 위로 올라가서 잘안눌리는데」.
 *
 * 세로 가운데 맞춤이 **두 번** 걸리고 있었습니다. 공용 껍데기가 `top: 50%`
 * 와 텔윈드의 `-translate-y-1/2` 로 올려 두는데, 텔윈드 4 는 그것을
 * `transform` 이 아니라 **`translate` 라는 제 속성**으로 냅니다. 그런데 이
 * 파일의 :hover 가 `transform: translateY(-50%)` 를 또 걸었습니다. 둘은 다른
 * 속성이라 서로를 덮지 않고 **겹쳐서** 적용됩니다 — 올리는 순간 18px 더
 * 올라갑니다.
 *
 * 그러면 커서가 단추 밖에 남고, :hover 가 풀리고, 단추가 제자리로 내려오고,
 * 다시 커서 아래에 들어오고… 깜빡이면서 눌리지 않습니다.
 *
 * 두 속성을 **양쪽 상태에서 다 못박아** 둡니다. 가운데 맞춤은 `translate` 가
 * 혼자 하고 `transform` 은 기울이기만 합니다. 이렇게 두면 텔윈드가 어느
 * 속성으로 내든 결과가 같습니다 — 판 올라가면서 조용히 갈라질 자리를
 * 남기지 않습니다.
 */
.auth-window-close {
    right: 18px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-muted);
    font-size: 21px;
    box-shadow: inset 0 0 0 1px var(--color-line-soft);
    translate: 0 -50%;
    transform: none;
    transition:
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

/*
 * 올렸을 때 **금빛**이 돕니다 (2026-09-07 사용자 지적).
 *
 * 「팝업부분 닫기버튼이 마우스오바효과가 회색으로되는데 이거 좀 보기거슬려」.
 *
 * 앞서는 회색 칸 색(`--color-field`)에 금을 18%만 섞었습니다. 바탕이 이미
 * 회색이라 섞어도 회색이었고, 올리기 전과 후가 거의 안 달라서 「반응이
 * 있는데 탁하다」로 보였습니다 — 없느니만 못한 변화입니다.
 *
 * 회색을 아예 뺍니다. 쉴 때는 투명하고 테두리 한 줄만, 올리면 금빛이 옅게
 * 깔리고 테두리와 글자도 같이 금으로 갑니다. 섞는 대신 **투명도**를 쓰는
 * 이유는 조합 때문입니다 — 고정된 밝은 금을 깔면 어두운 조합에서 혼자
 * 밝은 덩어리가 됩니다.
 */
.auth-window-close:hover {
    border: 0;
    background: rgb(var(--apollo-gold-rgb) / 0.16);
    color: var(--color-gold);
    box-shadow: inset 0 0 0 1px rgb(var(--apollo-gold-rgb) / 0.5);
    /* 자리는 그대로 — 움직이면 커서가 벗어납니다. */
    translate: 0 -50%;
    transform: none;
}

/* ── Apollo layout -------------------------------------------------------- */

.apollo-auth {
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
}

.apollo-auth__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 30px 28px 25px;
    text-align: center;
    background: linear-gradient(
        180deg,
        color-mix(
            in srgb,
            var(--color-panel) 94%,
            var(--apollo-gold-pale)
        ) 0%,
        var(--color-panel) 100%
    );
    border-bottom: 1px solid var(--color-line-soft);
}

.apollo-auth__logo {
    display: block;
    width: 144px;
    max-height: 78px;
    object-fit: contain;
}

.apollo-auth__lede {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.apollo-auth__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px 28px 30px;
    background: var(--color-panel);
}

.apollo-auth__body--scroll {
    max-height: min(540px, calc(100dvh - 306px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.apollo-auth__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apollo-auth__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apollo-auth__field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.apollo-auth__field > label > span {
    color: var(--apollo-gold-deep);
    font-size: 14px;
}

.apollo-auth__field > label > small {
    color: var(--color-ink-muted);
    font-size: 10px;
    font-weight: 600;
}

.apollo-auth__row {
    display: flex;
    gap: 8px;
}

.apollo-auth__input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 12px;
    outline: none;
    background: var(--color-field);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14.5px;
    box-shadow: inset 0 0 0 1px var(--color-line-soft);
    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

/* Signup fields with a duplicate-check button live in a horizontal row.
 * Only there should the input consume remaining width. `flex: 1` on every
 * input also ran in the login field's vertical flex context and collapsed the
 * declared 50px height to its 23px intrinsic height. */
.apollo-auth__row .apollo-auth__input {
    flex: 1 1 auto;
}

.apollo-auth__input:hover {
    box-shadow: inset 0 0 0 1px var(--color-line);
}

.apollo-auth__input:focus {
    background: var(--color-panel);
    border-color: var(--apollo-gold);
    box-shadow: 0 0 0 3px rgb(var(--apollo-gold-rgb) / 0.17);
}

.apollo-auth__input::placeholder {
    color: var(--color-ink-muted);
    opacity: 0.65;
}

/*
 * 브라우저가 채워 준 칸.
 *
 * UA 가 배경과 글자색을 `!important` 로 덮는 자리입니다. `globals.css` 가
 * 사이트 전체에 전환 지연을 걸어 두었지만 전환은 **변화가 있어야** 걸리고,
 * 대화상자 안의 칸은 처음 그려질 때 이미 채워져 있을 수 있습니다. 그래서
 * 전환에 안 기대는 규칙을 칸 바로 옆에 둡니다.
 *
 * 세 벌인 까닭은 이 스킨의 칸이 셋으로 생겼기 때문입니다. 다른 넷은 한 벌로
 * 끝납니다.
 *
 *   ① 이 칸의 **테두리는 그림자입니다.** `border` 는 투명하고 실제로 보이는
 *      1px 은 `inset 0 0 0 1px var(--color-line-soft)` 입니다. 덧칠도
 *      `box-shadow` 라 한 줄로 적으면 그 테두리를 지웁니다 — `box-shadow` 는
 *      더하는 것이 아니라 **갈아 끼우는** 속성이라서. 그래서 매 벌이 그 칸의
 *      원래 그림자를 먼저 적고 칠을 뒤에 답니다(앞엣것이 위에 옵니다).
 *   ② 칸 색이 **포커스에 따라 다릅니다** — 쉴 때 `--color-field`, 잡혔을 때
 *      `--color-panel`. 한 색으로 적으면 잡힌 칸이 어두워집니다.
 *   ③ hover 는 테두리만 `--color-line` 으로 진해집니다.
 *
 * 색은 위 규칙들이 이미 쓰는 토큰을 그대로 가리킵니다.
 */
.apollo-auth__input:-webkit-autofill {
    /*
       테두리가 투명한 것이 여기서 한 번 더 걸립니다. 배경은 기본으로 테두리
       밑까지 칠해지므로, 그 1px 만 UA 색으로 남습니다(안쪽 그림자는 padding
       box 까지만 갑니다). 칠을 padding box 로 잘라 그 자리를 비웁니다 —
       비면 뒤의 `--color-panel` 이 보이고, 그것이 이 칸이 놓인 바닥입니다.
    */
    background-clip: padding-box;
    box-shadow:
        inset 0 0 0 1px var(--color-line-soft),
        inset 0 0 0 100px var(--color-field);
    -webkit-text-fill-color: var(--color-ink);
    caret-color: var(--color-ink);
}

.apollo-auth__input:-webkit-autofill:hover {
    box-shadow:
        inset 0 0 0 1px var(--color-line),
        inset 0 0 0 100px var(--color-field);
}

.apollo-auth__input:-webkit-autofill:focus {
    box-shadow:
        0 0 0 3px rgb(var(--apollo-gold-rgb) / 0.17),
        inset 0 0 0 100px var(--color-panel);
}

.apollo-auth__select {
    appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-ink-muted) 50%),
        linear-gradient(135deg, var(--color-ink-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 22px,
        calc(100% - 14px) 22px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    cursor: pointer;
}

.apollo-auth__check {
    flex: none;
    height: 50px;
    padding: 0 17px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        background 150ms ease;
}

.apollo-auth__check:hover {
    border-color: var(--apollo-gold);
    background: color-mix(
        in srgb,
        var(--color-panel) 94%,
        var(--apollo-gold-pale)
    );
    color: var(--apollo-gold-deep);
}

/* ── Feedback ------------------------------------------------------------- */

.apollo-auth__say {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    word-break: keep-all;
}

.apollo-auth__say--no,
.apollo-auth__say--warn {
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
}

.apollo-auth__say--no {
    background: var(--ui-alert-bad-bg);
    color: var(--ui-alert-bad-ink);
    box-shadow: inset 3px 0 0 var(--ui-alert-bad-line);
}

.apollo-auth__say--warn {
    background: var(--ui-alert-warn-bg);
    color: var(--ui-alert-warn-ink);
    box-shadow: inset 3px 0 0 var(--ui-alert-warn-line);
}

.apollo-auth__say--ok {
    color: var(--ui-alert-ok-ink);
    font-weight: 600;
}

.apollo-auth__note {
    width: 100%;
    margin: 1px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: rgb(var(--apollo-gold-rgb) / 0.09);
    color: var(--color-ink);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
    box-shadow: inset 3px 0 0 rgb(var(--apollo-gold-rgb) / 0.52);
}

.apollo-auth__done {
    margin: 0;
    padding: 26px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--ui-alert-ok-bg);
    color: var(--ui-alert-ok-ink);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
    word-break: keep-all;
}

/* ── Buttons -------------------------------------------------------------- */

.apollo-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 100ms ease;
}

/* Flat champagne, not a metallic gradient. The previous three-stop gold fill
 * was visually loud and dated; depth comes from one restrained shadow. */
.apollo-auth__btn--primary {
    height: 52px;
    border: 0;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    box-shadow: 0 8px 20px -12px rgb(var(--apollo-gold-rgb) / 0.9);
}

.apollo-auth__btn--primary:hover:not(:disabled) {
    background: color-mix(
        in srgb,
        var(--apollo-gold) 88%,
        var(--color-ink)
    );
    box-shadow: 0 10px 24px -12px rgb(var(--apollo-gold-rgb) / 1);
}

.apollo-auth__btn--primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 4px 12px -10px rgb(var(--apollo-gold-rgb) / 0.9);
}

.apollo-auth__btn--primary:disabled {
    background: var(--color-field);
    color: var(--color-ink-muted);
    box-shadow: none;
    cursor: default;
}

.apollo-auth__btn--ghost {
    height: 48px;
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    color: var(--color-ink);
}

.apollo-auth__btn--ghost:hover {
    border-color: var(--apollo-gold);
    background: color-mix(
        in srgb,
        var(--color-panel) 95%,
        var(--apollo-gold-pale)
    );
    color: var(--apollo-gold-deep);
}

/* ── Footer --------------------------------------------------------------- */

.apollo-auth__foot {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 20px 28px 28px;
    border-top: 1px solid var(--color-line-soft);
    background: color-mix(
        in srgb,
        var(--color-panel) 97%,
        var(--color-field)
    );
}

.apollo-auth__foot > p {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 12.5px;
    text-align: center;
}

.apollo-auth__pair {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
}

/* ── Signup flow selector ------------------------------------------------- */

.apollo-auth__flows {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: 12px;
    background: var(--color-field);
}

.apollo-auth__flow {
    flex: 1;
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.apollo-auth__flow[aria-selected="true"] {
    background: var(--color-panel);
    color: var(--color-ink-strong);
    box-shadow:
        0 1px 2px rgb(18 22 29 / 0.06),
        0 3px 8px rgb(18 22 29 / 0.05);
}

@media (max-width: 768px) {
    :root {
        --ui-modal-radius: 16px;
        --ui-modal-pad: 20px;
    }

    .apollo-auth__head {
        padding: 24px 20px 20px;
    }

    .apollo-auth__body,
    .apollo-auth__foot {
        padding-right: 20px;
        padding-left: 20px;
    }

    .apollo-auth__logo {
        width: 126px;
    }
}