/* 숨은 로그인 판 — 열기 전에는 화면에 아무 흔적도 없다. */
.gpln{position:fixed;inset:0;z-index:99999;background:rgba(17,17,15,.55);backdrop-filter:blur(4px);
      display:flex;align-items:center;justify-content:center;padding:24px;
      opacity:0;transition:opacity .22s ease}
.gpln[hidden]{display:none}
.gpln.is-open{opacity:1}

.gpln-sheet{width:100%;max-width:420px;background:var(--gp-bg,#fbfcf6);border-radius:8px;
            box-shadow:0 24px 70px rgba(0,0,0,.32);padding:32px 28px 26px;
            transform:translateY(10px) scale(.985);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.gpln.is-open .gpln-sheet{transform:none}

.gpln-mark{display:flex;justify-content:center;margin:0 0 22px;color:var(--gp-ink,#111)}
.gpln-msg{background:#fbeceb;border-left:3px solid #b5502a;padding:9px 12px;margin:0 0 16px;
          font-size:13px;color:#8c3c20;border-radius:0 3px 3px 0}

.gpln-f{display:block;margin-bottom:14px}
.gpln-f > span{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
               color:var(--gp-ink-faint,#8a8a85);margin-bottom:6px}
.gpln-f input{width:100%;box-sizing:border-box;border:0;border-bottom:2px solid var(--gp-line,#e3e4dd);
              background:transparent;font:inherit;font-size:16px;padding:8px 2px;outline:none;color:var(--gp-ink,#111)}
.gpln-f input:focus{border-bottom-color:var(--gp-accent,#b5502a)}

.gpln-remember{display:flex;align-items:center;gap:7px;font-size:13px;
               color:var(--gp-ink-soft,#555);margin:4px 0 20px;cursor:pointer}
.gpln-remember input{accent-color:var(--gp-accent,#b5502a)}

.gpln-go{width:100%;background:var(--gp-ink,#111);color:#fff;border:0;border-radius:4px;
         padding:13px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.gpln-go:hover{background:var(--gp-accent,#b5502a)}
.gpln-x{display:block;width:100%;background:none;border:0;color:var(--gp-ink-faint,#8a8a85);
        font:inherit;font-size:12px;padding:12px 0 0;cursor:pointer}
.gpln-x:hover{color:var(--gp-ink,#111)}

body.gpln-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .gpln,.gpln-sheet{transition:none}
}

/* 로고를 길게 누를 때 차오르는 눈금.
   절반(2.5초)이 지난 뒤에야 스크립트가 이 요소를 만들어 붙이므로,
   그냥 지나가는 방문자에게는 존재 자체가 드러나지 않는다. */
.gp-logo{position:relative}
.gpln-hold{
  position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--gp-accent,#b5502a);
  transform:scaleX(0);transform-origin:0 50%;
  border-radius:2px;pointer-events:none;
}

/* 로그인 판 안의 소셜·CAPTCHA 단계 — 판이 좁으므로 크기를 줄여 맞춘다 */
.gpln-stages{margin:16px 0 4px}
/* 소셜 줄의 어두운 유리판은 wp-login.php 의 검은 배경을 전제로 만든 것이다.
   이 판은 종이색이라 그 상자가 그대로 오면 흰 동그라미가 검은 상자 위에 뜬
   모양이 된다. 그래서 앞면에서는 상자를 걷고 단추만 남긴다. */
.gpln-stages .gp-social-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;
  background:none;padding:0;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.gpln-stages .gp-social-btn .gp-glass{display:none}
.gpln-stages .gp-hint{font-size:12px;line-height:1.6;color:var(--gp-ink-soft,#555);margin:0 0 10px}
.gpln-stages .gp-social-btn.is-disabled{opacity:.45}
.gpln-stages .gp-social-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--gp-line,#e3e4dd);background:#fff;padding:0}
.gpln-stages .gp-social-btn svg{width:20px;height:20px}
.gpln-stages .gp-social-btn:hover{border-color:var(--gp-brand,#111);text-decoration:none}
/* 보안문자는 그림에 한 줄을 다 준다. 새로고침 단추와 나란히 세우면 그림의
   가로가 좁아지고, 가로가 좁아지면 세로가 따라 낮아져 글자가 작아진다. */
.gpln-stages .gp-captcha-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.gpln-stages .gp-captcha-img{flex:0 1 100%;height:auto;width:auto;max-width:100%;
  border-radius:3px;border:1px solid var(--gp-line,#e3e4dd)}
.gpln-stages .gp-captcha-reload{border:1px solid var(--gp-line,#e3e4dd);background:#fff;border-radius:3px;
  width:42px;height:42px;margin-left:auto;cursor:pointer;font-size:19px;line-height:1}
.gpln-stages .gp-captcha-input{flex:1 1 100%;min-width:0;border:0;border-bottom:2px solid var(--gp-line,#e3e4dd);
  background:transparent;font:inherit;font-size:24px;letter-spacing:.24em;text-align:center;
  font-variant-numeric:tabular-nums;padding:9px 2px;outline:none}
.gpln-stages .gp-captcha-input:focus{border-bottom-color:var(--gp-accent,#b5502a)}
.gpln-stages .gp-stage-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gp-ink-faint,#8a8a85);margin:0 0 7px}
.gpln-msg{white-space:normal;line-height:1.5}

/* ── 단계 표시 ─────────────────────────────────────────────────
   판 맨 위에 1·2·3 을 늘어놓고, 지금 어느 칸인지만 밝힌다.
   지나온 칸은 채운 점으로, 남은 칸은 빈 점으로 둔다. */
.gpln-steps{display:flex;align-items:center;justify-content:center;gap:0;
            list-style:none;margin:0 0 20px;padding:0;transition:opacity .2s ease}
.gpln.is-aside .gpln-steps{opacity:.25}
.gpln-steps li{display:flex;align-items:center;gap:6px;color:var(--gp-ink-faint,#8a8a85)}
.gpln-steps li + li::before{content:"";display:block;width:26px;height:1px;
                            background:var(--gp-line,#e3e4dd);margin:0 8px}
.gpln-num{display:flex;align-items:center;justify-content:center;
          width:20px;height:20px;border-radius:50%;box-sizing:border-box;
          border:1px solid var(--gp-line,#e3e4dd);background:transparent;
          font-size:11px;font-weight:800;line-height:1}
.gpln-cap{font-size:11px;font-weight:700;letter-spacing:.04em}
.gpln-steps li.is-done{color:var(--gp-ink-soft,#555)}
.gpln-steps li.is-done .gpln-num{background:var(--gp-ink-soft,#555);border-color:var(--gp-ink-soft,#555);color:#fff}
.gpln-steps li.is-now{color:var(--gp-accent,#b5502a)}
.gpln-steps li.is-now .gpln-num{background:var(--gp-accent,#b5502a);border-color:var(--gp-accent,#b5502a);color:#fff}

/* ── 칸과 미끄러짐 ─────────────────────────────────────────────
   칸 다섯을 가로로 늘어놓고 통째로 옆으로 민다. 잘라 내는 창은 폼이고,
   움직이는 것은 그 안의 줄이다. 두 일을 한 요소에 맡기면 창까지 함께
   움직여 다음 칸이 끝내 보이지 않는다.

   높이는 스크립트가 지금 칸의 높이로 맞춰 준다. 칸마다 내용이 다르므로
   가장 긴 칸에 맞춰 두면 1단계 화면 아래가 비어 보인다. */
.gpln-form{overflow:hidden}
.gpln-track{display:flex;align-items:flex-start;
            transition:transform .34s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1)}
.gpln-track.is-live{height:0;overflow:visible}
.gpln-pane{flex:0 0 100%;min-width:100%;box-sizing:border-box;
           opacity:.25;transition:opacity .24s ease}
.gpln-pane.is-active{opacity:1}
/* 스크립트가 막힌 경우에는 1단계만 hidden 없이 남아 제자리에 선다. */
.gpln-track:not(.is-live) .gpln-pane{opacity:1}

.gpln-h{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;color:var(--gp-ink,#111)}
.gpln-note{font-size:12px;line-height:1.6;color:var(--gp-ink-soft,#555);margin:0 0 16px}

/* ── 1단계 아래의 찾기 통로 ───────────────────────────────── */
.gpln-find{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0}
.gpln-link{background:none;border:0;padding:2px 0;font:inherit;font-size:12px;cursor:pointer;
           color:var(--gp-ink-soft,#555);border-bottom:1px solid transparent}
.gpln-link:hover,.gpln-link:focus-visible{color:var(--gp-accent,#b5502a);border-bottom-color:currentColor}
.gpln-sep{width:1px;height:11px;background:var(--gp-line,#e3e4dd)}

.gpln-back{display:block;width:100%;background:none;border:0;font:inherit;font-size:12px;
           color:var(--gp-ink-faint,#8a8a85);padding:12px 0 0;cursor:pointer}
.gpln-back:hover{color:var(--gp-ink,#111)}

/* ── 가입 통로 ─────────────────────────────────────────────────
   아이디가 없는 사람의 유일한 출구다. 세 칸 어디에서도 같은 자리에
   보이도록 칸 바깥에 두고 가운데로 맞춘다. */
.gpln-join{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--gp-line,#e3e4dd);text-align:center}
.gpln-join-btn{display:inline-block;padding:9px 22px;border-radius:4px;
               border:1px solid var(--gp-line,#e3e4dd);background:transparent;
               font-size:13px;font-weight:700;text-decoration:none;color:var(--gp-ink-soft,#555)}
.gpln-join-btn:hover,.gpln-join-btn:focus-visible{border-color:var(--gp-accent,#b5502a);
               color:var(--gp-accent,#b5502a);text-decoration:none}

/* ── 알림과 잠김 ──────────────────────────────────────────── */
.gpln-msg.is-ok{background:#eef4ec;border-left-color:#4a7a4a;color:#33562f}
.gpln-form.is-busy{opacity:.6;pointer-events:none}
.gpln-form.is-locked{opacity:.5;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .gpln-track,.gpln-pane{transition:none}
}