/*
 * 포블로그 V4 소개 페이지 스킨 (2026-11-13) — /rankIntro, /couponIntro, /login, 에러 페이지.
 * 디스코드식 파랑보라 무대·별·둥근 큰 카드·알약 버튼 + 고양이. 각 JSP 의 <link> 한 줄을 빼면 원래 모양.
 * 범위는 body.pf-land 로 묶었다. 밤 모드는 theme-dark.js 가 자동으로 바꾼다.
 */
@font-face{font-family:'GmarketSans';font-weight:700;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-display:swap}
body.pf-land{--pl-blue:#5a63f0;--pl-blue-d:#3f47d4;--pl-ink:#1b1830;--pl-line:#ebe8f5;--pl-grey:#f6f5fb;
  --pl-head:'GmarketSans','Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  --pl-stage:linear-gradient(180deg,#4f58ea 0%,#5a63f0 45%,#6b5cf3 100%);
  --pl-stars:radial-gradient(2px 2px at 8% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 18% 62%,#fff,transparent),radial-gradient(2.5px 2.5px at 30% 14%,#ffd23f,transparent),
    radial-gradient(1.5px 1.5px at 44% 40%,#fff,transparent),radial-gradient(2px 2px at 63% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 9%,#fff,transparent),
    radial-gradient(2.5px 2.5px at 90% 30%,#ffd23f,transparent),radial-gradient(1.5px 1.5px at 96% 58%,#fff,transparent),radial-gradient(2px 2px at 5% 80%,#fff,transparent)}
.pf-land__cat{display:block;height:auto;pointer-events:none;animation:plFloat 5s ease-in-out infinite}
@keyframes plFloat{50%{transform:translateY(-8px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.pf-land__cat{animation:none}}

/* ===================== 블로거 랭크 소개 ===================== */
body.pf-land--rank .hero{position:relative;overflow:hidden;background:var(--pl-stars),var(--pl-stage)!important;
  margin:14px 14px 0;border-radius:44px;padding:70px 0 0!important}
body.pf-land--rank .hero .wrap{position:relative;z-index:2}
body.pf-land--rank .hero .kicker{background:rgba(255,255,255,.16);border:0;font-weight:800}
body.pf-land--rank .hero h1{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,5.4vw,54px)}
body.pf-land--rank .hero .cta{border-radius:999px;padding:16px 34px;font-size:16px;color:var(--pl-ink)}
body.pf-land--rank .hero .cta:hover{color:var(--pl-blue)}
body.pf-land--rank .pf-land__cat--hero{width:230px;margin:26px auto -8px}
body.pf-land--rank h2.sec,body.pf-land--rank .foot-cta h2{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em}
body.pf-land--rank section.block.alt{background:var(--pl-grey)}
body.pf-land--rank .tier{border-radius:26px;border:0;box-shadow:0 0 0 1px var(--pl-line)}
body.pf-land--rank .tier:hover{box-shadow:0 0 0 2px var(--pl-blue),0 18px 40px rgba(90,99,240,.18)}
body.pf-land--rank .foot-cta{position:relative;overflow:hidden;background:var(--pl-stars),var(--pl-stage)!important;margin:30px 14px 14px;border-radius:40px;padding-top:56px!important}
body.pf-land--rank .foot-cta a{border-radius:999px;padding:14px 30px}
body.pf-land--rank .pf-land__cat--foot{width:150px;margin:22px auto -6px}

/* ===================== 실시간 쿠폰 소개 ===================== */
body.pf-land--coupon .hero{position:relative;overflow:hidden;color:#fff;background:var(--pl-stars),var(--pl-stage)!important;margin:10px 14px 0;border-radius:44px}
body.pf-land--coupon .hero h1{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em;color:#fff}
body.pf-land--coupon .hero h1 .pk{color:#ffd23f}
body.pf-land--coupon .hero p.sub{color:rgba(255,255,255,.92)}
body.pf-land--coupon .hero-badge{background:rgba(255,255,255,.16)!important;color:#fff!important;border:0!important}
body.pf-land--coupon .hero-note{color:rgba(255,255,255,.85)}
body.pf-land--coupon .hero-note span::before{color:#ffd23f}
body.pf-land--coupon .hero .btn-main{background:#fff;color:var(--pl-ink);border-radius:999px;box-shadow:none}
body.pf-land--coupon .hero .btn-main:hover{background:#fff;color:var(--pl-blue);box-shadow:0 12px 28px rgba(0,0,0,.2)}
body.pf-land--coupon .hero .btn-ghost{background:var(--pl-ink);color:#fff;border-color:var(--pl-ink);border-radius:999px}
body.pf-land--coupon .pf-land__cat--hero{width:210px;margin:26px auto -14px;position:relative;z-index:2}
body.pf-land--coupon .sec-title,body.pf-land--coupon .final h2{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em}
body.pf-land--coupon .final{position:relative;overflow:hidden;margin:30px 14px 14px;border-radius:40px;background:var(--pl-stars),linear-gradient(180deg,#1b1830,#2a2560)!important;color:#fff}
body.pf-land--coupon .final h2{color:#fff}
body.pf-land--coupon .final p{color:rgba(255,255,255,.82)}
body.pf-land--coupon .final .btn-main{border-radius:999px;background:var(--pl-blue)}
body.pf-land--coupon .pf-land__cat--foot{width:150px;margin:0 auto 10px}
body.pf-land--coupon .btn-main,body.pf-land--coupon .btn-ghost,body.pf-land--coupon .hd-cta{border-radius:999px}

/* ===================== 로그인 ===================== */
body.pf-land--login .login-card{border-radius:32px!important;border:0!important;box-shadow:0 0 0 1px var(--pl-line),0 30px 70px rgba(40,30,110,.12)!important;position:relative;overflow:visible!important;padding-top:84px!important}
body.pf-land--login .login-card{margin-top:96px!important}
body.pf-land--login .pf-land__cat--login{position:absolute;left:50%;top:-70px;width:140px;margin-left:-70px}
body.pf-land--login .login-card-title{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em}
body.pf-land--login #naverIdLogin_loginButton,body.pf-land--login .naver-login-btn,body.pf-land--login .login-card a.btn{border-radius:999px!important}

/* ===================== 에러 페이지 ===================== */
.pf-err{position:relative;overflow:hidden;max-width:960px;margin:24px auto;border-radius:40px;padding:46px 24px 0;text-align:center;color:#fff;background:var(--pl-stars),var(--pl-stage)}
.pf-err h1{font-family:var(--pl-head);font-weight:700;letter-spacing:-.03em;font-size:clamp(26px,4.6vw,44px);margin:0!important;color:#fff}
.pf-err p{margin:12px 0 0;font-size:16px;opacity:.92}
.pf-err__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pf-err__btns a{display:inline-flex;align-items:center;height:50px;padding:0 26px;border-radius:999px;font-weight:800;text-decoration:none!important}
.pf-err__btns a.w{background:#fff;color:var(--pl-ink)!important}.pf-err__btns a.k{background:var(--pl-ink);color:#fff!important}
.pf-err .pf-land__cat{width:200px;margin:24px auto -10px}
@media (max-width:767px){
  body.pf-land--rank .hero,body.pf-land--coupon .hero{margin:6px 8px 0;border-radius:30px}
  body.pf-land--rank .pf-land__cat--hero,body.pf-land--coupon .pf-land__cat--hero{width:160px}
  body.pf-land--rank .foot-cta,body.pf-land--coupon .final{margin:20px 8px 8px;border-radius:30px}
  .pf-err{margin:12px 8px;border-radius:30px}
}