/* Login — 3단계 로그인 화면
 *
 * 소셜 버튼은 '원형 + 반투명 흰색 liquid glass'.
 * 유리 느낌은 세 겹으로 만든다:
 *   1) backdrop-filter 로 뒤 배경을 흐리고 채도를 올린다 (실제 굴절 대용)
 *   2) 안쪽 상단 하이라이트 + 바깥 그림자로 두께를 만든다
 *   3) ::after 로 비스듬한 광택 띠를 얹어 표면 반사를 흉내낸다
 * backdrop-filter 미지원 브라우저에서는 반투명 배경만 남아도 형태는 유지된다.
 */

.gp-stages {
    margin: 18px 0 4px;
}

.gp-stage-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #50575e;
}

.gp-stage-label .gp-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* 1단계 라벨은 이제 .gp-stages 밖에서 폼 맨 위에 홀로 선다.
   덩어리 안에 있을 때 받던 여백을 여기서 대신 준다. */
#loginform > .gp-stage-1,
.gpln-form > .gp-stage-1 {
    margin: 0 0 14px;
}

/* 라벨이 빠져나갔으므로 2단계의 윗구분선이 .gp-stages 의 첫 줄이 된다.
   바깥 여백과 겹치지 않게 첫 단계의 위 여백만 걷어낸다. */
.gp-stages > .gp-stage:first-child {
    margin-top: 0;
}

.gp-stage {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e0e0e0;
}

.gp-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: #646970;
}

/* ── 소셜 버튼 ─────────────────────────────────────────────── */

.gp-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    /* 유리가 흐릴 대상이 있어야 질감이 산다 */
    padding: 16px 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 20%, rgba(120, 160, 255, .38), transparent 46%),
        radial-gradient(circle at 82% 30%, rgba(255, 130, 190, .34), transparent 48%),
        radial-gradient(circle at 50% 92%, rgba(120, 230, 200, .34), transparent 52%),
        linear-gradient(135deg, #2b3550, #1d2233);
}

.gp-social-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    isolation: isolate;
    overflow: hidden;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
    /* 유리판의 두께감 — 바깥 그림자 + 안쪽 상단 하이라이트 + 안쪽 하단 음영 */
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .30),
        inset 0 1px 1px rgba(255, 255, 255, .65),
        inset 0 -6px 12px rgba(255, 255, 255, .10);
}

/* 유리판 본체 */
.gp-social-btn .gp-glass {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(9px) saturate(165%);
    backdrop-filter: blur(9px) saturate(165%);
    z-index: -1;
}

/* 표면 광택 띠 */
.gp-social-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, .55) 0%,
        rgba(255, 255, 255, .10) 34%,
        rgba(255, 255, 255, 0)   52%,
        rgba(255, 255, 255, .16) 100%
    );
    pointer-events: none;
}

.gp-social-btn .gpl-logo {
    width: 22px;
    height: 22px;
    fill: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    transition: fill .22s ease;
}

.gp-social-btn:hover,
.gp-social-btn:focus-visible {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .38),
        inset 0 1px 2px rgba(255, 255, 255, .85),
        inset 0 -6px 14px rgba(255, 255, 255, .16);
    outline: none;
}

/* 호버 시 각 브랜드 색이 유리 너머로 배어 나오게 한다 */
.gp-social-btn:hover .gp-glass,
.gp-social-btn:focus-visible .gp-glass {
    background:
        radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--gp-brand, #fff) 55%, transparent), rgba(255, 255, 255, .18) 70%);
    border-color: rgba(255, 255, 255, .60);
}

.gp-social-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.gp-social-btn.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

/* ── CAPTCHA ───────────────────────────────────────────────── */

/* 그림이 한 줄을 통째로 쓴다.
   예전에는 그림과 새로고침 단추가 한 줄에 나란히 섰다. 그러면 그림에
   남는 가로가 좁아져서 세로도 함께 낮아진다. 세로가 곧 글자 크기이므로,
   그림에 한 줄을 다 주고 단추는 아래로 내렸다. */
.gp-captcha-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* 크기를 못으로 박지 않는다. 그림은 GD 가 그린 크기(자릿수에 따라 달라진다)
   그대로 나가되, 자리가 좁으면 가로에 맞추어 줄어들고 세로가 따라온다.
   늘리지는 않는다. 늘리면 가장자리가 뭉개져 오히려 읽기 어려워진다. */
.gp-captcha-img {
    display: block;
    flex: 0 1 100%;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .16);
    background: #1b1f28;
}

.gp-captcha-reload {
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid #c3c4c7;
    background: #fff;
    color: #2c3338;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s ease, background .2s ease;
}

.gp-captcha-reload:hover {
    background: #f0f0f1;
    transform: rotate(180deg);
}

/* 넣는 칸도 그림만큼 키운다. 그림은 크게 보이는데 넣는 칸이 작으면
   자기가 무엇을 넣었는지 확인하다가 다시 눈을 찌푸리게 된다. */
.gp-captcha-input {
    width: 100%;
    /* 안쪽 여백을 넣었으므로 너비 셈에 여백을 포함시킨다.
       그러지 않으면 칸이 카드 밖으로 삐져나온다. */
    box-sizing: border-box;
    letter-spacing: .3em;
    font-size: 26px;
    line-height: 1.3;
    padding: 10px 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gp-mode-note {
    margin: 16px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f6f7f7;
    font-size: 12px;
    color: #50575e;
    text-align: center;
}

/* 접근성 — 움직임을 줄이도록 설정한 사용자에게는 변형을 적용하지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .gp-social-btn,
    .gp-captcha-reload,
    .gp-social-btn .gpl-logo {
        transition: none;
    }
    .gp-social-btn:hover,
    .gp-social-btn:focus-visible {
        transform: none;
    }
    .gp-captcha-reload:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * 슬라이드 카드 — wp-login.php
 *
 * 1 일반 로그인 → 2 소셜 로그인 → 3 CAPTCHA 인증 을 세로로 늘어놓지 않고
 * 한 장씩 옆으로 민다. 앞면의 숨은 판(gp-desk 의 .gpln-track)과 같은 짜임이다.
 *
 * is-live 가 없을 때
 *   스크립트가 막힌 경우다. 아무것도 하지 않는다 — 카드가 그냥 세로로 흘러
 *   예전 화면이 된다. 미끄러짐에 쓰는 성질(flex·overflow·transform)은 전부
 *   is-live 뒤에만 붙는다.
 * ═══════════════════════════════════════════════════════════════ */

.gpl-cards {
    margin: 18px 0 4px;
}

/* 잘라 내는 창은 바깥 상자, 움직이는 것은 그 안의 줄.
   두 일을 한 요소에 맡기면 창까지 함께 움직여 다음 칸이 끝내 보이지 않는다. */
.gpl-cards.is-live {
    overflow: hidden;
}

.gpl-card-track.is-live {
    display: flex;
    align-items: flex-start;
    /* 높이는 스크립트가 지금 칸에 맞춰 준다. 가장 긴 칸에 맞춰 두면
       1단계 화면 아래가 비어 보인다. */
    transition: transform .34s cubic-bezier(.16, 1, .3, 1),
                height    .28s cubic-bezier(.16, 1, .3, 1);
}

.gpl-card-track.is-live > .gpl-card {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    opacity: .25;
    transition: opacity .24s ease;
}

.gpl-card-track.is-live > .gpl-card.is-active {
    opacity: 1;
}

/* 단계 덩어리가 쓰던 칸막이선은 카드 안에서 필요 없다. 카드 자체가 칸막이다. */
.gpl-card .gp-stage {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ── 1·2·3 표시 ────────────────────────────────────────────────
   카드 위에 놓고 지금 어느 칸인지만 밝힌다. 지나온 칸은 채운 점,
   남은 칸은 빈 점. 눌러서 그 칸으로 건너뛸 수 있다. */

.gp-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.gp-dots[hidden] { display: none; }

.gp-dots li {
    display: flex;
    align-items: center;
}

.gp-dots li + li::before {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: #dcdcde;
    margin: 0 7px;
}

.gp-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    color: #8c8f94;
    cursor: pointer;
}

.gp-dot-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid #dcdcde;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.gp-dot-c {
    font-size: 11px;
    font-weight: 600;
}

.gp-dots li.is-done .gp-dot     { color: #50575e; }
.gp-dots li.is-done .gp-dot-n   { background: #50575e; border-color: #50575e; color: #fff; }
.gp-dots li.is-now  .gp-dot     { color: #b5502a; }
.gp-dots li.is-now  .gp-dot-n   { background: #b5502a; border-color: #b5502a; color: #fff; }

/* 찾기 칸에 가 있는 동안에는 1·2·3 이 가리키는 곳이 없다. 흐려 둔다. */
.gp-dots.is-aside { opacity: .3; }

/* ── 이전·다음 ─────────────────────────────────────────────── */

.gpl-cardnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 4px;
}

.gpl-cardnav[hidden] { display: none; }

.gp-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    background: #fff;
    color: #50575e;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.gp-arrow-i {
    font-size: 19px;
    line-height: 1;
}

.gp-arrow:hover:not(:disabled),
.gp-arrow:focus-visible:not(:disabled) {
    border-color: #b5502a;
    color: #b5502a;
}

.gp-arrow:disabled {
    opacity: .3;
    cursor: default;
}

/* ── 찾기 칸의 입력란 ──────────────────────────────────────── */

/* 코어가 .login label{display:inline-block} 을 걸어 둔다. 그대로 두면 이
   라벨이 제 내용만큼만 넓어지고, 그 안의 칸은 100%(=라벨 폭)를 받아 270px
   자리에 225px 로 선다. 셈을 넘겨 블록으로 되돌린다. */
body.gp-login-screen label.gp-find-f {
    display: block;
    margin: 14px 0 12px;
}

body.gp-login-screen label.gp-find-f + label.gp-find-f { margin-top: 0; }

.gp-find-f > span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #646970;
}

/* 코어의 .login form .input 이 우리 규칙보다 셈이 높다. 칸 폭을 우리가
   잡으려면 body 클래스를 하나 더 얹어 셈을 넘겨야 한다. */
body.gp-login-screen .gp-find-f input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-size: 16px;
}

.gp-find-go {
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 4px;
    background: #2271b1;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.gp-find-go:hover,
.gp-find-go:focus-visible { background: #135e96; }

/* 찾기 결과 한 줄. 보낼 수 있었으면 초록, 아니면 붉게. */
.gp-find-say {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fbeceb;
    font-size: 12px;
    line-height: 1.6;
    color: #8c3c20;
}

.gp-find-say.is-ok {
    background: #eef4ec;
    color: #33562f;
}

/* ═══════════════════════════════════════════════════════════════
 * 화면 아래의 유리 쟁반 — 통로 넷과 언어 넷
 *
 * 왜 쟁반을 깔았나
 *   흰 반투명 유리는 뒤에 흐릴 것이 있어야 유리로 보인다. 워드프레스 로그인
 *   화면의 기본 바탕은 옅은 회색 한 겹뿐이어서, 그 위에 흰 유리를 얹으면
 *   아무것도 아닌 흐린 사각형이 된다. 그래서 단추 밑에 색을 깐다.
 *   폼 안의 소셜 단추 줄(.gp-social-row)이 이미 같은 이유로 같은 바탕을 쓴다.
 *
 * 왜 페이지 전체를 칠하지 않았나
 *   테마 로고의 글자가 #111 이다. 바탕을 어둡게 하면 그 글자가 사라진다.
 * ═══════════════════════════════════════════════════════════════ */

/* 코어의 '로그인' 단추는 float:right 로 서서, 왼쪽에 뜨던 '로그인 상태 유지'와
   한 줄을 이루도록 만들어져 있다. 그 짝을 걷어 냈으므로 이제 띄울 이유가 없다.
   그대로 두면 뜬 채로 아래 안내문 위에 겹쳐 앉는다. */
body.gp-login-screen .submit .button-primary {
    float: none;
    width: 100%;
    margin: 0;
}

body.gp-login-screen #nav,
body.gp-login-screen #backtoblog,
body.gp-login-screen .language-switcher,
body.gp-login-screen .forgetmenot {
    display: none;
}

/* 로그인 화면의 너비.
   코어의 기본값은 320px 이고, 안쪽 여백을 빼면 글상자에 270px 쯤 남는다.
   보안문자를 그 폭에 맞추면 세로가 110px 에서 멈춘다. 그림을 키운 뜻이
   반쯤 깎이므로 화면을 420px 로 넓혀 그림이 그린 크기 그대로 나가게 한다.
   좁은 화면에서는 max-width 가 먼저 걸려 화면 밖으로 넘치지 않는다. */
body.gp-login-screen #login {
    width: 420px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
}

.gp-tray {
    width: 420px;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    margin: 22px auto 40px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 160, 255, .38), transparent 46%),
        radial-gradient(circle at 82% 26%, rgba(255, 130, 190, .34), transparent 48%),
        radial-gradient(circle at 50% 92%, rgba(120, 230, 200, .34), transparent 52%),
        linear-gradient(135deg, #2b3550, #1d2233);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

/* ── 통로 넷 ───────────────────────────────────────────────── */

.gp-footbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gp-gbtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 14px;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    /* 한글은 낱자 사이 어디서나 줄이 갈린다. 그대로 두면 '가기' 가 '가 / 기'
       로 쪼개진다. 띄어쓰기에서만 갈리도록 묶는다. */
    word-break: keep-all;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
    /* 유리판의 두께감 — 바깥 그림자 + 안쪽 상단 하이라이트 + 안쪽 하단 음영 */
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .28),
        inset 0 1px 1px rgba(255, 255, 255, .55),
        inset 0 -6px 12px rgba(255, 255, 255, .08);
}

/* 유리판 본체. 글자보다 뒤에 두어야 글자가 흐려지지 않는다. */
.gp-gbtn-glass {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(9px) saturate(165%);
    backdrop-filter: blur(9px) saturate(165%);
}

/* 표면 광택 띠 */
.gp-gbtn-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, .48) 0%,
        rgba(255, 255, 255, .10) 34%,
        rgba(255, 255, 255, 0)   52%,
        rgba(255, 255, 255, .14) 100%
    );
    pointer-events: none;
}

.gp-gbtn:hover,
.gp-gbtn:focus-visible {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .34),
        inset 0 1px 2px rgba(255, 255, 255, .80),
        inset 0 -6px 14px rgba(255, 255, 255, .14);
}

.gp-gbtn:hover .gp-gbtn-glass,
.gp-gbtn:focus-visible .gp-gbtn-glass {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .58);
}

.gp-gbtn:active { transform: translateY(0); }

/* ── 언어 넷 — 가장 아래 ───────────────────────────────────── */

.gp-langbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    list-style: none;
    margin: 16px 0 2px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.gp-langbar li { margin: 0; }

.gp-flag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .30),
        inset 0 1px 1px rgba(255, 255, 255, .55);
}

.gp-flag img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* 국기는 유리 '밑'에 있어야 유리로 덮인 것처럼 보인다. 그래서 이 판만
   글자 위에 얹는다. 흐림은 약하게 — 세게 걸면 어느 나라 국기인지 사라진다. */
.gp-flag-glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .48);
    -webkit-backdrop-filter: blur(.6px) saturate(118%);
    backdrop-filter: blur(.6px) saturate(118%);
    pointer-events: none;
}

/* 광택은 왼쪽 위 모서리에만 남긴다. 가운데까지 덮으면 어느 나라 국기인지
   알아볼 수 없게 된다 — 첫 판에서 실제로 그렇게 나왔다. */
.gp-flag-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .48) 0%,
        rgba(255, 255, 255, .13) 20%,
        rgba(255, 255, 255, 0)   38%,
        rgba(255, 255, 255, 0)   84%,
        rgba(255, 255, 255, .13) 100%
    );
}

.gp-flag:hover,
.gp-flag:focus-visible {
    transform: translateY(-3px) scale(1.06);
    outline: none;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, .38),
        inset 0 1px 2px rgba(255, 255, 255, .85);
}

.gp-flag:hover .gp-flag-glass,
.gp-flag:focus-visible .gp-flag-glass {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .78);
}

/* 지금 보고 있는 언어. 테두리를 두껍게 두고 흐림을 걷어 또렷하게 둔다. */
.gp-flag.is-now .gp-flag-glass {
    background: rgba(255, 255, 255, .02);
    border-width: 2px;
    border-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(120%);
    backdrop-filter: saturate(120%);
}

.gp-flag.is-now {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .34),
        inset 0 1px 2px rgba(255, 255, 255, .70);
}

/* 좁은 화면 — 통로 단추를 한 줄에 하나씩 */
@media (max-width: 400px) {
    .gp-footbar { grid-template-columns: 1fr; }
    .gp-langbar { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .gpl-card-track.is-live,
    .gpl-card-track.is-live > .gpl-card,
    .gp-gbtn,
    .gp-flag,
    .gp-arrow { transition: none; }
    .gp-gbtn:hover,
    .gp-gbtn:focus-visible,
    .gp-flag:hover,
    .gp-flag:focus-visible { transform: none; }
}